11.4 JavaScript

11.41 變量

1、聲明變量的語法

//1. 先聲明后定義

var name; //聲明變量時無需指定類型，變量name可以接受任意類型

name= "egon";

?//2. 聲明立刻定義

var age = 18;

2、變量名命名規范

1、由字母、數字、下劃線、$ 組成,但是不能數字開頭，也不能純數字

2、嚴格區分大小寫

3、不能包含關鍵字和保留字(以后升級版本要用的關鍵字)。

如：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto

implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

4、推薦駝峰命名法：有多個有意義的單詞組成名稱的時候，第一個單詞的首字母小寫，其余的單詞首字母寫

5、匈牙利命名：就是根據數據類型單詞的的首字符作為前綴

3、ES6中let

ES6之前js沒有塊級作用域，ES6新增了let命令，用于聲明變量(聲明的變量屬于塊級作用域)，流程控制語句的{}就是塊級作用域。其用法類似于var，但是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令

for(let i=1;i<=5;i++){

console.log(i);

}//1 2 3 4 5

4、常量

ES6新增const用來聲明常量。一旦聲明，其值就不能改變。

const PI = 3.1415926;

PI=3 //TypeError: "PI" is read-only

11.42 數據類型

11.421 數值(Number)

JavaScript不區分整型和浮點型，就只有一種數字類型，即number

var x = 3;var y = 3.1;var z = 13e5;var m = 13e-5;var n = NaN; //typeof n結果"number"//四舍五入

var num=1.3456num.toFixed(2) //"1.35"

?//字符串類型轉成數字

parseInt("123") //返回123

parseInt("ABC") //返回NaN NaN屬性是代表非數字值的特殊值,該屬性用于指示某個值不是數字。

console.log(parseInt("18林海峰")); //18 帶有自動凈化的功能；只保留字符串最開頭的數字，后面的中文自動消失

console.log(parseInt("林海峰18")); //NaN 只去末尾的中文，不會去開頭的

parseInt("123.456") //返回123

parseFloat("123.456") //返回123.456 字符串中的數字轉浮點

var a = parseInt("1.3") + parseInt("2.6"); //a=3 自動帶有截斷小數的功能：取整，不四舍五入

var a = parseFloat("1.3") + parseFloat("2.6"); //a=3.9

?//數字類型轉成字符串

var x=10;var y='20';var z=x+y; //z='1020'

typeof z; //String

?var m=123;var n=String(m)//'123'

?var a=123;var b=a.toString()//'123'

11.422 字符串(String)

var a = "Hello";var b = "world";var c = a +b;

console.log(c);//得到Helloworld

常用方法：

方法說明

.length

返回長度

.trim()

移除空白

.trimLeft()

移除左邊的空白

.trimRight()

移除右邊的空白

.charAt(n)

返回第n個字符

.concat(value, ...)

拼接,拼接字符串通常使用“+”號

.indexOf(substring, start)

子序列位置

.substring(from, to)

根據索引獲取子序列

.slice(start, end)

切片

.toLowerCase()

小寫

.toUpperCase()

大寫

.split(',', 2)

根據逗號分割，但只顯示前兩個

substirng()與silce()的區別：

substirng()的特點：

如果 start>stop ，start和stop將被交換

如果參數是負數或者不是數字，將會被0替換

?

silce()的特點：

如果 start>stop 不會交換兩者

如果start小于0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)

如果stop小于0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

補充：

