ES6常用知識(shí)點(diǎn)總結(jié)歸納

原文地址：zclzone.com/zhangsheng

更佳閱讀體驗(yàn)：zclzone.gitee.io/zhangsheng

一、新的聲明方式

  1. let：聲明的變量只在代碼塊內(nèi)有效
  2. const： 聲明常量，聲明時(shí)必須賦值且不可改變
let a = 'aaa';
const b = 'bbb';
console.log(a, b);

二、變量的解構(gòu)賦值

數(shù)組解構(gòu)賦值

let [aa, bb, cc] = [0, 1, 2];

對(duì)象解構(gòu)賦值

let { cnName, enName } = {
  id: '151521574',
  cnName: '張生',
  enName: 'Ronnie'
};
console.log(cnName, enName); //'張生'，'Ronnie'

三、擴(kuò)展運(yùn)算符和 rest 運(yùn)算符

對(duì)象擴(kuò)展運(yùn)算符

function test01(...arg) {
  console.log(arg[0]); //1
  console.log(arg[1]); //2
  console.log(arg[2]); //3
  console.log(arg[3]); //undefined
}
test01(1, 2, 3);

let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.push(4); //此時(shí)不改變arr1
console.log(arr1); //[1,2,3]
console.log(arr2); //[1,2,3,4]

rest 運(yùn)算符(表示剩余參數(shù))

function test02(first, ...arg) {
  for (let item of arg) {
    console.log(item); //依次輸出1,2，3,4,5,6
  }
  console.log(first); //0
}
test02(0, 1, 2, 3, 4, 5, 6);

四、字符串模版

字符串模版

let name = 'Ronnie';
let str = `大家好，我是<b>${name}</b><br/>很高興認(rèn)識(shí)大家`;
document.write(str);

字符串查找

let str = `大家好，我是<b>${name}</b><br/>很高興認(rèn)識(shí)大家`;
console.log(str.includes('不高興')); //false
console.log(str.startsWith('大家好')); //判斷開(kāi)頭是否存在，true
console.log(str.endsWith('大家')); //判斷結(jié)尾是否存在，true

五、數(shù)字操作

二進(jìn)制聲明 Binary

let binary = 0b010101;
console.log(binary); //21

八進(jìn)制聲明 Octal

let octal = 0o666;
console.log(octal); //438

判斷是否為數(shù)字

Number.isFinite(888); //true
Number.isFinite('888'); //false，不會(huì)先將字符串嘗試轉(zhuǎn)換成數(shù)字再判斷
Number.isFinite('asd'); //false
Number.isFinite(undefined); //false
Number.isFinite(NaN); //false

判斷是否是整數(shù)

Number.isInteger(1.1); //false
Number.isInteger(1); //true

最大和最小安全整數(shù)

Number.MAX_SAFE_INTEGER;
Number.MIN_SAFE_INTEGER;

判斷是否為安全整數(shù)

Number.isSafeInteger(Math.pow(2, 53) - 1); //true
Number.isSafeInteger(Math.pow(2, 53) + 1); //false

六、新增的數(shù)組知識(shí)

數(shù)組格式轉(zhuǎn)換: Array.from、 Array.of

let json = {
  '0': 'Ronnie',
  '1': 'Rose',
  '2': 'zhangsheng',
  '3': 'Json',
  length: 4
};

let jsonArr = Array.from(json);
console.log(jsonArr); //['Ronnie','Rose','zhangsheng','Json']

let strArr = Array.of('a', 'b', 'c', 'd');
console.log(strArr); //['a', 'b', 'c', 'd']

find()方法:返回滿足條件的第一個(gè)元素，三個(gè)參數(shù)

  • value：當(dāng)前查找的值
  • index: 當(dāng)前查找的值的索引
  • strArr: 查找的原數(shù)組
let findRst = strArr.find((value, index, strArr) => {
  return value === 'd' || value === 'a';
});
console.log(findRst); //a

fill() 方法

