ES6 数组方法归纳整理

全栈程序员站长

发布于 2022-06-27 10:35:55

5720

发布于 2022-06-27 10:35:55

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

ES6 操作数组方法
1.判断是否为数组
2.创建数组
3.伪数组转数组
4.查找元素
5.数组遍历
6.遍历器
7.数组的操作
数组与字符串的相互转化
数组的截取和合并
数组元素的排序
数组元素的去重
8.扩展运算符
ES2020 新属性

1.判断是否为数组

Array.isArray( )

	let arr = [1,2,3]
	console.log( Array.isArray(arr) )// true
	console.log( Array.isArray([]) ) //true

使用instanceof 方法用于判断一个变量是否是某个对象的实例

	const array = new Array();
	array instanceof Array; //true

constructor属性返回对创建此对象的数组函数的引用，就是返回对象相对应的构造函数。

	const array = new Array();
	array.constructor === Array; // true

2.创建数组

new Array() 创建数组

如果使用Array构造函数传入一个数值型的值，那么数组的长度length属性会被设置为该值；

	let items = new Array(2);
	console.log(items.length); // 2
	console.log(items[0]); // undefined
	console.log(items[1]); // undefined

如果传入一个非数值型的值，那么这个值会成为目标数据的唯一项；

	 let items = new Array('a')
	console.log(items.length); // 1
	console.log(items[0]); // a
	console.log(items[1]); // undefined

如果传入多个值，无论这些值是不是数值型的，都会变为数组的元素。

 	let items = new Array('a','b','c')
	console.log(items.length); // 3
	console.log(items[0]); // a
	console.log(items[1]); // b

Array.of() 无论有多少参数，参数是什么类型的，Array.of()方法总会创建一个包含所有参数的数组

	let items = Array.of(2);
	console.log(items.length); // 1
	console.log(items[0]); // 2

	let items = Array.of(2,3);
	console.log(items.length); // 2
	console.log(items[0]); // 2

3.伪数组转数组

方式一：

	let str = "hello";
	let arr = [...str];
	console.log(arr); // ["h", "e", "l", "l", "o"]

方式二：

	let str = "hello";
	let arr = Array.from(str);
	console.log(arr); // ["h", "e", "l", "l", "o"]

Array.from() 可接收三个参数，第一个参数为类数组对象，第二个参数为映射函数，如果使用了映射函数，可以传第三个参数表示映射函数的this值。

	function translate () { 
   
	    return Array.from(arguments, (value) => value+1);
	}
	let numbers = translate(1, 2, 3);
	console.log(numbers); // [2, 3, 4]

	let helper = { 
   
	    add (value) { 
   
	        return value+1;
	    }
	}
	function translate () { 
   
	    return Array.from(arguments, helper.add, helper);
	}
	let numbers = translate(1, 2, 3);
	console.log(numbers); // [2, 3, 4]

4.查找元素

find()返回查找第一个满足条件的值
findIndex()返回查找第一个满足条件的值的索引

	let numbers = [1, 2, 3, 4, 5];
	console.log(numbers.find(n => n > 3)); // 4
	console.log(numbers.findIndex(n => n > 3)); // 3

includes() 用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。语法： arr.includes(searchElement, fromIndex) fromIndex可选

	[1, 2, 3].includes(2);     // true
	[1, 2, 3].includes(4);     // false
	[1, 2, NaN].includes(NaN); // true

如果fromIndex 大于等于数组长度，则返回 false 。该数组不会被搜索:

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

如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。如果计算出的索引小于 0，则整个数组都会被搜索。

	var arr = ['a', 'b', 'c'];
	arr.includes('a', -2); // false
	arr.includes('a', -100); // true

indexOf(searchElement[, fromIndex = 0]) 方法返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf(searchElement[, fromIndex = 0]) 方法返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

