• es6劃重點
  • 1.作用域變量
    • 1.1.let和var對比
      • 1.變量不提升
      • 2.不能重復定義
      • 3.暫存死區
      • 4.閉包新寫法
  • 2.const(常量)
  • 3.解構
    • 1.數組解構
    • 2.對象解構
    • 3.混合解構
    • 4.傳遞參數，結果解構
  • 4.拷貝
    • 4.1.淺拷貝
    • 4.2.對象合並
    • 4.3.JSON.parse(JSON.stringify())
    • 4.4.深拷貝（遞歸拷貝）
    • 4.5.展開運算符
  • 5. 代理proxy
    • 5.1.普通函數（defineProperty）
    • 5.2.mvvm
    • 5.3 普通代理
    • 5.4 多層代理
  • 6.箭頭函數
    • 6.1 普通剪頭函數
    • 6.2 類數組
    • 6.3 this指向問題
    • 6.4 let不會將變量放在window上
  • 7.arr(數組新方法)
    • 7.1 reduce(收斂)
    • 7.2 filter(過濾)
    • 7.3 map
    • 7.3 every
    • 7.4 findIndex
    • 7.5 Array.from
    • 7.6 Array.of()
    • 7.7 copyWithin
    • 7.8 Object.keys
  • 8.Symbol
  • 9.template
    • 9.1 模板字符串
    • 9.2 模板字符串實現原理
  • 10.集合
    • 10.1 Set
    • 10.2 Map
  • 11 class
    • 11.1 es5 實現的類
    • 11.2 es6 寫法
    • 11.3 get 與 set
  • 參考文檔

es6劃重點

1.作用域變量

1.1.let和var對比

1.變量不提升

var 可能會造成變量提升

這裏變量提升了,先聲明a然後打印再賦值,結果是undefined

console.log(a);//undefined
var a = 1;

//相當於
var a;
console.log(a);
a = 1;

let的話，變量不會提升，打印的時候，會報錯，因為還沒聲明

console.log(a);//a is not defined
let a = 1;

2.不能重復定義

var 可能會被重新賦值, let不能重復聲明一個變量

var a = 1;
var a = 2;
console.log(a);//2

let a = 1;
let a = 2;//Identifier ‘a‘ has already been declared 這裏是說它已經被聲明了，不能重復聲明
console.log(a);
 

3.暫存死區

var的作用域問題 (函數作用域 全局作用域) (let 暫存死區)

只要塊級作用域內存在let命令，它所聲明的變量就“綁定”（binding）這個區域，不再受外部的影響。

{
    let a = 1;
}
console.log(a);//a is not defined

{
    var a = 1;
}
console.log(a)//1

4.閉包新寫法

以前

;(function () {

})();

現在

{}

2.const(常量)

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。


const命令聲明的常量也是不提升，同樣存在暫時性死區，只能在聲明的位置後面使用。

const PI = 3.141593
PI > 3.0

es5寫法

Object.defineProperty(typeof global === "object" ? global : window, "PI", {
    value:        3.141593,
    enumerable:   true,//對象屬性是否可通過for-in循環，flase為不可循環，默認值為true
    writable:     false,//對象屬性是否可修改,flase為不可修改，默認值為true
    configurable: false//能否使用delete、能否需改屬性特性、或能否修改訪問器屬性
})
PI > 3.0;

3.解構

1.數組解構

let [,b,c,d=100] = [1,2,3];
console.log(b,d);

2.對象解構

let obj = {name:‘cjw‘,age:18};
//這裏重新命名了
let {name:Name,age,address="默認"} = obj;
console.log(Name, age, address)

3.混合解構

let [{name}] =  [{name:‘cjw‘}];

4.傳遞參數，結果解構

Promise.all([‘cjw‘,‘9‘]).then(([name,age])=>{
  console.log(name, age);
});

4.拷貝

4.1.淺拷貝

let arr1 = [1,2,3,[1,2,3]];
let arr2 = [1,2,3];
let arr = [...arr1,...arr2];
console.log(arr)
arr1[3][0] = 100;

4.2.對象合並

let school = {name:‘zfpx‘,a:{a:1}};
let my  = {age:18};
let newObj = {...school,a:{...school.a},...my}; 
console.log(newObj)

4.3.JSON.parse(JSON.stringify())