let fillArr = ['Ronnie', 'Rose', 'Zhangsheng'];
fillArr.fill('es6', 1, 3); //將索引為[1,3),即索引為1和2的值替換為'es6'
console.log(fillArr); //["Ronnie", "es6", "es6"]

for...of

for (let item of fillArr) {
  console.log(item);
}
//帶索引的方式
for (let [index, value] of fillArr.entries()) {
  console.log(index + ':' + value);
}

entries() 生成的是 Iterator 形式的數(shù)組,這種形式的好處就是可以讓我們?cè)谛枰獣r(shí)用 next()手動(dòng)跳轉(zhuǎn)到下一個(gè)值

let list = fillArr.entries();
console.log(list.next().value); //[0, "Ronnie"]
console.log(list.next().value); //[1, "es6"]
console.log(list.next().value); //[2, "es6"]
console.log(list.next().value); //undefined

some 方法: 返回一個(gè) Boolean，判斷是否有元素符合 func 條件

let someArr = [1, 2, 3, 4];
someArr.some(item => item > 1); //true

every 方法: 返回一個(gè) Boolean，判斷每一個(gè)元素是否符合 func 條件

let everyArr = [1, 2, 3, 4];
everyArr.every(item => item > 3); //false
everyArr.every(item => item >= 1); //true

filter 方法: 返回一個(gè)符合 func 條件的元素?cái)?shù)組,不改變?cè)瓉?lái)數(shù)組

let ages = [23, 28, 25, 32];
ages.filter(item => item > 25); //[28,32]
console.log(ages); //[23, 28, 25, 32]

map 方法: 返回一個(gè)新的 array，數(shù)組元素由每一次調(diào)用函數(shù)產(chǎn)生結(jié)果組成

let mapArr = [1, 2, 3, 4, 5, 6];
mapArr.map(item => item + 1); //[2,3,4,5,6,7]

in 方法:用來(lái)判斷對(duì)象或者數(shù)組中是否存在某個(gè) key 或索引

let inObj = {
  cnName: '張生',
  enName: 'Ronnie'
};
console.log('enName' in inObj); //true
console.log(4 in ages); //false

七、ES6 中的函數(shù)

函數(shù)解構(gòu) json 對(duì)象

let jsonObj = {
  cnName: '張生',
  enName: 'Rose'
};

function fun({ cnName, enName = 'Ronnie' }) {
  console.log(cnName, enName);
}
fun(jsonObj); //張生 Rose

八、ES6 中的對(duì)象

對(duì)象賦值：ES6 允許把聲明的變量直接賦值給對(duì)象

let nameObj = { cnName, enName };
console.log(nameObj); //{cnName: "張生",enName: "Ronnie"}

//對(duì)象Key值構(gòu)建
let key = 'skill';
let keyObj = {
  [key]: 'web'
};
console.log(keyObj); //skill: "web"

Object.is( ) 對(duì)象比較,===為同值相等，is()為嚴(yán)格相等

console.log(+0 === -0); //true
console.log(NaN === NaN); //false
console.log(Object.is(+0, -0)); //false
console.log(Object.is(NaN, NaN)); //true

Object.assign()對(duì)象合并

let obj1 = { cnName: '張生' };
let obj2 = { enName: 'Ronnie', age: 26 };
let obj3 = Object.assign(obj1, obj2);
console.log(obj3); //{cnName: "張生", enName: "Ronnie", age: 26}

九、Set、WeakSet 以及 map 數(shù)據(jù)結(jié)構(gòu)

Set:Set 和 Array 的區(qū)別是 Set 不允許內(nèi)部有重復(fù)的值，如果有只顯示一個(gè)，相當(dāng)于去重

Set 的聲明

let setArr = new Set(['ronnie', 'zhangsheng', 'web']);
console.log(setArr); //Set(3) {'ronnie', 'zhangsheng', 'web'}

Set 值的增刪查

setArr.add('前端'); //增
setArr.delete('web'); //刪
setArr.has('前端'); //查: true
setArr.clear(); //清空

