关于前端JavaScript ES6详情

卜静柔

目录

• 1、简介
  
  
  
  • 1.1 Babel 转码器
    
  • 1.2 polyfill
    
  
  
• 2、let 和 const
  
  
  
  • 2.1 let
    
  • 2.2 const
    
  
  
• 3、解构
  
  
  
  • 3.1 对象解构
    
  • 3.2 数组解构
    
  • 3.3 函数参数解构
    
  • 3.4 常见场景
    
  
  
• 4、扩展
  
  
  
  • 4.1 字符串扩展
    
  • 4.2 函数扩展
    
  • 4.3 数组扩展
    
  • 4.4 对象扩展
    
  • 4.5 运算符扩展
    
  
  
• 5、for…of
  
• 6、小结
  

1、简介

1. ES6

复制代码

是一个泛指，含义是 5.1 版以后的

1. JavaScript

复制代码

的下一代标准，涵盖了

1. ES2015

复制代码

、

1. ES2016

复制代码

、

1. ES2017

复制代码

语法标准。

1. ES6

复制代码

新特性目前只有在一些较新版本浏览器得到支持，老版本浏览器里面运行我们需要将ES6转换为ES5。

   

• 1. Chrome

  复制代码
  ：51 版起便可以支持 97% 的 ES6 新特性。   
  
• 1. Firefox

  复制代码
  ：53 版起便可以支持 97% 的 ES6 新特性。   
  
• 1. Safari

  复制代码
  ：10 版起便可以支持 99% 的 ES6 新特性。   
  
• 1. IE

  复制代码
  ：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）
  

1.1 Babel 转码器

它是一个广泛使用的 ES6 转码器。

1. npm install --save-dev @babel/core

复制代码

配置文件

1. .babelrc

复制代码

1. # 最新转码规则
   
2. $ npm install --save-dev @babel/preset-env
   
3. 
   
4. # react 转码规则
   
5. $ npm install --save-dev @babel/preset-react
   
6. // `presets`字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
   
7.   {
   
8.     "presets": [
   
9.       "@babel/env",
   
10.       "@babel/preset-react"
    
11.     ],
    
12.     "plugins": []
    
13.   }

复制代码

1.2 polyfill

1. Babel

复制代码

默认只是对

1. JavaScript

复制代码

新语法进行了转换，为了支持新API还需要使用

1. polyfill

复制代码

为当前环境提供一个垫片（也就是以前的版本没有，打个补丁）。
比如：

1. core-js

复制代码

和

1. regenerator-runtime

复制代码

1. $ npm install --save-dev core-js regenerator-runtime
   
2. import 'core-js';
   
3. import 'regenerator-runtime/runtime';

复制代码

2、let 和 const


2.1 let


就作用域来说，

1. ES5

复制代码

只有全局作用域和函数作用域。使用

1. let

复制代码

声明的变量只在所在的代码块内有效。

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

复制代码

看下面的例子，我们预期应该输出1，因为全局只有一个变量i，所以

1. for

复制代码

执行完后，

1. i=5

复制代码

，函数打印的值始终是5。

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

复制代码

修复，将每一次迭代的i变量使用local存储，并使用闭包将作用域封闭。

1. var funcs = [];
   
2. for (var i = 0; i < 5; i++) {
   
3.     (function () {
   
4.             var local = i
   
5.             funcs.push(function () {
   
6.                 console.log(local);
   
7.             });
   
8.         }
   
9.     )()
   
10. }
    
11. funcs[1](); // 1

复制代码

使用

1. let

复制代码

声明变量i也可以达到同样的效果。

2.2 const

1. const

复制代码

用于声明一个只读的常量。必须初始化，一旦赋值后不能修改。

1. const

复制代码

声明的变量同样具有块作用域。

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

复制代码

1. const

复制代码

声明对象

1. const obj = {};
   
2. // 为 obj 添加一个属性，可以成功
   
3. obj.name = 'hello';
   
4. 
   
5. // 将 obj 指向另一个对象，就会报错
   
6. obj = {}; // TypeError: "obj" is read-only

复制代码

3、解构

解构字面理解是分解结构，即会打破原有结构。

3.1 对象解构

基本用法：

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

复制代码

设置默认值

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

复制代码

1. rest

复制代码

参数（形式为...变量名）可以从一个对象中选择任意数量的元素，也可以获取剩余元素组成的对象。

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

复制代码

3.2 数组解构

1. rest

复制代码

参数（形式为...变量名）从数组中选择任意数量的元素，也可以获取剩余元素组成的一个数组。

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

复制代码

数组解构中忽略某些成员。

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

复制代码

3.3 函数参数解构

数组参数

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

复制代码

对象参数

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

复制代码

3.4 常见场景

在不使用第三个变量前提下，交换变量。

1. let x = 1;
   
2. let y = 2;
   
3. 
   
4. [x, y] = [y, x];

复制代码

提取JSON数据

1. let json = {
   
2.   code: 0,
   
3.   data: {name: 'hi'}
   
4. };
   