這個只能拷貝普通對象，new Date之類不能拷貝

let school = { name: ‘zfpx‘, a: { a: 1 } ,date:new Date(),reg:new RegExp(/\d+/),fn:function(){}};
let s = JSON.parse(JSON.stringify(school));

4.4.深拷貝（遞歸拷貝）

function deepClone(obj) { // 遞歸拷貝 深拷貝
  if(obj == null) return null;
  if (obj instanceof Date) return new Date(obj);
  if(obj instanceof RegExp) return new RegExp(obj);
  if(typeof obj !== ‘object‘) return obj;
  let t = new obj.constructor
  for(let key in obj ){
    t[key] = deepClone(obj[key])
  }
  return t;
}
let o = { a: [1, 2, 3] }
let r = deepClone(o);
o.a[1] = 1000

4.5.展開運算符

// 剩余運算符只能用在最後一個參數
function test(a, b,...c) { // c = [5,6,7]
  // 將類數組轉化成數組
  let d = Array.prototype.slice.call(arguments,2)
  // a,b,...c
  let e =  Array.from(arguments).slice(2);
  let arr = [...arguments].slice(2);
  console.log(e);
}
test(1,2,3,5,6,7);

把多個對象的屬性復制到一個對象中,第一個參數是復制的對象,從第二個參數開始往後,都是復制的源對象

// Object.assign  {...} 
let name ={name:‘zfpx‘}
let age = {age:9}
let obj = Object.assign(name,age); // {...}
console.log(obj);

5. 代理proxy

5.1.普通函數（defineProperty）

Object.defineProperty(obj, ‘PI‘, {
    enumerable: true,
    configurable: false,
    get(){
        console.log(‘get‘);
    },
    set(){
        console.log(‘set‘);
        val = v;
    }
})
obj.PI = 3.15;

5.2.mvvm

let obj = {name: {name: ‘cjw‘}, age: 18};
function observer(obj){
    if(typeof obj != ‘object‘) return obj;
    for(let key in obj){
        defineReactive(obj, key, obj[key]);
    }
}
function defineReactive(obj, key, value){
    observer(value);
    Object.defineProperty(obj, key, {
        get(){
            return value;
        },
        set(){
            console.log(‘update‘);
        }
    })
}
observer(obj);
obj.name.name = ‘cjw‘;

5.3 普通代理

let proxy = new Proxy(obj, {
    set(target, key, value){
        if(key === ‘length‘) return true;
        console.log(‘update‘);
        return Reflect.set(target, key, value);
    },
    get(target, key){
        return Reflect.get(target, key);
    }
})
proxy.push(‘123‘);
console.log(proxy.length);

5.4 多層代理

let obj = {name: {name: ‘cjw‘}, age : 18};
function set(obj, callback){
    let proxy = new Proxy(obj, {
        set(target, key ,value){
            if(key === ‘length‘) return true;
            console.log(‘更新‘);
            return Reflect.set(target, key, value);
        },
        get(target, key){
            return Reflect.get(target, key);
        }
    })
    callback(proxy);
}
set(obj, function(proxy){
    proxy.age = ‘100‘;
    console.log(proxy);
})

6.箭頭函數

this 指向

去掉function 關鍵字

去掉return 和 {}

6.1 普通剪頭函數

function a(a) {
  return function (b) {
    return a + b;
  }
}
let a = a => b => a + b;
console.log(a(1)(2));

6.2 類數組

let a = (...arguments) => {
  console.log(arguments)
}
a(1, 2, 3);

6.3 this指向問題

// this指向問題
let obj = {
  a: 1,
  b() { // obj = this
    console.log(this);
    setTimeout(() => { // 箭頭函數中沒有this指向 從而解決了this的問題
      this.a = 100;
    }, 1000);
  }
}
obj.b();
setTimeout(() => {
  console.log(obj.a)
}, 2000);

6.4 let不會將變量放在window上

let a = 1000; // let不會將變量放在window上
let obj = {
  a: 1,
  b: () => {
    this.a = 100; // window
  }
}
obj.b();
console.log(obj.a,a);

7.arr(數組新方法)

filter過濾 forEach 循環 map 映射 reduce 收斂 some every 反義

7.1 reduce(收斂)

原生寫法