Set 的遍歷

for (let item of setArr) {
  console.log(item);
}

size 屬性

console.log(setArr.size); //3

WeakSet：用于存儲(chǔ)對(duì)象的 set

WeakSet 聲明，聲明是不允許賦值，否則報(bào)錯(cuò),同時(shí) WeakSet 里邊的值也是不允許重復(fù)的

let weakObj = new WeakSet();
weakObj.add({ cnName: '張生', age: 26 });
console.log(weakObj);

map：map 是一種靈活，簡(jiǎn)單的適合一對(duì)一查找的數(shù)據(jù)結(jié)構(gòu)，它跟 json 對(duì)象很像，但反應(yīng)速度更高，而且 Map 的靈活性要更好，你可以把它看成一種特殊的鍵值對(duì)，但 key 可以設(shè)置成數(shù)組，值也可以設(shè)置成字符串

map 的聲明

let map = new Map();

map 的增刪查

let obj4 = { cnName: '張生', age: 26 };
map.set('ronnie', obj4); //增
map.set('ronnie', '永遠(yuǎn)十八歲'); //改：相同key則修改
map.set(obj4, 'Ronnie'); //增：key也可以為對(duì)象
console.log(map);
console.log(map.get(obj4)); //取值： Ronnie
map.delete('ronnie'); //刪除:根據(jù)key值刪除
console.log(map.size); //size屬性
console.log(map.has(obj4)); //has：查找是否存在
map.clear(); //clear清除所有元素
console.log(map);

十、Proxy 預(yù)處理

Proxy: 類似于鉤子函數(shù)，當(dāng)我們?cè)诓僮饕粋€(gè)對(duì)象或者方法時(shí)會(huì)有幾種前置動(dòng)作

  • get 屬性：get 屬性是在你得到某對(duì)象屬性值時(shí)預(yù)處理的方法，它接收三個(gè)參數(shù)
    1. target：得到的目標(biāo)值
    2. key：目標(biāo)的 key 值，相當(dāng)于對(duì)象的屬性
    3. property：可選參數(shù)，這個(gè)不常用
  • set 屬性：set 屬性是指你要改變 Proxy 屬性值時(shí)，進(jìn)行的預(yù)先處理。它接收四個(gè)參數(shù)。
    1. target:目標(biāo)值
    2. key：目標(biāo)的 Key 值
    3. value：要改變的值
    4. receiver：改變前的原始值
let pro = new Proxy(
  {
    add: function(val) {
      return val + 10;
    },
    name: 'I am Ronnie'
  },
  {
    get: function(target, key) {
      console.log('come in Get');
      return target[key];
    },
    set: function(target, key, value, receiver) {
      console.log(`setting ${key} = ${value}`);
      return (target[key] = value);
    }
  }
);
console.log(pro.name); //先輸出 come in Get  再輸出 I am Ronnie
pro.name = '張生'; //setting name = 張生

十一、promise 對(duì)象的使用

promise 的出現(xiàn)是為了解決回調(diào)地獄的問(wèn)題

promise 的基本用法(舉例說(shuō)明)，比如把大象放入冰箱有三個(gè)步驟

  1. 打開(kāi)冰箱門
  2. 把大象放進(jìn)去
  3. 關(guān)上冰箱門
let isSuccess = true;
function step1(resolve, reject) {
  console.log('First step');
  if (isSuccess) {
    resolve('成功打開(kāi)冰箱門');
  } else {
    reject('打開(kāi)冰箱門出錯(cuò)');
  }
}
function step2(resolve, reject) {
  console.log('Second step');
  isSuccess = false;
  if (isSuccess) {
    resolve('成功把大象放進(jìn)去');
  } else {
    reject('把大象放進(jìn)去出錯(cuò)');
  }
}
function step3(resolve, reject) {
  console.log('Third step');
  if (isSuccess) {
    resolve('成功關(guān)上冰箱門');
  } else {
    reject('關(guān)上冰箱門出錯(cuò)');
  }
}

