es6常用api總結(jié)(上)

  • 變量

    • ES6新增let變量，用來聲明變量，用法類似于var，只是聲明的變量只在let命令所在的代碼塊內(nèi)有效

    • 例1：

    • for(var j = 0; j < 3 j++) {} console.log(j); // 3
for(let i = 0; i < 3 i++) {} console.log(i); // ReferenceError: i is not defined

    • 例2：

    • var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

    • var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

    • const也是用于聲明變量，表明聲明一個(gè)常量，一旦聲明后，值不能被修改，也就意味著一旦聲明就必須進(jìn)行初始化

    • 例：

    • const str = 123;
str = 456; // TypeError: Assignment to constant variable.

    • 以上兩種聲明方式不存在變量提升，也就是只能在聲明之后使用，一旦在聲明之前使用則會(huì)報(bào)錯(cuò)，var則存在聲明提升

    • 例：

    • console.log(a); // undefined;
var a = 1;
console.log(b); // 報(bào)錯(cuò)
let b = 1;

    • 在一個(gè)塊級(jí)作用域內(nèi)，同一個(gè)變量不能被重復(fù)聲明

    • let a = 1;
let a = 2; // 報(bào)錯(cuò)

    • 塊級(jí)作用域

      • 類似于function，在塊級(jí)作用域外不能訪問作用域內(nèi)的變量

      • 例：

      • {
    let a = 1;
}

  • 變量解構(gòu)與賦值

    • 準(zhǔn)確來說是模式匹配

      • 數(shù)組的解構(gòu)

      • 例1:

      • let [a, b, c] = [1, 2, 3];
// a 1
// b 2
// c 3

      • 以上是按照順序進(jìn)行匹配賦值

      • 例2：

      • let [a, , b] = [1, 2];
// a 1
// b undefined

      • 例3：設(shè)置默認(rèn)值

      • let [a = 3, , b = 4] = [1, 2];
// a 1
// b 4

      • 對象的解構(gòu)

      • 例1：

      • let {a, b} = {a: 1, b: 2}
// a 1
// b 2

      • 例2：

      • let {c, b} = {a: 1, b: 2}
// c undefined
// b 2

      • 例3：設(shè)置默認(rèn)值

      • let {a = 1, b = 2} = {a: 3}
// a 3
// b 2

      • 解構(gòu)嵌套

      • 例：

      • let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

  • 字符串?dāng)U展

    • 模板字符串

      • 在es5及之前，想要將幾個(gè)字符串組合為一個(gè)，并且加上參數(shù)，必須通過+來拼接

      • 例：

      • let h = '標(biāo)題';
let p = '段落';
let result = '<div>'
+ '<h1>' + h + '<h1>'
+ '<p>' + p + '</p>'
+ '</div>';

      • 在es6中新增反引號(hào)來標(biāo)識(shí)的模板字符串來簡化上面這一過程

      • 例：

      • let h = '標(biāo)題';
let p = '段落';
let result = `<div>
    <h1>${h}</h1>
    <p>${p}</p>
div`;

      • 上面的${}中可以寫任何表達(dá)式

      • 例：

      • let h = '標(biāo)題';
let p = '段落';
let result = `<div>
    <h1>${h ? h : '標(biāo)題不存在'}</h1>
    <p>${p}</p>
div`;

      • 模板字符串也可以用來執(zhí)行函數(shù)

      • 例：

      • alert`1`;

    • 以下方法用來表示一個(gè)字符串是否在兩一個(gè)字符串中，支持兩個(gè)參數(shù)

    • includes 第一個(gè)參數(shù)表示需要查找的字符串，第二個(gè)參數(shù)表示查找的起始下標(biāo)位置

    • let a = 'abc';
let result1 = a.includes('a'); // true
let result2 = a.includes('d'); // false
let result3 = a.includes('a', 1); // false

    • startsWith 第一個(gè)參數(shù)表示需要查找的字符串，第二個(gè)參數(shù)表示查找的起始下標(biāo)位置

    • let a = 'abc';
let result1 = a.startsWith('a'); // true
let result2 = a.startsWith('b'); // false
let result3 = a.startsWith('b', 1); // true

    • endsWith 第一個(gè)參數(shù)表示需要查找的字符串，第二個(gè)參數(shù)表示查找的字符串從前往后的個(gè)數(shù)，查前多少個(gè)的意思，不按照下標(biāo)來計(jì)算

    • let a = 'abc';
let result1 = a.endsWith('c'); // true
let result2 = a.endsWith('b'); // false
let result3 = a.endsWith('b', 2); // true

  • 數(shù)值的方法

    • Number.isInteger()

    • 判斷是否為一個(gè)整數(shù)

    • 例：

    • Number.isInteger(2); // true
Number.isInteger(2.1); // false

    • 指數(shù)運(yùn)算符**,指數(shù)運(yùn)算符從右往左計(jì)算

    • 例：

    • let result = 2 ** 3; // 8
