前言

随着前端的发展，JavaScript应用的领域也越来越广泛，其原本的语法的局限性也越来越明显，这便推动了ECMA制定ECMASCRIPT6（以下简称ES6）规范的推广，目前各大浏览器基本都支持了ES6的语法，下面就来了解下ES6的基本语法。

ECMASCRIPT 6简介

属性扩展

解构赋值：es6中新增快捷的赋值赋值方式，常见用法如下：

//同时赋值多个变量
let [a,b,c] = [1,2,3]
console.log("a="+a+'/b='+b+'/c='+c)//a=1/b=2/c=3
//分解数组或对象,扩展运算符...
let arr = [1,2,3]
console.log(...arr)//1,2,3
let obj = {a:33,c:11,d:44}
let obj2 = {...obj,e:55}
console.log(obj2)//{a:33,c:11,d:44,e:55}
//参数的定义，同时定义多个
function f([x, y, z]) {}
f([1, 2, 3]);
function f2({x, y, z}) {}
f2({z: 3, y: 2, x: 1});
//方便提取对象的key
let jsonData = {status: "OK",data: [867, 5309]};
let {status, data} = jsonData;
console.log(status, data);

注意：在实际应用中解构不单用于数组、对象，只要内部具有iterator接口，就都可以使用解构。

新增扩展:includes

/**
includes()：返回布尔值，（字符串和数组都有）表示是否找到了参数字符串/数组的元素。
*/
let str = "testa"
str.includes("e")//true
str.includes("ee")//false
let arr = [1,2,3,'test']
arr.includes(1)//true
arr.includes("demo")//false

新增扩展：模版字符串（"`"）("${}")

let name = "demo", time = "today";
`Hello ${name}, how are you ${time}?`

注：模版字符串的定义，方便传统模版的书写方式。

新增扩展：for...of... / for...in

//for...of获取键值 for...in获取键名
var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
  console.log(a); // 0 1 2 3
}
for (let a of arr) {
  console.log(a); // a b c d
}
//for...of只返回具有数字索引的属性 for...in返回key
let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

除了数组和对象外for...of也可以作用于字符串类数组 Set 和 Map 结构注：for...of是JavaScript仿照其他语言引入的特性，for...of作为遍历所有数据结构的统一的方法。

新增扩展：Number.isNaN() Number.isFinite() Number.isInteger()

//Number.isFinite()用来检查一个数值是否为有限的（finite），即不是Infinity。
Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
//Number.isNaN()用来检查一个值是否为NaN。
Number.isNaN(NaN) // true
Number.isNaN(0) // false
Number.isNaN('0') // false
//Number.isInteger()用来判断一个数值是否为整数。
Number.isInteger(25) // true
Number.isInteger(25.1) // false

注：如果参数类型不是NaN，即不可以转换成number类型的，Number.isNaN一律返回false。

新增扩展：catch 命令的参数省略

//catch(e)中的e参数在es6语法中可以省略，即可以写成如下：
try {
  // ...
} catch {
  // ...
}

新增扩展: array新增方法from() of() find() findIndex()

//from()方法用于将两类对象转为真正的数组
let arraylike = {"0":'a',"1":'b'}
let arr2 = Array.from(arrayLike); // ['a', 'b']
//of()方法将一组值转换为数组
Array.of(1, 2, 3) // [1,2,3]
//find和findIndex为找到第一个符合回调函数中条件的元素和元素下标
[1,3,5,4,6,7].find(function(n){return n>5})//6
[1,3,5,4,6,7].findIndex(function(n){return n>5})//4

新增扩展: object的assign() 和 keys() is()

//js中一切皆对象，object.is()可以比较两个值是否相等
let a = "test";let b = "test2"
Object.is(a, b)
//返回对象中的所有key值

新增属性

let:用于定义局部变量

{
    var a = 'test'
    let b = 'test22'
}
console.log(a)//test22
console.log(b)// ReferenceError: b is not defined.

const:js定义常量的关键字

const constA="test"
constA = "test2"
//TypeError: Assignment to constant variable.

注：如果const定义的常量是对象类型，那么改变对象属性的值不会报错

顶层对象属性：window / global

//浏览器环境下使用window定义顶层对象
window.a = 'test'
//nodejs环境下使用global定义顶层对象
global.a="test"

注：ES2020 在语言标准的层面，引入globalThis作为顶层对象。也就是说，任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。

proxy:在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截

//创建proxy实例 target是需要拦截的对象，handler拦截时所进行的处理（一个对象，其属性是当执行一个操作时定义代理的行为的函数。）
let proxy = new Proxy(target, handler);
let handler = {
    get:function(target,name){},
    set:function(target,name){}
}

symbol 是一种基本数据类型，它的功能类似于一种标识唯一性的ID。

//唯一性 每次symbol都会创建一个新的symbol
Symbol("foo") === Symbol("foo"); // false
//应用场景1：使用Symbol来作为对象属性名(key)
//应用场景2：使用Symbol来替代常量
//应用场景3：使用Symbol定义类的私有属性/方法

注：不支持语法："new Symbol()"。

新增语法

类:声明创建一个基于原型继承的具有给定名称的新类。

class Foo{
    constructor(){
        
    }
}
//继承
class Far extends Foo {
  constructor() {
  }
}

箭头函数：箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。

//基本语法
let foo = (params)=>{}
// 当只有一个参数时，圆括号是可选的：
let far =params=>{}

注：箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

装饰器：decorator（装饰方法或属性）

//@+装饰器属性
@annotation
class MyClass { }
 
function annotation(target) {
   target.annotated = true;
}

注：浏览器不能识别装饰器语法，需要安装babel进行转换

//安装
npm install --save-dev @babel/core @babel/cli
npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
//配置新建.babelrc文件
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", {"loose": true}]
  ]
}

模块化：es6引入了模块化的概念，即文件中的内容可以导出到另一个文件中。

//export命名导出
export { foo }; 
//export 默认导出
export default function() {} 
//import导入所有接口
import * as myModule from '/modules/my-module.js';
//import导入单个
import {foo} from '/modules/my-module.js';

异步处理

promise：是一个对象，它代表了一个异步操作的最终完成或者失败。他很好的解决了异步导致的回调地狱的问题。

new Promise((resolve, reject) => {
    console.log('初始化');
    resolve();
})
.then(() => {
    throw new Error('有哪里不对了');
    console.log('执行「这个」”');
})
.catch(() => {
    console.log('执行「那个」');
})

async/await：await后面接一个会return new promise的函数并执行它

//async返回的是一个promise对象
async function demoAsync() {
return "this is demo";
  }

const result = demoAsync();
console.log(result);

注：await只能放在async函数里

总结

本节主要介绍了ES6的基本语法，主要参考了阮一峰的es6入门，另外本文的例子可以直接赋值到浏览器的控制台进行测试，下面的es6系列文章会对ECMASCRIPT6中的重难点进行分析。

前端基础知识库-ES6基础知识

前言

ECMASCRIPT 6简介

属性扩展

新增属性

新增语法

异步处理

总结