数组的常用方法

文章目录

• 前言
• 一、不改变原数组
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

本期我总结了一下比较常见的数组的方法，我大致分为了改变原数组以及不改变原数组两种情况。

一、不改变原数组 

1.join(separator)

描述：join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

const elements = ['C', 'S', 'D', 'N'];

console.log(elements.join());// Expected output: "C,S,D,N"

console.log(elements.join('-'));// Expected output: "C-S-D-N"

console.log(elements.join(''));// Expected output: "优快云"

console.log(elements);// Expected output: ['C', 'S', 'D', 'N']

2.slice()

描述：slice() 方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。

const elements = ['C', 'S', 'D', 'N','王','者','荣','耀'];

console.log(elements.slice(2));// Expected output: Array ['D', 'N','王','者','荣','耀']

console.log(elements.slice(2,4));// Expected output: Array ['D', 'N']

console.log(elements.slice(2,8));// Expected output: Array ['D', 'N','王','者','荣','耀'] 结束值超出最大索引值就会截取起始值后的全部元素

console.log(elements.slice(-2));// Expected output: ['荣','耀']

console.log(elements.slice(2, -1));// Expected output: ['D', 'N','王','者','荣']

console.log(elements.slice(2,2));// Expected output: [] start===end 则不截取任何元素

3.concat()  

描述：concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。（浅拷贝）

const arr = ['C', 'S', 'D', 'N'];

const arr1 = ['王', '者', '荣', '耀']

const arr2 = arr.concat(arr1)

console.log(arr2);// Expected output: Array ["C","S","D","N","王","者","荣","耀"]

const arr3 = arr.concat(arr1, arr2)

console.log(arr3);// Expected output: Array ["C","S","D","N","王","者","荣","耀","C","S","D","N","王","者","荣","耀"]

4.indexOf()

描述：indexOf() 方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。

const arr = ['C', 'S', 'D', 'N','S'];

console.log(arr.indexOf('C'));// Expected output: 0

// Start from index 2

console.log(arr.indexOf('S', 2));// Expected output: 4

console.log(arr.indexOf('s'));// Expected output: -1

 5.lastIndexOf()

描述：lastIndexOf() 方法返回数组中给定元素最后一次出现的索引，如果不存在则返回 -1。该方法从 fromIndex 开始向前搜索数组。

const arr = ['C', 'S', 'D', 'N','S'];

console.log(arr.lastIndexOf('S'));// Expected output: 4

console.log(arr.lastIndexOf('D'));// Expected output: 2

 6.findIndex() 

描述：findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

const arr = ['C', 'S', 'D', 'N','S'];

const findIndex = arr.findIndex(el => el === 'C')

const findIndex1 = arr.findIndex(el=>el==='Cs')

console.log(findIndex);// Expected output: 0

console.log(findIndex1,);// Expected output: -1

 7.find()  

描述：find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const arr = ['C', 'S', 'D', 'N', 'S'];

const item = arr.find(el => el === 'C')

1. console.log(item);// Expected output: 'C'

 8.toString()  

描述：toString() 方法返回一个字符串，表示指定的数组及其元素。

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());// Expected output: "1,2,a,1a"

9.falt()

描述：flat() 方法创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。默认深度为1，参数为Infinity，展开全部

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());// expected output: Array [0, 1, 2, 3, 4]

const arr2 = [0, 1, [2, [3, [4, 5]]]];

console.log(arr2.flat());// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]

console.log(arr2.flat(2));// expected output: Array [0, 1, 2, 3, Array [4, 5]]

console.log(arr2.flat(Infinity));// expected output: Array [0, 1, 2, 3, 4, 5]

10.flatMap()

描述：flatMap() 方法对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法（arr.map(...args).flat()），但比分别调用这两个方法稍微更高效一些。

const arr1 = [1, 2, 1];

const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));

console.log(result);// Expected output: Array [1, 2, 2, 1]

const arr = [1,2,3,4]

const newArr = arr.flatMap(()=>[x,x*2])

