欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于前端JavaScript ES6詳情

 更新時(shí)間：2021年10月21日 16:46:37   作者：onlythinking  
這篇文章主要介紹了關(guān)于前端JavaScript中的ES6，ES6是一個(gè)泛指，含義是 5.1 版以后的 JavaScript 的下一代標(biāo)準(zhǔn)，涵蓋了 ES2015、ES2016、ES2017語法標(biāo)準(zhǔn)，ES6新特性目前只有在一些較新版本瀏覽器得到支持，老版本瀏覽器里面運(yùn)行我們需要將ES6轉(zhuǎn)換為ES5

1、簡(jiǎn)介

ES6是一個(gè)泛指，含義是 5.1 版以后的 JavaScript 的下一代標(biāo)準(zhǔn)，涵蓋了 ES2015、ES2016、ES2017語法標(biāo)準(zhǔn)。

ES6新特性目前只有在一些較新版本瀏覽器得到支持，老版本瀏覽器里面運(yùn)行我們需要將ES6轉(zhuǎn)換為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）

1.1 Babel 轉(zhuǎn)碼器

它是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器。

npm install --save-dev @babel/core

配置文件.babelrc

# 最新轉(zhuǎn)碼規(guī)則
$ npm install --save-dev @babel/preset-env

# react 轉(zhuǎn)碼規(guī)則
$ npm install --save-dev @babel/preset-react
// `presets`字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，你可以根據(jù)需要安裝。
  {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

1.2 polyfill

Babel默認(rèn)只是對(duì)JavaScript新語法進(jìn)行了轉(zhuǎn)換，為了支持新API還需要使用polyfill為當(dāng)前環(huán)境提供一個(gè)墊片（也就是以前的版本沒有，打個(gè)補(bǔ)丁）。

比如：core-js和regenerator-runtime

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

2、let 和 const

2.1 let

就作用域來說，ES5 只有全局作用域和函數(shù)作用域。使用let聲明的變量只在所在的代碼塊內(nèi)有效。

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

看下面的例子，我們預(yù)期應(yīng)該輸出1，因?yàn)槿种挥幸粋€(gè)變量i，所以for執(zhí)行完后，i=5，函數(shù)打印的值始終是5。

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

修復(fù)，將每一次迭代的i變量使用local存儲(chǔ)，并使用閉包將作用域封閉。

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

使用let聲明變量i也可以達(dá)到同樣的效果。

2.2 const

const用于聲明一個(gè)只讀的常量。必須初始化，一旦賦值后不能修改。const聲明的變量同樣具有塊作用域。

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

const聲明對(duì)象

const obj = {};
// 為 obj 添加一個(gè)屬性，可以成功
obj.name = 'hello';

// 將 obj 指向另一個(gè)對(duì)象，就會(huì)報(bào)錯(cuò)
obj = {}; // TypeError: "obj" is read-only

3、解構(gòu)

解構(gòu)字面理解是分解結(jié)構(gòu)，即會(huì)打破原有結(jié)構(gòu)。

3.1 對(duì)象解構(gòu)

基本用法：

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

設(shè)置默認(rèn)值

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

rest參數(shù)（形式為...變量名）可以從一個(gè)對(duì)象中選擇任意數(shù)量的元素，也可以獲取剩余元素組成的對(duì)象。

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

3.2 數(shù)組解構(gòu)

rest參數(shù)（形式為...變量名）從數(shù)組中選擇任意數(shù)量的元素，也可以獲取剩余元素組成的一個(gè)數(shù)組。

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

數(shù)組解構(gòu)中忽略某些成員。

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

3.3 函數(shù)參數(shù)解構(gòu)

數(shù)組參數(shù)

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

對(duì)象參數(shù)

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

3.4 常見場(chǎng)景

在不使用第三個(gè)變量前提下，交換變量。

let x = 1;
let y = 2;

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

提取JSON數(shù)據(jù)

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

遍歷Map結(jié)構(gòu)

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

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

4、擴(kuò)展

4.1 字符串?dāng)U展

模版字符串，這個(gè)很有用。使用反引號(hào)（`）標(biāo)識(shí)。它可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

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

4.2 函數(shù)擴(kuò)展

ES6 允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值，即直接寫在參數(shù)定義的后面。

一旦設(shè)置了參數(shù)的默認(rèn)值，函數(shù)進(jìn)行聲明初始化時(shí)，參數(shù)會(huì)形成一個(gè)單獨(dú)的作用域（context）。等到初始化結(jié)束，這個(gè)作用域就會(huì)消失。這種語法行為，在不設(shè)置參數(shù)默認(rèn)值時(shí)，是不會(huì)出現(xiàn)的。

function add(x, y = 1) {
 return x + y
}

替代apply()寫法

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

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

4.3 數(shù)組擴(kuò)展

合并數(shù)組

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

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

數(shù)組新API

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

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

4.4 對(duì)象擴(kuò)展

對(duì)象屬性，方法簡(jiǎn)寫

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

擴(kuò)展屬性

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

// 當(dāng)有重復(fù)屬性時(shí)，注意順序問題。
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}

屬性的描述對(duì)象

對(duì)象的每個(gè)屬性都有一個(gè)描述對(duì)象（Descriptor），用來控制該屬性的行為。

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

屬性的遍歷

  • for...in循環(huán)：只遍歷對(duì)象自身的和繼承的可枚舉的屬性。
  • Object.keys() ：返回對(duì)象自身的所有可枚舉的屬性的鍵名。
  • JSON.stringify() ：只串行化對(duì)象自身的可枚舉的屬性。
  • Object.assign() ： 忽略enumerable為false的屬性，只拷貝對(duì)象自身的可枚舉的屬性。
const point = {x: 1, y: 2}
for(let key in point){
  console.log(key)
}

對(duì)象新增的一些方法：Object.assign()

Object.assign()方法實(shí)行的是淺拷貝，而不是深拷貝。也就是說，如果源對(duì)象某個(gè)屬性的值是對(duì)象，那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用。常見用途：

克隆對(duì)象

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

合并對(duì)象

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

指定默認(rèn)值

const DEFAULT_CONFIG = {
  debug: true,
};

function process(options) {
  options = Object.assign({}, DEFAULT_CONFIG, options);
  console.log(options);
  // ...
}

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

指數(shù)運(yùn)算符

2 ** 10 // 1024
2 ** 3 ** 2 // 512 相當(dāng)于 2 ** (3 ** 2)

let a=10; a **= 3; // 相當(dāng)于 a = a * a * a

鏈判斷運(yùn)算符

obj?.prop判斷對(duì)象屬性是否存在，func?.(...args) 函數(shù)或?qū)ο蠓椒ㄊ欠翊嬖凇?/p> 

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

空判斷運(yùn)算符

JavaScript里我們用||運(yùn)算符指定默認(rèn)值。 當(dāng)我們希望左邊是null和undefined時(shí)才觸發(fā)默認(rèn)值時(shí)，使用??。

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

5、for…of

因?yàn)?code>for...in循環(huán)主要是為遍歷對(duì)象而設(shè)計(jì)的，因?yàn)閿?shù)組的鍵名是數(shù)字，所以遍歷數(shù)組時(shí)候它返回的是數(shù)字，很明顯這不能滿足開發(fā)需求，使用for...of可以解決這個(gè)問題。

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
}

6、小結(jié)

到此這篇關(guān)于關(guān)于前端JavaScript ES6詳情的文章就介紹到這了,更多相關(guān)JavaScript ES6內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論