ES6常用语法

ES6是什么

ECMAScript 6.0（也可以称为ECMAScript2015），ECMAScript 6.0简称 ES6，是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

1、块级作用域（let、const）

块级作用域，就是其使用范围只有在{}中起作用，不像之前var定义的变量都是函数级作用域。
let 和 const不允许重复声明变量
let 和 const 声明的变量不会在预解析的时候解析（没有变量提升，需要先声明再使用）
let 声明的变量的值可以改变，const声明的变量值不可以改变，且声明的时候必须赋值。

2、解构赋值

从数组和对象中提取值，对变量进行赋值

//数组解构
const [a,b,c]=[1,2,3]
console.log(a,b,c)   //1,2,3

//对象解构
//对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let {age,name} = {name:"chenyuxiang",age:24}
console.log(age,name)   //chenyuxiang,24

//字符串解构
const [a,b,c,d] = 'hello'
console.log(a,b,c)   //h,e,l

3、模板字符串

反引号(``)，变量(${})

const msg = 'hello world'
const str = `你好，${msg}`
console.log(str)   //输出结果为：你好，hello world

3.1、字符串扩展- includes函数

判断字符串中是否存在指定字符,返回布尔值，存在则为true，不存在则为false

let name = "chenyuxiang"

console.log(name.includes("c"))  //true
console.log(name.includes("d"))  //false

3.2 、字符串扩展- repeat函数

repeat()函数返回一个新的字符串，表示将原字符串重复n次

let str = 'x'

str.repeat(3)   // 'xxx'
str.repeat(0)  // ''

4、数组扩展

4.1、扩展运算符，数组合并

扩展运算符（spread）是三个点（...）。将一个数组转为用都好分隔的参数序列

console.log(...[1,2,3])   //1 2 3

console.log(1,...[2,3,4],5)  //1 2 3 4 5

Math.max(...[14,3,77])
//等同于
Math.max(14,3,77)

const arr1 =['a','b']
const arr2 =['c']
//合并数组
[...arr1,...arr2]  //['a','b','c']

4.2 、Array.of

将一组值转化为数组，即新建数组

let arr =Array.of(1,2,3)  // [1,2,3]

4.3、 find方法

（1）该方法主要应用于查找第一个符合条件的数组元素
（2）它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素。如果没有符合条件的元素,返回值为undefined

let arr = [11,12,13,14,15]

let res = arr.find((item)=>{return item>13})               //值  输出14
let res1 = arr.findIndex((item)=>{retuen item>13})         //索引 输出3

5、对象扩展 Object.assign

Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

const target =  { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

//Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象。
//注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
const arr = Object.assign(target, source);

console.log(target); //  { a: 1, b: 2, c: 3 }
console.log(arr); //{ a: 1, b: 4, c: 5 }

6、Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

const s = new Set()

[2,3,5,4,5,2,2].forEach(item => s.add(item))

for(let i of s){
    console.log(i)        //2 3 5 4
}

通过 add() 方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的,Set 函数可以接受一个数组作为参数

const set = new Set([1,2,3,4,4])  
..set      //1 2 3 4
[...set]   //[1,2,3,4]

//数组去重的方法
[...new Set([1,2,3,4,4])]     // [1,2,3,4]

//字符串去重
[...new Set('ababbc')].join('')   // "abc"

向Set加入值的时候，不会发生类型转换，5>和“5”是两个不同的值

const mySet = new Set()
mySet.add("5")
mySet.add(5)
console.log(mySet) //Set(2){'5',5}

6.1、 size属性

返回 Set 实例的成员总数

const item = new Set ([1,2,3,4,5,5,5,5])
item.size    //5

6.2、 delete()

删除某个值，返回一个布尔值，表示删除是否

var mySet = new Set();
mySet.add("5")
var flag = mySet.delete("5");
console.log(flag);  // true

6.3 、has()

返回一个布尔值，表示该值是否为Set的成员

var mySet = new Set();
mySet.add("5")
var flag = mySet.has("5");
console.log(flag);  // true

6.4、 clear()

var mySet = new Set();
mySet.add("5")
mySet.clear();
console.log(mySet);  // Set(0) {size: 0}

7、箭头函数

箭头函数作为普通函数的一个补充，将this指向了函数体之外最近一层的this，而不是向普通JS一样将this指向window变量。

var name = "cyx"
var user = {
    name:"chenyuxiang",
    getName(){
        setTimeout(() =>{
            console.log(this.name); // chenyuxiang
       })
   }
}
user.getName()

提示

箭头函数里面根本没有自己的 this ，而是引用外层的 this。对于普通函数来说，内部的 this 指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的 this 对象，内部的 this 就是定义时上层作用域中的 this

8、最后其他es6常用的语法

promise对象 (JavaScript进阶之Ajax的问题和什么是promise))

asyn 和 await 函数 (fetch和axios接口调用方式的用法))

Es6简化操作的一些数组方法使用及原理