console.log(newArr)// Expected output: Array [1, 2, 2,4,3,6,4,8]

11.every()

描述：every()方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。 

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every((currentValue) => currentValue < 40));// Expected output: true

console.log(array1.every((currentValue) => currentValue < 39));// Expected output: false

 12.some()

描述：some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。

const array = [1, 2, 3, 4, 5];

console.log(array.some( (element) => element % 2 === 0));// Expected output: true

console.log(array.some( (element) => element >= 6));// Expected output: false

 13.includes() 

 描述：includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。它支持接收俩个参数，第一个是搜索的值，第二个是开始搜索的索引值（默认为0）

const array1 = [1, 2, 3];

console.log(array1.includes(2));// Expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));// Expected output: true

console.log(pets.includes('at'));// Expected output: false

console.log(pets.includes('cat',1));// Expected output: false

 14.forEach()  

描述：forEach()：循环遍历数组每一项（没有返回值） 

const array1 = ['a', 'b', 'c'];

array1.forEach((element) => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

15.map()

描述：map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2);

console.log(map1);// Expected output: Array [2, 8, 18, 32]

二、改变原数组 

1.push()

描述：push() 方法将指定的元素添加到数组的末尾，并返回新的数组长度。

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);// Expected output: 4
console.log(animals);// Expected output: Array ["pigs", "goats", "sheep", "cows"]

2.pop() 

描述：pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());// Expected output: "tomato"

console.log(plants);// Expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);// Expected output: Array ["broccoli", "cauliflower", "cabbage"]

3.shift()

描述：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);// Expected output: Array [2, 3]

console.log(firstElement);// Expected output: 1

4.unshift()

描述： 将参数添加到原数组开头，并返回数组的长度

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));// Expected output: 5

console.log(array1);// Expected output: Array [4, 5, 1, 2, 3]

5.splice()

描述:splice()方法就地移除或者替换已存在的元素和/或添加新的元素，splice(start,deleteCount,val1,val2,…)从start位置开始删除deleteCount项，并从该位置起插入 

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
console.log(months);// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

const arr = months.splice(4, 1);

console.log(arr)// Expected output: Array [ "May"]

6.fill()

描述：使用特定值填充数组中的一个或多个元素(修改原数组) ，他支持接收三个参数，第一个为填充的值，第二个为开始填充的位置，第三个是结束填充的位置（不包括结束值）

const array1 = [1, 2, 3, 4];// Fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));// Expected output: Array [1, 2, 0, 0]
console.log(array1.fill(5, 1));// Expected output: Array [1, 5, 5, 5]

console.log(array1.fill(6));// Expected output: Array [6, 6, 6, 6]

7.filter()

描述：过滤数组中的每一项运行给定函数，返回满足过滤条件组成的数组 

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);// Expected output: Array ["exuberant", "destruction", "present"]

8.sort() 

描述：sort() 方法就地对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。 如果想要不改变原数组使用toSorted()

const months = ['March', 'Jan', 'Feb', 'Dec'];

months.sort();

console.log(months);// Expected output: Array ["Dec", "Feb", "Jan", "March"] 

const array1 = [1, 30, 4, 21, 100000];

const arr = array1.sort((a,b)=>a-b)//a-b升序，b-a降序

console.log(arr)

9.reverse()  

描述：reverse()：将数组反序(修改原数组)，要在不改变原始数组的情况下反转数组中的元素，使用 toReversed()

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// Expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// Expected output: "reversed:" Array ["three", "two", "one"]

---

补充

Array.from()

1、浅拷贝生成一个数组

const set = new Set(["foo", "bar", "baz", "foo"]);

const arr = Array.from(set);

console.log(arr)// [ "foo", "bar", "baz" ]

console.log(set)// { "foo", "bar", "baz" }

 2、浅拷贝生成一个多维数组

Array.from({ length: 3 },()=>[]) // [[],[],[]] 

总结

这是我个人在学习过程中认为比较用的多的数组方法，如果有错误的地方，欢迎各位指正。