ES6會這些就夠了

Meteor發表於2018-04-01

1. let、const

1.1 var存在的問題

  1. var有作用域問題（會汙染全域性作用域）
  2. var可已重複宣告
  3. var會變數提升預解釋
  4. var不能定義常量

1.2 let、const特性

  1. let、const不可以重複宣告
  2. let、const不會宣告到全域性作用域上
  3. let、const不會預解釋變數
  4. const做常量宣告（一般常量名用大寫）

1.3 試一試

//1. 作用域
//var
var a = 5;
console.log(window.a); //5

//let、const
let a = 5;
console.log(window.a); //undefined
//有一個問題，let定義的a宣告到哪裡了呢？歡迎解釋（：

//2. 重複宣告 
//var 
var a = 5;
var a = 6;

//let、const
let a = 5;
let a = 6; //Identifier 'a' has already been declared 不能重複宣告

//3. 預解釋
//var
console.log(a); //undefined  相當於 var a;
var a = 5;

//let const
console.log(a)//Uncaught ReferenceError: a is not defined 語法錯誤，沒有預解釋
let a = 5;

//4. 常量
//var
var a = 5;
a = 6;

//const
const a = 5;
a = 6;//Uncaught TypeError: Assignment to constant variable. 語法錯誤
複製程式碼

2.解構

解構是es6新特性，可以對陣列物件內容直接解析。

//1.陣列解構
let [a1,a2,a3] = [1,2,3]; //a1 = 1; a2 = 2; a3 = 3;

//2.物件解構
let {name,age} = {name:'meteor',age:8}; //name = 'meteor',age = 8;
//let {name:n} = {name:'meteor',age:8};//n = 'meteor' 可以用“：”的形式修改變數名

//3.複雜解構
let [{age}] = [{age:8,name:'xx'},'深圳',[1,2,3]]; //age = 8   注意物件解構

//4.預設賦值
let {age=5} = {age:8,name:'xx'}; //age=8 如果沒有age欄位 age=5
//常用函式引數給預設值
//以前
function(){var a = a || 5}
//現在
function(a=5){}

複製程式碼

3.字串

