前言
随着前端的发展，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中的重难点进行分析。
