三，ES6中需要注意的特性（重要）

症患迫者強發表於2018-08-11

-----書接上文，前文中我們總結了關於JS的組成部分以及如何快速開展學習JS，相信已經有很多朋友掌握到這些方法。接下來就從更深的ECMAScript開始說起。

三，ES6中需要注意的特性（重要）

1.什麼是ES6?

ECMAScript(European Computer Manufacturers Association) 6: 是JavaScript語言的下一代標準，已經在2015年6月正式釋出了。Mozilla公司將在這個標準的基礎上，推出JavaScript 2.0。
簡單來說ES6在JS中的作用就是語言的標準。它裡面定義瞭如何去定義變數，如何寫函式，如何寫陣列....
相對於ES5來講ES6中多出來幾點新特性，而且普及速度相對於ES5來講要快很多，現在主流版本的瀏覽器如Chrome 和 Firefox 瀏覽器可以支援ES6中絕大多數特性。
接下來圍繞ES6的新特性開始說起。

2.ES6特性---量的宣告（let and const）

（1）使用Let宣告變數

前面說到，JS中宣告變數是通過 var 來宣告 var 是variable的簡寫。 variabel是變化的意思。
而在ES6中推薦使用let宣告區域性變數，相比於之前的var宣告的全域性變數，
使用Let宣告變數不會使變數提升:

console.log(b);
let b = 666;  // b is not defined
複製程式碼

使用Let不能重複宣告：

let a =1;
let a =1; //Identifier 'a' has already been declared
複製程式碼

Let可以形成一個塊級作用域：

if (true){
    var a = 100;
}
console.log(a);// a = 100
複製程式碼
if (true){
    let a = 100;
}
console.log(a);// a is not defined
複製程式碼

（2）使用Const宣告常量

使用Const宣告常量不會使常量提升:

console.log(PI);
const PI = 3.14;// PI is not defined
複製程式碼

使用Const不能重複宣告：

const PI = 3.14;
PI = 666;//Assignment to constant variable
複製程式碼

Const可以形成一個塊級作用域：

{
    const PI = 3.14;
}
console.log(PI);//PI is not defined
複製程式碼

總結一下：
相同點：Let與Const不會使量提升，不能重複宣告，都能形成塊級作用域。
不同點：Let宣告變數，Const宣告常量。

3.ES6特性---箭頭函式(Arrow Functions)

箭頭函式是函式的簡寫，是ES6中非常強大的簡寫形式。不需要 function 關鍵字來建立函式。省略 return 關鍵字。繼承當前上下文的 this 關鍵字（沒有自己的this）。

var f = function(a){
    console.log(a);
}
//?
var f = (a)=>{
    console.log(a);
}
//?
var f = a =>{
    console.log(a);
}// 當引數只有一個的時候，（）是可以省略的
複製程式碼

箭頭函式沒有自己的this，所以使用的時候要格外小心。

var obj = {
    name: 'wsq',
    getName() {
      console.log(this.name);
    }
  }
  obj.getName(); // wsq
  
  var obj = {
    name: 'wsq',
    getName: () => {
      console.log(this.name);
    }
  }
  obj.getName(); //  undefined
  
複製程式碼

4.ES6特性---模板字串(Template Literals)

允許嵌入表示式的字串字面量，可以使用多行字串和字串插值功能。

1.用${}來將表示式嵌入字串中進行拼接。
2.使用(``)進行包裹。

var name = 'wsq';
var aa = `test ${name} `;
console.log(aa); // test wsq
複製程式碼

5.ES6特性---函式的引數預設值

在ES6中，函式的引數預設值定義要更加簡單：

function print(key = 'hello') {
    console.log(key);
}

print('f'); // f
print();// hello
複製程式碼

這說明了，在ES6中，JS的形參是可以有預設值的。

6.ES6特性---For...of

新的迴圈方式，代替之前的 for...in 和 forEach 方法。 可在可迭代物件（包括 Array，Map，Set，String，arguments 物件等等）進行迭代迴圈
for...of 遍歷陣列：

let root = ['a', 'b', 'c'];
for (let x of root) {
  console.log(x);
} //a,b,c

複製程式碼

7.ES6特性---ES6中的類

前面我們都是建立構造器，然後去new構造器，構造器就相當於一個類，在ES6中，就可以使用Class來建立物件了。

不使用Class，去建立一個類，如下：

function man (name,age,height){
    this.name = name;
    this.age = age;
    this.height = height;
}
man.prototype.say = function(){
    console.log(`我是${this.name}`)
}
var p = new man("wsq","22","180");

console.log(p);
複製程式碼

使用Class，去建立一個類，如下：

class Man{
    constructor(name,age,height){
        this.name = name;
        this.age = age;
        this.height = height;
    }
    say(){
        console.log(`我是${this.name}`)
    }
}

var p1 = new Man("wsq","22","180");
console.log(p1.say());
複製程式碼

