BCSP-玄子前端開發(fā)之JavaScript+jQuery入門CH07_ECMAScript 6基礎(chǔ)

4.7 ECMAScript 6

4.7.1 ECMAScript 6 簡介

ECMAScript 6.0（簡稱 ES6）

• 是JavaScript語言的下一代標(biāo)準(zhǔn)
• 正式發(fā)布于2015年6月

目標(biāo)

• 使JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言

版本升級

• ECMAScript 2015
• ECMAScript 2016
• ECMAScript 2017

ECMAScript和JavaScript 的關(guān)系

• 前者是后者的規(guī)格，后者是前者的一種實現(xiàn)

4.7.2 ES6與ES2015的關(guān)系

ES6與ES2015的關(guān)系

• ES6

  • 是5.1版以后的JavaScript的下一代標(biāo)準(zhǔn)

  • 涵蓋了ES2015、ES2016、ES2017等等

• ES2015

  • 是ES6第一個版本的正式名稱
  • 特指該年發(fā)布的正式版本的語言標(biāo)準(zhǔn)

4.7.3 各大瀏覽器對ES6的支持情況

各大瀏覽器支持情況及開始時間

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-OxGzd4ga-1682307261810)(./assets/image-20230423215938883.png)]

目前，各大主流瀏覽器穩(wěn)定版本對于ES6的絕大部分屬性及方法均已支持

4.7.4 Babel轉(zhuǎn)碼器

可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行

// 轉(zhuǎn)碼前
input.map(item => item + 1);

// 轉(zhuǎn)碼后
input.map(function (item) {
  return item + 1;
});

4.7.5 配置babel轉(zhuǎn)ES6為ES5步驟

步驟1：初始化ES6項目，執(zhí)行

npm init      //初始化package.json

步驟2：在與package.json同一目錄下編寫配置文件.babelrc

{      "presets": [],   "plugins": []    }

步驟3：安裝babel轉(zhuǎn)碼規(guī)則

// ES2015轉(zhuǎn)碼規(guī)則
npm install --save-dev babel-preset-es2015
// ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則（共有4個階段），選裝一個
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

步驟4：安裝好的規(guī)則加入到 .babelrc

{  
"presets": [
    "es2015",
    "stage-0"
  ],
  "plugins": []
}

步驟5：安裝babel-cli工具，用于命令行轉(zhuǎn)碼

npm install --global babel-cli
// 轉(zhuǎn)碼輸出文件
example.js
[1,2,3].map(x => x*x);
// 執(zhí)行轉(zhuǎn)碼
babel example.js -o compile.js --presets es2015
轉(zhuǎn)碼后的compiled.js文件：
"use strict";
[1, 2, 3].map(function (x) {
    return x * x;
});

步驟6：實時監(jiān)聽編譯文件

To compile a file every time that you change it, use the --watch or -w option:
$ babel example.js --watch -o compiled.js --presets es2015

除了自行配置babel將ES6代碼轉(zhuǎn)為ES5代碼以外，還可以使用babel在線轉(zhuǎn)碼工具

babel轉(zhuǎn)碼: https://babeljs.io/repl

4.8 ES6新增命令

let命令

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

const命令

• 聲明一個只讀的常量
• 一旦聲明，常量的值就不能改變

4.8.1 let命令-基本使用

使用let命令聲明變量

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

4.8.2 let命令-不存在變量提升

let命令所聲明的變量一定要在聲明后使用，否則報錯

//使用var的情況
console.log(a);  //undefined
var a = 1;

//使用let的情況
console.log(b);  //ReferenceError: b is not defined
let b = 2;

4.8.3 let命令-暫時性死區(qū)

在代碼塊內(nèi)，使用let命令聲明變量之前，該變量都是不可用的，在語法上，稱為“暫時性死區(qū)”

