精簡ES6知識點

ES5

strict模式：嚴格模式
Array增加的方法：
1. every()：檢測數值元素的每一個元素是否符合條件
2. some()；檢測數組元素是否有元素符号指定條件
3. forEach()；數組每一個元素都執行一次回調函數
4. filter()；檢測數組元素，并傳回符合條件的所有元素的數組
5. indexOf()；搜尋數組中的元素，并傳回它的所在的位置
6. lastIndexOf()；搜尋數組中的元素，并傳回它的最後出現的位置
7. isArray()；判斷對象是否為數組
8. map()；通過指定函數處理數組的每個元素
9. reduce()；将數組元素計算為一個值（從左到右）
10. reduceRight()；将數組元素計算為一個值（從右到左）
this指向的方法：bind
String增加的方法：
1. trim()；去除字元串兩邊的空白
Date增加的方法：
1. now()；時間戳

Object新增方法：
1. Object.getPrototypeOf()；傳回指定對象的原型
2. Object.create()；建立一個新對象
3. Object.getOwnPropertyNames()；傳回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數組
4. Object.defineProperty()；方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，并傳回此對象
5. Object.getOwnPropertyDescriptor()；指定對象上一個自有屬性對應的屬性描述符
6. Object.defineProperties()；直接在一個對象上定義新的屬性或修改現有屬性，并傳回該對象
7. Object.keys()：傳回一個數組，成員是參數對象自身的（不含繼承的）所有可周遊（enumerable）屬性的鍵名
8. Object.preventExtensions()；讓一個對象變的不可擴充，也就是永遠不能再添加新的屬性
9. Object.isExtensible()；判斷一個對象是否是可擴充的（是否可以在它上面添加新的屬性）
10. Object.seal()；封閉一個對象，阻止添加新屬性并将所有現有屬性标記為不可配置。目前屬性的值隻要原來是可寫的就可以改變
11. Object.isSealed()；判斷一個對象是否被密封
12. Object.freeze()；可以當機一個對象
13. Object.isFrozen()；方法判斷一個對象是否被當機

ES6

新增加的文法

局部變量/常量：let/const
對象方法簡寫: const obj = { aa(){} }

解析結構：

// 對象結構指派
const str = {user1: 'he', user2: 20};
const {user1: name, user2: sex} = str;

// 數組結構指派
const [a, b, c] = [1, 2 ,3];

// 字元串結構指派
const [a1, b1, c1, d1, e1] = 'hello';

函數的參數：預設值(defualt)、rest參數、數組展開(…)(spread)

// default
function fn1(name = 'he', age = 26){}

// rest參數
function fn2(x, ...y){
    return x * y.length;
}
fn2(1, "hello", true); // => 2

// ...
function fn3(q, w, e, r){
    return q + w + e + r;
}
fn3(4, 3, 2, 1) //=>10

箭頭函數(自動綁定this)： var fn = () => {}

字元串模闆：

const [name, age] = ['he', 20];
console.log(`姓名：${name}，今年：${age}`);
// 姓名：he，今年：20

周遊對象：
- for…in：循環周遊對象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）
- Object.keys(obj)：傳回一個數組，包括對象自身的（不含繼承的）所有可枚舉屬性（不含 Symbol 屬性）的鍵名
- Object.getOwnPropertyNames(obj)：傳回一個數組，包含對象自身的所有屬性（不含 Symbol 屬性，但是包括不可枚舉屬性）的鍵名
- Object.getOwnPropertySymbols(obj)：傳回一個數組，包含對象自身的所有 Symbol 屬性的鍵名
- Reflect.ownKeys(obj)：傳回一個數組，包含對象自身的所有鍵名，不管鍵名是 Symbol 或字元串，也不管是否可枚舉
疊代器 + for…of
- 疊代器有一個next方法，該方法有兩個屬性：
- 第一次疊代：{value：elem, done: false}
- 最後一次疊代：{value：returnValue, done: true}
- for…of：周遊疊代對象
```
const arr = [1,2,3,4,5];
for(value of arr){
    console.log(value)
}
// 1,2,3,4,5
           
```

生成器（Generator）

function* myGenerator() {
yield 'hello';
yield 'world';
return 'Generator';
}

var g = myGenerator();
g.next(); // { value: 'hello', done: false }

class：constructor、extends、super

class A{
    constructor(name){
        this.name = name;
    }

    ace(){
        return `${this.name}第一名`
    }
}

class B extends A{
    constructor(name, age){
        super(name);
        this.age = age;
    }

    ace(){
        return `${super.ace()},今年${this.age}`
    }
}

const user = new B('he', 20);
console.log(user.ace()) // he第一名,今年20
console.log(user instanceof A) // true
console.log(user instanceof B) // true

Modules： import * from url

Map + WeakMap + Set + WeakSet

const s = new Set();
s.add('hello').add('world');
console.log(s.size === 2); //true
console.log(s.has('hello')) // true

const ws = new WeakSet();
ws.add({data: 42});
console.log(ws)

const m = new Map();
m.set('hello', 10);
m.set(s, 10);
console.log(m.get('hello')) // 10
console.log(m.get(s)) // 10

const wm = new WeakMap();
wm.set(s, {ece: 10});
console.log(wm.get(s)) // {ece: 10}

Symbol：值類型，唯一性 const s = Symbol('symbol')

Promise異步處理：

function gettime(url){
    return new Promise((resolve, reject)=>{
        if(!url){
            resolve()
        }else{
            reject()
        }
    })
}

var p = gettime();
p.then((res)=>{
    console.log(res)
}).catch((err)=>{
    console.log(err)
})

async：Promise改良版(async取代Generator函數的星号*，await取代Generator函數的yield)

