BCSP-玄子前端开发之JavaScript+jQuery入门CH07

这篇具有很好参考价值的文章主要介绍了BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

4.7 ECMAScript 6

4.7.1 ECMAScript 6 简介

ECMAScript 6.0（简称 ES6）

是JavaScript语言的下一代标准
正式发布于2015年6月

目标

使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言

版本升级

ECMAScript 2015
ECMAScript 2016
ECMAScript 2017

ECMAScript和JavaScript 的关系

前者是后者的规格，后者是前者的一种实现

4.7.2 ES6与ES2015的关系

ES6与ES2015的关系

ES6
- 是5.1版以后的JavaScript的下一代标准
- 涵盖了ES2015、ES2016、ES2017等等
ES2015
- 是ES6第一个版本的正式名称
- 特指该年发布的正式版本的语言标准

4.7.3 各大浏览器对ES6的支持情况

各大浏览器支持情况及开始时间

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OxGzd4ga-1682307261810)(./assets/image-20230423215938883.png)]

目前，各大主流浏览器稳定版本对于ES6的绝大部分属性及方法均已支持

4.7.4 Babel转码器

可以将ES6代码转为ES5代码，从而在现有环境执行

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

4.7.5 配置babel转ES6为ES5步骤

步骤1：初始化ES6项目，执行

npm init      //初始化package.json

步骤2：在与package.json同一目录下编写配置文件.babelrc

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

步骤3：安装babel转码规则

// ES2015转码规则
npm install --save-dev babel-preset-es2015
// ES7不同阶段语法提案的转码规则（共有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：安装好的规则加入到 .babelrc

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

步骤5：安装babel-cli工具，用于命令行转码

npm install --global babel-cli
// 转码输出文件
example.js
[1,2,3].map(x => x*x);
// 执行转码
babel example.js -o compile.js --presets es2015
转码后的compiled.js文件：
"use strict";
[1, 2, 3].map(function (x) {
    return x * x;
});

步骤6：实时监听编译文件

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代码转为ES5代码以外，还可以使用babel在线转码工具

babel转码: https://babeljs.io/repl

4.8 ES6新增命令

let命令

声明变量
用法类似于var
但是，所声明的变量，只在let命令所在的代码块内有效

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命令-暂时性死区

在代码块内，使用let命令声明变量之前，该变量都是不可用的，在语法上，称为“暂时性死区”

if (true) {
    // 暂时性死区开始
    tmp = 'abc'; // ReferenceError
    console.log(tmp); // ReferenceError
    let tmp; // TDZ结束
    console.log(tmp); // undefined
    tmp = 123;
    console.log(tmp); // 123
}

4.8.4 let命令-不允许重复声明

let命令不允许在相同作用域内，重复声明同一个变量

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中，为什么新增了块级作用域？

内层变量可能会覆盖外层变量
用来计数的循环变量泄露为全局变量

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命令其他特性

只在声明所在的块级作用域内有效
const命令声明的常量不提升
存在暂时性死区，只能在声明的位置后面使用
声明的常量，也与let一样不可重复声明

4.9 变量的解构赋值

解构赋值是对赋值运算符的扩展，针对数组或者对象先进行模式匹配，然后对其中的变量进行赋值

数组的解构赋值
对象的解构赋值
字符串的解构赋值
数值和布尔值的解构赋值
函数参数的解构赋值

4.9.1 数组的解构赋值-基本用法

在ES5中，为变量赋值，只能直接指定值

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

在ES6中，可以从数组中提取值，按照对应位置，对变量赋值

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

4.9.2 数组的解构赋值-其他特性

//可嵌套
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

//不完全解构
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]
//解构默认值
let [x, y = 'b'] = ['a']; 
console.log(x); //'a'
console.log(y); //'b'

4.9.3 对象的解构赋值-基本用法

数组的元素是按次序排列的，变量的取值由它的位置决定，对象的属性没有次序，变量必须与属性同名，才能取到正确的值

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 对象的解构赋值-其他特性

//可嵌套
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

//不完全解构
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}

//解构默认值
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 字符串的解构赋值

字符串被转换成了一个类似数组的对象

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

4.9.6 数值解构赋值

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

4.9.7 布尔值的解构赋值

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

如果等号右边是数值和布尔值，会先转为对象

4.9.8 函数参数的解构赋值-基本用法

除了数组、对象、字符串等可以解构赋值以外，函数的参数也可以使用解构赋值

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

4.9.9 函数参数的解构赋值-使用默认值

定义一个move()函数，在调用时传入不同的参数

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 变量解构赋值的用途

交换变量的值
从函数返回多个值
函数参数的定义
提取 JSON 数据
函数参数的默认值

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

4.10函数拓展

4.10.1 函数参数默认值

基本用法
优点和局限性
与解构赋值默认值结合使用
其他特性

4.10.2 函数参数默认值-基本用法

在ES6之前，是否可以直接为函数的参数指定默认值？

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 函数参数默认值-局限性

参数变量是默认声明的，所以不能用let或const再次声明
使用参数默认值时，函数不能有同名参数

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 函数参数默认值-与解构赋值默认值结合

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 函数参数默认值-其他特性

参数默认值的位置

函数的 length 属性

返回没有指定默认值的参数个数

作用域（context）

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域
等到初始化结束，这个作用域就会消失

rest 参数

用于获取函数的多余参数

//参数默认值的位置
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);
//函数的 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 参数实现求和
function add(...values) {
    let sum = 0;
    for (var val of values) {sum += val;}
    console.log(sum);
}
add(1, 2, 3) // 6

4.11 箭头函数

基本用法
参数及函数体特点
this出现的原因、与ES5中this的区别
使用注意点
不适用场合

4.11.1 箭头函数基本使用

使用“箭头”（=>）定义函数

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

特点

简洁
参数
函数体的大括号

4.11.2 箭头函数-参数

没有参数

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

一个参数

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

两个及两个以上的参数

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

4.11.3 箭头函数-函数体

只有一条语句或者表达式

 //{}可以省略，会自动返回语句执行的结果
let fun1 = (x,y) => console.log(x+y);

不止一条语句或者表达式

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

4.11.4 箭头函数-this出现的原因

在ES6中，为什么会出现箭头函数this？

解决了匿名函数this指向的问题
setTimeout()和setInterval()函数中使用this所造成的问题

function Timer() {
    this.s1 = 0;this.s2 = 0;
    // 箭头函数 
    setInterval(() => this.s1++, 1000);
   // 普通函数 
    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 箭头函数-this区别及使用

箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this

扩展理解

箭头函数的this判断外层是否有函数
- 如果有，外层函数的this就是内部箭头函数的this
- 如果没有，则this是window

4.11.6 箭头函数-不适用场合

定义对象的方法，且该方法内部包括this
需要动态this的时候，也不应使用箭头函数

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

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

BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础文章来源地址https://www.toymoban.com/news/detail-426502.html

到了这里，关于BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础