ES6個人初學總結-XY

蒼羽凌霄發表於2018-08-11

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"

相關文章