ES6進一步整理

內容：

1.變量及賦值

2.函數

3.數組及json

4.字符串

5.面向對象

6.Promise

7.generator

8.模塊

 

 

1.變量及賦值

(1)ES5變量定義

var：     能夠重複定義、不能限制修改、沒有塊級做用域  --> 再也不建議使用

 

(2)ES6新增變量定義

新時代的js建議使用如下來定義變量：

• let 不能重複定義、變量、塊級做用域
• const 不能重複定義、常量、塊級做用域

 

(3)賦值

1 解構賦值：
2   1.左右兩邊必須同樣；右邊得是個東西
3   2.必須定義和賦值同步完成

1 let [a, b, c] = [1, 2, 3];
2 // let {a, b, c} = {a: 1, b: 2, c: 3};  
3 alert(a+b+c);  // 輸出6

1 let [n1, {a, b, c}, n2] = [12, {a: {n1: 5, n2:8}, b: 12, c: 88}, 55];
2 console.log(n1, a, b, c, n2);
3 // 輸出: 12 {n1: 5, n2: 8} 12 88 55

 

 

2.函數

(1)箭頭函數

箭頭函數就是匿名函數定義的簡化版, 宣稱能使得代碼更簡潔，實際上就是純粹的垃圾
箭頭函數的 this 值是綁定了的，箭頭函數沒有 arguments 對象，若是要多參數, 必須用 ...

 1 // (參數1, 參數2) => { 語句 }
 2 // (參數1, 參數2) => 語句
 3 // 上面兩行至關於下面這函數
 4 function(參數1, 參數2) {
 5     return 語句
 6 }
 7 
 8 // 若是隻有一個參數，圓括號可省略的
 9 // (參數1) => { 語句 }
10 // 參數1 => { 語句 }
11 
12 // 可是若是沒有參數, 必須須要使用圓括號
13 // () => { 語句 }
14 
15 // 例子
16 var a1 = [1, 2, 3]
17 // 下面兩個等價
18 var a2 = a1.map(function(n){
19     return n * n
20 })
21 var a3 = a1.map( n => n * n )
22 
23 n => n * n
24 // 上面 1 行等價於下面 3 行
25 function(n) {
26     return n * n
27 }

 

(2)默認參數

 1 // 傳統寫法
 2 var test = function(a, b, c){
 3     b = b||5;
 4     c = c||12;
 5     console.log(a, b, c);  // 1, 5, 12
 6 }
 7 test(1);
 8 
 9 // ES6寫法:
10 var test = function(a, b=5, c=12){
11     console.log(a, b, c);  // 1, 5, 12
12 }
13 test(1);

 

(3)參數展開(剩餘參數)

接受剩餘參數以下：

1 var test = function(a, b, ...args){
2     // 第一個和第二個參數傳給a和b其餘參數傳給args
3     console.log(a, b, args);
4 }
5 
6 test(1, 3, 5, 7, 9);  // 1, 3, [5, 7, 9]

注：...args必須在參數最後面

 

展開一個數組：

1 let arr = [111, 222, 333];
2 let arr2 = [1, 3, 5, ...arr, 7, 9];
3 console.log(arr2);
4 // 輸出: [1, 3, 5, 111, 222, 333, 7, 9]

 

 

3.數組及json

(1)數組 - 5種方法

map 映射：一個 -> 一個

 1 let arr=[62, 55, 82, 37, 26];
 2 
 3 let arr2=arr.map(function (item){
 4   if(item>=60){
 5     return true;
 6   }else{
 7     return false;
 8   }
 9 });
10 
11 alert(arr2);  // true,false,true,false,false

 

filter 過濾：

1 let arr=[12,5,88,37,21,91,17,24];
2 
3 let arr2=arr.filter(function(item){
4     if(item%2==0){
5         return item;
6     }
7 });
8 
9 alert(arr2);  // 12,88,24

 

forEach 遍歷：

1 let arr=[12,5,88,37,21,91,17,24];
2 
3 let sum=0;
4 arr.forEach(function(item){
5   sum+=item;
6 });
7 
8 alert(sum);  // 295

 

reduce 彙總：一堆 -> 一個