这两个方法都接受两个参数：searchElement：要查找的元素；fromIndex：开始查找的索引位置。
这两个方法都返回查找的项在数组中的位置，或者在没找到的情况下返回-1。

	[2, 9, 7, 8, 9].indexOf(9); // 1
	[2, 9, 7, 8, 9].lastIndexOf(9); // 4

5.数组遍历

forEach() 不能中断遍历，没有返回值

	let arr = [1, 2, 3];
	arr.forEach((item, index, arr) => { 
   
	    console.log(item)
	})

map() 返回一个新的数组

let arr = [1, 2, 3];
let newArr = arr.map((item, index, arr) => { 
   
    return item * 2;
})
console.log(arr) // [1, 2, 3]
console.log(newArr) // [2, 4, 6]

filter() 可以过滤数组，包含满足条件的数组项，返回一个新数组

	let arr = [1, 2, 3];
	let newArr = arr.filter((item, index, arr) => { 
   
	    return item <= 2;
	})
	console.log(arr) // [1, 2, 3]
	console.log(newArr) // [1, 2]

some() 返回布尔值，如果有一个满足条件的值则返回true

let arr = [1, 2, 3];
let result = arr.some((item, index, arr) => { 
   
    return item < 2;
})
console.log(result) // true

every() 返回布尔值，如果所有数组项都满足条件则返回true

let arr = [1, 2, 3];
let result = arr.every((item, index, arr) => { 
   
    return item < 2;
})
console.log(result) // false

6.遍历器

keys() 返回一个包含数组中每个索引键的Array Iterator对象。

	let arr = ['a', 'b', 'c'];
	let iterator = arr.keys()
	for (let key of iterator) { 
   
	  console.log(key); // expected output: 0 1 2
	}

对象也有相应的方法，获取对象所有属性的键

	var arr = ["a", , "c"];
	var sparseKeys = Object.keys(arr);
	var denseKeys = [...arr.keys()];
	console.log(sparseKeys); // ['0', '2']
	console.log(denseKeys);  // [0, 1, 2]

values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。

	let arr = ['a', 'b', 'c'];
	let iterator = arr.values();
	
	for (const value of iterator) { 
   
	  console.log(value); // expected output: "a" "b" "c"
	}

对象也有相应的方法，获取对象所有属性的值

	var arr = ["a", , "c"];
	var sparseKeys = Object.values(arr);
	var denseKeys = [...arr.values()];
	console.log(sparseKeys); // ["a", "c"]
	console.log(denseKeys);  // ["a", undefined, "c"]

entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

	var arr = ["a", "b", "c"];
	var iter = arr.entries();
	var a = [];

	// for(var i=0; i< arr.length; i++){ // 实际使用的是这个 
	for(var i=0; i< arr.length+1; i++){ 
       // 注意，是length+1，比数组的长度大
	    var tem = iter.next();             // 每次迭代时更新next
	    console.log(tem.done);             // 这里可以看到更新后的done都是false
	    if(tem.done !== true){ 
                // 遍历迭代器结束done才是true
	        console.log(tem.value);
	        a[i]=tem.value;
	    }
	}
    
	console.log(a);                         // 遍历完毕，输出next.value的数组

对象也有相应的方法，获取对象所有属性的键值对

	const obj = { 
    foo: 'bar', baz: 42 };
	console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

7.数组的操作

数组元素的增加与删除[4] array.push(e1, e2, …eN) 将一个或多个元素添加到数组的末尾，并返回新数组的长度。

	const array = [1, 2, 3];
	const length = array.push(4, 5);
	// array: [1, 2, 3, 4, 5]; length: 5

array.unshift(e1, e2, …eN)将一个或多个元素添加到数组的开头，并返回新数组的长度。

	const array = [1, 2, 3];
	const length = array.unshift(4, 5);
	// array: [ 4, 5, 1, 2, 3]; length: 5

