javaScript数组方法汇总

JavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。

for

for不是Array特有的方法

for是javaScript的特有语句

for(let i = 0; i

forEach

对数组中的每一项运行给定函数

该方法没有返回值

语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

• 该函数可以一依次传入三个参数，分别为数组当前的值，数组当前项的索引，数组对象本身

  numberList.forEach(function(element, index, array) {
  console.log('array-----------------',array);
  console.log('index-----------------',index);
  console.log('element-----------------',element);
  })

map

对数组中的每一项运行给定函数

该方法返回每次函数调用的结果组成的新数组

语法：var new_array = arr.map(function callback(currentValue[, index[, array]]) {

// Return element for new_array
}[, thisArg])

• 接收一个函数回调callback,接收三个参数：currentValue、index、array

• currentValue:callback 数组中正在处理的当前元素

• index:callback 数组中正在处理的当前元素的索引。

• array:map 方法调用的数组。

  let newArray = numberList.map(function(element, index, array) {
  return !element ? 0 : element + 1
  })

concat

连接2个或者更多数组，并返回结果

此方法不会更改现有数组，而是返回一个新数组

语法：var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

• 通过concat连接两个数组：let numberList_2 = [12, 13, 14, 15, 16, 17, 18];
  let numberList_3 = []
  numberList_3 = numberList_3.concat(numberList, numberList_2);
  console.log('numberList_3-----------------', numberList_3);
• 将值连接到数组：let alpha = ['a', 'b', 'c'];
  let alphaNumeric = alpha.concat(1, [2, 3]);
  console.log(alphaNumeric);
  // results in ['a', 'b', 'c', 1, 2, 3]

filter

对数组中的每一项运行给定函数

该方法会返回true的项组成的数组

语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

• 该方法接收一个函数回调callback，接收三个参数：element、index、array

• element:数组中当前正在处理的元素

• index:正在处理的元素在数组中的索引

• array:调用了 filter 的数组本身

• 示例：

  let filtered = [12, 5, 8, 130, 44].filter(function (element) {
  return element >= 10;
  });
  

every

对数组中的每一项运行给定函数

如果该函数对每一项都返回true，则返回true

若收到一个空数组，此方法在一切情况下都会返回 true。

every() 不会改变原数组

语法：arr.every(callback(element[, index[, array]])[, thisArg])

• 该方法接收一个函数回调callback，用来测试每个元素的函数，接收三个参数：element、index、array

• element：用于测试的当前值。

• index：用于测试的当前值的索引

• array：调用 every 的当前数组

  let everyResult = [12, 54, 18, 130, 44].every(function (element, index, array) {
  return element >= 10
  })

some

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

对数组中每一项运行给定函数

如果任意一项返回true，则返回true

注意：如果用一个空数组进行测试，在任何情况下它返回的都是false。

some() 被调用时不会改变数组。

语法：arr.some(callback(element[, index[, array]])[, thisArg])

• 该方法接收一个函数回调callback，用来测试每个元素的函数，接收三个参数：element、index、array

• element: 数组中正在处理的元素

• index : 数组中正在处理的元素的索引值。

• array :some()被调用的数组。

  let someResult = [2, 5, 8, 1, 4].some(function(element, index, array) {
  return element > 10;
  })
  console.log('someResult---------', someResult)

from

该方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

语法：Array.from(arrayLike[, mapFn[, thisArg]])

• 该方法接收一个arrayLike，mapFn，thisArg
• arrayLike ：想要转换成数组的伪数组对象或可迭代对象。
• mapFn ： 如果指定了该参数，新数组中的每个元素会执行该回调函数。
• thisArg ： 可选参数，执行回调函数 mapFn 时 this 对象。

个可选参数 mapFn，可以在最后生成的数组上再执行一次 map 方法后再返回。

也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg)

从Sting生成数组

let fromResult = Array.from('123213')

从Set生成数组 实现数组去重

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

of

创建一个具有可变数量参数的新数组实例

