持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情

ES6语法

模版字符串

用一个反引号表示``,里面可以放${}来嵌入动态的内容。

let nickName='jojo'
let age = 12
const name=`my name is ${nickName}`
console.log(`${nickName}${age}`)

函数默认参数

ES6以前编写函数是没有默认值的，在ES6我们可以给函数设置一个默认值，如果不传递这个参数，那么就默认取。

function foo(id = 20){
    console.log(id)
}

foo(30) //打印30
foo() //打印20

展开运算符

语法使用三个点...

主要使用在函数调用时，数组构造时使用

可以将数组表达式或者字符串在语法层面展开。

可以将对象表达式按key-value的方式展开。

const food={name:'apple',color:'#fff'}
const obj={...food,weight:23}

function foo(a, b, c) {
    console.info(a);
    console.info(b);
    console.info(c);
}
let args = ['参数1', '参数2', '参数3'];
hello(...args);

Symbol类型

Symbol类型用来生成一个独一无二的值，比如一个对象，我们希望在其中添加一个新的属性和值，在不确定它内部原来有什么属性的时候，容易造成冲突，覆盖掉对应属性，所以这时候最好自定义一个Symbol类型字段，对其赋值。

const s = Symbol("name")

const info ={
    name:"jojo",
    [s]:"gogo"
}

Set数据结构

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用，简单来说 Set对象存储的数据元素不能重复，所以Set常用的一个功能就是数组去重。

常用方法

add(value) :添加某个元素，返回Set对象本身

delete(value) :从set中删除和这个值相等的元素，返回布尔类型

has(value) :判断set中是否存在某个元素，返回布尔类型

clear() :清空set中所有的元素，没有返回值

foreach(callback,[，args]) :通过forEach遍历set

const ms = new Set()
ms.add(20)
ms.add(30)

const arr = new Set([11,12,13,14,11])
console.log(arr)//Set(3) {12, 13, 14}

Map数据结构

key-value的数据结构

key的类型可以是任意基本数据类型、对象、函数。

常用方法

set(key,value) :在Map中添加key、value，返回整个Map对象。

get(key) :根据key获取Map中的value。

has(key) :判断是否存在某一个key，返回布尔类型

delete(key) :根据key删除一个键值对，返回布尔类型

clear():清空所有元素

foreach(callback,[，args]) :通过forEach遍历map

ES7语法

includes

判断一个数组是否包含一个指定的元素，如果包含返回true，否则返回false

const arr=[2,3,4,5,6]
arr.includes(2)

指数运算符

ES7以前，计算数字的乘方需要通过Math.pow方法来完成，ES&可以用**计算得到

const result = 3 ** 3
console.log(result) // 9

ES8语法

Object.values

在ES8以前我们通过Object.keys获取一个对象所有的key。ES8中新增了Object.values来获取所有value的值。

const obj = {
    name:"jojo",
    age:22
}

console.log(Object.values(obj)) //['jojo',22]

Object.entries

可以获取到一个数组，数组中存放可枚举属性的键值对数组。

主要针对对象、数组、字符串进行操作。

const obj = {
    name:"jojo",
    age:22
}

console.log(Object.entries(obj)) //[['name','why'],['age',18]]

for(const entry of Object.entries(obj)){
    const[key,value] = entry
    console.log(key,value);

}
//如果是一个数组
console.log(Object.entries(["a","b","c"]))//[['0','a'],['1','b'],['2','c']]

//如果是一个字符串
console.log(Object.entries("test"))//[['0','t'],['1','e'],['2','s'],['3','t']]

String Padding

有些时候我们需要对某个字符串进行前后的填充，来实现某个格式化效果，Es8新增2个个字符串API方法 padStart 和padEnd来实现。

第一个参数表示让字符串变成的最大长度，如果不够则填充对应的字符

    const message = "hello"
    console.log('message: ', message.padStart(9,"0")); //0000hello
    console.log('message: ', message.padEnd(12,"0"));//hello0000000

总结

主要列举了一些ES6到ES8新增的一些语法，让我们在项目时候能及时想起来用。

ES6到ES8常用语法总结