JavaScript数组常用方法

目录

  • JS 数组常用API

    • 常用属性
    • 常用方法
    • 常见方法语法解释
      • from方法
      • isArray
      • concat
      • every
      • fill
      • filter
      • find
      • forEach
      • indexOf
      • join
      • keys
      • map
      • pop
      • reduce
      • reverse
      • slice
      • some
      • sort
      • splice

JS 数组常用API

常用属性
  • length 属性
  • prototype

常用方法

  • from 从一个类似数组或可迭代对象中创建一个新的数组实例。
  • isArray 用于确定传递的值是否是一个Array。
  • of创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
  • concat用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
  • copyWithin浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
  • entries返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
  • every测试数组的所有元素是否都通过了指定函数的测试。
  • fill 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
  • filter创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
  • find 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
  • findIndex 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
  • flat会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
  • flatMap 首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
  • forEach 对数组的每个元素执行一次提供的函数。
    -includes 用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。（注意：对象数组不能使用includes方法来检测。）
  • indexOf返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
    -join 将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
  • keys 返回一个包含数组中每个索引键的Array Iterator对象。
    -lastIndexOf返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex处开始。
  • map 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
  • pop从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
    -push 将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
  • reduce 对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
    -reduceRight接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。
  • reverse 将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。
    -shift从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
  • slice返回一个新的数组对象，这一对象是一个由 begin和 end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。
  • some 测试是否至少有一个元素通过由提供的函数实现的测试。
    -sort 用原地算法对数组的元素进行排序，并返回数组。排序算法现在是稳定的。默认排序顺序是根据字符串Unicode码点。
  • splice 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
  • toLocaleString 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。
  • toString返回一个字符串，表示指定的数组及其元素。
  • unshift将一个或多个元素添加到数组的开头，并返回该数组的新长度。
  • values返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

常见方法语法解释

上面列出了在js数组当中常见的方法，下面在其中选取一些比较高频和重要的方法来说明。

from方法

从一个类似数组或可迭代对象中创建一个新的数组实例。

语法：

Array.from(arrayLike[, mapFn[, thisArg]])

参数:
 1. arrayLike
  想要转换成数组的伪数组对象或可迭代对象。
  2. mapFn(可选参数)
  如果指定了该参数，新数组中的每个元素会执行该回调函数。
 3. thisArg(可选参数)
  可选参数，执行回调函数 mapFn 时 this对象。
返回值:
一个新的数组实例。

demo:

Array.from('foo'); 
// ["f", "o", "o"]
isArray

用于确定传递的值是否是一个Array。

语法：

Array.isArray(obj)

参数:
 1. obj
  需要检测的值。
demo:

Array.isArray([1, 2, 3]);  // true
concat

用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

语法：

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

参数:
 valueN
  将数组和/或值连接成新数组。
demo:

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]
every

测试数组的所有元素是否都通过了指定函数的测试。

语法：

arr.every(callback[, thisArg])

参数:
 1. callback
  用来测试每个元素的函数。
 2. thisArg
  执行 callback 时使用的 this值。
demo:

function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

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

console.log(array1.every(isBelowThreshold));
// expected output: true
fill

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

语法:

arr.fill(value[, start[, end]])

参数:
 1. value
  用来填充数组元素的值。
 2. start可选
  起始索引，默认值为0。
 3. end 可选
  终止索引，默认值为 this.length。
返回值:
修改后的数组。

filter

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法:

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

参数:
 1. callback
  用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
 2. element
  数组中当前正在处理的元素。
 3. index可选
  正在处理的元素在数组中的索引。
 4. array可选
  调用了 filter 的数组本身。
 5. thisArg可选
  执行 callback 时，用于 this 的值。
返回值:
一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

demo:

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

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

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

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

语法:

arr.find(callback[, thisArg])

参数:
 1. callback
  在数组每一项上执行的函数，接收 3 个参数：
 2. element
  当前遍历到的元素。
 3. index可选
  当前遍历到的索引。
 4. array可选
  数组本身。
 5. thisArg可选
  执行回调时用作this 的对象。
demo:

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12
forEach

对数组的每个元素执行一次提供的函数。

语法:

arr.forEach(callback[, thisArg]);