if (true) {
    // 暫時性死區(qū)開始
    tmp = 'abc'; // ReferenceError
    console.log(tmp); // ReferenceError
    let tmp; // TDZ結(jié)束
    console.log(tmp); // undefined
    tmp = 123;
    console.log(tmp); // 123
}

4.8.4 let命令-不允許重復(fù)聲明

let命令不允許在相同作用域內(nèi)，重復(fù)聲明同一個變量

let a = 1;
let a = 2;
console.log(a);  // Identifier 'a' has already been declared
var b = 3;
var b = 4;
console.log(b);  // 4

4.8.5 let命令-塊級作用域

在ES6中，為什么新增了塊級作用域？

• 內(nèi)層變量可能會覆蓋外層變量
• 用來計數(shù)的循環(huán)變量泄露為全局變量

function f1() {
    let n = 5;
    if (true) {
        let n = 10;
    }
    console.log(n); // 5
}
f1();

4.8.6 const命令-基本用法

使用const命令定義變量

const PI = 3.1415;
console.log(PI); // 3.1415
PI = 3;  // TypeError: Assignment to constant variable

4.8.7 const命令其他特性

• 只在聲明所在的塊級作用域內(nèi)有效
• const命令聲明的常量不提升
• 存在暫時性死區(qū)，只能在聲明的位置后面使用
• 聲明的常量，也與let一樣不可重復(fù)聲明

4.9 變量的解構(gòu)賦值

解構(gòu)賦值是對賦值運算符的擴(kuò)展，針對數(shù)組或者對象先進(jìn)行模式匹配，然后對其中的變量進(jìn)行賦值

• 數(shù)組的解構(gòu)賦值
• 對象的解構(gòu)賦值
• 字符串的解構(gòu)賦值
• 數(shù)值和布爾值的解構(gòu)賦值
• 函數(shù)參數(shù)的解構(gòu)賦值

4.9.1 數(shù)組的解構(gòu)賦值-基本用法

在ES5中，為變量賦值，只能直接指定值

let a = 1;
let b = 2;
let c = 3;

在ES6中，可以從數(shù)組中提取值，按照對應(yīng)位置，對變量賦值

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

4.9.2 數(shù)組的解構(gòu)賦值-其他特性

//可嵌套
let [a, [[b], c]] = [1, [[2], 3]];
console.log(a); //1
console.log(b); //2
console.log(c); //3
//可忽略
let [a, , b] = [1, 2, 3];
console.log(a); //1
console.log(b); //3

//不完全解構(gòu)
let [a, b] = [1, 2, 3]; 
console.log(a); //1
console.log(b); //2
let [a, [b], c] = [1, [2, 3], 4];
console.log(a); //1
console.log(b); //2
console.log(c); //4

//剩余運算符
let [a, ...b] = [1, 2, 3];
console.log(a); //1
console.log(b); //[2, 3]
//解構(gòu)默認(rèn)值
let [x, y = 'b'] = ['a']; 
console.log(x); //'a'
console.log(y); //'b'

4.9.3 對象的解構(gòu)賦值-基本用法

數(shù)組的元素是按次序排列的，變量的取值由它的位置決定，對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值

let {bar,foo}={foo:"ECMAScript 6.0",bar:"hello"};
console.log(bar); //hello
console.log(foo); //ECMAScript 6.0
let {abc} = {foo:"ECMAScript 6.0",bar:"hello"};
console.log(abc); //undefined

4.9.4 對象的解構(gòu)賦值-其他特性

//可嵌套
let obj = {p: ['hello', {y: 'world'}] }; 
let {p: [x, { y }] } = obj;
console.log(x); //hello
console.log(y); //world
//可忽略
let obj = {p: ['hello', {y: 'world'}, 'ECMAScript'] }; 
let {p: [x, { y }] } = obj;
console.log(x); //hello
console.log(y); //world

//不完全解構(gòu)
let obj = {p: [{y: 'world'}, 'hello'] }; 
let {p: [{ y }, x, z ] } = obj;
console.log(x,y,z); //hello ,world,undefined
//剩余運算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; 
console.log(a,b); //10,20
console.log(rest); //{c: 30, d: 40}