8.ES6特性---物件超類與繼承

ES6 允許在物件中使用 super 方法並使用Extends來實現繼承：

class Man{
    constructor(name,age,height){
        this.name = name;
        this.age = age;
        this.height = height;
    }
    say(){
        console.log(`我是${this.name}`)
    }
}

class MVP extends Man{
    constructor(name,age,height,year){
        super(name,age,height)
        this.year = year;
    }
    showMVP(){
        console.log(`我是${this.name},我是${this.year}年的MVP`)
    }
}
var mvp1 = new MVP("wsq","22","180",2016);
mvp1.say();
mvp1.showMVP();
複製程式碼

9.ES6特性---物件擴充套件

(1)Obect.getOwnProertyDescriptor();

獲取一個物件中某個屬性的詳細資訊。

var a =1;
console.log(Object.getOwnPropertyDescriptor(window,"a"));//{value: 1, writable: true, enumerable: true, configurable: false}
複製程式碼

(2)Object.defineProperty();

精細化設定一個物件的屬性。

(3)Object.defineProperties() ;

直接在一個物件上定義新的屬性或修改現有屬性,並返回該物件。

var obj = {}
Object.defineProperties(obj,{
    "name":{
        configurable:false,
        Writable:false,
        enumerable:false,
        value:"wsq"
    },
    "age":{
        configurable:false,
        Writable:false,
        enumerable:false,
        value:"66"
    }
});
console.log(obj.name,obj.age);//wsq 66
複製程式碼

(4)getOwnPropertyNames();

獲取自的屬性，以陣列的格式返回。

var obj = {
    name : "wsq",
    age : 88
};
console.log(Object.getOwnPropertyNames(obj));//["name", "age"]
複製程式碼

(5)Object.keys();

使用Object.getOwnPropertyNames()和Object.keys()都可以得到一個物件的屬性名，屬性名是放在一個陣列中的。

var obj = {
    name : "wsq",
    age : 88
};
console.log(Object.keys(obj));//["name", "age"]
複製程式碼

(6)Object.values();

獲取物件的值，放到陣列中。

var obj = {
    name : "wsq",
    age : 88
};
console.log(Object.values(obj));//["wsq", 88]
複製程式碼

10.ES6特性---其他補充

（1）Set與Map

set和資料差不多，也是一種集合，區別在於：它裡面的值都是唯一的，沒有重複的。

const s = new Set();
arrSet.add(1); // Set(1) {1}
arrSet.add(2); // Set(2) {1, 2}
arrSet.add(2); // Set(2) {1, 2}
複製程式碼

map類似於物件，裡面存放也是鍵值對，區別在於：物件中的鍵名只能是字串，如果使用map，它裡面的鍵可以是任意值。

    var m = new Map([
        ["a","hello"],
        [1,"123"]
    ]);
    m.set(false,"abc")
    m.set([1,2,3]),{name:"wsq"}
    console.log(m);//Map(4){"a" => "hello", 1 => "123", false => "abc", Array(3) => undefined}
複製程式碼

（2）Trim

除去字串空格的。

trim 左右空格去掉
trimLeft 左空格去掉
trimRight 右空格去掉

var str = " a abn abc "
str.trim();
/* "a abn abc"
str.trimLeft();
"a abn abc "
str.trimRight();
" a abn abc" */
複製程式碼

（3）Repeat

構造並返回一個新字串,該字串包含被連線在一起的指定數量的字串的副本。

var str = "12345"
console.log(str.repeat(5));//1234512345123451234512345
複製程式碼

（4）Includes

用來判斷一個字串是否包含一個指定的值,根據情況,如果包含則返回 true,否則返回false。

/* var str = "abc dde";
   str.includes("a")
   true
   str.includes("z")
   false
   str.includes("c d")
   true
*/
複製程式碼

（5）StrartsWith

用來判斷一個字串是否是以指定內容開頭，根據情況,如果包含則返回 true,否則返回false。

/*
    var str = "abc dde";
    str.strartsWith("abc")
    true
    str.strartsWith("abdc")
    false
*/
複製程式碼

（6）EndsWidth

用來判斷一個字串是否是以指定內容結尾，根據情況,如果包含則返回 true,否則返回false。

/*
    var str = "abc dde";
    str.endsWith("dde")
    true
    str.endsWith("abdc")
    false
*/
複製程式碼

（7）PadStart

如果這個字串不夠指定長度,會在頭部補全。

/*
    var str = "abc def"
    str.padStart(15,"*")
    "********abc def"
*/
複製程式碼

（8）PadEnd

如果這個字串不夠指定長度,會在尾部補全。

/*
    var str = "abc def"
    str.padStart(15,"*")
    "abc def********"
*/
複製程式碼

關於ES6中的特性還有很多，本文僅僅是列舉出較為有特點的一部分來說，有不足之處歡迎大家在評論裡留言討論，僅 此以為謝。

相關文章