语法：Array.of(element0[, element1[, ...[, elementN]]])

• elementN：任意个参数，将按顺序成为返回数组中的元素。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

返回新的 Array 实例。

indexOf

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

该方法将从头到尾地检索数组，看它是否含有对应的元素

语法：arr.indexOf(searchElement[, fromIndex])

• searchElement 要查找的元素
• fromIndex 开始查找的位置。 如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1
• 如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。
• 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.

// 找出指定元素出现的所有位置

var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
if(idx == -1) {
  indices = [];
}
while (idx != -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log('indices-------',indices);

lastIndexOf

lastIndexOf()方法返回在数组中可以找到一个给定元素的最后一次出现的索引，并返回给定元素所在的索引值，如果不存在，则返回-1（从数组的后面向前查找，从 fromIndex 处开始）

该方法将从尾到头地检索数组，看它是否含有对应的元素

开始位置的索引为 0。

语法：arr.lastIndexOf(searchElement[, fromIndex])

• 从此位置开始逆向查找
• searchElement： 要查找的元素 必选参数
  • 从此位置开始逆向查找
  • 默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找
  • 如果该值大于或等于数组的长度，则整个数组会被查找。
  • 如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。
  • 如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。
  • 返回值：数组中该元素最后一次出现的索引，如未找到返回-1。
    var last_array = [2, 5, 9, 2];
    var last_array_index = last_array.lastIndexOf(2);
    last_array_index = last_array.lastIndexOf(7);
    // 该值大于或等于数组的长度，则整个数组会被查找 从位置索引为0开始
    last_array_index = last_array.lastIndexOf(2, 3);
    last_array_index = last_array.lastIndexOf(2, 2);
    last_array_index = last_array.lastIndexOf(2, -2);
    last_array_index = last_array.lastIndexOf(2, -1);
    console.log('last_array_index-------', last_array_index)

find

find()方法返回数组中满足提供的测试函数的第一个元素的值

语法：arr.find(callback[, thisArg])

• 该方法接收一个回调函数，在数组每一项上执行的函数，接收 3 个参数：element、index、array

• element ： 当前遍历到的元素。

• index ： 可选参数 当前遍历到的索引。

• array： 可选参数 数组本身

• thisArg ： 可选参数 执行回调时用作this 的对象

• callback函数带有3个参数：当前元素的值、当前元素的索引，以及数组本身

• // 用对象的属性查找数组里的对象,返回找到该对象
  var inventory = [
  { name: 'apples', quantity: 2 },
  { name: 'bananas', quantity: 0 },
  { name: 'cherries', quantity: 5 }
  ];

  let inventory_result = inventory.find(function(fruit, index) {
    return fruit.name === 'bananas';
  })
  
  console.log('inventory_result------', inventory_result)
  

返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

find方法不会改变原数组

findIndex

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

语法：arr.findIndex(callback[, thisArg])

• element :当前元素

• index：当前元素的索引

• array : 调用findIndex的数组

• 示例：

  let findIndex_data = [4, 6, 8, 12].findIndex(function(item, index, array) {
  return item > 5
  })
  console.log('findIndex_data----', findIndex_data)

includes

该方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

语法：arr.includes(valueToFind[, fromIndex])

• valueToFind：需要查找的元素值。
• fromIndex：可选参数，从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
• 返回一个布尔值 Boolean ，如果在数组中找到了（如果传入了 fromIndex ，表示在 fromIndex 指定的索引范围中找到了）则返回 true 。
  • 如果 fromIndex 大于等于数组的长度，则会返回 false，且该数组不会被搜索。
  • 如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
• includes方法示例：
  [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

返回一个布尔值 Boolean

valueOf

这是数组对象的默认方法，该方法属于Object对象，由于所有的对象都"继承"了Object的对象实例，因此几乎所有的实例对象都可以使用该方法。ps：JavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。

把数组转换为字符串，并返回结果

arrayObject 的数组对象的原始值表示。

语法：arr.valueOf()

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
months.valueOf();

toString

JavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。所以覆盖了Object的 toString 方法

返回一个字符串，表示指定的数组及其元素

语法：arr.toString()

• 返回值：一个表示指定的数组及其元素的字符串

• 对于数组对象，toString 方法连接数组并返回一个字符串，其中包含用逗号分隔的每个数组元素。
  const array1 = [1, 2, 'a', '1a'];

  console.log(array1.toString()); // 1,2,a,1a
  

copyWithin

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

语法：arr.copyWithin(target[, start[, end]])

entries

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

语法：arr.entries()

• 返回值：返回一个新的 Array 迭代器对象
• Array Iterator是对象，它的原型上有一个next方法
• next方法可用用于遍历迭代器取得原数组的[key,value]
  var arr_iterator = ["a", "b", "c"];
  var iterator = arr_iterator.entries();
  console.log('iterator-----',iterator.next().value);

keys

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

语法：arr.keys()

• 示例// 索引迭代器会包含那些没有对应元素的索引
  const array2_keys = [1, '', 'a', 'b']
  const object_keys = Object.keys(array2_keys);
  console.log('object_keys-------', object_keys)
  var denseKeys = [...object_keys.keys()];
  console.log('denseKeys-------', denseKeys)
• 返回值：一个新的 Array 迭代器对象。

values

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

语法：arr.values()

• 返回值：一个新的 Array 迭代对象。该对象包含数组每个索引的值
• 示例：
  const array1_values = ['array1_values', 'b', 'c'];
  const iterator_values = array1_values.values();
  console.log('iterator_values', [...iterator_values])
  for (const value of iterator) {
  console.log(value);
  }

返回值：一个新的 Array 迭代对象。

fill

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法：arr.fill(value[, start[, end]])

• value： 必选参数 用来填充数组元素的值。
• start：可选参数 起始索引，默认值为0。
• end ：可选参数 终止索引，默认值为 this.length。
• 返回值：修改后的数组。
• 如果 start 是个负数, 则开始索引会被自动计算成为 length+start
• 如果 end 是个负数, 则结束索引会被自动计算成为 length+end
• // 当只有value值，start与end没有值时，value值
  let data_fill = [1, 2, 3].fill(4); // [4, 4, 4]
  console.log('data_fill------', data_fill)
• // 当value值与start值存在
  let data_fill_start = [1, 2, 3].fill(4, 0, 1); // [[4, 2, 3]
  console.log('data_fill_start------', data_fill_start)
• // 当start与end的值存在并且是负数时候
  // 此时得start等于array.length + start = 3 + (-3) = 0;
  // 此时得end等于array.length + end = 3 + (-2) = 1
  let fu_fill_start_end = [1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
  console.log('fu_fill_start_end-------', fu_fill_start_end)

注意：当一个对象被传递给 fill方法的时候, 填充数组的是这个对象的引用。

reduce

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

• 该方法接收一个回调函数callback,执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
• accumulator: 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue
• currentValue：数组中正在处理的元素。
• index ：可选参数 数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
• array：可选参数 调用reduce()的数组
• initialValue：可选参数 作为第一次调用 callback函数时的第一个参数的值。
• initialValue： 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
• 如果arr数组为空且没有提供initialValue，会抛出TypeError
• // 数组里所有值的和
  let reduce_data = [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
  }, 4); // 输出14
• // 数组里所有值的和
  var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
  }, 0); // 输=出6