es6中加入了“`”反引號，反引號中${}處理模版字串。

3.1 反引號

  1. 更人性的字串拼接
let name = 'xx';
let age = 9;
let str = `${name}${age}歲了`;
console.log(str); //xx今年歲了
複製程式碼
  1. 使用正則+eval的簡單模擬
let name = 'xx';
let age = 9;
let str = `${name}${age}歲了`;
str = str.replace(/\$\{([^}]+)\}/g, function ($1) {
    return eval(arguments[1]);
})
console.log(str); //xx今年歲了
複製程式碼
  1. 帶標籤的模版字元
//反引號前使用方法，方法按模版變數把字串分成兩個陣列
//第一個為固定值組成的陣列 
//第二個值為替換變數組成的陣列
let name = 'xx';
let age = 9;
function tag(strArr, ...args) {
    var str = '';
    for (let i = 0; i < args.length; i++) {
        str += strArr[i] + args[i]
    }
    console.log(strArr,args);
    //[ '', '今年', '歲了' ]   [ 'xx', 9 ]
    //
    str += strArr[strArr.length - 1];
    return str;
}
let str = tag`${name}今年${age}歲了`;
console.log(str);
複製程式碼

3.2 includes 方法

//判斷字串中是否包含某個字串
let str = 'woaini';
str.includes('ai'); //true
複製程式碼

3.3 endsWith、startsWith 方法

//判斷字串是否以某一個字串開始或結束
var a = '1AB2345CD';
console.log(a.startsWith('1A')); //true
a.endsWith('cD') //false
複製程式碼

4. 函式

4.1 函式引數可賦值，可解構

function({a=5}){}
複製程式碼

4.2 箭頭函式

  1. 如果引數只有一個，可以省略小括號
  2. 如果不寫return，可以不寫大括號
  3. 沒有arguments變數
  4. 不改變this指向
//求和
let sum = (a,b)=>a+b;
複製程式碼

5. 陣列

5.1 陣列新方法

  1. Array.from(); //將類陣列轉化成陣列
  2. Array.of(); //建立陣列
  3. Array.fill();//填充陣列
  4. Array.reduce();//傳入回撥適合處理 臨近陣列元素
  5. Array.filter();//陣列過濾
  6. Array.find();//查詢返回值
  7. Array.includes();//判斷陣列是否有某值

5.2 Array.from()

//Array.from();
let arr = Array.from({'0':1,'1':2,length:2});
console.log(arr);//[1,2]
複製程式碼

5.3 Array.of()

Array.of(2,3); //[2,3]
複製程式碼

5.4 Array.reduce()

[1, 2, 3, 4, 5].reduce((prev, next, index, current) => {
    //prev 如果reduce傳入第二個引數，prev為第二個引數；否則prev為陣列第一個元素  往後累加
    //next 如果reduce傳入第二個引數，next為第陣列第一個元素；否則next為陣列第二個元素  依次累加
    //index 函式第幾次執行1開始
    //current當前陣列
    return prev + next;
})
//reduce方法簡單實現
Array.prototype.myReduce = function (cb, pre) {
    let prev = pre || this[0];
    for (var i = pre ? 0 : 1; i < this.length; i++) {
        prev = cb(prev, this[i], i, this);
    }
    return prev;
}
複製程式碼

5.3 Array.filter();

let result = [1,2,3,4,5].filter(function(item){
    return item>3;
})
console.log(result);//[4,5]
//filter簡單實現
Array.prototype.myFilter = function(cb){
    var arr = [];
    for(var i=0; i<this.length; i++){
        var item = this[i];
        if( cb(item) ) arr.push(item);
    }
    return arr;
}
複製程式碼

5.4 Array.find();

let result = [1,1,1,2,3].find(function(item){
    return item == 2;
})
console.log(result);//2
複製程式碼

6. 物件

6.1 如果key和value相等則可以簡寫

let name = 'xx';
let obj = {name};
複製程式碼

6.2 解構

7. Class 類

  1. Class 定義類
  2. extends 實現繼承
  3. 支援靜態方法
  4. constructor構造方法
class Parent{
    constructor(name){
        this.name = name;
    }
    getName(){
        return this.name;
    }
    static fn(){
        return 9;
    }
}
class Child extends Parent{
    constructor(name,age){
        super(name);//子類有建構函式必須有super
        this.age = age;
    }
}
let child = new Child('xingxing',9);
console.log(child.getName());//xingxing
console.log(child.name);//xingxing
console.log( Child.fn() );//9
複製程式碼

8. Generator

8.1 迭代器函式名前用“*”

function *gen(){}
複製程式碼

8.2 yield 退讓

迭代器遇到yield暫時中止執行，呼叫迭代器next方法繼續執行

8.3 試一試

function *gen(){
    let a = yield 'xx';
    console.log(a);//a
    let b = yield 9;
    console.log(b);
    return b;
}
let it = gen();
console.log(it.next('a'));// value: 'xx', done: false }
console.log(it.next('b'));//{ value: 9, done: false }
複製程式碼

8.4 與promise co結合使用

let bluebird = require('bluebirld');
let co = require('co');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile);
function *r(){
    let content1 = yield read('./1.txt','utf8'); //內容 ./2.txt
    let content2 = yield read(content1,'utf8');
    return content2;
}
let it = r();
//可以自動迭代generator
co(it).then(function(data){
    console.log(data);
});
//實現非同步程式碼同步化
複製程式碼

9. async await

  1. async用來修飾函式，需要配合await
  2. await後只能跟promise
let bluebird = require('bluebird');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile);
//await 後只能跟promise
async function r(){
    let content1 = await read('./1.txt','utf8');
    let content2 = await read(content1,'utf8');
    return content2;
}
//async返回promise
r().then(function(data){
    console.log(data); 
})
複製程式碼

相關文章