//解構(gòu)默認(rèn)值
let {a = 10, b = 5} = {a: 3};
console.log(a); //3
console.log(b); //5
let {a: aa = 10, b: bb = 5} = {a: 3}; 
console.log(aa); //3
console.log(bb); //5

4.9.5 字符串的解構(gòu)賦值

字符串被轉(zhuǎn)換成了一個類似數(shù)組的對象

const [a, b, c] = 'yes';
console.log(a)  //y
console.log(b)  //e
console.log(c)  //s

4.9.6 數(shù)值解構(gòu)賦值

let {toString: s} = 123;
s === Number.prototype.toString // true

4.9.7 布爾值的解構(gòu)賦值

let {toString: s} = true;
s === Boolean.prototype.toString // true

如果等號右邊是數(shù)值和布爾值，會先轉(zhuǎn)為對象

4.9.8 函數(shù)參數(shù)的解構(gòu)賦值-基本用法

除了數(shù)組、對象、字符串等可以解構(gòu)賦值以外，函數(shù)的參數(shù)也可以使用解構(gòu)賦值

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

4.9.9 函數(shù)參數(shù)的解構(gòu)賦值-使用默認(rèn)值

定義一個move()函數(shù)，在調(diào)用時傳入不同的參數(shù)

function move({x = 0, y = 0} = {}) {
    console.log([x, y]);
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

function move({x, y} = { x: 0, y: 0 }) {
    console.log([x, y]);
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

4.9.10 變量解構(gòu)賦值的用途

• 交換變量的值
• 從函數(shù)返回多個值
• 函數(shù)參數(shù)的定義
• 提取 JSON 數(shù)據(jù)
• 函數(shù)參數(shù)的默認(rèn)值

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]   
};
let { id, status, data: number } = jsonData;
// 解析jsonData的值

4.10函數(shù)拓展

4.10.1 函數(shù)參數(shù)默認(rèn)值

• 基本用法
• 優(yōu)點和局限性
• 與解構(gòu)賦值默認(rèn)值結(jié)合使用
• 其他特性

4.10.2 函數(shù)參數(shù)默認(rèn)值-基本用法

在ES6之前，是否可以直接為函數(shù)的參數(shù)指定默認(rèn)值？

function foo(x, y) {
  y = y || 'World';
  console.log(x, y);
}
foo('Hello') // Hello World
foo('Hello', 'ES6') // Hello ES6
foo('Hello', '') // Hello World

function foo(x, y = 'World') {
  console.log(x, y);
}
foo('Hello') // Hello World
foo('Hello', 'ES6') // Hello ES6
foo('Hello', '') // Hello

4.10.3 函數(shù)參數(shù)默認(rèn)值-局限性

• 參數(shù)變量是默認(rèn)聲明的，所以不能用let或const再次聲明
• 使用參數(shù)默認(rèn)值時，函數(shù)不能有同名參數(shù)

function foo(x = 5) {
    let x = 1; // error
    const x = 2; // error
}
foo();