参数:
 1. callback
  为数组中每个元素执行的函数，该函数接收三个参数：
 2. currentValue
 数组中正在处理的当前元素。
 3. index可选
  数组中正在处理的当前元素的索引。
 4. array可选
  forEach() 方法正在操作的数组。
 5. thisArg可选
  可选参数。当执行回调函数时用作 this 的值(参考对象)。
demo:

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

array1.forEach(function(element) {
  console.log(element);
});

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

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

语法:

arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

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

demo:

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1
join

将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

语法:

arr.join([separator])

参数:
 1. separator
指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果省略()，数组元素用逗号分隔。默认为 ","。如果 2. separator是空字符串("")，则所有元素之间都没有任何字符。
返回值:
一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

demo:

var elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"
keys

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

语法:

arr.keys()

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

demo：

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

创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

语法:

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

参数:
 1. callback
  生成新数组元素的函数，使用三个参数：
 2. currentValue
  callback 数组中正在处理的当前元素。
 3. index可选
  callback 数组中正在处理的当前元素的索引。
 4. array可选
  callback map 方法被调用的数组。
 5. thisArg可选
  执行 callback 函数时使用的this 值。
返回值:
一个新数组，每个元素都是回调函数的结果。

demo:

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

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

从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

语法：

arr.pop()

返回值：
从数组中删除的元素(当数组为空时返回undefined)。

demo:

var 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"]
reduce

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

语法:

arr.reduce(callback[, initialValue])

参数:
 1. callback
  执行数组中每个值的函数，包含四个参数：
 2. accumulator
  累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
 3. currentValue
 数组中正在处理的元素。
 4. currentIndex可选
  数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则为1。
 5. array可选
  调用reduce()的数组
 6. initialValue可选
  作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
返回值:
函数累计处理的结果.

demo:

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
reverse

将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。

语法:

arr.reverse()
demo :

var array1 = ['one', 'two', 'three'];
console.log('array1: ', array1);
// expected output: Array ['one', 'two', 'three']

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

/* Careful: reverse is destructive. It also changes
the original array */ 
console.log('array1: ', array1);
// expected output: Array ['three', 'two', 'one']
slice

返回一个新的数组对象，这一对象是一个由 begin和 end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。

语法:

arr.slice();
// [0, end]

arr.slice(begin);
// [begin, end]

arr.slice(begin, end);
// [begin, end)

参数:
 1. begin 可选
  从该索引处开始提取原数组中的元素（从0开始）。
如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
如果省略 begin，则 slice 从索引 0 开始。
 2. end可选
  在该索引处结束提取原数组元素（从0开始）。slice会提取原数组中索引从 begin 到 end 的所有元素（包含begin，但不包含end）。
slice(1,4) 提取原数组中的第二个元素开始直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
如果 end 被省略，则slice 会一直提取到原数组末尾。
如果 end 大于数组长度，slice 也会一直提取到原数组末尾。
返回值：
一个含有提取元素的新数组

demo:

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
some

测试是否至少有一个元素通过由提供的函数实现的测试。

语法:

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

参数:
 1. callback
  用来测试每个元素的函数，接受三个参数：
 2. element
  数组中正在处理的元素。
 3. index可选
  数组中正在处理的元素的索引值。
 4. array可选
  some()被调用的数组。
 5. thisArg可选
  执行 callback 时使用的 this 值。
返回值:
如果回调函数返回任何数组元素的truthy值，则返回true；否则为false。

demo:

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

var even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));
// expected output: true
sort

用原地算法对数组的元素进行排序，并返回数组。排序算法现在是稳定的。默认排序顺序是根据字符串Unicode码点。

语法:

arr.sort([compareFunction])

参数:
 1. compareFunction可选
用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
返回值:
排序后的数组。请注意，数组已原地排序，并且不进行复制。

demo:

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]
splice

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

语法:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

参数:
 1. start​
  指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
 2. deleteCount 可选
  整数，表示要移除的数组元素的个数。
如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
 3. item1, item2, ...可选
  要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

返回值:
由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

demo:

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']

具体方法介绍可以访问：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

摘抄于Des李白的博客

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,847评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,208评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,587评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,942评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,332评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,587评论 1赞 218
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,853评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,568评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,273评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,373评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,031评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2赞 269

推荐阅读更多精彩内容