let arr = [1,2,3,4,5];
Array.prototype.myReduce = function (callback,prev) {
  for(let i = 0 ; i<this.length;i++){
    if(!prev){
      // 0 1
      prev = callback(this[i],this[i+1],i+1,this);
      i++;
    }else{
      prev = callback(prev,this[i],i+1,this);
    }
  }
  return prev
}
let r = arr.myReduce((prev,next,currentIndex,arr)=>{
  return prev+next
},100)

7.2 filter(過濾)

let arr = [1,2,3]
let arr1 = arr.filter(item=>item<=2);
console.log(arr1);

7.3 map

let arr =[1,2,3];
let arr1 = arr.map(item=>item*2);

7.3 every

let arr = [1,2,3];
let flag = arr.every(item=>item==3);
console.log(arr.includes(3)); //es7

7.4 findIndex

let arr = [1, 2, 3];
let item = arr.find(item => item == 4);
console.log(item); //es7

7.5 Array.from

將一個數組或者類數組變成數組,會復制一份

let newArr = Array.from(oldArr);

7.6 Array.of()

of是為了將一組數值,轉換為數組

console.log(Array(3), Array(3).length);
console.log(Array.of(3), Array.of(3).length);

7.7 copyWithin

Array.prototype.copyWithin(target, start = 0, end = this.length) 覆蓋目標的下標 開始的下標 結束的後一個的下標

[1, 2, 3, 4, 5].copyWithin(0, 1, 2)//[ 2, 2, 3, 4, 5 ]

7.8 Object.keys

Object.keys可以把對象取出來key組成數組 for of 可以叠代數組

for (var a of Object.values({ name: ‘cjw‘, age: 9 }) ){ // forEach不能return 
  console.log(a);
}

8.Symbol

let s = Symbol();
let q = Symbol();

console.log(s === q);//false

let s = Symbol.for(‘cjw‘);
let q = Symbol.for(‘cjw‘);
console.log(s);//Symbol(cjw)
console.log(q);//Symbol(cjw)

console.log(Symbol.keyFor(q));
console.log(s === q);//ture

9.template

9.1 模板字符串

let name = ‘cjw‘;
let age = 9;

let str = `${name}今年${age}`;
console.log(str);

9.2 模板字符串實現原理

let newStr = str.replace(/\$\{([\s\S])\}/g, function(){
    return eval(arguments);
})
console.log(newStr);

10.集合

10.1 Set

set可以做去重 set不能放重復的

let set = new Set([1,2,3,3,2,1]);
console.log([...set]);

10.2 Map

let map = new Map();
map.set(‘js‘,‘123‘);
map.set(‘node‘,‘456‘);
map.forEach(item=>{
  console.log(item);
});

11 class

11.1 es5 實現的類

// call 構造函數裏面的屬性方法復制
// Object.crate 復制原型裏面的屬性和方法

function Animal(type) {
  this.type = { t: type};
}
Animal.prototype.eat = function () {
  console.log(‘eat‘);
}
function Cat(type) {
   Animal.call(this,type); // 讓父類在子類中執行，並且this指向子類
}
// 原型上還有一個屬性
// 4.繼承實例上和原型上的方法
function create(proto) {
  let Fn = function () { }
  Fn.prototype = proto;
  return new Fn();
}
Cat.prototype = Object.create(Animal.prototype,{constructor:{value:Cat}});
let cat = new Cat(‘哺乳類‘)
console.log(cat.type);
cat.eat();
console.log(cat.constructor);

11.2 es6 寫法

class Animal {
    constructor(type){
        this.type = type;
    }
    static flag(){
        return ‘animal‘;
    }
    eat(){
        console.log(‘eat‘);
    }
}
class Cat extends Animal{
    constructor(type){
        super(type);
    }
}

let cat = new Cat(‘哺乳類‘);
console.log(cat.type);
cat.eat();
console.log(Cat.flag);

11.3 get 與 set

getter可以用來得獲取屬性，setter可以去設置屬性

class Person {
    constructor(){
        this.hobbies = [];
    }
    set hobby(hobby){
        this.hobbies.push(hobby);
    }
    get hobby(){
        return this.hobbies;
    }
}
let person = new Person();
person.hobby = ‘basketball‘;
person.hobby = ‘football‘;
console.log(person.hobby);

參考文檔

ECMAScript 6 入門 let 和 const 命令--阮一峰

es6-features.org

es6劃重點