闷骚的老熟女人15p,人妻丰满熟妇aⅴ无码,郑州职业技术学院

0.前言

timg.jpeg

ECMAScript(以下簡稱ES)早已廣泛應用在我們的工作當中，所以了解了解還是有必要的，我在這里記錄一下es7,和es8的一些用法。

1.簡介

ES7 是 ECMA-262 標準第 7 版的簡稱，從 ES6 開始每年發布一個版本，以年份作為名稱，因此又稱 ECMAScript 2016，簡稱 ES2016。

ES8 是 ECMA-262 標準第 8 版的簡稱，從 ES6 開始每年發布一個版本，以年份作為名稱，因此又稱 ECMAScript 2017，簡稱 ES2017。

ES7只有2個特性:

includes()
指數操作符**

ES8只有2個特性:

Object.values()
Object.entries()
padStart()
padEnd()
Object.getOwnPropertyDescriptors()
Trailing commas in function (函數參數列表結尾允許逗號)
Async/Await

2.代碼

Array.prototype.includes

Array.prototype.includes 就是替代indexOf的方法，用來檢查數組中是否存在值

js代碼

let arr = ['react', 'angular', 'vue']
if (arr.indexOf('react') !== -1) {
  console.log('Can use React')
}

ES7代碼

let str = 'React Quickly'

// Correct
if (str.toLowerCase().includes('react')) {  // true
  console.log('Found "react"')  
}

除了增強了可讀性語義化，實際上給開發者返回布爾值，而不是匹配的位置。includes也可以在NaN(非數字)使用。最后，includes第二可選參數fromIndex，這對于優化是有好處的，因為它允許從特定位置開始尋找匹配。

例子:

console.log([1, 2, 3].includes(2)) // === true)
console.log([1, 2, 3].includes(4)) // === false)
console.log([1, 2, NaN].includes(NaN)) // === true)
console.log([1, 2, -0].includes(+0)) // === true)
console.log([1, 2, +0].includes(-0)) // === true)
console.log(['a', 'b', 'c'].includes('a')) // === true)
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)

指數操作符

使用自定義遞歸和Math.pow()進行指數運算

js代碼

function calculateExponent(base, exponent){
  if (exponent === 1){
      return base;
  } else {
      return base * calculateExponent(base, exponent - 1);
  }
}
console.log(calculateExponent(7, 3)); // 輸出343
console.log(Math.pow(7, 3)); // 輸出343

ES7代碼

let a = 7 ** 3
console.log(a);  // 輸出343

Object.values()

使用Object.keys()遍歷對象的屬性值，需要通過屬性名key去獲取屬性值

js代碼

let obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach((key) =>{
    console.log(obj[key]); // 輸出1, 2, 3
});

ES8

使用Object.values()遍歷對象的屬性值，無需使用屬性名：

let obj = {a: 1, b: 2, c: 3}
Object.values(obj).forEach(() =>{
    console.log(obj); // 輸出1, 2, 3
});

Object.entries()

遍歷對象的屬性名和屬性值：

js代碼

let obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach((key) => {
      console.log(key + ": " + obj[key]); // 輸出a: 1, b: 2, c: 3
})

ES8

let obj = {a: 1, b: 2, c: 3};
Object.entries(obj).forEach(([key, value]) =>{
      console.log(key + ": " + value); // 輸出a: 1, b: 2, c: 3
})

字符填充函數padStart 和 padEnd

用于在字符串開頭或結尾添加填充字符串

String.prototype.padStart( maxLength [ , fillString ] )
String.prototype.padEnd( maxLength [ , fillString ] )

其中第一個參數是目標長度；第二個參數是填充字符串，默認是空格。示例：

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'

'es8'.padEnd(2);          // 'es8'
'es8'.padEnd(5);          // 'es8  '
'es8'.padEnd(6, 'woof');  // 'es8woo'
'es8'.padEnd(14, 'wow');  // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');     // 'es86666'

典型的應用場景
使用 padStart 進行時間格式化。

'8:00'.padStart(5, '0');  // '08:00'
'18:00'.padStart(5, '0');  // '18:00'
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

Object.getOwnPropertyDescriptor()

靜態方法 Object.getOwnPropertyDescriptors 用于獲取對象的屬性描述符，該屬性必須是對象自己定義而不是繼承自原型鏈。結果中包含的鍵可能有 configurable、enumerable、writable、get、set 以及 value。

const obj = { es8: 'hello es8' };
Object.getOwnPropertyDescriptor(obj, 'es8');
// {
//   configurable: true,
//   enumerable: true,
//   value: "hello es8"
//   writable: true
// }

Trailing commas in function (函數參數列表結尾允許逗號)

function es8(var1, var2, var3,) {
  // do something
}
es8(10, 20, 30,);

請問上述例子函數內部的 arguments.length 是 3 還是 4 ？哈哈

Async/Await

Async/Await應該是目前最簡單的異步方案

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();
        }, time);
    })
};

var start = async function () {
    // 在這里使用起來就像同步代碼那樣直觀
    console.log('start');
    await sleep(3000);
    console.log('end');
};

start(); // 控制臺先輸出start，稍等3秒后，輸出了end。

基本規則

async 表示這是一個async函數，await只能用在這個函數里面。

await 表示在這里等待promise返回結果了，再繼續執行。

await 后面跟著的應該是一個promise對象

獲得返回值

await等待的雖然是promise對象，但不必寫.then(..)，直接可以得到返回值。

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 返回 ‘ok’
            resolve('ok');
        }, time);
    })
};

var start = async function () {
    let result = await sleep(3000);
    console.log(result); // 收到 ‘ok’
};

捕捉錯誤

既然.then(..)不用寫了，那么.catch(..)也不用寫，可以直接用標準的try catch語法捕捉錯誤。

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 模擬出錯了，返回 ‘error’
            reject('error');
        }, time);
    })
};

var start = async function () {
    try {
        console.log('start');
        await sleep(3000); // 這里得到了一個返回錯誤
        
        // 所以以下代碼不會被執行了
        console.log('end');
    } catch (err) {
        console.log(err); // 這里捕捉到錯誤 `error`
    }
};

Async/Await是寫異步代碼的新方式，以前的方法有回調函數和Promise。相比于Promise，它更加簡潔，并且處理錯誤、條件語句、中間值，使用更加方便。

3.結束語

此處省略5萬字。。。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

ES7和ES8

ES7和ES8

0.前言

1.簡介

2.代碼

Array.prototype.includes

js代碼

ES7代碼

例子:

指數操作符

js代碼

ES7代碼

Object.values()

js代碼

ES8

Object.entries()

js代碼

ES8

字符填充函數padStart 和 padEnd

Object.getOwnPropertyDescriptor()

Trailing commas in function (函數參數列表結尾允許逗號)

Async/Await

基本規則

獲得返回值

捕捉錯誤

3.結束語

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

ES7和ES8

0.前言

1.簡介

2.代碼

Array.prototype.includes

js代碼

ES7代碼

例子:

指數操作符

js代碼

ES7代碼

Object.values()

js代碼

ES8

Object.entries()

js代碼

ES8

字符填充函數padStart 和 padEnd

Object.getOwnPropertyDescriptor()

Trailing commas in function (函數參數列表結尾允許逗號)

Async/Await

基本規則

獲得返回值

捕捉錯誤

3.結束語

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频