array.pop()从数组中删除最后一个元素，并返回最后一个元素的值，原数组的最后一个元素被删除。数组为空时返回undefined。

	const array = [1, 2, 3];
	const poped = array.pop();  
	// array: [1, 2]; poped: 3

4.array.shift()删除数组的第一个元素，并返回第一个元素，原数组的第一个元素被删除。数组为空时返回undefined。

	const array = [1, 2, 3];
	const shifted = array.shift();  
	// array: [2, 3]; shifted: 1

array.splice(start[, deleteCount, item1, item2, …])从数组中添加/删除元素，返回值是由被删除的元素组成的一个新的数组，如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

start 指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从1计数）。
deleteCount (可选)，从start位置开始要删除的元素个数。如果 deleteCount 是 0，则不移除元素。这种情况下，至少应添加一个新元素。如果deleteCount大于start之后的元素的总数，则从start后面的元素都将被删除（含第 start 位）。
item1, item2, …(可选)，要添加进数组的元素,从start位置开始。如果不指定，则 splice() 将只删除数组元素。

	const array = [1, 2, 3, 4, 5];
	const deleted = array.splice(2, 0, 6); // 在索引为2的位置插入6
	// array 变为 [1, 2, 6, 3, 4, 5]; deleted为[]

数组与字符串的相互转化

数组转字符串

array.join(separator=’,’) 将数组中的元素通过separator连接成字符串，并返回该字符串，separator默认为”,”。

	const array = [1, 2, 3];
	let str = array.join(',');
	// str: "1,2,3"

toLocaleString()、toString()、valueOf()：所有对象都具有这三个方法，数组继承的这个三个方法，可以看作是join()的特殊用法，不常用。如果数组中的某一项的值是 null 或者 undefined，那么该值在join()、 toLocaleString()、toString()和 valueOf()方法返回的结果中以空字符串表示。

	var colors = ["red", "blue", "green"];   
	// 调用数组的 toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
	console.log(colors.toString());     // red,blue,green
	// 调用 valueOf()返回的还是数组
	console.log(colors.valueOf());      // ["red", "blue", "green"]
	console.log(colors.toLocaleString()); // red,blue,green

字符串转数组

string.split(separator,howmany) 用于把一个字符串分割成字符串数组。 separator (必需)，字符串或正则表达式，从该参数指定的地方对字符串进行分割。 howmany (可选)，该参数可指定返回的数组的最大长度。

	let str = "abc,abcd,aaa";
	let array = str.split(",");// 在每个逗号(,)处进行分解。
	// array: [abc,abcd,aaa]
	
	const array1 = "helloworld";
	let str1 = array1.split('');  
	//["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

数组的截取和合并

数组的截取 – array.slice(start, end) 方法

slice()通过索引位置，从数组中返回start下标开始，直到end下标结束（不包括）的新数组，该方法不会修改原数组，只是返回一个新的子数组。
start (必填)，设定新数组的起始位置（下标从0开始算起）；如果是负数，则表示从数组尾部开始算起（-1 指最后一个元素，-2 指倒数第二个元素，以此类推）。
end (可选)，设定新数组的结束位置；如果不填写该参数，默认到数组结尾；如果是负数，则表示从数组尾部开始算起（-1 指最后一个元素，-2 指倒数第二个元素，以此类推）。
该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 array.splice()。

	// 获取仅包含最后一个元素的子数组
	let array = [1,2,3,4,5];
	array.slice(-1); // [5]

// 获取不包含最后一个元素的子数组
	let array2 = [1,2,3,4,5];
	array2.slice(0, -1); // [1,2,3,4]

数组的合并 – array.concat([item1[, item2[, . . . [,itemN]]]])方法

conact()是将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组。

	const array = [1,2].concat(['a', 'b'], ['name']);
	// [1, 2, "a", "b", "name"]

数组元素的排序

