ES6中数组的扩展(三)

数组实例的entries(), keys(), values()

ES6新增了三个数组的方法, entries, keys, values, 他们用于遍历数组,它们都返回一个遍历器对象

可以使用for。of循环遍历
entries返回键值对
keys返回键
values返回值

	for (let [index, value] of [1, 6].entries()) {
		return [index, value]
	}
	// 0 : 1
	// 1 : 2

	for (let index of [2, 5].keys()) {
		return index 
	}
	// 0
	// 1

	for (let value of [3, 9].values()) {
		return value
	}
	// 3
	// 9

也可以手动的next执行遍历

	let letter = [1, 2, 5, 7, 10];
	let entries = letter.entries();
	entries.next().value // 0 : 1 
	entries.next().value // 1 : 2 
	entries.next().value // 2 : 5 
	

数组实例的includes()

方法返回一个数组实例中是否包含给定的值

	[1, 3, 5].includes(3);
	// true
	[1, 3, 5].inclodes(6);
	// false
	[1, 3, NaN].includes(NaN);
	// true

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置

	[1, 2, 3].includes(3, 3);
	// 表示从索引3开始找3
	[1, 2, 3].includes(3, -1);
	// 从索引2找3

数组实例的flat(), flatMap()

数组有时会嵌套数组,多维数组,flat方法可以将数组实例转换为一个一维数组,并且不改变原数组

	[1, 3, 5, [1, 3, 9]].flat()
	// [1, 3, 5, 1, 3, 9]

默认情况flat方法只能拉平一层,也就是只能削减一层维度。

flat方法参数中可以写入值,参数值就是你要拉平的维度

	[1, 2, 3, [4, [6, 7]]].flat();
	// [1, 2, 3, 4, [6, 7]]
		
	[1, 2, 3, [4, [6, 7]]].flat(2);
	// [1, 2, 3, 4, 6, 7]

如果参数中你写infinity 表示无上限维度,即在你不知道几维或者懒得思考时,使用。

如果原数组中有空位,flat返回的数组就会把空位排除

	[1, 2,  , 4, 5].flat();
	// [1, 2, 4, 5]

flatMap() 方法对原数组的每一个成员执行一个函数(Arrap.prototype.map),然后把返回值逐一进行flat,改方法返回一个新数组,不改变原数组

	// [[2, 4], [3, 6], [4, 8]].flat();
	// 相等于
	[2, 3, 4].flatMap(x => x, x * 2);
	// [2, 4, 3, 6, 4, 8]

只能展开一层数组

	// [[[2]], [[4]], [[6]]].flat()
	// 相等于
	[2, 4, 6].flatMap(x => [[x * 2]])
	// [[4], [8], [12]]

flatMap 的参数是一个遍历函数,改函数接受三个参数,分别是当前数组成员,成员位置,原数组

	arr.flatMap(function callback(currentValue[, index[, array]]) {
		//...
	}[, thisArg])

flatMap方法的第二个参数表示, 遍历函数里的this。用来绑定

数组的空位

指代数组中某些位置没有任何值

	Array(3);
	// [, , ,]

注意,空位不是undefined,值为undefined的值依旧是有值的,但是空位没有任何值

	0 in [undefined, undefined, undefined] // true
	0 in [, , ,] // false

上面说明第一个数组0位有值,虽然他是undefined,第二个数组第0位没有值,因为空位没有任何值

forEach, filter, some, every, ruduce会忽略空位

map会忽略空位,但保留该值

join 和 tostring 会将空位视为undefined, 而undefined和null将会处理成空串

	// forEach方法
	[, 'a'].forEach( (x, i) => console.log(i));
	// 1
	
	// filter方法
	['a', , 'b'].filter(x => true)
	// ['a', 'b']

	// every方法
	[, 'a'].every(x => x === 'a') 
	// true

	// reduce方法
	[1, , 2].reduce((x, y) => x + y)
	// 3

	// some方法
	[, 'a'].some(x => x !== 'a')
	// false

	// map
	[, 'a'].map(x => 1)
	// [, 1]

	// join
	[, 'a'].join('-')
	// -a
	
	// tostring
	[, 'a'].tostring()
	// ', a'

ES6明确将空位转为undefined

Array.from方法会将数组的空位转undefined,该方法不会忽略空位

	Array([, 3])
	// [empty, 3]
	Array.from([1, 2, ,3])
	// [1, 2, undefined,3]

扩展运算符也会将空位转为undefined

	[...['a', ,'b']]
	// ['a', undefined, 'b']

copyWithin会将空位一起拷贝

	[, 'a', 'b', ,].copyWithin(2, 0)
	// [, 'a', , 'a']

fill会将空位视为正常数组位

	new Array(3).fill('a')
	// ['a', 'a', 'a']

for of循环也会遍历到空位

	let arr = [, ,];
	for (let v of arr) {
		console.log(1)
	}
	// 1
	// 1

entries, keys, values, find, findIndex 会处理成undefined

	// entries
	[...[, 'a'].entries()]
	// [[0, undefined], [1, 'a']]

	// keys
	[...[, 'a'].keys()]
	// [0, 1]

	// values
	[...[, 'a'].values()]
	// [undefined, 'a']

	// find
	[, 'a'].find(x => true)
	// undefined

	// findIndex
	[, 'a'].findIndex(x => true)
	// 0

可以看到find中空位处理成true,索引尽量避免出现空位

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值