阅读 429

ES6的基础核心特性使用

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 声明的变量可以随时赋值
  • 不允许重复声明
  • 如果没有定义就使用就会报错,因为letconst没有变量提升

箭头函数

函数简写

  • 无参数 ()=> {}
  • 单个参数 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 排版