async function test1(){
    return 111;
}
async function test2(){
    const res = await test1();
    console.log(res);
}
test2();

Proxy：代理(可監聽的操作)：

const target = {};
const handler = {
    get(receiver, name){
        return `hello ${name}`;
    }
};

const p = new  Proxy(target, handler)
console.log(p.world === 'hello world') // true

新增加的方法：

String：
1. String.fromCodePoint()：可以識别大于0xFFFF的字元
2. String.raw()：模闆字元處理轉義字元
3. String.prototype.codePointAt()：32 位的 UTF-16 字元的碼點
4. String.prototype.normalize()：用來将字元的不同表示方法統一為同樣的形式
5. String.prototype.includes()：是否找到了參數字元串
6. String.prototype.startsWith()：參數字元串是否在原字元串的頭部
7. String.prototype.endsWith()：參數字元串是否在原字元串的尾部
8. String.prototype.repeat()：将原字元串重複n次
9. String.prototype.padStart()：字元串補全長度的功能頭部補全（ES2017）
10. String.prototype.padEnd()：字元串補全長度的功能尾部補全（ES2017）
11. String.prototype.trimStart()：消除字元串頭部的空格（ES2019）
12. String.prototype.trimEnd()：消除尾部的空格（ES2019）
13. String.prototype.matchAll()：傳回一個正規表達式在目前字元串的所有比對
14. String.prototype.match 調用 RegExp.prototype[Symbol.match]
15. String.prototype.replace 調用 RegExp.prototype[Symbol.replace]
16. String.prototype.search 調用 RegExp.prototype[Symbol.search]
17. String.prototype.split 調用 RegExp.prototype[Symbol.split]
Number：
1. Number.isFinite()：判斷是否為有限（即不是Infinity）
2. Number.isNaN()：是否為NaN
3. Number.parseInt()：全局變量改為Number對象
4. Number.parseFloat()：全局變量改為Number對象
5. Number.isInteger()：判斷一個數值是否為整數
6. Number.EPSILON：極小的常量表示1 與大于 1 的最小浮點數之間的差
7. Number.MAX_SAFE_INTEGER：上限
8. Number.MIN_SAFE_INTEGER：下限
9. Number.isSafeInteger()：判斷是否在上下限之間
Math：
1. Math.trunc()：去除一個數的小數部分，傳回整數部分（向下取值）
2. Math.sign()：判斷一個數到底是正數、負數、還是零（+1、-1、0、-0、NaN）
3. Math.cbrt()：計算一個數的立方根
4. Math.clz32()：将參數轉為 32 位無符号整數的形式，然後傳回這個 32 位值
5. Math.imul()：傳回兩個數以 32 位帶符号整數形式相乘的結果，傳回的也是一個 32 位的帶符号整數
6. Math.fround()：傳回一個數的32位單精度浮點數形式
7. Math.hypot()：傳回所有參數的平方和的平方根
8. Math.expm1()：Math.exp(x) - 1
9. Math.log1p()：Math.log(1 + x)
10. Math.log10()：以 10 為底的x的對數
11. Math.log2()：傳回以 2 為底的x的對數
12. Math.sinh(x)：傳回x的雙曲正弦
13. Math.cosh(x)：傳回x的雙曲餘弦
14. Math.tanh(x)：傳回x的雙曲正切
15. Math.asinh(x)：傳回x的反雙曲正弦
16. Math.acosh(x)：傳回x的反雙曲餘弦
17. Math.atanh(x)：傳回x的反雙曲正切
Array：
1. Array.from()：類數組轉換為數組
2. Array.of()：将一組值，轉換為數組
3. Array.prototype.copyWithin()：在目前數組内部，将指定位置的成員複制到其他位置（會覆寫原有成員），然後傳回目前數組
4. Array.prototype.find()：找出第一個符合條件的數組成員
5. Array.prototype.findIndex()：傳回第一個符合條件的數組成員的位置
6. Array.prototype.fill()：填充一個數組
7. Array.prototype.eys()：是對鍵名的周遊
8. Array.prototype.values()：是對鍵值的周遊
9. Array.prototype.entries()：是對鍵值對的周遊
10. Array.prototype.includes()：某個數組是否包含給定的值
11. Array.prototype.flat()：将嵌套的數組“拉平”，變成一維的數組
12. Array.prototype.flatMap()：對原數組的每個成員執行一個函數
Object：
1. Object.is()：判斷兩個值是否相等（比===還有嚴格）
2. Object.assign(target, source…)：用于對象的合并，将源對象（source）的所有可枚舉屬性，複制到目标對象（target）
3. Object.getOwnPropertyDescriptors()：傳回指定對象所有自身屬性（非繼承屬性）的描述對象(ES2017)
4. Object.setPrototypeOf()：作用與__proto__相同，用來設定一個對象的prototype對象，傳回參數對象本身
5. Object.getPrototypeOf()：用于讀取一個對象的原型對象
6. Object.values()：傳回一個數組，成員是參數對象自身的（不含繼承的）所有可周遊（enumerable）屬性的鍵值
7. Object.entries()：傳回一個數組，成員是參數對象自身的（不含繼承的）所有可周遊（enumerable）屬性的鍵值對數組
8. Object.fromEntries()：是Object.entries()的逆操作，用于将一個鍵值對數組轉為對象

精簡ES6知識點精簡ES6知識點

精簡ES6知識點

目錄

ES5

ES6

新增加的文法

新增加的方法：

推薦網站：

ESMAScript編碼規範

MDN

菜鳥教程ES6

阮一峰：ES6入門教程

JavaScript中文網

前端開發部落格

我的部落格–ES6

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條