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)

打印结果为 {age18 name: ‘李四‘, height170}

如果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’]

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值