es6 學習筆記(二)
es6重點理解
1.let,const
let:
特性:
1> 塊級作用域
//塊級作用域的出現,實際上使得獲得廣泛應用的立即執行函數表達式(IIFE)不再必要了
2> 不存在變量提升
3> 在let聲明之前,變量都是不可用的
const:
const聲明一個只讀的常量。一旦聲明,常量的值就不能改變。
特性:
1> 塊級作用域
2> 聲明的常量不會提升,
3> 生命不賦值也會報錯,
4> 在const聲明之前,常量都是不可用的
2.rest: ...rest
相當於除已有形參之外的所有形參,
function fn(name,...rest) { console.log(name);//‘luyuan‘ console.log(rest);//[1,2,3,4] } fn(‘luyuan‘, 1,2,3,4)
3.結構賦值(最外層的大括號表示塊級作用域)
對象解構:
{ let obj = { a: [1,2], b: 3 } const {a, b} = obj; console.log(a, b); }
嵌套對象解構:
{ let obj = { a: { d: 5, b: { c: 4 } } } const {a: {d, b}} = obj; console.log(d,b.c); }
數組結構:
let arr = [1, 2, 3] //解構前2個元素 const [a, b] = arr console.log(a,b) //1 2
調換兩個變量的值:
let a = 1,b = 2; [a, b] = [b, a]; //實際解構過程,左邊的變量和右邊的數組元素一一對應下標。
不定元素解構:
let arr = [1,2,[3,45]]; //相當於克隆 let [...rest] = arr;
解構參數:
{ function fn(area, infor) { let {name = 0, age = 18} = infor; console.log(area, infor); } fn(‘bj‘, {‘name‘: ‘luyuan‘, ‘age‘: 21}); }
4.String,Math,Object,Number,Array新的API
Number
//判斷一個值是否為NAN Number.isNaN()
String
//includes() 用來查看是否包含數組中的相連的任意幾個 包含返回ture 不包含false var str = ‘includes‘; str.includes(‘includ‘) //true; //startsWidth() 以字符串字母開頭(一個或兩個) 是返回ture 不是包含false var str = ‘includes‘; str.startsWidth(‘in‘) //true //endsWidth 以字符串字母結尾(一個或兩個) 是返回ture 不是包含false //repeat復制 定義幾個就會復制幾個 "abc".repeat(3) // "abcabcabc"
Array
//Array.from 復制一份 let arrs = Array.from(arr); //Array.of 放到一個數組裏,類似於 new Array Array.of(1, 2, 3);//[1,2,3]
fill
//1代表數組的下標,7代表從下標為1處及之後內容用7填充。 [0, 0, 0].fill(7, 1) // [0,7,7] [0, 0, 0, 4, 6, 3, 4].fill(9, 3) // [0,0,9,9,9,9,9]
Object
//第一個參數為目標對象,後面的參數都是源對象。 var aa = { a: 1 }; var qq = { b: 2 }; var zz = { c: 3 }; var kk = Object.assign(aa, qq, zz); console.log(kk === aa) //true
Math、Number、String 、Array、Object 的新 APIs
5.函數參數默認值
function test(name = ‘luyuan‘) { console.log(name); } 等同於: function test(name) { name = name || ‘luyuan‘ }
怎麽理解?
let foo = ‘outer‘; function bar(func = x => foo) { let foo = ‘inner‘; console.log(func()); } bar(); //inner
// bar的參數: func = x => foo let func = function(x) { return foo; }
6.對象屬性,方法的簡寫。
{ function person(obj) { let {name = "ll", age = "18", sex = "girl"} = obj return { name, age, sex, sayHello() { console.log(‘hello‘); } } } console.log(person({"name": "luyuan", "age": 21, "sex": "boy"})); }
7.Set
Set是類似於數組的一種新的數據結構,它是一個構造函數,類似於Array(),但是他不允許有重復值;
生成一個set
//可以接受一個數組,來初始化一個set, let set = new Set([1,2,3,4,5,3,4,5]);// //let set = new Set(); [1,2,3,4,5,3,5,6].forEach(x => set.add(x));
遍歷方法
keys():返回鍵名的遍歷器(什麽是遍歷器?Iterator)
values():返回鍵值的遍歷器
entries():返回鍵值對的遍歷器
forEach():使用回調函數遍歷每個成員
//for-of for(let k of set.values()) { console.log(k);//1,2,3,4,5,6 } for(let k of set.keys()) { console.log(k);//1,2,3,4,5,6 } for(let k of set.entries()) { console.log(k);//1,2,3,4,5,6 }
//[...set]
[...set];//[1,2,3,4,5,6]
操作集合
let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); //並集 let union = new Set([...a, ...b]); //{1, 2, 3, 4} //交集 let intersect = new Set([...a].filter(x => b.has(x))); //{2, 3} //差集 let difference = new Set([...a].filter(x => !b.has(x))); //{1}
8.class
class與語法糖
“語法糖”的意思是現有技術本可以實現,但是采用某種寫法會更加簡潔優雅。最常見的就是聲明對象采用的就是語法糖 var a={b:111}。
ES6的class可以看作只是一個語法糖,它的絕大部分功能,ES5都可以做到,新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。
例子:
{ //class People,類,它相當於構造函數和原型的集合, class People { //constructor相當於是es5中的構造函數 constructor(work, name){ this.name = name; this.work = work; //初始化方法 this.init(); } //在原型上的方法,People類所有的實例都有 init() { console.log(‘我的工作是‘ + this.work + ‘,‘ + ‘我叫‘ + this.name); } eat(area) { console.log(this.name + ‘去‘ + area + ‘吃飯‘); } } //extends,繼承類,它可以繼承People類中所有的屬性和方法。 class Student extends People{ //通過extends繼承的類稱為子類,他沒有自己的this對象,同樣是要繼承父類的this對象(即實例對象) constructor(work, name, rank) { //繼承父類的this對象,super(參數)必須放在首行, super(work, name); this.rank = rank; this.getRank(rank); } getRank(rank) { console.log(‘我是‘ + this.name + ‘,我的排名是‘ + rank); } } let people = new People(‘develop‘, ‘people‘); people.eat(‘酒店‘); let student = new Student(‘study‘, ‘student‘, 1); student.eat(‘食堂‘); }
30分鐘掌握ES6/ES2015核心內容(上)
ES6的繼承機制,實質是先創造父類的實例對象this(所以必須先調用super方法),然後再用子類的構造函數修改this
9.async-await總結
1.async-await是解決異步回調最終的答案
async是generator和yield的語法糖,實現的功能都是相同的,只是實現的方式更方面了一些,代碼看上去優雅,可讀性好,
2.語法
async function asyncGrammer() { let result = await Math.random(); console.log(result); } //返回一個Promise對象 asyncGrammer();
ES6系列文章 異步神器async-await
es6 學習筆記(二)