es6 数组的扩展

电玩女神 2022-02-04 12:36 270阅读 0赞

### 数组的扩展 ###

*   *   *  Array.from()
         *  Array.of()
         *  扩展运算符
         *  扩展运算符的应用
         *  find()
         *  findIndex()
         *  fill()
         *  entries()
         *  keys()
         *  values()
         *  includes()

### 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