Javascript 数组方法整理

ZGtheGreat

 关注

阅读 118

2022-04-13

Javascript 数组方法整理

1、 Array.map() 与 Array.forEach()

2、Array.filter()

三个参数：
	item	必须。当前元素的值
	index	可选。当前元素的索引值
	arr		可选。当前元素属于的数组对象（原数组）

3、Array.reduce() 与 Array.reduceRight()

四个参数：
	total	 必需。初始值 或  函数先前返回的值。
	item     必需。当前元素的值。
	index	 可选。当前元素的数组索引。
	arr	     可选。当前元素所属的数组对象（原数组）

4、Array.fill()

fill() 方法用于将一个固定值替换数组的元素。

三个参数：
	value	必需。填充的替换值。
	start 	可选。开始填充位置。
	end		可选。停止填充位置 (默认为 array.length)

const list = [1, 2, 3, 4, 5];
console.log(list.fill(0)); // [0, 0, 0, 0, 0]

5、Array.find()

  • 返回满足条件数组中第一个元素的值。否则返回undefined。

  • 当数组中的元素满足条件时返回 true , find() 返回符合条件的元素，之后的值不会再调用执行函数。

    三个参数：
	value	必需。填充的替换值。
	start 	可选。开始填充位置。
	end		可选。停止填充位置 (默认为 array.length)

const list = [1, 2, 3, 4, 5];
console.log(list.find((el) => el === 3)); // 3
console.log(list.find((el) => el === 6)); // undefined

6、Array.indexOf() 与 Array.lastIndexOf()

  • indexOf() 方法可返回数组中某个指定的元素位置。

  • 该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

  • 如果在数组中没找到指定元素则返回 -1。

    三个参数：
	item 	必需。查找的元素。
	start 	可选。数组中开始检索的位置。


const list = [1, 2, 3, 4, 5, 3, 4, 5];
console.log(list.indexOf(3)); // 2 (从开始位置查找，查找到第一个 3 下标为 2)
console.log(list.indexOf(3,4)); // 6 (从下标为 4 位置开始查找，查找到第它后面的第一个个 3，也就是整个数组里的第二个三 下标为 6)
console.log(list.indexOf(6)); // -1 （没有找到 元素为 6 的数据）

 
lastIndexOf() 使用方法 同 indexOf()

  • lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
  • 如果要检索的元素没有出现，则该方法返回 -1。

7、Array.findIndex()

  • 返回满足条件的数组中第一个元素的索引。否则返回 -1

  • 注意: findIndex() 对于空数组，函数是不会执行的。不改变数组的原始值。

      三个参数：
  	item     必需。当前元素的值。
  	index	 可选。当前元素的数组索引。
  	arr	     可选。当前元素所属的数组对象（原数组）

const array = [5, 12, 8, 130, 44];
console.log(array.findIndex((element) => element > 13)); // 3

8、Array.includes()

  • includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

      两个参数：
  	item     必需。需要查找的元素值。
  	index	 可选。从该索引处开始查找，如果为负值，则按升序从 array.length + index	 的索引开始搜索，如果计算出的索引小于 0，则整个数组都会被搜索。

const list = [1, 2, 3, 4, 5];
console.log(list.includes(3)); // true
console.log(list.includes(6)); // false

console.log(list.includes(3,-1)); // true  //数组长度是5   index 是 -1   computed index 是 5 + (-1) = 4

console.log(list.includes(3,-100)); // true  //数组长度是5   index 是 -100   computed index 是 5 + (-100) = -95   小于 0   整个数组都会被搜索
console.log(list.includes(3,5)); // false

9 、Array.pop()

  • pop() 方法用于删除数组的最后一个元素并返回删除的元素。
  • 注意：此方法改变数组的长度！
const list = [1, 2, 3, 4, 5];
console.log(list.pop()); // 5  当前删除的数据
console.log(list); // [1, 2, 3, 4] 最新数组

10、Array.shift()

  • shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
  • 注意， 此方法改变数组的长度！
const list = [1, 2, 3, 4, 5];
console.log(list.shift()); // 1   当前删除的数据
console.log(list); // [2, 3, 4, 5]   最新数组

11、Array.push()