sort

该方法用于对数组的元素进行排序

排序顺序可以是字母或数字，并按升序或降序。

默认情况下，sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。

即使数组的元素都是数值，也会先把数组转换为字符串再比较、排序。

注意：会改变原数组，数组在原数组上进行排序，不生成副本

示例：数字数组

let sort_values = [0, 1, 5, 10, 15];

- // 升序情况下
sort_values.sort(function(a, b) {
return a - b
})
- // 降序情况下
sort_values.sort(function(a, b) {
return b - a
})

reverse

该方法也用于对数组的元素进行排序

反向排序，方法很直观，但不够灵活

注意：会改变原数组，数组在原数组上进行排序，不生成副本

示例：数字数组

let reverse_values = [0, 1, 5, 10, 15];
reverse_values.reverse()
console.log('sort_values-------', reverse_values)

slice

该方法可以接收一个或两个参数：返回元素的开始索引和结束索引。

如果只有一个参数，则 slice()会返回该索引到数组末尾的所有元素。

如果有两个参数，则 slice()返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。

slice(start,end)

• start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。
  • 也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
• end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。

例子：let colors = ["red", "green", "blue", "yellow", "purple"];

• 如果只有一个参数，则 slice()会返回该索引到数组末尾的所有元素。

• // let colors2 = colors.slice(1);
  // console.log('colors---------', colors2)
  let colors3 = colors.slice(-1)
  console.log('colors3---------', colors3)
  

