ES6的核心特性使用

前言

本篇文章将会一直涵盖ES5之后的新语法，当然会更专注与一些重要的特性进行解释和理解。

本篇文章也将会一直保持更新，并且结合一些使用案例。参考来源于阮一峰的《ECMAScript 6入门》，冴羽《ES6完全使用手册》。

作用域声明

我们抛弃了var声明的变量，因为用var声明将会导致变量提升。 let 和 const 都将会有一个块级作用域。

const 声明的是一个常量，我们默认使用 const，只有在需要改变变量的值的时候才会使用let。因为大部分的变量的值在初始化后不再改变。当我们不小心改变了其中的值之后，将会报错。所以这样可以帮我们去检查我们的变量声明。


 var foo = 'bar';  //bad
 
 let foo = 'bar';  //good
 
 const foo = 'bar';  //better

注意

const 声明一个常量后必须立马赋值
let 声明的变量可以随时赋值
不允许重复声明
如果没有定义就使用就会报错，因为let和const没有变量提升

箭头函数

函数简写

无参数 ()=> {}
单个参数 x => {}
多个参数 (x,y) => {}
解构参数 ({x,y}) => {}

箭头函数没有this，内部的this就是外层代码块的this 箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

参数处理

默认参数值

ES6支持在定义函数的时候为其设置默认值：

function multiply(a,b=1){
  return a*b;
}
console.log(multiply(5, 2));
//10
console.log(multiply(5));
// 5

展开运算符

展开运算符是三个（...），可以将一个数组转为用逗号分隔的参数序列。

function sum(x,y,z){
  return x+y+z
}

const number = [1,2,3];
console.log(sum(...numbers))
//输出6

模版字面量

需要拼接字符串的时候尽量改成使用模版字符串：

const foo = 'this is' + example;

const foo = `this is ${example}`;

对象属性加强

属性定义支持短语法：obj = {x,y}

属性名支持表达式 :obj = {["baz"] + quux()]:42 }。

__proto__：返回或设置对象的原型对象

解构赋值

字符串解构

const[a,b,c,d,e] = "hello"

数组解构

数据结构具有Iterator接口可采用数组形式的解构赋值

基本用法:const [x,y] = [1,2]

默认值：const[x,y=2] = [1]

const info = locale.splite('-');
const name =info[0];
cosnt age = info[1];
//bad

const [name,age] = local.splite('-');
//good

对象解构

基本用法：const {a,b} = {a:"aaa",b:"bbb"}

默认值：const {a,b=2}={a:"aaa"}

改名：const {a,b:2} = {x:1,y:2}

模块（Module）

导入(import)

默认导入：import aaa from "AAA"
整体导入：import * as aaa from "AAA"
按需导入：import { aaa, bbb, ccc } from "AAA"

导出(export)

规定模块对外接口。

单独导出：export const name = "aaa"
按需导出：export { aaa, bbb, ccc }(推荐)

默认导出(export default)

默认导出：export default aaa(导入时可指定模块任意名称，无需知晓内部真实名称)

如果对你有帮助的话，请点个👍吧！我们继续分享更多文章的～

本文使用 mdnice 排版

ES6的基础核心特性使用