1 Let與const
可以把let看成var,只是它定義的變數被限定在了特定範圍內才能使用,一旦脫離這個範圍變數則無效,避免了變數的汙染,而const則很直觀,用來定義常量,即無法被更改值的變數。
for(var i=0;i<3;i++){
console.log(i);
}
複製程式碼
此時內部輸出結果為 0,1,2。當在for迴圈外再輸出I時可以看到:
for(var i=0;i<3;i++){
console.log(i);
}
console.log(i);
複製程式碼
此時內部輸出:0,1,2,外部輸出的結果為:3。可以看到在for迴圈的外部輸出變數依然有效,輸出結果為結束迴圈的值,當將var 置換成let時:
for(let i=0;i<3;i++){
console.log(i);
}
console.log(i);
複製程式碼
此時內部輸出:0,1,2,外部輸出 :ReferenceError: i is not defined。可以看到外部的輸出並沒有找到變數。
2.1 Array.from
新增的Array.from可以將偽陣列轉換成真陣列。
在HTML內新建一個Ul
<body>
<ul>
<li>1</li>
<li>2</li>
<li>2</li>
<li>4</li>
</ul>
</body>
複製程式碼
<script>
var lis=document.getElementsByTagName("li");
console.log(lis);
console.log(Array.isArray(lis));
var arr=Array.from(lis);
console.log(arr);
console.log(Array.isArray(arr));
</script>
複製程式碼
第一和第二個輸出的結果為:HTMLCollection(4) [li, li, li, li]和false,從形式上可以看到獲取的li是一個陣列,但當使用Array.isArray去驗證的時候發現它並不是一個陣列型別,我們稱其為“偽陣列”。
再看第三個和第四個輸出的結果為:(4) [li, li, li, li]和true,此時我們使用Array.from轉換後輸出的資料同樣是一個陣列樣式,使用驗證方法時我們發現與上面輸出的不同,第四個輸出為:true,此時獲得的陣列為真陣列。
2.2 Array.of 建立陣列
var arr=Array.of(1,2,3,4,5,5,7,8,9,[3,4],"fafa",{name:"xiaoqiang"})
console.log(arr);
console.log(Array.isArray(arr));
複製程式碼
其輸出結果分別為:(12) [1, 2, 3, 4, 5, 5, 7, 8, 9, Array(2), "fafa", {…}]和true。
2.3 Array.find
var arr=Array.of(1,2,3,4,5,5,7,8,9,[3,4],"fafa",{name:"xiaoqiang"})
console.log(arr);
console.log(Array.isArray(arr));
var arr1=arr.find(item => item == 3)
console.log(arr1);
複製程式碼
Array.find查詢陣列中是否存在某個元素,上面程式碼console.log(arr1)輸出為:3表示查到3這個元素。
2.4 findIndex
findIndex()查詢陣列中的元素,若查到返回該元素的索引,否則返回-1,其格式為
arr.findIndex(function(item,index,arr){return index})
其中item為查詢的值的內容,index為查詢的索引,arr為查詢的陣列,return返回的值為查詢元素的索引或-1.
<script>
var arr=[4,5,6,7,8,9,10]
var arr1=arr.findIndex(item => item == 6)
var arr2=arr.findIndex(item => item == 100)//查詢內容為100的元素
console.log(arr1);
console.log(arr2);
</script>
複製程式碼
上面程式碼的輸出為:2和-1.
3 箭頭函式
ES6相比於過往在使用上方便了很多,尤其是箭頭函式的使用。
//正常的函式書寫 :
var a=function(b){
return b+b;
}
//使用箭頭函式後的簡寫:
var a=(b)=>{return b+b}
//如果變數只有一個則省去小括號,再則return語句只有一個返回值時,大括號同樣可以省略得到如下形式:
var a=b=>b+b;
複製程式碼
呼叫上面三種書寫得到的結果都是一樣,可以看出箭頭函式的出現極大的方便了函式的書寫,但有一點是要注意的是當函式內部出現this時不能使用箭頭函式。
4 字串模板
ES6中允許使用反引號 ` 來建立字串,此種方法建立的字串裡面可以包含由美元符號加花括號包裹的變數${vraible}。程式碼如下:
var obj={
name:"xiaoqiang",
age:88,
say:function(){
console.log(`我是${this.name},我今年${this.age}歲了。。。`);
}
}
obj.say();
複製程式碼
輸出的結果為:“我是xiaoqiang,我今年88歲了。。。”,此時函式裡的this指向方法所在的物件(obj)。
5 字串擴充套件
5.1 endsWith、startsWith
判斷字串是否以某一個字串開始或結束,程式碼如下:
var str="dassfa erqwrt"//定義字串
console.log(str.startsWith("das"));
console.log(str.startsWith("dassfae"));
console.log(str.endsWith("rt"));
複製程式碼
其上輸出分別為:true、false、true。
5.2 trim
用於清除字串中的空格,實現程式碼如下:
<script>
var str=" adsa dfg fgg "
var str1=str.trim() //清除兩端空格
var str2=str.trimLeft()//清除左邊空格
var str3=str.trimRight()//清除右邊空格
console.log(str);
console.log(str1);
console.log(str2);
console.log(str3);
</script>
複製程式碼
5.3 repeat
字串重複
<script>
var str="a1a"
var str1=str.repeat(3);
console.log(str);
console.log(str1);
</script>
複製程式碼
其輸出結果為:“a1a”和“a1aa1aa1a”
5.4 includes
查詢字串中是否存在指定的字元
<script>
var str="a1a"
var a=str.includes("a")
var a1=str.includes("d")
console.log(a);
console.log(a1);
</script>
複製程式碼
輸出結果分別為:"true"和"false"
5.5 padStart padEnd
設定字串開始和結束的附加格式
<script>
var str="a1a"
var a=str.padStart(8,"*")
var a1=str.padEnd(9,"-")
console.log(a);
console.log(a1);
</script>
複製程式碼
輸出結果為:*****a1a和a1a------,如str.padStart(8,""),其中8表示輸出字串的長度,去掉""個數則為原字串的長度。如果原字串的長度大於8,則不再顯示"*",此時輸出為原字串。
6 Class 類
類=建構函式+原型,相對於建構函式和原型的模式,類的引入則簡單的多,簡單程式碼如下:
class Cars{
constructor(name,color,size){
this.name=name;
this.color=color;
this.size=size;
}
say(){
console.log(`我是${this.name},我的車是${this.color},它的大小是${this.size}cm`);
}
}
var am=new Cars("zhangliang","red","300")
console.log(am.say());
複製程式碼
上面程式碼的輸出為:“我是zhangliang,我的車是red,它的大小是300cm”,與上版本的建構函式+原型的書寫方式簡單的多。
7 嚴格模式
js語法非常靈活,JS中這個靈活的特性,弊大於先利。後來增加了嚴格模式。使用嚴格模式提高了編譯效率。其中嚴格模式對很多資料的書寫有了要求:
7.1 在嚴格模式下不能使用沒有var的變數
<script>
"use strict" //開啟嚴格模式
a=110;
console.log(a);
</script>
複製程式碼
上面程式碼執行的結果為:es6zongjie.html:24 Uncaught ReferenceError: a is not defined
7.2 在嚴格模式下不能使用8進位制的數字
<script>
"use strict"
var a=017; //8進位制資料
console.log(a);
</script>
複製程式碼
輸出的結果為:Uncaught SyntaxError: Octal literals are not allowed in strict mode.
7.3 在嚴格模式下不能把函式定義在if語句中
<script>
"use strict"
var a=8;
if(a != 0){
function f(){
console.log(a+a);
}
}
f();
</script>
複製程式碼
輸出的錯誤結果為:es6zongjie.html:30 Uncaught ReferenceError: f is not defined
7.4 在嚴格模式下函式不能有重名的形參
<script>
"use strict"
function f(x,x){
console.log(x+x);
}
f(6,6);
</script>
複製程式碼
此時輸出錯誤:Uncaught SyntaxError: Duplicate parameter name not allowed in this context。
7.5 在嚴格模式下arguments不再跟蹤形參的變化
<script>
"use strict"
var a=function(x,y){
console.log(x,y);
console.log(arguments[0],arguments[1]);
arguments[0]=1234;
arguments[1]=5678;
console.log(x,y);
console.log(arguments[0],arguments[1]);
}
a(3,4);
</script>
複製程式碼
上面四個輸出分別為:“3,4”、“3,4”、“3,4”、“1234,5678”可以看出,此時修改arguments形參不變。
7.6 在嚴格模式下function中的this就不再是window而是underfined
<script>
"use strict"
function f(){
console.log(this);
}
f();
</script>
複製程式碼
輸出的結果為:underfined,正常模式下函式內的this指向window。
8 解構賦值
8.1.1 陣列的解構賦值
<script>
var arr=[a,b,c]=[1,2,3]
console.log(arr);
console.log(a,b,c);
</script>
複製程式碼
輸出結果為:(3) [1, 2, 3]和1 2 3
8.1.2 多維陣列解構賦值
<script>
var arr=[a,[b],[[c]]]=[1,[2],[[3]]];
console.log(arr);
console.log(a,b,c);
</script>
複製程式碼
輸出結果分別為:(3) [1, Array(1), Array(1)]和1 2 3
8.1.3 預設值,只有當右邊對應位置為undefined時候才會選擇預設(null不屬於undefined)
<script>
var arr=[a=1,b=2,c=3,d=4]=[undefined,null,1,2];
console.log(arr);
console.log(a,b,c,d);
</script>
複製程式碼
輸出為:(4) [undefined, null, 1, 2]和1 null 1 2。
8.2 物件賦值
<script>
var obj={name,age}={name:"xiaoqiang",age:"44"};
console.log(obj);
console.log(obj.age,obj.name);
</script>
複製程式碼
輸出結果為:{name: "xiaoqiang", age: "44"}和"44 xiaoqiang"