ES6新特性

1.let與const變量

let與const使用規則數組

  1. let變量不存在預解析。以下代碼,若使用var聲明flag,打印結果爲 undefined;若使用let聲明flag,結果報錯:flag is not defined
console.log(flag);
//var flag = 123;
let flag = 456;
複製代碼
  1. let聲明的變量不容許重複。以下代碼會報錯:
let flag = 123;
let flag = 456;
console.log(flag);
複製代碼
  1. ES6中,let和const引入了塊級做用域。塊內部定義的變量,在外部是沒法被訪問。
if(true){
    // var flag = 123;  //外部能夠打印
    let flag = 123;     //外部會報錯
}
console.log(flag);
複製代碼
  1. const聲明的變量不容許從新賦值且必須初始化。
const n = 1;
n = 2;     //報錯,不容許從新賦值
複製代碼
const abc; //報錯,未初始化
複製代碼

2.解構賦值

  1. 數組的結構賦值
let [a,b,c] = [1,2,3];       //a,b,c對應的結果爲:1,2,3
let [a,b,c] = [,123,];       //a,b,c對應的結果爲:undefined,123,undefined
let [a=111,b,c] = [,123,];   //a,b,c對應的結果爲:111,122,undefined
console.log(a,b,c);
複製代碼
  1. 對象的解構賦值
let {foo,bar} = {foo : 'hello',bar : 'hi'};
console.log(foo,bar);         //輸出結果爲:hello hi
複製代碼

對象若是有了別名,則原有名無效,以下代碼段bash

let {foo:abc,bar} = {foo : 'hello',bar : 'hi'};
console.log(foo,bar);      //結果報錯: foo is not defined
console.log(abc,bar);      //輸出結果爲:hello hi
複製代碼
  1. 字符串的結構賦值
let [a,b,c,d,e,length] = "hello";
console.log(a,b,c,d,e,length);    //輸出結果爲:h e l l o undefined
複製代碼
let {length} = "hello";
console.log(length);              //輸出結果爲:5
複製代碼

3.模板字符串

使用 反引號``(鍵盤上TAB上面那個鍵) 將整個字符串包裹起來,在裏面使用 ${} 來包裹一個變量或者一個表達式app

let a = 20;
let b = 30;
let string = `${a}+${b}=${a+b}`;
console.log(string);            //輸出結果爲:20+30=50
複製代碼
let obj = {
    username : 'lisi',
    age : '12',
    gender : 'male'
}
let tag = '<div><span>'+obj.username+'</span><span>'+obj.age+'</span><span>'+obj.gender+'</span></div>';
console.log(tag);               //輸出結果爲:<div><span>lisi</span><span>12</span><span>male</span></div>
複製代碼

4.參數默認值

function foo(param){
    let p = param || 'hello';
    console.log(p);
}
foo('hi');       //輸出結果爲:hi
foo();           //輸出結果爲:hello
複製代碼

上述函數另外一種寫法:函數

function foo(param = 'hello'){
    console.log(param);
}
複製代碼

5.展開運算符...

  1. 函數中使用展開運算符,以下代碼段,輸出結果爲:12[3,4,5]
function foo(a,b,...param){
    console.log(a);
    console.log(b);
    console.log(param);
}
foo(1,2,3,4,5);
複製代碼
  1. 數組中使用展開運算符
function foo(a,b,c,d,e,f,g){
    console.log(a + b + c + d + e + f + g);
}
let arr = [1,2,3,4,5,6,7];
//若要將arr傳入foo函數中做爲參數
//ES5中方法
foo.apply(null,arr);
//ES6中使用展開運算符
foo(...arr);
複製代碼

以下代代碼段,使用展開運算符合並數組ui

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);          //輸出結果爲:[1,2,3,4,5,6]
複製代碼

6.箭頭函數

ES6 中,箭頭函數就是函數的一種簡寫形式,使用括號包裹參數,跟隨一個 =>,緊接着是函數體。以下函數等價:this

function foo(){
    console.log('hello');
}
//等價於
let foo = () => console.log('hello');
複製代碼

當函數有且僅有一個參數的時候,是能夠省略掉括號的。當函數返回有且僅有一個表達式的時候能夠省略{} 和 return。spa

// ES5
function add(a) {
    return a + 1;
};
// 使用箭頭函數
let add = a => a + 1;
複製代碼

箭頭函數中this取決於函數的定義,而不是調用code

function foo(){
    // 使用call調用foo時,這裏的this其實就是call的第一個參數
    setTimeout(()=>{
        console.log(this.num);
    },100);
}
foo.call({num:1});
複製代碼

7.類與繼承class、extends、super

使用class來聲明類名,extends繼承父類,super繼承父類的構造函數對象

class Animal{
    // 靜態方法(靜態方法只能經過類名調用,不能夠使用實例對象調用)
    static showInfo(){
        console.log('hi');
    }
    // 構造函數
    constructor(name){
        this.name = name;
    }
    showName(){
        console.log(this.name);
    }
}
// 類的繼承extends
class Dog extends Animal{
    constructor(name,color){
        super(name);       //super用來調用父類,super的調用必須在this以前,不然會報錯
        this.color = color;
    }
    showColor(){
        console.log(this.color);
    }
}

let d = new Dog('doudou','yellow');
d.showName();            //輸出結果爲:doudou
d.showColor();           //輸出結果爲:yellow
Dog.showInfo();          //輸出結果爲:hi
複製代碼

8.for...of和for...in

for...in 用於遍歷數組和對象的索引或者key:繼承

let arr = ['a', 'b', 'c'];
for (let index in arr) {
  console.log(index);
}
//輸出結果爲:0   1    2

let obj = {
    'name': 'zlx',
    'age': 21,
    'sex': '男'
};
for (let key in obj) {
  console.log(key);
}
//輸出結果爲:name   age    sex
複製代碼

for...of 用來遍歷數組中的每一項的值:

let arr = ['a', 'b', 'c'];
for (let value of arr) {
  console.log(value);
}
//輸出結果爲:a   b    c
複製代碼
相關文章
相關標籤/搜索