new Promise(step1)
  .then(function(rst) {
    console.log(rst);
    return new Promise(step2);
  })
  .then(function(rst) {
    console.log(rst);
    return new Promise(step3);
  })
  .then(function(rst) {
    // console.log(rst);
    return rst;
  })
  .catch(e => {
    console.log(e); //捕獲Promise reject返回的錯(cuò)誤信息
  });

十二、class 類的使用

類的聲明與使用

class Coder {
  name(val) {
    console.log(val);
    return val;
  }
  skill(val) {
    console.log(this.name('Ronnie') + ':' + 'Skill-' + val);
  }
  constructor(cnName, age) {
    this.cnName = cnName;
    this.age = age;
  }
  introduce() {
    return this.cnName + ':' + this.age;
  }
}

let Ronnie = new Coder('張生', 26);
Ronnie.name('Ronnie'); //Ronnie
Ronnie.skill('web'); //Ronnie: Skill-web
console.log(Ronnie.introduce()); //Ronnie:26

class 的繼承

class htmler extends Coder {}

let zhangsheng = new htmler();
zhangsheng.name('zhangsheng'); //zhangsheng

十三、模塊化操作

模塊化操作主要包括兩個(gè)方面

  1. export :負(fù)責(zé)進(jìn)行模塊化，也是模塊的輸出
  2. import : 負(fù)責(zé)把模塊引，也是模塊的引入操作

export 的用法:export 可以讓我們把變量，函數(shù)，對(duì)象進(jìn)行模塊化，提供外部調(diào)用接口，讓外部進(jìn)行引用

export let name = 'Ronnie'; //export   temp.js

import { a } from './temp.js'; //在index.js中以import的形式引入  此時(shí)的a對(duì)應(yīng)的是temp.js中輸出的name

多變量的輸出以及函數(shù)的輸出

let var1 = 'Ronnie';
var var2 = '張生';
var var3 = 'zhangsheng';
function add(a, b) {
  return a + b;
}
export { var1, var2, var3, add };
import { var1, add } from './temp'; //對(duì)應(yīng)的引入方式

export defalut: 只能輸出一個(gè)

let str = 'ronnie is so handsome';
export default str;
import aaa from './temp.js'; //對(duì)應(yīng)的引入方式，引入的名稱可以任意

OK，以上就是關(guān)于ES6的常用知識(shí)點(diǎn)了，關(guān)于Proxy預(yù)處理的介紹可能不是很詳細(xì)，具體講解的話將會(huì)是長(zhǎng)篇大論，所以這里就不深入介紹了，感興趣的朋友可以自行搜索別人的文章，相信很多朋友都解釋得比我好。

怕什么真理無(wú)窮，進(jìn)一寸有進(jìn)一寸的驚喜~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • [TOC] 參考阮一峰的ECMAScript 6 入門參考深入淺出ES6 let和const let和const都...
    郭子web閱讀 1,915評(píng)論 0贊 1
  • 什么是ES6？ ECMAScript 6.0 是繼ECMAScript 5.1 之后 JavaScript 語(yǔ)...
    多多醬_DuoDuo_閱讀 1,236評(píng)論 0贊 4
  • 強(qiáng)大的for-of循環(huán) ES6不會(huì)破壞你已經(jīng)寫好的JS代碼。目前看來(lái)，成千上萬(wàn)的Web網(wǎng)站依賴for-in循環(huán)，其...
    Awe閱讀 7,584評(píng)論 2贊 7
  • 第一章：塊級(jí)作用域綁定 塊級(jí)聲明 1.var聲明及變量提升機(jī)制：在函數(shù)作用域或者全局作用域中通過(guò)關(guān)鍵字var聲明的...
    BeADre_wang閱讀 989評(píng)論 0贊 0
  • 一、let 和 constlet：變量聲明, const：只讀常量聲明（聲明的時(shí)候賦值）。 let 與 var 的...
    dadage456閱讀 825評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容