1 let arr=[12,5,88,37,21,91,17,24];
2 
3 let sum=arr.reduce(function(tmp,item,index){
4   console.log(tmp, item, index);
5 
6   return tmp+item;
7 });
8 
9 console.log(sum);  // 結果: 295

 

array-like對象轉換成Array：

在DOM操做中，有時候有一些array-like對象(沒法使用forEach方法)，能夠這樣將其轉換成真正的Array：

Array.from([array-like]) -> [xxx, xxx, xxx]，而後就可使用forEach方法了

 

(2)json - 2變化

簡寫：名字和值同樣的，能夠省

1 let a=12;
2 let b=5;
3 
4 let json={a, b};
5 // 上面一句等價於:
6 // let json={a: a, b: b};
7 
8 console.log(json);  // {a: 12, b: 5}

 

function能夠不寫：

 1 /*let json={
 2   a: 12,
 3   b: 5,
 4   show: function (){
 5     alert(this.a+this.b);
 6   }
 7 };*/
 8 
 9 // 下面的和上面的同理
10 let json={
11   a: 12,
12   b: 5,
13   show(){
14     alert(this.a+this.b);
15   }
16 };
17 
18 json.show();

 

 

4.字符串

字符串模板：

1 let json={name: 'wyb', age: 21};
2 
3 //alert('我叫：'+json.name+'，我今年'+json.age+'歲');
4 alert(`我叫：${json.name}，我今年${json.age}歲`);

 

多行字符串：

1 let msg = `sf
2 sdf
3 dkj
4 `;
5 
6 alert(msg);

 

startsWith和endsWith：

 1 if(sNum.startsWith('135')){
 2   alert('移動');
 3 }else{
 4   alert('聯通 or 電信');
 5 }
 6 
 7 if(filename.endsWith('.txt')){
 8   alert('文本文件');
 9 }else{
10   alert('其餘文件');
11 }

 

 

5.面向對象

(1)基礎 構造函數和繼承

• class/constructor
• extends/super

 1 // 類的定義:
 2 class Person{
 3   constructor(name, age){
 4     this.name = name;
 5     this.age = age;
 6   }
 7 
 8   showName(){
 9     alert('我叫' + this.name);
10   }
11   showAge(){
12     alert('我' + this.age + '歲');
13   }
14 }
15 
16 let p = new Person('wyb', 21);
17 
18 p.showName();
19 p.showAge();

 1 // 類的繼承
 2 class Person{
 3   constructor(name, age){
 4     this.name = name;
 5     this.age = age;
 6   }
 7 
 8   showName(){
 9     alert('我叫' + this.name);
10   }
11   showAge(){
12     alert('我' + this.age + '歲');
13   }
14 }
15 
16 
17 class Worker extends Person{
18   constructor(name, age, job){
19     //super-超類(父類)
20     super(name, age);
21     this.job = job;
22   }
23 
24   showJob(){
25     alert('我是作：' + this.job);
26   }
27 }
28 
29 let w = new Worker('wyb', 21, '打雜的');
30 
31 w.showName();
32 w.showAge();
33 w.showJob();

 

(2)this

• 普通函數：根據調用個人人 this老變
• 箭頭函數：根據所在的環境 this恆定
• bind——給函數定死一個this

 

 

6.Promise

Promise - 異步、同步化  ->  用同步的方式去寫異步

• promise：解決異步操做
• 同步——串行 簡單、方便
• 異步——併發 性能高、體驗好

Promise用法：

1 let p=new Promise((resolve, reject)=>{
2     resolve();
3 
4     reject();
5 });
6 
7 p.then(()=>{}, ()=>{});  // 第一個函數爲resolve  第二個函數爲reject

Promise使用實例：

• Promise.all(); 與：全部的都成功
• Promise.race(); 或：只要有一個完成

 1 //Promise -> 用同步的方式實現異步
 2 Promise.all([
 3   $.ajax('/banner_data'),
 4   $.ajax('/item_data'),
 5   $.ajax('/user_data'),
 6   $.ajax('/news_data'),
 7 ]).then(function(arr){
 8   let [banners, items, user, news]=arr;
 9 }, function(){});
10 // then方法第一個函數爲resolve函數(成功)  第二個函數爲reject函數(失敗)

注意：

