JS数组中16个常用的方法

前言

因为自己有时会忘记某个JS数组操作的方法，因此就对其总结出16个最常用的数组方法,方便自己学习和回顾

1.Array.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"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

2.Array.unshift()

unshift()  方法将一个或多个元素添加到数组的前面，并返回该数组的新长度,和push差不多,可传入多个参数,然后按顺序添加

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]

3.Array.reverse()

reverse()  方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

const a = [1, 2, 3];

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

a.reverse();

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

4.Array.sort()

sort()  方法将数组中元素按大小排序,参数传入一个函数compareFunction,如果不传参,默认将元素转为字符串,然后比较它们的UTF-16代码单元值序列时构建的。

如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

• 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；

• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；

• 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
• compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

也可以写成：
var numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);

// [1, 2, 3, 4, 5]

5.Array.forEach()

forEach()  方法可以遍历数组,第一个参数item为循环的每一个对象,第二个参数为index索引,第二个参数可不写,第三个参数为执行回调函数时,this的指向。

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

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

// expected output: "a"
// expected output: "b"
// expected output: "c"

6.Array.filter()

filter()  该方法返回一个数组,会遍历数组里面所有值,然后返回符合条件的元素,形成一个新的数组

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

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

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

7.Array.splice()

splice(index,[length,ele])  该方法截取数组元素,返回一个新数组,该方法会影响原数组

第一个参数index: 截取开始的索引

第二个参数length: 截取的个数 不填的话默认从索引截取到数组最后

第三个参数ele: 删除以后添加的元素(可不填)

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");

// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

8.Array.join('')

join(str)  该方法将数组转化为字符串,并且以参数str进行连接,如果不传str,则默认用逗号连接

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

9.Array.reduce()

reduce()  reduce方法会循环数组里面所有元素,并执行callback回调函数.

• 第一个参数为callback回调函数,该函数接收4个参数

1. Accumulator (acc) (累计器)
2. Current Value (cur) (当前值)
3. Current Index (idx) (当前索引)
4. Source Array (src) (源数组)

• reduce第二个参数initialVakue接收acc累加器的初始值,如果不填写,那么acc的初始值为索引为0的元素

注意： 如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

// reduce方法更多用于计算 它会遍历数组里面所有的元素 然后最后返回acc的值
const userinfo = [
  {
    name: '洗衣机',
    price: '1500'
  },
  {
    name: '小米',
    price: '3500'
  },
  {
    name: '化为',
    price: '5000'
  }
]
const allPrice = userinfo.reduce((acc, item) => acc + item.price, 0)
console.log(allPrice)// 输出值为10000

10.Array.prop()

prop()  该方法会删除数组的最后一个元素,并影响原数组,返回值是被删除的那个元素

• 此方法可以更改数组的长度

例子:删除数组最后一个元素

let myFish = ["angel", "clown", "mandarin", "surgeon"];

let popped = myFish.pop();

console.log(myFish);
// ["angel", "clown", "mandarin"]

console.log(popped);
// surgeon

11.Array.shift()

shift()  该方法会删除数组中的第一个元素,并影响原数组,返回删除元素的值

• 此方法可以更改数组的长度,和pop相似,一个删除第一个,一个删除最后一个

例子:删除数组第一个元素元素

let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

console.log('调用 shift 之前: ' + myFish);
// "调用 shift 之前: angel,clown,mandarin,surgeon"

var shifted = myFish.shift();

console.log('调用 shift 之后: ' + myFish);
// "调用 shift 之后: clown,mandarin,surgeon"

console.log('被删除的元素: ' + shifted);
// "被删除的元素: angel"

12.Array.some()

shift()  该方法循环测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

• 如果有一个元素满足条件,那么循环会停止,然后返回true
• 如果没有元素满足条件,那么该方法会返回一个false 注意： 如果用一个空数组进行测试，在任何情况下它返回的都是false。

例子:检查在数组中是否有元素大于10

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

13.Array.every()

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

• 如果所有元素都满足条件,那么该方法返回true
• 当有一个元素不满足条件,该方法就会返回false 注意： 如果用一个空数组进行测试，在任何情况下它返回的都是true。(和some方法正好相反)

例子:检查在数组中所有元素是否都大于10

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

14.Array.map()

map()  方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。它不会影响原数组

• map方法第一个参数传入一个callback回调函数,该函数使用三个参数

1.callback 数组中正在处理的当前元素。

2. callback 数组中正在处理的当前元素的索引。

3. map 方法调用的数组。

例子:求数组中每个元素的平方根

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

15.Array.findIndex()

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

callback

• 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:

  • element

    当前元素。

  • index

    当前元素的索引。

  • array

    调用findIndex的数组。

例子:查找数组中首个质数元素的索引

function isPrime(element, index, array) {
 var start = 2;
 while (start <= Math.sqrt(element)) {
   if (element % start++ < 1) {
     return false;
   }
 }
 return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

16.Array.includes()

includes(valueToFind[, fromIndex])  方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

• valueToFind

• 需要查找的元素值。

• fromIndex 可选

• 从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

例子:判断数组中是否包含某个元素

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

结语

本人最常用的数组方法基本就是上面这些了,里面有些方法,还有些别的参数,比如可以改变this指向的参数没有列出来,因为这些参数基本上用不到,而且也不便于学习理解.如果有兴趣深入了解的话可以参考mdn文档,以上是我个人总结,希望能帮助到大家,有什么错误,欢迎大家评论区指出或者私信我.码字不易,个位看官老爷点个赞呗!!!!!!