ES6經常使用知識點總結概括

原文地址：zclzone.com

1、新的聲明方式

1. let：聲明的變量只在代碼塊內有效
2. const： 聲明常量，聲明時必須賦值且不可改變

let a = 'aaa';
const b = 'bbb';
console.log(a, b);
複製代碼

2、變量的解構賦值

數組解構賦值

let [aa, bb, cc] = [0, 1, 2];
複製代碼

對象解構賦值

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

3、擴展運算符和 rest 運算符

對象擴展運算符

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); //此時不改變arr1
console.log(arr1); //[1,2,3]
console.log(arr2); //[1,2,3,4]
複製代碼

rest 運算符(表示剩餘參數)

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);
複製代碼

4、字符串模版

字符串模版

let name = 'Ronnie';
let str = `你們好，我是<b>${name}</b><br/>很高興認識你們`;
document.write(str);
複製代碼

字符串查找

let str = `你們好，我是<b>${name}</b><br/>很高興認識你們`;
console.log(str.includes('不高興')); //false
console.log(str.startsWith('你們好')); //判斷開頭是否存在，true
console.log(str.endsWith('你們')); //判斷結尾是否存在，true
複製代碼

5、數字操做

二進制聲明 Binary

let binary = 0b010101;
console.log(binary); //21
複製代碼

八進制聲明 Octal

let octal = 0o666;
console.log(octal); //438
複製代碼

判斷是否爲數字

Number.isFinite(888); //true
Number.isFinite('888'); //false，不會先將字符串嘗試轉換成數字再判斷
Number.isFinite('asd'); //false
Number.isFinite(undefined); //false
Number.isFinite(NaN); //false
複製代碼

判斷是不是整數

Number.isInteger(1.1); //false
Number.isInteger(1); //true
複製代碼

最大和最小安全整數

Number.MAX_SAFE_INTEGER;
Number.MIN_SAFE_INTEGER;
複製代碼

判斷是否爲安全整數

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

6、新增的數組知識

數組格式轉換: 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()方法:返回知足條件的第一個元素，三個參數

• value：當前查找的值
• index: 當前查找的值的索引
• strArr: 查找的原數組

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 形式的數組,這種形式的好處就是可讓咱們在須要時用 next()手動跳轉到下一個值

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 方法: 返回一個 Boolean，判斷是否有元素符合 func 條件

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

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

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

filter 方法: 返回一個符合 func 條件的元素數組,不改變原來數組

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

map 方法: 返回一個新的 array，數組元素由每一次調用函數產生結果組成

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

in 方法:用來判斷對象或者數組中是否存在某個 key 或索引

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

7、ES6 中的函數

函數解構 json 對象

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

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

8、ES6 中的對象

對象賦值：ES6 容許把聲明的變量直接賦值給對象

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

//對象Key值構建
let key = 'skill';
let keyObj = {
  [key]: 'web'
};
console.log(keyObj); //skill: "web"
複製代碼

Object.is( ) 對象比較,===爲同值相等，is()爲嚴格相等

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()對象合併

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

9、Set、WeakSet 以及 map 數據結構

Set:Set 和 Array 的區別是 Set 不容許內部有重複的值，若是有隻顯示一個，至關於去重

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：用於存儲對象的 set

WeakSet 聲明，聲明是不容許賦值，不然報錯,同時 WeakSet 裏邊的值也是不容許重複的

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

map：map 是一種靈活，簡單的適合一對一查找的數據結構，它跟 json 對象很像，但反應速度更高，並且 Map 的靈活性要更好，你能夠把它當作一種特殊的鍵值對，但 key 能夠設置成數組，值也能夠設置成字符串

map 的聲明

let map = new Map();
複製代碼

map 的增刪查

let obj4 = { cnName: '張生', age: 26 };
map.set('ronnie', obj4); //增
map.set('ronnie', '永遠十八歲'); //改：相同key則修改
map.set(obj4, 'Ronnie'); //增：key也能夠爲對象
console.log(map);
console.log(map.get(obj4)); //取值： Ronnie
map.delete('ronnie'); //刪除:根據key值刪除
console.log(map.size); //size屬性
console.log(map.has(obj4)); //has：查找是否存在
map.clear(); //clear清除全部元素
console.log(map);
複製代碼

10、Proxy 預處理

Proxy: 相似於鉤子函數，當咱們在操做一個對象或者方法時會有幾種前置動做

• get 屬性：get 屬性是在你獲得某對象屬性值時預處理的方法，它接收三個參數
  1. target：獲得的目標值
  2. key：目標的 key 值，至關於對象的屬性
  3. property：可選參數，這個不經常使用
• set 屬性：set 屬性是指你要改變 Proxy 屬性值時，進行的預先處理。它接收四個參數。
  1. target:目標值
  2. key：目標的 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 = 張生
複製代碼

11、promise 對象的使用

promise 的出現是爲了解決回調地獄的問題

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

1. 打開冰箱門
2. 把大象放進去
3. 關上冰箱門

let isSuccess = true;
function step1(resolve, reject) {
  console.log('First step');
  if (isSuccess) {
    resolve('成功打開冰箱門');
  } else {
    reject('打開冰箱門出錯');
  }
}
function step2(resolve, reject) {
  console.log('Second step');
  isSuccess = false;
  if (isSuccess) {
    resolve('成功把大象放進去');
  } else {
    reject('把大象放進去出錯');
  }
}
function step3(resolve, reject) {
  console.log('Third step');
  if (isSuccess) {
    resolve('成功關上冰箱門');
  } else {
    reject('關上冰箱門出錯');
  }
}

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返回的錯誤信息
  });
複製代碼

12、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
複製代碼

十3、模塊化操做

模塊化操做主要包括兩個方面

1. export :模塊的輸出操做
2. import : 模塊的引入操做

export 的用法:export 可讓咱們把變量，函數，對象進行模塊化，提供外部調用接口，讓外部進行引用

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

import { a } from './temp.js'; //在index.js中以import的形式引入 此時的a對應的是temp.js中輸出的name
複製代碼

多變量的輸出以及函數的輸出

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'; //對應的引入方式
複製代碼

export defalut: 只能輸出一個

let str = 'ronnie is so handsome';
export default str;
import aaa from './temp.js'; //對應的引入方式，引入的名稱能夠任意
複製代碼

OK，以上就是關於ES6的經常使用知識點了，關於Proxy預處理的介紹可能不是很詳細，具體講解的話將會是長篇大論，因此這裏就不深刻介紹了，感興趣的朋友能夠自行搜索別人的文章，相信不少朋友都解釋得比我好。

怕什麼真理無窮，進一寸有進一寸的驚喜~