ES6新增语法整理

ES6新增语法

var，let，const展开运算符set的属性和方法箭头函数箭头函数的this问题Array.fromArray.isArrayArray.ofarr.findarr.findIndexarr.flatarr.flatMaparr.fillarr.includes（） 文档参考：MDN

var，let，const

var：

var可以重复声明

作用域：全局作用域 和 函数作用域

会进行预解析（先console后定义）

let：

同一作用域下不能重复声明作用域：全局作用域 和 块级作用域 { }不会进行预解析

const：

使用的时候必须赋值，并且不能修改块级作用域：地方

解构赋值：

按照一定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量。对象的解构赋值 let obj = { a：1， b：2}； let{a ，b} = obj； console.log(a,b)

数组的解构赋值：

let arr = [“a”，“b”，“c”]； let [e，f] = arr； let [ a,b,c ] = [ 1,2,3 ] console.log(a)

面试题（怎样快速交换a，b的值）

let a = 0； let b = 1； [a,b] = [b,a]

展开运算符

对数组展开： let arr = [1,2,3,4]; let arr2 = [“a”,“b”,…arr,“c”,“d”]; console.log(arr2); //a,b,1,2,3,4,c,d //剩余参数 let [a,b,…c] = arr; console.log(a,b,c); // 1,2,{3,4} 把剩余的东西都放在c里

对对象展开： let obj = { a : 1, b : 2 }; let obj2 ={ …obj, c : 3, d : 4 }; console.log(obj2); let {a,b,…c} = obj2; console.log(a,b,c); //1,2, { c:3,d:4 }set

set本身是一个对象，用来构造函数 构造函数，用来构造某一类型的对象 对象构建的过程叫做对象的实例化 let arr = [2,1,2,1,3,4,4,5,1] let s = new Set(arr); console.log (s)； //{2,1,3,4,5} //与普通输出的区别是：可以自动去重。 //去重，还是以数组形式输出， 按照出现顺序保留

arr = […s]; console.log(arr); //[2,1,3,4,5]

set的属性和方法

let arr = [2,1,2,1,3,4,4,5,1] let s = new Set (arr) ; console.log (s.size)； // size数值的个数， ==> length 方法 s.clear() //清空所有值 s.delete（4） //删除掉某个值 s.delete（“a”） s.add（5）; //添加一项 s.has（5） //是否包含某一项map let arr = [ [“a”，1]， [“b”，2]， [“c”，3]， ]； let s = new Map(arr); console.log(s); // 方法： clear（）清空所有值 delete（key）删除某一项 get（key）获取某一项的值 has（key）是否包含某一项 set（key，val）设置一个值 key 数据的key值 val 数据的val值 输出的是map本身函数新增内容

箭头函数

function的简写 箭头函数： let fn = （ ）=>{ console.log（“天气不错”）; return“返回值” }； console.log（ fn( ) ）;

形参=>返回值

（形参，形参）=> 返回值

（）=> 返回值

（）=>{ 执行语句 }

（）=>{ 执行语句 return 返回值 }

（形参）=>{ 执行语句 return 返回值 }

rest参数 （剩余参数）

let fn = （a，b，. . .arg）=> { console.log（arg）; [3,4] } fn（1,2,3,4）；

箭头函数的this问题

箭头函数本身没有this，调用尽头函数的this时，指向是其声明时，所在的作用域的this document.onclick = function（）{ let fn = （）=>{ console.log（this）； //document }； function fn（）{ console.log（this）； //window } fn () }数组新增内容

Array.from

Array Array.form（arrayLike[ , mapFn [ , thisArg ] ] ）将类数组转换成数组 参数： arrayLike 类数组 可选参数： mapFn 类似 map 方法，循环类数组时的回函函数，返回值组成数组 thisArg mapFn 函数执行时的 this 指向 返回值 根据arrayLike 生成新数组

Array.isArray

Boolean Array.isArray（data）检测数据是否是个数组 参数： data要检测的数据 返回值： true 数组， false 非数组

Array.of

Array Array.of（element0 [ , element1 [ , … [ , elementN ] ] ] ）将参数转成一个数组 参数： elementN 要放入数组中的数据 返回值： 新数组 * 数组的find和findIndex

检索数组中的某个值

arr.find

value arr.find(callback [ , thisArg]) 查找数组中满足要求的第一个元素的值 （find这里接收的是一个函数） 参数： callback 在数组上每一项执行的函数，接收3个参数： element 当前遍历到的数组 index【可选】当前遍历到的索引 array【可选】 数组本身 let arr = [1 ,2 ,3 ,4] let val = arr.find ( ( item, index ) ) => { if ( item >= 3 ) { return true; } }) ; 简写上面的代码： val = arr.find( item=>item>=3 ); console.log ( val ) ; // 3

arr.findIndex

Index arr . findIndex ( callback [ , thisArg ]) 查找数组中满足要求的第一个元素的值的索引 参数： callback 针对数值中的每个元素，都会执行该回调函数，执行时会自动传入下面三个参数； element 当前元素 index 当前元素的索引 array 调用findIndex的数组 可选参数： thisArg 执行callback时作为this对象的值 返回值：不是具体的值，而是索引 let arr = [1 ,2 ,3 ,4] let index = arr.findIndex( item>=item>=3); console.log( index ); // 2数组扁平化flat和includes 扁平化：把后端传过来的二维数组转化为一维数组

arr.flat

Array arr.flat ([depth]) 扁平化多维数组 可选参数： depth 指定要提取嵌套数组的结构深度，默认值为1； 返回值： 一个包含将数组与子数组中所有元素的新数组

arr.flatMap

Array arr.flatMap ( function callback ( currentValue [ , index [ , array] ] ) { //返回新数组的元素 } ) [ ，thisArg ] ) 方法首先使用映射函数映射每个元素，然后将界都压缩成一个新数组。它与map和深度1的flat几乎相同，但flatMap通常在合并成一种方法的效率稍微高一些。 只能替换一层，想要替换多层需要用到递归。

arr.fill

Array arr. fill ( value[ , start[ , end ] ] ) 扁平化多维数组 参数： 用来填充数组元素的值。 可选参数： start：起始索引，默认值为0 end：终止索引，默认值为arr.length

arr.includes（）

判断是否存在指定的一个值 参数： valueToFind 需要查找的值 可选参数： 从fromIndex处开始向后查找 返回值： true代表数组中包含valueTofind，false代表数组中不包含fromIndex模板字符串

let name =（）=> { var n = “小明” ； return n； } let age = 18； p . innerHTML = ` 今年$name()</strong>就要<strong>${ age>13?“保密” : age} 岁了，