ES6中引入了模板字符串：模板字符串(template string)是增強版的字符串，用反引號(`)標識，它的用途為

1、完全可以當做普通字符串使用var msg =`my name is egon`2、也可以用來定義多行字符串var info =`

name:egon

age:18sex:male

`3、并且可以在字符串中嵌入變量var name = "egon";var age = 18;var msg = `my name is ${name}, my age is ${age}`; //"my name is egon, my age is 18"

注意：

如果模板字符串中需要使用反引號，則在其前面要用反斜杠轉義

11.423 布爾值

var a = true;var b = false;//布爾值為false的數據類型

Boolean('')

Boolean(0)

Boolean(null)

Boolean(undefined)

Boolean(NaN)

?//其余數據類型的布爾值均為true

Boolean([])

Boolean(123)

null 和 undefined :

null:表示值是空，一般在需要指定或清空一個變量時才會使用，如 name=null;undefined:表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。null表示變量的值是空，undefined則表示只聲明了變量，但還沒有賦值。

11.43 內置對象

11.431 數組對象Array

數組對象的作用是：使用單獨的變量名來存儲一系列的值。類似于Python中的列表。

var x = ["egon", "hello"];

console.log(x[1]); //輸出"hello"

常用方法：

方法說明

.length

數組的大小

.push(ele)

尾部追加元素

.pop()

刪除尾部的元素

.unshift(ele)

頭部插入元素

.shift()

頭部移除元素

.slice(start, end)

切片

.reverse()

反轉

.join(seq)

將數組元素連接成字符串

.concat(val, ...)

連接數組

.sort()

排序

.forEach()

將數組的每個元素傳遞給回調函數

.splice(1,2,"新的值")

刪除元素，并向數組添加新元素。

.map()

返回一個數組元素調用函數處理后的值的新數組

提供比較函數進行排序，該函數應該具有兩個參數 a 和 b，接收傳入的a和b，執行函數體代碼，然后返回一個值用于說明a和b的大小

返回值 < 0 ：代表a小于b

返回值 =0 : 代表a等于b

返回值 > 0 ：代表a大于b

functionsortNumber(a,b){return a -b

}var arr = [123,9,1211,11]

arr.sort(sortNumber)//[9, 11, 123, 1211]

遍歷數組中的元素：

var arr = [11, 22, 33, 44];for (var i=0;i

console.log(arr[i]);

}//11 22 33 44

forEach() :

語法：forEach( function ( 當前元素, 當前元素索引, 當前元素所屬數組arr), thisValue)

var arr=['aa','bb','cc','dd','ee']

arr.forEach(function(v,i,arr){

console.log(v,i,arr);

console.log(this[0]);

},"hello")//aa 0 ["aa", "bb", "cc", "dd", "ee"] h//bb 1 ["aa", "bb", "cc", "dd", "ee"] h//cc 2 ["aa", "bb", "cc", "dd", "ee"] h//dd 3 ["aa", "bb", "cc", "dd", "ee"] h//ee 4 ["aa", "bb", "cc", "dd", "ee"] h

splice() :

語法：splice ( 起始元素索引 , 刪除的個數, 添加的新元素)

var arr=['aa','bb','cc','dd','ee']

arr.splice(1,3,'xxxx') //刪除‘bb’，‘cc’，’dd‘這三個值，然后插入’xxxx‘

arr //["aa", "xxxx", "ee"]

map() ：

語法：map(function ( 當前元素, 當前元素索引, 當前元素所屬數組arr), thisValue)

//字符串反轉

var str = '12345';

Array.prototype.map.call(str,function(x) { //同時利用了call()方法

returnx;

}).reverse().join(''); //"54321"

11.432 Date日期對象

創建日期對象只有構造函數一種方式,使用new關鍵字

//方法1：不指定參數

var d1 = newDate();

console.log(d1.toLocaleString());//2020/8/9 下午8:24:06

?//方法2：參數為日期字符串

var d2 = new Date("2018/01/27 11:12:13");

console.log(d2.toLocaleString());//2018/1/27 上午11:12:13

?var d3 = new Date("01/27/18 11:12:13"); //月/日/年 時分秒

console.log(d3.toLocaleString()); //2018/1/27 上午11:12:13

?//方法3：參數為毫秒數

var d4 = new Date(7000);

console.log(d4.toLocaleString());//1970/1/1 上午8:00:07

console.log(d4.toUTCString()); //Thu, 01 Jan 1970 00:00:07 GMT

?//方法4：參數為：年，月，日，時，分，秒，毫秒

var d5 = new Date(2018,1,27,11,12,13,700);

console.log(d5.toLocaleString());//毫秒并不直接顯示 // 2018/2/27 上午11:12:13

常用方法:

方法含義

getDate()

根據本地時間返回指定日期對象的月份中的第幾天(1-31)

getMonth()

根據本地時間返回指定日期對象的月份(0-11)

getFullYear()

根據本地時間返回指定日期對象的年份(四位數年份時返回四位數字)

getDay()

根據本地時間返回指定日期對象的星期中的第幾天(0-6)

getHours()

根據本地時間返回指定日期對象的小時(0-23)

getMinutes()

根據本地時間返回指定日期對象的分鐘(0-59)

getSeconds()

根據本地時間返回指定日期對象的秒數(0-59)

getMilliseconds()

根據本地時間返回指定日期對象的獲取毫秒

getTime()

返回累計毫秒數(從1970/1/1午夜)

編寫代碼，將當前日期按“2017-12-27 11:11 星期三”格式輸出:

const WEEKMAP ={0: "星期日",1: "星期一",2: "星期二",3: "星期三",4: "星期四",5: "星期五",6: "星期六",

};

?functionshowTime() {var d1 = newDate();var year =d1.getFullYear();var month = d1.getMonth() + 1;var day =d1.getDate();var hour =d1.getHours();var minute = d1.getMinutes() < 10 ? "0"+d1.getMinutes() :d1.getMinutes();var week = WEEKMAP[d1.getDay()]; //0~6的星期

var dateStr =`

${year}-${month}-${day} ${hour}:${minute} ${week}

`;

console.log(dateStr)

}

?

showTime();//2020-8-9 20:37 星期五

View Code

11.433 Math對象

方法含義

Math.floor()

向下取整,如5.1取整為5

Math.ceil()

向上取整,如5.1取整為6

Math.max(a,b)

求a和b中的最大值

Math.min(a,b)

求a和b中的最小值

Math.random()

隨機數,默認0-1之間的隨機數,若想求min~max之間的數，公式為：min+Math.random()*(max-min)

11.434 JSON對象

//對象轉成JSON字符串

var obj2={"name":"egon","age":18};

str2=JSON.stringify(obj2); //"{"name":"egon","age":18}"

?//JSON格式的字符串轉成對象

var str1='{"name":"egon","age":18}';var obj1=JSON.parse(str1);

console.log(obj1.name);//'egon'

console.log(obj1["name"]); //'egon'

11.435 RegExp對象

1. 創建正則對象的方式1

參數1 正則表達式

參數2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配后停止)和i(忽略大小寫)var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); //匹配用戶名只能是英文字母、數字和_

reg1.test("egon_123") //true //首字母必須是英文字母,長度最短不能少于6位 最長不能超過12位。

注意：正則放到引號內，{}內的逗號后面不要加空格2. 創建正則對象的方式2var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; //不要加引號

reg2.test("egon_123") //true

3. String對象與正則結合的4個方法var s1="hello world";

s1.match(/l/g) //符合正則的內容["l", "l", "l"]

s1.search(/h/g) //符合正則的內容的第一個索引0

s1.split(/ /) // ["hello", "world"]，默認全部切割

s1.replace(/l/g,'L') //"heLLo worLd"

4. 匹配模式g與ivar s2="name:Egon age:18"s2.replace(/e/,"贏") //"nam贏:Egon age:18"

s2.replace(/e/g,"贏") //"nam贏:Egon ag贏:18"

s2.replace(/e/gi,"贏") //"nam贏:贏gon ag贏:18"

5.注意1：

1、如果regExpObject帶有全局標志g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。2、該屬性值默認為0，所以第一次仍然是從字符串的開頭查找。3、當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改為字符串中本次匹配內容的最后一個字符的下一個索引位置。4、當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。5、因此，當我們使用test()函數執行了一次匹配之后，如果想要重新使用test()函數從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0。6、如果test()函數再也找不到可以匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置為 0。var reg3 = /egon/g;

reg3.lastIndex0reg3.test("egon") //true，匹配成功

truereg3.lastIndex//匹配成功reg3.lasIndex=4

4reg3.test("egon") //從4的位置開始匹配，本次匹配失敗

falsereg3.lastIndex//匹配失敗，lastIndex歸為0

0reg3.test("egon") //再次匹配成功

true

6.注意2：

當我們不加參數調用RegExpObj.test()方法時, 相當于執行RegExpObj.test("undefined"), 且/undefined/.test()默認返回true。var reg4 = /^undefined$/;

reg4.test();//返回true

reg4.test(undefined); //返回true

reg4.test("undefined"); //返回true

11.44 運算符

//算數運算符:

+ - * / % ++ --

//比較運算符:

> >= < <= != == === !==

//邏輯運算符

&& || !

//賦值運算符

= += -= *= /=

11.45 流程控制

if...else :

var age=18;if(age > 18){

console.log('too old');

}else if(age == 18){

console.log('花姑娘,吆西');

}else{

console.log('too young');

}//花姑娘,吆西

switch :

switch中的case子句通常都會加break語句，否則程序會繼續執行后續case中的語句

var day = newDate().getDay();switch(day) {case 0:

console.log("星期天，出去浪");break;case 6:

console.log("星期六，也出去浪");break;default:

console.log("工作日，正常上班")

}//工作日，正常上班

while:

let i=0;

undefinedwhile (i<=3){

console.log(i);

i++;

}

三元運算:

var x=1;var y=2;var z=x>y?x:y //2

11.46 函數

1、函數的定義與調用(與python類同)

//無參函數

functionf1() {

console.log("Hello world!");

};

f1();

?//有參數函數

functionf2(a, b) {

console.log(arguments);//內置的arguments對象

console.log(arguments.length);

console.log(arguments[0],arguments[1]);

console.log(a, b);

};

f2(10,20);

?//帶返回值的函數

functionsum(a, b){return a +b;

}

sum(1, 2);

?//匿名函數

var sum = function(a, b){return a +b;

}

sum(1, 2);

?//立即執行函數

(function(a, b){return a +b;

})(1, 2);

注意：

函數只能返回一個值，如果要返回多個值，只能將其放在數組或對象中返回

總結

以上是生活随笔為你收集整理的python给js变量赋值_python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。