• Proimse有用——解除異步操做
• Promise有侷限——帶邏輯的異步操做麻煩

 

 

7.generator

generator - 生成器  --》 能暫停

簡單實例 ：

 1 // 生成器函數
 2 function *show(){
 3   alert('aaa');
 4   yield;  // 暫停 
 5   alert('bbb');
 6 }
 7 
 8 let gen = show();
 9 
10 gen.next();   // aaa
11 
12 setTimeout(function (){
13   gen.next();   // bbb
14 }, 5000);

yield實例：

 1 // yield：
 2 // 1.能夠傳參數      function (a, b, c)
 3 // 2.能夠返回         return
 4 
 5 // yield返回值
 6 function *show(){
 7   alert('aaa');
 8   let a=yield;
 9   alert('bbb'+a);
10 }
11 
12 let gen=show();
13 
14 gen.next();      // aaa
15 gen.next(12);  // bbb12
16 
17 
18 // yield傳值:
19 function *show(){
20   alert('aaa');
21   yield 55;
22 
23   alert('bbb');
24   return 89;
25 }
26 
27 let gen=show();
28 
29 let res1=gen.next(); 
30 console.log(res1);    //{value: 55, done: false}
31 
32 let res2=gen.next(); 
33 console.log(res2);    //{value: 89, done: true}

generator+promise配合(並不經常使用)：

1.外來的runner輔助執行——不統1、不標準、性能低
2.generator函數不能寫成箭頭函數

 

補充 - async/await - 經常使用：

大體寫法：

1 // async寫法:
2 async function xxx(){
3     ....
4     let res=await xx;
5     ....
6     let res2=await xxx;
7     // let 結果=await 異步操做;(異步操做能夠是promise、generator、另外一個async函數其中的任意一個)  
8     ....
9 }

實例(async使用及錯誤處理)：

 1 async function show(){
 2   try{
 3     let data1=await $.ajax({url: '1.txt', dataType: 'json'});
 4     let data2=await $.ajax({url: '33.txt', dataType: 'json'});
 5     let data3=await $.ajax({url: '3.txt', dataType: 'json'});
 6 
 7     console.log(data1, data2, data3);
 8   }catch(e){
 9     alert('有問題');
10 
11     throw new Error('錯了....');
12   }
13 }
14 
15 show();

 

 

8.模塊化ES6

打包、編譯：

• 編譯：ES6 -> ES5  使用babel
• 打包： browserify

(1)babel

最初做爲一個polyfill工具使用，只是用來擴充瀏覽器的功能，能夠用來將ES6編譯成ES5

babel官網：http://babeljs.io/，babel須要node.js，使用babel以前要先安裝node，node官網：https://nodejs.org/en

 

node：語言、環境、平臺    node的npm：包管理(相似python的pip)

安裝使用babel：

• 替換源：npm install -g cnpm --registry=https://registry.npm.taobao.org
• 項目初始化：cnpm init
• 在項目中下載babel：cnpm install --save-dev babel-cli
• 安裝以後，改寫package.json包(配置文件)以下：

 1 {
 2   //...略去了其餘的內容
 3   "devDependencies": {
 4     "babel-cli": "^6.0.0"  //這裏的版本號爲安裝的時候的版本號，通常安裝的時候就會自動寫入
 5   },
 6   "scripts": {
 7     "build": "babel src -d lib" 
 8     //編譯整個 src 目錄並將其輸出到 lib 目錄。這裏的src指的是須要轉換的目錄，lib指的是輸出的內容的存放目錄
 9   },
10 }

而後在項目中新建.babelrc而後配置babelrc：

1 {
2     "presets": ["env"]
3 }

而後執行：cnpm i babel-preset-env -D

最後編譯：npm run build

 1 // 編譯前的代碼:
 2 let a=12;
 3 let [b,c]=[5,8];
 4 
 5 const show=()=>{
 6   alert(a+b+c);
 7 };
 8 
 9 show();
10 
11 // 編譯後的代碼:
12 "use strict";
13 
14 var a = 12;
15 var b = 5,
16     c = 8;
17 
18 
19 var show = function show() {
20   alert(a + b + c);
21 };
22 
23 show();

 

(2)browserify

browesrify -> 和模塊化配合一塊兒用