array.sort() 用于对数组的元素进行排序，并返回原数组。如果不带参数，按照字符串UniCode码的顺序进行排序。自定义排序规则：(1)传两个形参；(2)当返回值为正数时，交换传入两形参在数组中位置。

	const array = ['a', 'd', 'c', 'b'];
	array.sort();  //['a', 'b', 'c', 'd']
	
	//按照数值大小进行排序-升序
	[1, 8, 5].sort((a, b) => { 
   
	  return a-b; // 从小到大排序
	});
	// [1, 5, 8]
	
	//按照数值大小进行排序-降序
	[1, 8, 5].sort((a, b) => { 
   
	  return b-a; // 从大到小排序
	});
	// [8, 5, 1]

array.reverse() 将数组中元素的位置颠倒，第一个数组元素成为最后一个数组元素，最后一个数组元素成为第一个。在原数组上操作，然后返回原数组。

	let arr = [1,2,3,4,5]
	console.log(arr.reverse())    // [5,4,3,2,1]
	console.log(arr)    // [5,4,3,2,1]

数组元素的去重

	let arr=['1','a','a','3','1']
	let a=Array.from(new Set(arr))
	
	//或者这么写,用扩展运算符（...），扩展运算符内部调用的是数据结构的 Iterator 接口
	let a=[...new Set(arr)]
	//结果a为["1" , "a" , "3"]

8.扩展运算符

扩展运算符（spread）是三个点（…）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

数组的扩展运算符将一个数组转换成一个逗号分隔的参数序列

	console.log(...[1,2,3])   //1,2,3
	['a', 'b',...[1,3]]   //a,b,1,3

扩展运算用于函数调用

	function add(x, y) { 
   
		  return x + y;
		}
		
		const numbers = [4, 38];
		add(...numbers) // 42
		
*********************************************************	
	function push(a, arr){ 
   
	　　a.push(...arr);
	}
	
*********************************************************
	function add(a, b){ 
   
	
	　　return a+b;　
	
	}
	
	var arr=[1,8];
	add(...arr);
	
*********************************************************
	function add(x,y,z,n,m){ 
   
	　　return x+y+z+n+m;　　
	}
	var a = [1,2,3]
	add(1,...a,3);

扩展运算符替代数组的apply

	//es6
	Math.max(...[1,2,3,5])

	//将一个数组插入到到一个数组的尾部
	1)Array.prototype.push(arr1,arr2);
	2)arr1 = arr1.concat(arr2);
	3)arr1.push(...arr2);

	//复制数组
	arr1 = arr.concat()
	arr1 = arr.splice(0)
	arr1 = [...arr]

	//结构赋值
	const [a, ...b] = [1,2,3,4] //a=1 b=[2,3,4] //扩展只能用在最后一个

ES2020 新属性

空值合并运算符在之前我们经常会使用 || 操作符，但是使用 || 操作符，当左侧的操作数为 0 、 null、 undefined、 NaN、 false、 ‘’ 时，都会使用右侧的操作数。如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。 ?? 操作符可以规避以上问题，它只有在左操作数是 null 或者是 undefined 时，才会返回右侧操作数。

const someValue = 0;
const defaultValue = 100;
let value = someValue ?? defaultValue; // someValue 为 0 ，value 的值是 0

可选链操作符可选链操作符 ?. 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish, 即 null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。

例如，我们要访问 info 对象的 animal 的 reptile 的 tortoise。
但是我们不确定 animal, reptile 是否存在，因此我们需要这样写：
const tortoise = info.animal && info.animal.reptile && info.animal.reptile.tortoise;
因为 null.reptile 或  undefined.reptile 会抛出错误：TypeError: Cannot read property 'reptile' of undefined 或 TypeError: Cannot read property 'reptile' of null，为了避免报错，如果我们需要访问的属性更深，那么这个这句代码会越来越长。
有了可选链之后我们就可以简化：
const tortoise = info.animal?.reptile?.tortoise;

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/133314.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年6月9，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度