快捷導(dǎo)航

ES6學(xué)習(xí)筆記之字符串、數(shù)組、對(duì)象、函數(shù)新增知識(shí)點(diǎn)實(shí)例分析

更新時(shí)間：2020年01月22日 11:19:51 作者：theVicTory

這篇文章主要介紹了ES6學(xué)習(xí)筆記之字符串、數(shù)組、對(duì)象、函數(shù)新增知識(shí)點(diǎn),結(jié)合實(shí)例形式分析了ES6字符串、數(shù)組、對(duì)象、函數(shù)新增知識(shí)點(diǎn)、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了ES6學(xué)習(xí)筆記之字符串、數(shù)組、對(duì)象、函數(shù)新增知識(shí)點(diǎn)。分享給大家供大家參考，具體如下：

1、模板字符串

反引號(hào)`` 內(nèi)用于輸入格式化的字符串文本，在``內(nèi)可以將表達(dá)式用${}包含起來(lái)

  let str=`
    <!DOCTYPE html>
      <html lang="en">
        <body>
          <div>
            <p class="pClass">格式化字符串</p>
          </div>
        </body>
      </html>
  `;
  console.log(str);

2、轉(zhuǎn)化為數(shù)組

Array.form將偽數(shù)組、集合轉(zhuǎn)化為數(shù)組

let allLi=document.querySelectorAll('li');
console.log(Array.isArray(allLi));//輸出false,allLi不是個(gè)數(shù)組
let arr=Array.from(allLi);
console.log(Array.isArray(arr));//輸出true，arr被轉(zhuǎn)化為數(shù)組

Array.of將元素構(gòu)建為數(shù)組

let arrayOf=Array.of('str',2,{});  //創(chuàng)建由字符串、數(shù)字、對(duì)象構(gòu)成的數(shù)組
let arr=Array.of(7);         //數(shù)組包含一個(gè)元素7
let arr=Array(7);          //數(shù)組包含7個(gè)空元素

3、類(lèi)的封裝

通過(guò)class來(lái)包裝類(lèi)

  class Person{    
    constructor(name,age){  //Person類(lèi)的構(gòu)造函數(shù)
      this.name=name;
      this.age=age;
    }
    
     print(){        //類(lèi)函數(shù)輸出
      console.log("My name is "+this.name+",I'm "+this.age+" years.");
    }
  }
  let p=new Person('tony',15);
  p.print();

4、對(duì)象的使用

在用變量作為對(duì)象的元素時(shí)，會(huì)將變量名作為鍵值，將變量值作為值

let name='tony';
let age=15;
let person={
  name,
  age
}  
console.log(person);

輸出結(jié)果為：

Object { name: "tony", age: 15 }

Object.assign()方法實(shí)現(xiàn)對(duì)象合并，參數(shù)為：合并目標(biāo)，合并源1，合并源2...

let obj1={'name':'tony'};
let obj2={'age':15};
let obj3={'sex':'男'};
let obj={};
Object.assign(obj,obj1,obj2,obj3);  //將后面的對(duì)象并到第一個(gè)對(duì)象
console.log(obj);

輸出為：

Object { name: "tony", age: 15, sex: "男" }

5、延展操作符...

將整體字符串、對(duì)象等拆成單個(gè)元素

let str="這是一個(gè)字符串";
let arr=[...str];
console.log(arr);

輸出為：

6、函數(shù)Rest參數(shù)

當(dāng)不確定傳入的參數(shù)個(gè)數(shù)時(shí)，可以采用"...參數(shù)"的方式，然后遍歷操作每個(gè)參數(shù)

  function sum(name,...num) {
    console.log(name);
    let res=0;
    for (let value of num){  //將后面未知個(gè)數(shù)的參數(shù)當(dāng)作數(shù)組num遍歷
      res+=value;      
    }
    return res;
  }
  console.log(sum('tony',10,2,3));

7、箭頭函數(shù)

箭頭函數(shù)可以將函數(shù)function (參數(shù)) {表達(dá)式}簡(jiǎn)化為：(參數(shù)...)=>{表達(dá)式...}，無(wú)需輸入function，甚至省略(),{},return。

1、當(dāng)只有一個(gè)參數(shù)時(shí)，可以寫(xiě)為參數(shù) => 表達(dá)式，例如使用map函數(shù)遍歷一個(gè)數(shù)組，使每個(gè)元素乘2：

var arr = [1, 4, 9, 16];
const map1 = arr.map(x => x * 2);  //利用map()遍歷數(shù)組，傳入一個(gè)參數(shù)當(dāng)作x，并返回x*2

map中的函數(shù)以x為參數(shù)遍歷每個(gè)arr中的元素，*2之后自動(dòng)返回，形成map1數(shù)組

2、當(dāng)有多個(gè)參數(shù)時(shí)，需要給參數(shù)加括號(hào)：() =>表達(dá)式，例如遍歷數(shù)組輸出索引與值：

let arr=['data0','data1','data2'];
arr.forEach((value,index)=>   //通過(guò)forEach遍歷數(shù)組，傳入兩個(gè)參數(shù)value與index
  console.log(index+':'+value)
);

輸出如下：

3、當(dāng)有多行表達(dá)式時(shí)，要用{}將函數(shù)包含成一塊：() =>{}，并且使用塊語(yǔ)句時(shí)，函數(shù)不會(huì)自動(dòng)返回值，需要使用return將值返回。

4、JavaScript的{}也可以表示一個(gè)對(duì)象，當(dāng)使用箭頭函數(shù)返回對(duì)象時(shí)，為了與函數(shù)體區(qū)別需要將對(duì)象用()包含起來(lái)：() =>({})，否則會(huì)報(bào)錯(cuò)，例如在react中使用setState方法，需要返回一個(gè)對(duì)象:

this.setState((prevState) =>({
  flag: !prevState.flag
}))

8、Promise函數(shù)

在使用接口調(diào)用時(shí)，有時(shí)需要根據(jù)調(diào)用返回是否成功分別去調(diào)用不同的函數(shù)，ES6提供了Promise函數(shù)來(lái)解決這個(gè)問(wèn)題。在調(diào)用成功時(shí)，執(zhí)行.then方法，失敗時(shí)執(zhí)行.catch方法來(lái)分別處理不同情況，返回不同的數(shù)據(jù)。

例如定義一個(gè)檢查登陸的Promise方法，當(dāng)傳入?yún)?shù)為true時(shí)登陸成功，回調(diào)函數(shù)為then，false失敗，調(diào)用catch：

    //定義promise函數(shù)
    let checkLog=function (flag) {    
     return new Promise(function(resolve,reject){
      if(flag){        //如果判定條件為真，執(zhí)行resolve函數(shù)
       resolve({       //其括號(hào)內(nèi)的參數(shù)作為結(jié)果返回
        status:1,
        info:"登陸成功"
       })
      }else{          //判定為假執(zhí)行reject函數(shù)
       reject({
        status:0,
        info:"登陸失敗"
        }
       )
      }
     })
    };
    //使用promise函數(shù)
    checkLog(false).then(res=>{  //根據(jù)promise返回的不同值分別執(zhí)行then或catch
     console.log(`成功信息：${res.info}`);
    }).catch(err=>{
     console.log(`錯(cuò)誤信息：${err.info}`);
    })

當(dāng)傳入true：當(dāng)傳入false：