//不報錯
function foo(x, x, y) {// ...}
foo();
// 報錯
function foo(x, x, y = 1) { // ...}
foo();

4.10.4 函數(shù)參數(shù)默認(rèn)值-與解構(gòu)賦值默認(rèn)值結(jié)合

function foo({x, y = 5}) {
  console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

4.10.5 函數(shù)參數(shù)默認(rèn)值-其他特性

參數(shù)默認(rèn)值的位置

函數(shù)的 length 屬性

• 返回沒有指定默認(rèn)值的參數(shù)個數(shù)

作用域（context）

• 一旦設(shè)置了參數(shù)的默認(rèn)值，函數(shù)進(jìn)行聲明初始化時，參數(shù)會形成一個單獨的作用域
• 等到初始化結(jié)束，這個作用域就會消失

rest 參數(shù)

• 用于獲取函數(shù)的多余參數(shù)

//參數(shù)默認(rèn)值的位置
function foo(x = 1, y) {console.log(x,y);}
foo(); // [1, undefined]
//foo(2); // [2, undefined])
//foo(, 1); // 報錯
//foo(undefined, 1); // [1, 1]
//foo(null, 1);
//函數(shù)的 length 屬性
console.log((function (a) {}).length) // 1
console.log((function (a = 5) {}).length) // 0
console.log((function (a, b, c = 5) {}).length) // 2

//作用域
var x = 5;
function f(x, y = x) {console.log(y);}
f(10); // 10
//rest 參數(shù)實現(xiàn)求和
function add(...values) {
    let sum = 0;
    for (var val of values) {sum += val;}
    console.log(sum);
}
add(1, 2, 3) // 6

4.11 箭頭函數(shù)

• 基本用法
• 參數(shù)及函數(shù)體特點
• this出現(xiàn)的原因、與ES5中this的區(qū)別
• 使用注意點
• 不適用場合

4.11.1 箭頭函數(shù)基本使用

使用“箭頭”（=>）定義函數(shù)

let f = v => v;
// 等同于
let f = function (v) {
  return v;
};

特點

• 簡潔
• 參數(shù)
• 函數(shù)體的大括號

4.11.2 箭頭函數(shù)-參數(shù)

• 沒有參數(shù)

let fun1 = () => console.log('fun1()'); //()不能省略

• 一個參數(shù)

let fun1 = a => console.log(a); //()可以省略

• 兩個及兩個以上的參數(shù)

let fun1 = (x,y) => console.log(x,y); // ()不能省略

4.11.3 箭頭函數(shù)-函數(shù)體

• 只有一條語句或者表達(dá)式

 //{}可以省略，會自動返回語句執(zhí)行的結(jié)果
let fun1 = (x,y) => console.log(x+y); 

• 不止一條語句或者表達(dá)式

// 添加{ }時返回結(jié)果一定要有return
let fun1 = (x,y) => {
    console.log(x,y);
    return x+y;
}

4.11.4 箭頭函數(shù)-this出現(xiàn)的原因

在ES6中，為什么會出現(xiàn)箭頭函數(shù)this？

• 解決了匿名函數(shù)this指向的問題
• setTimeout()和setInterval()函數(shù)中使用this所造成的問題

function Timer() {
    this.s1 = 0;this.s2 = 0;
    // 箭頭函數(shù) 
    setInterval(() => this.s1++, 1000);
   // 普通函數(shù) 
    setInterval(function () {  this.s2++;    }, 1000);}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);// s1: 3
setTimeout(() => console.log('s2: ', timer.s2), 3100);// s2: 0

4.11.5 箭頭函數(shù)-this區(qū)別及使用

箭頭函數(shù)的this不是調(diào)用的時候決定的，而是在定義的時候處在的對象就是它的this

擴(kuò)展理解

• 箭頭函數(shù)的this判斷外層是否有函數(shù)
  • 如果有，外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this
  • 如果沒有，則this是window

4.11.6 箭頭函數(shù)-不適用場合

• 定義對象的方法，且該方法內(nèi)部包括this
• 需要動態(tài)this的時候，也不應(yīng)使用箭頭函數(shù)

const cat = {
    lives: 9,
    jumps: () => {
        this.lives--;
    }
}

var button = document.getElementById('press');
button.addEventListener('click', () => {
    this.classList.toggle('on');
});

BCSP-玄子前端開發(fā)之JavaScript+jQuery入門CH07_ECMAScript 6基礎(chǔ)文章來源地址http://www.zghlxwxcb.cn/news/detail-426502.html

到了這里，關(guān)于BCSP-玄子前端開發(fā)之JavaScript+jQuery入門CH07_ECMAScript 6基礎(chǔ)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！