ES6 对象字面量和数组

对象字面量

属性名可以用表达式

const obj = {

[“na”+”me”]: {

return “张三”

}，

[‘ag’ + ‘e’] : 18

}

console.log(obj)

打印结果，{ hello: f(), age: 18}

对象的拓展运算符…

const user = { 'name': '张三', 'age': 18, 'height': '170'}

console.log({ …user })

打印结果 { 'name': '张三', 'age': 18, 'height': '170’}

可用于合并两个对象

const other = { ‘weight’: 60 }

const result = { …user, …other }

打印结果{ 'name': '张三', 'age': 18, 'height': '170’, ‘weight’: 60}

同名属性，后面的会将前面的覆盖掉，扩展运算符后面是null、undefined，会直接忽略掉

对象的新方法

Object.assign(target，source1，…)

参数1，目标对象；参数二，源对象

target不能为null或者undefined，source1可以是null或者undefined

该方法为浅拷贝，只拷贝了指针，并未对地址进行拷贝，修改了其中一个的属性，另一个对象的属性也会跟着变动

同名属性会被覆盖

const target = { name: ‘张三’，age：18 }；const source = { name: ‘李四‘， height：170}

Object.assign(target, source)

打印结果为 {age：18， name: ‘李四‘， height：170}

如果target和source为数组对象

const target = [1,2,4]；const source = [5]

Object.assign(target, source)

打印结果为[5,2,4]

原因是该方法将数组处理成对象，key为数组的index，然后再合并，由于同名属性覆盖导致

数组

Array.of()

将所有值作为元素形成数组，参数为空返回空数组

Array.from(arrayLike,mapFn,thisArg)

参数1，类数组对象，可迭代对象

参数2，map函数

参数3，可选参数，指定map函数执行时的this对象

Tip:

1.如果arrayLike中存在空位，会用undefined填充

2.mapFn:按照map函数的逻辑执行arrayLike里面的所有数据

3.thisArg:指定mapFn的this，也就是指定哪个对象的mapFn函数

类数组对象，必须含有length属性，且元素属性名必须是数值或者可转换为数值的字符

Array.from({ 0: ‘0’, 1: ‘1’, 2: ‘2’, length: 3 })

没有length，返回空数组

可迭代对象

map，set，字符串

数组扩展的方法

find(),查找数组中符合条件的元素，有多个返回第一个元素

const result =  ['1', '2', '3', '5', '9', ‘5’].find(item => item === ‘5’)   result = ‘5’ 

Tip:没有值返回undefined

findIndex(),查找数组中符合条件的元素索引，有多条返回第一个元素的索引

const result =  ['1', '2', '3', '5', '9', ‘5’].find(item => item === ‘5’)  result = 3    没有值返回-1

Fill(data,start,end),将一定范围索引的数组元素内容填充为单个指定的值

参数1，用来填充的值

参数2，起始索引值

参数3，可选参数，结束索引，默认为数组末尾

[1,2,3,4].fill(0,1,2) = [1,0,3,4]

copyWithin(start1,start2,end2),将一定范围索引的数组元素修改为此数组另一指定范围索引的元素

参数1，被修改的起始索引

参数2，被用来覆盖的数据的起始索引

参数3，可选参数，被用来覆盖的数据的结束索引，默认为数组末尾

entries()遍历键值对

const data =  [‘name’, ‘age’]

for (const [key, value] of data.entries()) {

console.loe(key, value)
}

打印结果：0:‘name’         1: ‘age’

const entries = data.entries()

console.log(entries.next().value)   // [0, ‘name’]

console.log(entries.next().value)   // [1, ‘age’]

数组的扩展运算符

const arr = [‘name’, ‘age’, ‘height’]

const other = [ , ’weight’]

const newArr = […arr, …other ]

Tip:如果other里面有空，返回数组的长度不变，在它应在的index下值为空

console.log([…newArr.values()])

打印结果：['name', 'age', 'height', undefined, 'weight']

includes()

数组中的元素为有属性的对象，这种方式检查不出来是否包含该对象

const list = [ { name: ‘1’，age: 1 }, {  name: '2', age: 2 }, { name: '3', age: 3 }]

List.includes({ name: ‘1’, age: 1})

打印结果：false

Tip:可以检查出数组里面有NAN

嵌套数组转一维数组

flat() 参数为指定数组嵌套层数，不填写或者填写Infinity均转为一维数组

const arr =  [‘人’, ，‘之’, ‘初’, [‘性’,  ,’本’, ‘善’]]

console.loe( arr.flat() )

打印结果  [‘人’, ‘之’, ‘初’, ‘性’, ‘本’, ‘善’]

Tip: 如果有空格，会跳过

flatMap(mapFn, thisArg) 先对数组遍历，再执行再执行flat方法

参数1，执行的函数(可以指定三个参数，1：当前元素，2:当前元素索引，3:原数组)，参数2，参数1的对象

const list = ['人', '之', '初', ['性', '本', '善']]

console.log('---', list.flatMap((value, index, arr) => { return value + '1' }))

打印结果  [‘人1’, ‘之1’, ‘初1’, ‘性, 本, 善1’]