将新元素附加到数组的末尾，并返回新的长度。

	参数
		item1,item2, ..., itemX	可选。向数组末尾位置添加一个或者多个元素。

const list = [1, 2, 3, 4, 5];
console.log(list.push(6)); // 数组长度6
console.log(list); // [1, 2, 3, 4, 5, 6]

12、Array.unshift()

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

	参数
		item1,item2, ..., itemX	可选。向数组起始位置添加一个或者多个元素。

const list = [1, 2, 3, 4, 5];
console.log(list.unshift(0)); // 数组长度 6
console.log(list); // [0, 1, 2, 3, 4, 5]

13、Array.splice()

splice() 方法从数组添加/删除项目，并返回删除的项目，注意，splice() 方法会改变原始数组。

三个参数
	index:	数组开始下标
	len: 	替换/删除的长度
	item:	替换的值，删除操作的话 item为空

const list = [1, 2, 3, 4, 5];
console.log(list.splice(1, 2)); // 从下标1 开始 删除 两个 [2, 3]
console.log(list); // [1, 4, 5]

//删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变) 
var arr = ['a','b','c','d']; 
arr.splice(1,1); 
console.log(arr); 
//['a','c','d']; 
  
  
//删除起始下标为1，长度为2的一个值(len设置2) 
var arr2 = ['a','b','c','d'] 
arr2.splice(1,2); 
console.log(arr2); 
//['a','d']

//替换起始下标为1，长度为1的一个值为‘ttt'，len设置的1 
var arr = ['a','b','c','d']; 
arr.splice(1,1,'ttt'); 
console.log(arr); 
//['a','ttt','c','d'] 
  
  
var arr2 = ['a','b','c','d']; 
arr2.splice(1,2,'ttt'); 
console.log(arr2); 
//['a','ttt','d'] 替换起始下标为1，长度为2的两个值为‘ttt'，len设置的1

// 添加 ---- len设置为0，item为添加的值
var arr = ['a','b','c','d']; 
arr.splice(1,0,'ttt'); 
console.log(arr); 
//['a','ttt','b','c','d'] 表示在下标为1处添加一项'ttt'

14、Array.slice()

  • slice() 方法可从已有的数组中返回选定的元素。【截取数组】
  • slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分
  • 不会改变原始数组。

const list = [1, 2, 3, 4, 5];
console.log(list.slice(1, 2)); // 从下标1 开始 删除 两个 [2, 3]
console.log(list); //  [1, 2, 3, 4, 5]

15、Array.join()

  • join() 方法将数组作为字符串返回，元素将由指定的分隔符分隔，默认分隔符是逗号 (,)。
  • 注意，join() 方法不会改变原始数组。
const list = [1, 2, 3, 4, 5];
console.log(list.join(', ')); // "1, 2, 3, 4, 5"

16、Array.reverse()

reverse() 方法反转数组中元素的顺序，但是reverse() 方法会改变原始数组。

const list = [1, 2, 3, 4, 5];
console.log(list.reverse()); // [5, 4, 3, 2, 1]
console.log(list); // [5, 4, 3, 2, 1]

17、Array.sort()

  • sort() 方法对数组的项目进行排序。排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。
  • 默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。
  • 但是，如果数字按字符串排序，则 “25” 大于 “100” ，因为 “2” 大于 “1”。
  • 正因为如此，sort() 方法在对数字进行排序时会产生不正确的结果。
  • 我们可以通过提供“比较函数”来解决此问题。
  • 注意，sort() 方法会改变原始数组。
const array = ['D', 'B', 'A', 'C'];
console.log(array.sort()); // ['A', 'B', 'C', 'D']
// OR
const array = [4, 1, 3, 2, 10];
console.log(array.sort()); // [1, 10, 2, 3, 4]
console.log(array.sort((a, b) => a - b)); // [1, 2, 3, 4, 10]

18、Array.some()

  • some() 方法用于检测数组中的元素是否满足指定条件（函数提供），它会依次执行数组的每个元素，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测；如果没有满足条件的元素，则返回false。

  • 注意：some() 不会对空数组进行检测，some() 也不会改变原始数组。

const list = [1, 2, 3, 4, 5];
console.log(list.some((el) => el === 3)); // true
console.log(list.some((el) => el === 6)); // false