• 如果有两个参数，则 slice()返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。

• let colors3 = colors.slice(1, 4);
  console.log('colors3---------', colors3);
  
  - 打印：["green", "blue", "yellow"]
  

slice() 方法不会改变原始数组。

• console.log('colors---------slice() 方法不会改变原始数组', colors) // ["red", "green", "blue", "yellow", "purple"]

splice

方法用于添加或删除数组中的元素。

let splice_colors = ['red', 'green', 'blue']

主要目的是在数组中间插入元素，但有 3 种不同的方式使用这个方法。

• 第一种方法 删除功能
• 需要给 splice()传 2 个参数
  • 第一个要删除元素的位置，第二个要删除元素的数量。
  • 可以从数组中删除任意多个元素，比如 splice(0, 2)会删除前两个元素。
  • let removed_delete = splice_colors.splice(0,1); // 删除功能
• 第二种方法 插入功能
• 需要给 splice()传 3 个参数
  • 第一个元素是开始位置、第二个要删除元素的数量、第三个要插入的元素(可以插入的任意多个元素)
  • 可以在数组中指定的位置插入元素。 第三个参数之后还可以传第四个、第五个参数，乃至任意多个要插入的元素。
  • 比如，splice(2, 0, "red", "green")会从数组位置 2 开始插入字符串"red"和"green"。
  • splice_colors.splice(1, 0, "yellow", "orange"); // 插入功能
• 第三种方法 替换功能
• 同样要传入 3 个参数
  • 第一个元素是开始位置、第二个要删除元素的数量、第三个要插入的元素(可以插入的任意多个元素)
  • 要插入的元素数量不一定跟删除的元素数量 一致
  • 比如，splice(2, 1, "red", "green")会在位置 2 删除一个元素，然后从该位置开始向数组中插入"red"和"green"。
  • splice_colors.splice(1, 2, "red", "purple"); // 插入两个值，删除两个元素

注意：这种方法会改变原始数组。

pop

该方法用于删除数组的最后一项，同时减少数组的length 值，返回被删除的项

unshift

let pop_arr = [1, 4, 5, 7, 3]

 let item_pop = pop_arr.pop();
console.log('item_pop', item_pop) // 3

该方法在数组开头添加任意多个值，然后返回新的数组长度

let unshift_arr = new Array();

let unshift_item = unshift_arr.unshift(1,2,34)
console.log('unshift_arr---------', unshift_arr) // 1,2,34
console.log('unshift_item长度---------', unshift_item)  //  3

shift

该方法会删除数组的第一项并返回它删除的一项

let shift_arr = [1, 4, 5, 7, 3];

let shift_item = shift_arr.shift();
console.log('shift_arr--------', shift_arr) // 4,57,3
console.log('shift_item---------', shift_item) //  1

push

该方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度

let push_arr = [1, 4, 5, 7, 3]

let push_item = push_arr.push({demo:123})
console.log('push_item--------', push_item)  // 数组长度 为6
console.log('push_arr--------', push_arr)