5. let { code, data: user } = json;
   
6. console.log(code, user); // 0 {name: 'hi'}

复制代码

遍历Map结构

1. const map = new Map();
   
2. map.set('name', 'hello');
   
3. map.set('age', 12);
   
4. 
   
5. for (let [key, value] of map) {
   
6.   console.log(key + " is " + value);
   
7. }

复制代码

4、扩展


4.1 字符串扩展

模版字符串，这个很有用。使用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

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

复制代码

4.2 函数扩展

1. ES6

复制代码

允许为函数的参数设置默认值，即直接写在参数定义的后面。
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（

1. context

复制代码

）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

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

复制代码

替代apply()写法

1. // ES5 的写法
   
2. Math.max.apply(null, [1, 3, 2])
   
3. 
   
4. // ES6 的写法
   
5. Math.max(...[1, 3, 2])

复制代码

4.3 数组扩展

合并数组

1. // ES5 的写法
   
2. var list = [1,2]
   
3. list = list.concat([3])
   
4. 
   
5. // ES6 的写法
   
6. var list = [1,2]
   
7. list = [...list, 3]

复制代码

数组新API
Array.from()，Array.of()，find() 和 findIndex()等，参考MDN
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

4.4 对象扩展

对象属性，方法简写

1. data = [1,2]
   
2. const resp = {data}; // 属性简写，等同于 {data: data}
   
3. const obj = {
   
4.   add(x, y) {        // 方法简写，等同于 add: function(x, y){...}
   
5.     return x + y;
   
6.   }
   
7. };

复制代码

扩展属性

1. const point = {x: 1, y: 2}
   
2. const pointD = {...point, z: 3}
   
3. console.log(pointD) // {x: 1, y: 2, z: 3}
   
4. 
   
5. // 当有重复属性时，注意顺序问题。
   
6. const point = {x: 1, y: 2}
   
7. const pointD = {...point, x: 4, z: 3}
   
8. console.log(pointD) // {x: 4, y: 2, z: 3}
   
9. 
   
10. const point = {x: 1, y: 2}
    
11. const pointD = {x: 4, z: 3, ...point}
    
12. console.log(pointD) // {x: 1, z: 3, y: 2}

复制代码

属性的描述对象
对象的每个属性都有一个描述对象（

1. Descriptor

复制代码

），用来控制该属性的行为。

1. const point = {x: 1, y: 2}
   
2. Object.getOwnPropertyDescriptor(point, 'x')
   
3. /**
   
4. { configurable: true
   
5.   enumerable: true // 表示可枚举
   
6. value: 1
   
7. writable: true   // 表示可写
   
8. }
   
9. **/

复制代码

属性的遍历

   

• 1. for...in

  复制代码
  循环：只遍历对象自身的和继承的可枚举的属性。   
  
• 1. Object.keys()

  复制代码
  ：返回对象自身的所有可枚举的属性的键名。   
  
• 1. JSON.stringify()

  复制代码
  ：只串行化对象自身的可枚举的属性。   
  
• 1. Object.assign()

  复制代码
  ： 忽略
  1. enumerable

  复制代码
  为
  1. false

  复制代码
  的属性，只拷贝对象自身的可枚举的属性。
  

1. const point = {x: 1, y: 2}
   
2. for(let key in point){
   
3.   console.log(key)
   
4. }

复制代码

对象新增的一些方法：

1. Object.assign()

复制代码

1. Object.assign()

复制代码

方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。常见用途：
克隆对象

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

复制代码

合并对象

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

复制代码

指定默认值

1. const DEFAULT_CONFIG = {
   
2.   debug: true,
   
3. };
   
4. 
   
5. function process(options) {
   
6.   options = Object.assign({}, DEFAULT_CONFIG, options);
   
7.   console.log(options);
   
8.   // ...
   
9. }

复制代码

4.5 运算符扩展

指数运算符

1. 2 ** 10 // 1024
   
2. 2 ** 3 ** 2 // 512 相当于 2 ** (3 ** 2)
   
3. 
   
4. let a=10; a **= 3; // 相当于 a = a * a * a

复制代码

链判断运算符

1. obj?.prop

复制代码

判断对象属性是否存在，

1. func?.(...args)

复制代码

函数或对象方法是否存在。

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

复制代码

空判断运算符

1. JavaScript

复制代码

里我们用||运算符指定默认值。 当我们希望左边是

1. null

复制代码

和

1. undefined

复制代码

时才触发默认值时，使用??。

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

复制代码

5、for…of

因为

1. for...in

复制代码

循环主要是为遍历对象而设计的，因为数组的键名是数字，所以遍历数组时候它返回的是数字，很明显这不能满足开发需求，使用

1. for...of

复制代码

可以解决这个问题。

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

复制代码

6、小结

到此这篇关于关于前端JavaScript ES6详情的文章就介绍到这了,更多相关

1. JavaScript ES6

复制代码

内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

吕悠逸

感谢楼主分享。

竹喧悠悠然依

感谢楼主，顶。