es6 数组的扩展

Array.from()

Array.from()用于将类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)转为真正的数组

	//函数内部的arguments对象
	function f(){
		return Array.from(arguments)	
	}
	f('1',[2,3,4],5);  // ["1", Array(3), 5]

	//类似数组的对象是 DOM 操作返回的 NodeList 集合
	let ps = document.querySelectorAll('p');
	Array.from(ps)

	//字符串和 Set 结构都具有 Iterator 接口
	let str = 'hello'
	Array.from(str)  // ['h','e','l','l','o']

	let namesSet = new Set(['a', 'b'])
	Array.from(namesSet) // ['a', 'b']

Array.of()

Array.of()方法用于将一组值,转换为数组。

	Array.of(1,2,3,4,5); // [1,2,3,4,5]

Array.of基本上可以用来替代Array()new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组

	Array.of() // []
	Array.of(undefined) // [undefined]
	Array.of(1) // [1]
	Array.of(1, 2) // [1, 2]

扩展运算符

扩展运算符(spread)是三个点...功能是把数组或类数组对象展开成一系列用逗号隔开的值

	console.log(...[1, 2, 3])
	// 1 2 3
	
	console.log(1, ...[2, 3, 4], 5)
	// 1 2 3 4 5
	
	[...document.querySelectorAll('div')]
	// [<div>, <div>, <div>]


	function foo(a, b, c) {
	    console.log(a);
	    console.log(b);
	    console.log(c);
	}
	
	var arr = [1, 2, 3];
	
	foo(...arr); // 1 2 3

注意只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。

	(...[1, 2])
	// Uncaught SyntaxError: Unexpected number
	
	console.log((...[1, 2]))
	// Uncaught SyntaxError: Unexpected number
	
	console.log(...[1, 2])
	// 1 2

rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组

	function fn(a, ...args) {
	    console.log(a);
	    console.log(args);
	}
	
	fn(1, 2, 3, 4);
	// 1
	// [ 2, 3, 4 ]

扩展运算符的应用

1.复制数组

	var arr1 = [1,2,3];
	//写法1
	var arr2 = [...arr1]; // [1,2,3]
	//写法2
	var [...arr2] = arr1; // [1,2,3]

2.合并数组

	var arr1 = [1,2,3];
	var arr2 = [4,5];
	var arr3 = [...arr1, ...arr2]; // [1,2,3,4,5]

3.与解构赋值结合生成数组

	var [first, ...rest] = [1, 2, 3, 4, 5];
	first // 1
	rest  // [2, 3, 4, 5]

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

	var [...butLast, last] = [1, 2, 3, 4, 5];
	// 报错
	
	var [first, ...middle, last] = [1, 2, 3, 4, 5];
	// 报错

4.把字符串转数组

	let str = [...'hello'];  // ['h','e','l','l','o']

5.Iterator 接口的对象转数组

	let oSet = new Set(['a', 'b']); 
	console.log([...oSet])// ['a', 'b']

如果对没有 Iterator 接口的对象,使用扩展运算符,将会报错。

	let obj = {a: 1, b: 2};
	let arr = [...obj]; // TypeError: Cannot spread non-iterable object

find()

find() 找出数组中符合条件的第一个元素。find方法的回调函数可以接受三个参数,依次为当前的值当前的位置原数组

	var arr = [1,2,3,4,5,6]
	arr.find(function(value,index,arr){
		return value > 5
	})
	// 6

若所有元素都不符合条件,find( )函数就会返回undefined

	var arr = [1,2,3,4,5,6]
	arr.find(function(value){
		return value > 9
	})
	// undefined

findIndex()

findIndex() 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

	var arr = [1,2,3,4,5,6]
	arr.findIndex(function(value){
		return value > 2
	})
	// 2

	var arr = [1,2,3,4,5,6]
	arr.findIndex(function(value){
		return value > 10
	})
	// -1

fill()

fill() 用指定的值,填充到数组,第一个参数是填充内容,第二、三个参数指定填充的起始位置和结束位置。

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

	['a', 'b', 'c'].fill(7, 1, 3)
	// ['a', 7, 7]

entries()

entries() 对数组的键值对进行遍历,返回一个遍历器,可以用for…of对其进行遍历。entries()是对键值对的遍历。

	for(let [i,v] of [1,2,3].entries()){
		console.log(i,v)
		// 键 值
		// 0  1
		// 1  2
		// 2  3
	}

keys()

keys() 对数组的索引键进行遍历,返回一个遍历器。keys()是对键名的遍历。

	for(let i of [1,2,3].keys()){
		console.log(i)
		// 键 
		// 0  
		// 1  
		// 2  
	}

values()

values() 对数组的元素进行遍历,返回一个遍历器。values()是对键值的遍历。

	for(let i of [1,2,3].values()){
		console.log(i)
		// 值 
		// 1  
		// 2  
		// 3  
	}

includes()

includes()判断是否包含某一元素,返回true或false,第二个参数表示判断的起始位置,也可以是负数,表示从右数过来第几个,但是不改变判断搜索的方向,搜索方向还是从左到右。

	var arr = [1,2,3,"a","b","c"]
	arr.includes(1); // true
	arr.includes(1,-2); // false 

更多内容详细请看-----阮一峰的es6入门

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值