前端-JavaScript新特性（ES6）

程式設計碼農發表於2021-10-22
前端JavaScript

簡介

ES6是一個泛指，含義是 5.1 版以後的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017語法標準。

ES6新特性目前只有在一些較新版本瀏覽器得到支援，老版本瀏覽器裡面執行我們需要將ES6轉換為ES5。

Chrome：51 版起便可以支援 97% 的 ES6 新特性。

Firefox：53 版起便可以支援 97% 的 ES6 新特性。

Safari：10 版起便可以支援 99% 的 ES6 新特性。

IE：Edge 15可以支援 96% 的 ES6 新特性。Edge 14 可以支援 93% 的 ES6 新特性。（IE7~11 基本不支援 ES6）

Babel 轉碼器

它是一個廣泛使用的 ES6 轉碼器。

npm install --save-dev @babel/core

配置檔案.babelrc

# 最新轉碼規則
$ npm install --save-dev @babel/preset-env

# react 轉碼規則
$ npm install --save-dev @babel/preset-react
// `presets`欄位設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝。
  {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

polyfill

Babel預設只是對JavaScript新語法進行了轉換，為了支援新API還需要使用polyfill為當前環境提供一個墊片（也就是以前的版本沒有，打個補丁）。

比如：core-js和regenerator-runtime

$ npm install --save-dev core-js regenerator-runtime
import 'core-js';
import 'regenerator-runtime/runtime';

let 和 const

let

就作用域來說，ES5 只有全域性作用域和函式作用域。使用let宣告的變數只在所在的程式碼塊內有效。

if(true){ let a = 1; var b = 2 }
console.log(a)// ReferenceError: a is not defined
console.log(b)// 2

看下面的例子，我們預期應該輸出1，因為全域性只有一個變數i，所以for執行完後，i=5，函式列印的值始終是5。

var funcs = [];
for (var i = 0; i < 5; i++) {
  funcs.push(function () {
    console.log(i);
  });
}
funcs[1](); // 5

修復，將每一次迭代的i變數使用local儲存，並使用閉包將作用域封閉。

var funcs = [];
for (var i = 0; i < 5; i++) { 
    (function () {
            var local = i
            funcs.push(function () {
                console.log(local);
            });
        }
    )()
}
funcs[1](); // 1

使用let宣告變數i也可以達到同樣的效果。

const

const用於宣告一個只讀的常量。必須初始化，一旦賦值後不能修改。const宣告的變數同樣具有塊作用域。

if (true) {
 const PI = 3.141515926;
 PI = 66666 // TypeError: Assignment to constant variable.
}
console.log(PI) // ReferenceError: PI is not defined

const宣告物件

const obj = {};
// 為 obj 新增一個屬性，可以成功
obj.name = 'hello';

// 將 obj 指向另一個物件，就會報錯
obj = {}; // TypeError: "obj" is read-only

解構

解構字面理解是分解結構，即會打破原有結構。

物件解構

基本用法：

let { name, age } = { name: "hello", age: 12 };
console.log(name, age) // hello 12

設定預設值

let { name = 'hi', age = 12 } = { name : 'hello' };
console.log(name, age) // hello 12

rest引數（形式為...變數名）可以從一個物件中選擇任意數量的元素，也可以獲取剩餘元素組成的物件。

let { name, ...remaining } = { name: "hello", age: 12, gender: '男' };
console.log(name, remaining) // hello {age: 12, gender: '男'}

陣列解構

rest引數（形式為...變數名）從陣列中選擇任意數量的元素，也可以獲取剩餘元素組成的一個陣列。

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

陣列解構中忽略某些成員。

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

函式引數解構

陣列引數

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

物件引數

function add({x, y} = { x: 0, y: 0 }) {
  return x + y;
}
add({x:1 ,y : 2});

常見場景

在不使用第三個變數前提下，交換變數。

let x = 1;
let y = 2;

[x, y] = [y, x];

提取JSON資料。

let json = {
  code: 0,
  data: {name: 'hi'}
};
let { code, data: user } = json;
console.log(code, user); // 0 {name: 'hi'}

遍歷Map結構。

const map = new Map();
map.set('name', 'hello');
map.set('age', 12);

for (let [key, value] of map) {
  console.log(key + " is " + value);
}

擴充套件

字串擴充套件

模版字串，這個很有用。使用反引號（`）標識。它可以當作普通字串使用，也可以用來定義多行字串，或者在字串中嵌入變數。

`User ${user.name} is login...`);

函式擴充套件

ES6 允許為函式的引數設定預設值，即直接寫在引數定義的後面。

一旦設定了引數的預設值，函式進行宣告初始化時，引數會形成一個單獨的作用域（context）。等到初始化結束，這個作用域就會消失。這種語法行為，在不設定引數預設值時，是不會出現的。
function add(x, y = 1) {
    return x + y
}

替代apply()寫法。

// ES5 的寫法
Math.max.apply(null, [1, 3, 2])

// ES6 的寫法
Math.max(...[1, 3, 2])

陣列擴充套件

合併陣列

// ES5 的寫法
var list = [1,2]
list = list.concat([3])

// ES6 的寫法
var list = [1,2]
list = [...list, 3]

陣列新API

Array.from()，Array.of()，find() 和 findIndex()等，參考MDN

https://developer.mozilla.org...

物件擴充套件

物件屬性，方法簡寫。

data = [1,2]
const resp = {data}; // 屬性簡寫，等同於 {data: data}
const obj = {
  add(x, y) {        // 方法簡寫，等同於 add: function(x, y){...}
    return x + y;
  }
};

擴充套件屬性。

const point = {x: 1, y: 2}
const pointD = {...point, z: 3}
console.log(pointD) // {x: 1, y: 2, z: 3}

// 當有重複屬性時，注意順序問題。
const point = {x: 1, y: 2}
const pointD = {...point, x: 4, z: 3}
console.log(pointD) // {x: 4, y: 2, z: 3}

const point = {x: 1, y: 2}
const pointD = {x: 4, z: 3, ...point}
console.log(pointD) // {x: 1, z: 3, y: 2}

屬性的描述物件

物件的每個屬性都有一個描述物件（Descriptor），用來控制該屬性的行為。

const point = {x: 1, y: 2}
Object.getOwnPropertyDescriptor(point, 'x') 
/**
{    configurable: true
     enumerable: true // 表示可列舉
    value: 1
    writable: true   // 表示可寫
 }
**/

屬性的遍歷

  • for...in迴圈：只遍歷物件自身的和繼承的可列舉的屬性。
  • Object.keys()：返回物件自身的所有可列舉的屬性的鍵名。
  • JSON.stringify()：只序列化物件自身的可列舉的屬性。
  • Object.assign()： 忽略enumerable為false的屬性，只拷貝物件自身的可列舉的屬性。
const point = {x: 1, y: 2}
for(let key in point){
  console.log(key)
}

物件新增的一些方法：Object.assign()

Object.assign()方法實行的是淺拷貝，而不是深拷貝。也就是說，如果源物件某個屬性的值是物件，那麼目標物件拷貝得到的是這個物件的引用。常見用途：

克隆物件

function clone(origin) {
  return Object.assign({}, origin);
}

合併物件

const merge = (target, ...sources) => Object.assign(target, ...sources);

指定預設值

const DEFAULT_CONFIG = {
  debug: true,
};

function process(options) {
  options = Object.assign({}, DEFAULT_CONFIG, options);
  console.log(options);
  // ...
}
https://developer.mozilla.org...

運算子擴充套件

指數運算子

2 ** 10 // 1024
2 ** 3 ** 2 // 512 相當於 2 ** (3 ** 2)

let a=10; a **= 3; // 相當於 a = a * a * a

鏈判斷運算子

obj?.prop判斷物件屬性是否存在，func?.(...args) 函式或物件方法是否存在。

const obj = {name: 'job', say(){console.log('hello')}}
obj?.name  // 等於 obj == null ? undefined : obj.name
obj?.say() // 等於 obj == null ? undefined : obj.say()

空判斷運算子

JavaScript裡我們用||運算子指定預設值。 當我們希望左邊是null和undefined時才觸發預設值時，使用??。

const obj = {name: ''}
obj.name || 'hello' // 'hello'
obj.name ?? 'hello' // ''

for...of

因為for...in迴圈主要是為遍歷物件而設計的，因為陣列的鍵名是數字，所以遍歷陣列時候它返回的是數字，很明顯這不能滿足開發需求，使用for...of可以解決這個問題。

const list = ['a', 'b', 'c']
for (let v in list){
  console.log(v) // 0,1,2
}
for (let v of list){
  console.log(v) // a,b,c
}

小結

本文要點回顧，歡迎留言交流。

  • ES6介紹。
  • let和const變數。
  • 物件陣列解構。
  • 一些新的擴充套件。

相關文章