19、Array.every()

  • every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供），every() 方法使用指定函数检测数组中的所有元素，如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回 true。

  • 注意：every() 不会对空数组进行检测，every() 也不会改变原始数组。

const list = [1, 2, 3, 4, 5];
console.log(list.every((el) => el === 3)); // false
const list = [2, 4, 6, 8, 10];
console.log(list.every((el) => el%2 === 0)); // true

20、Array.from() 与 Object.keys(object) 与 Object.values(object)

  • from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

  • 用于数组的浅拷贝。就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

  • object中必须有length属性，返回的数组长度取决于length长度， key 值必须是数值

      三个参数
  	object		必需，要转换为数组的对象。
  	mapFunction	可选，数组中每个元素要调用的函数。
  	thisValue	可选，映射函数(mapFunction)中的 this 对象。

const obj = {
    0: '1',
    1: '2',
    2: '3',
    'length': 3
} 
const arr = Array.from(obj)
console.log(arr);//['1', '2', '3']

//const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
//console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  • 返回一个对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致
const obj = {
   0: '1',
   1: '2',
   2: '3',
}
const arr = Object.keys(obj)
console.log(arr); //['1', '2', '3']
  • 与第一种不同的是不需要length属性，返回一个对象所有可枚举属性值
let obj = {
   0: '1',
   1: '2',
   2: '3',
}
let arr = Object.values(obj)
console.log(arr); //['1', '2', '3']

21、Array.of()

array.of()函数是JavaScript中的內置函数，它使用变量作为函数的参数创建一个新的数组实例。

const list = Array.of(1, 2, 3, 4, 5);
console.log(list); // [1, 2, 3, 4, 5]

22、Array.isArray()

  • isArray() 方法用于判断一个对象是否为数组。
  • 如果对象是数组返回 true，否则返回 false。
console.log(Array.isArray([1, 2, 3, 4, 5])); // true
console.log(Array.isArray(5)); // false

23、Array.at()

返回指定索引处的值。

const list = [1, 2, 3, 4, 5];
console.log(list2.at(1)); // 2
console.log(list2.at(-1)); // 5
console.log(list2.at(-2)); // 4

24、Array.copyWithin()

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，但不会改变原数组的长度。

三个参数
	target	必需。复制到指定目标索引位置。
	start 	可选。元素复制的起始位置。
	end 	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); 
console.log(list)// [4, 2, 3, 4, 5]

25、Array.concat()

  • concat() 方法用于连接两个或多个数组。

  • 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

      多个参数
  	array2, array3, ..., arrayX		必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

const A = ["1", "2"];
const B = ["3", "4", "5"];
const C = ["6", "7"];
const ABC = A.concat(B,C);  
console.log(ABC)//["1", "2", "3", "4", "5", "6", "7"]

26、Array.entries()

  • entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
  • 迭代对象中数组的索引值作为 key， 数组元素作为 value。
let obj = {
    0: 'A',
    1: 'B',
    2: 'C',
    3: 'D',
}
let arr = Object.entries(obj)
console.log(arr);
//  ['0', "A"]
//  ['1', "B"]
//  ['2', "C"]
//  ['3', "D"]


const fruits = ["A", "B", "C", "D"];
let arr1 = fruits.entries();
console.log(arr1);
//  ['0', "A"]
//  ['1', "B"]
//  ['2', "C"]
//  ['3', "D"]

27、Array.toString()

  • toString() 方法可把数组转换为字符串，并返回结果。
  • 注意： 数组中的元素之间用逗号分隔。
const A = ["1", "2", "3", "4", "5"]
A.toString()  // "1", "2", "3", "4", "5"

相关推荐

JavaScript深入之数组方法整理

生态人 83 0 0

javascript数组方法

敬亭阁主 103 0 0

JavaScript数组方法

大雁f 175 0 0

js数组方法整理

Gaaidou 74 0 0

JavaScript 数组方法 遍历

一天清晨 102 0 0

JavaScript 中最常用的数组方法整理汇总

覃榜言 160 0 0

JavaScript数组方法总结

code_balance 58 0 0

JavaScript 常用数组方法

烟中雯城 86 0 0

JavaScript中的数组方法

千行 19 0 0

JavaScript的重要数组方法

开源分享 83 0 0

精彩评论（0）

0 0 举报