let result = 2 ** 3 ** 2; // 512  相當(dāng)于2 ** (3 ** 2)

  • 函數(shù)的擴(kuò)展

    • 為參數(shù)加默認(rèn)值

    • 例：es5中,為了保證程序的正常運(yùn)行，我們一般會(huì)像下面這樣寫

    • function fn(a, b) {
  a = a || 123;
  b = b || 456;
  console.log(a, b); // 1 456
}
fn(1, '');

    • es6中

    • 例：

    • function fn(a = 123, b = 456) {
  console.log(a, b); // 1 456
}
fn(1, '');

    • 配合解構(gòu)

    • function fn({a = 123, b = 456}) {
  console.log(a, b); // 1 456
}
fn({a: 1})

    • 箭頭函數(shù)

    • 例：

    • let fn1 = id => {
  console.log(id); // 1
}
fn1(1);
// 等同于
let fn2 = function(id) {
  console.log(id); // 2
}
fn2(2);

// 需要返回值時(shí)
let fn3 = id => id;
// 等同于
let fn4 = function(id) {
  return id;
}

// 箭頭函數(shù)會(huì)把箭頭后面的{}解析為代碼塊，如果需要返回一個(gè)對象時(shí),需要用小括號(hào)包裹
let fn5 = (id1, id2) => ({a: id1 ** 2, b: id2 ** 3});

    • rest參數(shù)

    • 例：

    • // 當(dāng)參數(shù)不固定時(shí)，想要獲取一個(gè)參數(shù)的集合
// es5
function fn1() {
  console.log(arguments) // [2, 3, 4] 是一個(gè)偽數(shù)組
}
fn1(2, 3, 4);
// es6
function fn2(...arg) {
  console.log(arg) // [2, 3, 4] 真實(shí)的數(shù)組
}
fn2(2, 3, 4);

  • 擴(kuò)展運(yùn)算符

    • 數(shù)組的擴(kuò)展

    • 例：

    • 擴(kuò)展到的地方必須有一個(gè)宿主，比如對象或者數(shù)組

    • let [...a] = [1, 2, 3];
console.log(a); // [1, 2, 3]
let {...b} = [1, 2, 3];
console.log(b); {0: 1, 1: 2, 2: 3}

    • 例：

    • let a = [1, 2, 3];
let b = [...a];
console.log(b); // [1, 2, 3];

    • 合并數(shù)組

    • let a = [1, 2, 3];
let b = [4, 5, 6];
let c = [...a, ...b];
console.log(c); // [1, 2, 3, 4, 5, 6]

    • 只能進(jìn)行淺拷貝

    • let a = [
  {
      name: 'li'
  }
]
let b = [...a];
console.log(a[0] === b[0]); // true;
b[0].name = 'wang';
console.log(a[0] === b[0]); // true;
// 我們發(fā)現(xiàn)b拷貝于a，但是當(dāng)b里面子對象的值發(fā)生改變后，依然影響到了a，所以慎用

    • 與解構(gòu)混用

      • 當(dāng)使用擴(kuò)展運(yùn)算符時(shí)，把擴(kuò)展運(yùn)算符的表達(dá)式放在最后一位，否則會(huì)報(bào)出錯(cuò)誤
    • let a = [1, 2, 3, 4, 5];
let [b, ...c] = a;
console.log(b, c); // 1, [2, 3, 4, 5]

    • 字符串?dāng)U展

    • let a = 'hello';
let [...b] = a;
console.log(b); // ['h', 'e', 'l', 'l', 'o'];

    • Array.form()方法

    • 用于將類數(shù)組的對象轉(zhuǎn)為真實(shí)的數(shù)組，比如dom

    • let domList = document.getElementsByTagName('div');
let result = Array.from(domList);
console.log(resule, result instanceof Array); // [div, div, div] true

    • Array.of()

    • 用于將一組值轉(zhuǎn)為數(shù)組

    • let a = '123';
let b = '456';
let result = Array.of(a, b);
console.log(result); // ['123', '456']

    • Array.fill()

    • 用于填充一個(gè)數(shù)組，常常用于數(shù)組的初始化，設(shè)置默認(rèn)的初始值

    • let a = [1, 2, 3].fill(0);
console.log(a); // [0, 0, 0]

    • 還可以接受第二個(gè)和第三個(gè)參數(shù), 分別代表填充的起始位置和結(jié)束位置，不會(huì)填充結(jié)束位置

    • let a = [1, 2, 3, 4, 5].fill({name: 'li'}, 2, 3);
console.log(a); // [1, 2, {name: 'li'}, 4, 5]

    • 數(shù)組實(shí)例的includes方法

    • 相當(dāng)于indexOf(),用于檢測一個(gè)元素是否存在于一個(gè)數(shù)組中，返回布爾值，和indexOf不同的是，它可以檢測到NaN的是否存在，而在es5中NaN和任何值都是不相等的

    • let a = [1, 2, 3, NaN];
console.log(a.includes(2)); // true
console.log(a.includes(NaN)); // true
console.log(a.includes(5)); // false

    • 也可以接受兩個(gè)參數(shù)，第二個(gè)參數(shù)代表檢查的起始位置，默認(rèn)從0開始

    • let a = [1, 2, 3, NaN];
console.log(a.includes(2, 0)); // true
console.log(a.includes(2, 2)); // false
console.log(a.includes(NaN， -1)); // true 從倒數(shù)的位置查，如果負(fù)值絕對值大于數(shù)組長度，則從0開始

參考：http://es6.ruanyifeng.com/

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

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

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