javascript Array方法总结（上篇）

最新推荐文章于 2024-07-02 20:45:06 发布
最新推荐文章于 2024-07-02 20:45:06 发布
阅读量490 收藏 1
点赞数 1
分类专栏： JavaScript web开发录 文章标签： javascript array
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fxss5201/article/details/85337084
版权

每个方法都有相应的描述、语法、参数、返回值、注意项（可选）、例子（可选）。
语法中的[]里面中的内容表示参数为可选参数。

原文出自：https://fxss5201.github.io/practical-code-snippet/js/javascript/Array.html

Array.from()

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

语法：

new_array = Array.from(arrayLike[, callback(element[, index[, array]])[, thisArg]]);

参数：

  1. arrayLike：类似数组或可迭代对象。
  2. callback：新数组中的每个元素都执行的回调函数，效果等同于：Array.from(arrayLike).map(callback(element[, index[, array]])[, thisArg])。
    1. element：当前在数组中处理的元素。
    2. index：当前在数组中处理的元素的索引。
    3. array：当前数组。
  3. thisArg：执行回调函数mapFn时的this对象。

返回值：

  1. new_array：返回的新数组。

例子：

Array.from('foo'); // ["f", "o", "o"]
Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]

Array.isArray()

描述：用于确定传递的值是否是一个数组。

语法：

new_boolean = Array.isArray(obj);

参数：

  1. obj：需要检测的值。

返回值：

  1. new_boolean：如果检测的值是数组，则返回true，否则返回false。

Array.of()

描述：传入可变数量的参数，生成相应的数组。

语法：

new_array = Array.of(element0[, element1[, ...[, elementN]]]);

参数：

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

返回值：

  1. new_array：返回的新数组。

例子：

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

Array.prototype.concat()

描述：用于合并两个或多个数组。

语法：

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

参数：

  1. old_array/value1~valueN：将数组或者值合并为新的数组。

返回值：

  1. new_array：返回的新数组。

Array.prototype.copyWithin()

描述：复制数组中的一部分值到某个位置，数组长度不变，并返回，会修改原数组。

语法：

array = old_array.copyWithin(target[, start[, end]]);

参数：

  1. old_array：原数组。
  2. target：将复制的值安放的位置，索引以0开始，如果指定负数，将从数组的末尾开始往回算。
  3. start：复制元素的起始位置，索引以0开始，如果指定负数，将从数组的末尾开始往回算。默认值为：0。
  4. end：复制元素的起始位置，索引以0开始，如果指定负数，将从数组的末尾开始往回算。默认值为：old_array.length。

返回值：

  1. array：在原数组上复制粘贴，然后将其返回。

例子：

[1, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

Array.prototype.entries()

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

语法：

new_array_iterator = old_array.entries();

参数：

  1. old_array：原数组。

返回值：

  1. new_array_iterator：一个新的Array迭代器对象。可以通过new_array_iterator.next().value遍历迭代器取得原数组的[key,value]。

例子：

var iterator = ['a', 'b', 'c'].entries();
iterator.next().value; // [0, "a"]
iterator.next().value; // [1, "b"]

var iterator1 = ['a', 'b', 'c'].entries();
for (let e of iterator1) {
    console.log(e);
}
// [0, "a"]
// [1, "b"]
// [2, "c"]

Array.prototype.every()

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

语法：

boolean = old_array.every(callback[, thisArg]);

参数：

  1. old_array：原数组。
  2. callback：用来测试每个元素的函数。
  3. thisArg：执行callback时使用的this值。

返回值：

  1. boolean：返回一个Boolean值，every方法为数组中的每个元素执行一次callback函数，直到找到一个使callback返回false或Falsy的元素。如果发现了一个这样的元素，every方法将会立即返回false。否则，callback为每一个元素返回true，every方法才会返回true。

注意项：

  1. callback只会为已经被赋值的索引调用，不会被删除或从来没被赋值的索引调用。
  2. every不会改变原数组。
  3. every遍历的元素范围在第一次调用callback之前就已经确定了。在调用every之后新添加到数组中的元素不会被callback访问到。如果数组中存在的元素被更改，则他们传入callback的值是 every访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。
  4. 空数组返回true。

例子：

[1, 2, 3, 4, 5].every(x => x > 0); // true
[1, 2, 3, 4, 5].every(x => x > 2); // false

Array.prototype.fill()

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

语法：

array = old_array.fill(value[, start[, end]]);

参数：

  1. old_array：原数组。
  2. value：用来填充数组元素的值。
  3. start：起始索引，索引以0开始，如果指定负数，将从数组的末尾开始往回算。默认值为：0。
  4. end：终止索引，索引以0开始，如果指定负数，将从数组的末尾开始往回算。默认值为：old_array.length。

返回值：

  1. array：修改后的数组。

例子：

[1, 2, 3, 4, 5].fill(0, 2, 4); // [1, 2, 0, 0, 5]
[1, 2, 3, 4, 5].fill(0, -3, 4); // [1, 2, 0, 0, 5]

Array.prototype.filter()

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

语法：

new_array = old_array.filter(callback(element[, index[, array]])[, thisArg]);

参数：

  1. old_array：原数组。
  2. callback：用来测试数组的每个元素的函数，返回true或Truthy则测试元素会被添加到返回的新数组，false或Falsy则不会。
    1. element：当前在数组中处理的元素。
    2. index：当前在数组中处理的元素的索引。
    3. array：当前数组。
  3. thisArg：执行callback时使用的this值。

返回值：

  1. new_array：所有通过测试的元素组成的新数组，如果没有通过测试的元素则返回空数组。

注意项：

  1. filter遍历的元素范围在第一次调用callback之前就已经确定了。在调用filter之后新添加到数组中的元素不会被callback访问到。如果数组中存在的元素被更改，则他们传入callback的值是filter访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。

例子：

[1, 2, 3, 4, 5].filter(x => x > 2); // [3, 4, 5]

Array.prototype.find()

描述：返回通过测试的函数的第一个元素的值，否则返回undefined。

语法：

elementN = old_array.find(callback(element[, index[, array]])[, thisArg]);

参数：

  1. old_array：原数组。
  2. callback：用来测试数组的每个元素的函数，直至callback返回true。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回undefined。
    1. element：当前在数组中处理的元素。
    2. index：当前在数组中处理的元素的索引。
    3. array：当前数组。
  3. thisArg：执行callback时使用的this值。

返回值：

  1. elementN：通过测试的函数的第一个元素的值，否则返回undefined。

注意项：

  1. 空数组返回undefined。
  2. callback函数会为数组中的每个索引调用即从 0 到 length - 1，而不仅仅是那些被赋值的索引（稀疏数组也会全部调用）。
  3. find遍历的元素范围在第一次调用callback之前就已经确定了。在调用find之后新添加到数组中的元素不会被callback访问到。如果数组中存在的元素被更改，则他们传入callback的值是find访问到他们那一刻的值。被删除的元素仍旧会被访问到。

例子：

[1, 2, 3, 4, 5].find(x => x > 2); // 3

Array.prototype.findIndex()

描述：返回通过测试的函数的第一个元素的索引，否则返回-1。

语法：

number = old_array.findIndex(callback(element[, index[, array]])[, thisArg]);

参数：

  1. old_array：原数组。
  2. callback：用来测试数组的每个元素的函数，直至callback返回true。当找到了这样一个元素后，该方法会立即返回这个元素的索引，否则返回-1。
    1. element：当前在数组中处理的元素。
    2. index：当前在数组中处理的元素的索引。
    3. array：当前数组。
  3. thisArg：执行callback时使用的this值。

返回值：

  1. number：通过测试的函数的第一个元素的索引，否则返回-1。

注意项：

  1. 空数组返回-1。
  2. callback函数会为数组中的每个索引调用即从 0 到 length - 1，而不仅仅是那些被赋值的索引（稀疏数组也会全部调用）。
  3. findIndex遍历的元素范围在第一次调用callback之前就已经确定了。在调用findIndex之后新添加到数组中的元素不会被callback访问到。如果数组中存在的元素被更改，则他们传入callback的值是findIndex访问到他们那一刻的值。被删除的元素仍旧会被访问到。

例子：

[1, 2, 3, 4, 5].findIndex(x => x > 2); // 2

Array.prototype.flat()

描述：会递归到指定深度将所有子数组连接，并返回一个新数组。

语法：

new_array = old_array.flat(depth);

参数：

  1. old_array：原数组。
  2. depth：指定嵌套数组中的结构深度，默认值为1。

返回值：

  1. new_array：将子数组连接起来的新数组。

例子：
一般可用于将多维数组转化为一维数组，例如：

[[1,2,3],[2,[2,3]]].flat(); // [1, 2, 3, 2, [2, 3]]
[[1,2,3],[2,[2,3]]].flat(2); // [1, 2, 3, 2, 2, 3]
[1, 2, , 4, 5].flat(); // [1, 2, 4, 5]

Array.prototype.flatMap()

描述：首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与先执行相应的map函数在执行flat()效果相同，除了效率略微高一些。

语法：

new_array = old_array.flatMap(callback(element[, index[, array]])[, thisArg]);

参数：

  1. old_array：原数组。
  2. callback：可以生成一个新数组中的元素的函数。
    1. element：当前在数组中处理的元素。
    2. index：当前在数组中处理的元素的索引。
    3. array：当前数组。

返回值：

  1. new_array：一个新的数组，其中每个元素都是回调函数的结果。

例子：

var arr1 = [1, 2, 3, 4];
arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8]
arr1.map(x => [x * 2]).flat(); // [2, 4, 6, 8]

Array.prototype.forEach()

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

语法：

old_array.forEach(callback(element[, index[, array]])[, thisArg]);

参数：

  1. old_array：原数组。
  2. callback：为数组中每个元素执行的函数。
    1. element：当前在数组中处理的元素。
    2. index：当前在数组中处理的元素的索引。
    3. array：当前数组。

返回值：undefined。

注意项：

  1. forEach遍历的元素范围在第一次调用callback之前就已经确定了。在调用forEach之后新添加到数组中的元素不会被callback访问到。如果数组中存在的元素被更改，则他们传入callback的值是forEach访问到他们那一刻的值。被删除的元素将不会被访问到。
  2. 没有办法中止或者跳出forEach循环，除了抛出一个异常。

例子：

var a = [1, 2, 3, 4].forEach(x => console.log(x * 2));
// 2
// 4
// 6
// 8

console.log(a); // undefined

/** 如果数组在迭代时被修改了，则其他元素会被跳过。
 * 数组到two的时候移除第一个元素，所以每个位置上的元素都会往前移动一位，并且当前index为2，所以就得到对应值为four
 */
var words = ["one", "two", "three", "four"];
words.forEach(function(word, index) {
  console.log('No' + index + '. ' + word);
  if (word === "two") {
    words.shift();
  }
});
// No0. one
// No1. two
// No2. four

Array.prototype.includes()

描述：用来判断一个数组是否包含一个指定的值，如果包含则返回true，否则返回false。

语法：

boolean = old_array.includes(searchElement[, fromIndex]);

参数：

  1. old_array：原数组。
  2. searchElement：需要查找的元素值。
  3. fromIndex：从该索引处开始查找searchElement。如果为负值，则按升序从array.length - fromIndex的索引开始搜索。默认为 0。

返回值：

  1. boolean：如果包含则返回true，否则返回false。

例子：

[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

Array.prototype.indexOf()

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

语法：

number = old_array.indexOf(searchElement[, fromIndex]);

参数：

  1. old_array：原数组。
  2. searchElement：需要查找的元素值。
  3. fromIndex：从该索引处开始查找searchElement。如果为负值，则按升序从array.length - fromIndex的索引开始搜索。默认为 0。

返回值：

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

注意项：

  1. indexOf使用严格等于进行判断（仅当两个操作数的类型相同且值相等才为true）。

例子：

[2, 5, 9].indexOf(2); // 0
[2, 5, 9].indexOf('2'); // -1

Array.prototype.join()

描述：将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。

语法：

string = old_array.join([separator]);

参数：

  1. old_array：原数组。
  2. separator：数组元素组合成字符串时之间的分隔符，默认为,，如不希望使用分隔符，则指定''。

返回值：

  1. string：所有元素连接成的字符串。

注意项：

  1. 如果元素是undefined或者null，则会转化成空字符串''。

例子：

['a', 'b', 'c'].join();        // "a,b,c"
['a', 'b', 'c'].join('');      // "abc"
['a', 'b', 'c'].join('-');     // "a-b-c"

['a', undefined, null].join(); // "a,,"

Array.prototype.keys()

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

语法：

new_iterator = old_array.keys();

参数：

  1. old_array：原数组。

返回值：

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

注意项：

  1. 索引迭代器会包含那些没有对应元素的索引。

例子：

var iterator = ['a', 'b', 'c'].keys();
iterator.next();   // {value: 0,done: false}
iterator.next();   // {value: 1,done: false}
iterator.next();   // {value: 2,done: false}
iterator.next();   // {value: undefined,done: true}

var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr); // ["0", "2"]
var denseKeys = [...arr.keys()];   // [0, 1, 2]
樊小书生
关注
专栏目录
JS中Array数组方法（秒懂数组方法如何使用）
百赢出品，必属精品
04-06 3851
JavaScript中的Array（数组）是一种用于存储多个值的数据结构，它是一种有序的集合，可以包含各种类型的数据，例如数字、字符串、对象等。
基于JavaScript Array数组方法(新手必看篇)
10-21
JavaScript是一种广泛使用的...总结来说，JavaScript的Array类型提供了多种方法来处理数组，从创建和初始化，到元素的添加和删除，再到数组的排序和转换，这些方法使得JavaScript数组成为了一个非常灵活和强大的工具。
java script 遍历数组_Java script-数组与字符串方法
weixin_42425075的博客
02-16 331
数组：1.concat()功能：用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。参数：concat(data1,data2,...);所有参数可选，要合并的数据；data为数组时，将data合并到原数组；data为具体数据时直接添加到原数组尾部；省略时创建原数组的副本。2.join()功能：根据指定分隔符将数组中的所有元素放入一个字符串，并返回这个字符串。参数：...
JavaScript中的Array（数组）对象
最新发布
m0_65029152的博客
07-02 964
本文主要记录JavaScript中Array数组对象，及其常用方法；
JavaScript中Array的常用方法
weixin_43565079的博客
02-15 610
最近想着简单总结一下Array的方法中有哪些会改变原数组，顺便复习一下常用的方法。 Array.fill(value, start, end)将数组中某一段连续的元素，每一个都替换为value。(如果未规定end值，则数组中start下标之后所有元素都会被替换，见下图二) Array.shift()从数组头部删除元素,并返回被删除的元素 Array.unshift(value...)从数组头部添加若干元素， Array.pop()从数组尾部删除元素，并返回被删除的...
JavaScript中Array方法
exceldba1986的专栏
08-20 178
首先定义一个基本类型创建方法的方法 /*基本类型的原型是公共的结构，因此在添加时首先确定下没有此方法*/ Function.prototype.method = function(name,func){ if(!this.prototype[name]){ this.prototype[name] = func; } return this; }  1、array.co...
【javascript】Array 常用方法
qq_49150070的博客
10-11 829
javascript Array 常用方法
JavaScript中Array方法你该知道的正确打开方法
01-19
于是我写了这篇文章，总结了如何在 JavaScript 中正确使用地使用 Array 的方法！ Array对象为JavaScript内置对象，具有以下属性： 属性 描述 constructor 返回对创建此对象的数组函数的引用。 length 返回...
javascript object array方法使用详解.docx
01-13
通过本篇文章的学习，我们不仅详细了解了JavaScript中Array的原型方法，还探索了如何将这些方法应用于普通对象，使对象具有类似数组的行为。尽管这种做法在某些情况下非常有用，但也需要注意潜在的问题，比如直接...
浅谈JavaScript Array对象
10-24
在本篇文章中，我们主要探讨了JavaScript中的Array对象，包括其定义、属性、以及常用的实例方法。 首先，我们需要了解JavaScript中数组的基本概念。JavaScript数组是一种值的有序集合，其中的值被称为元素。每个...
javascript入门·对象属性方法大总结
10-30
本篇文章将对JavaScript入门中的对象属性方法进行大总结，帮助初学者巩固基础。 首先，我们来看JavaScript中的数组（Array）。数组是一种有序的元素集合，可以通过索引来访问每个元素。其中，`length`属性可获取...
JavaScript中扩展Array contains方法实例
10-24
主要介绍了JavaScript中扩展Array contains方法实例,本文直接给出实现代码,需要的朋友可以参考下
JavaScript数组 Array 方法
qq_45213494的博客
03-14 779
数组 Array 方法总结：
爆 肝 一 周 总 结 的 JavaScript数组方法详解
HaiJun_Aion的博客
08-13 432
前言 我们在日常开发中，与接口打交道最多了，前端通过访问后端接口，然后将接口数据二次处理渲染到页面当中。 二次处理的过程是 考验 Coder 对 Array 是否熟练 以及 在 何种 场景下使用哪种方法处理最优 。 小编，在最近开发中就遇到了 Array 问题， 在处理复杂的业务需求时，没想到Array 有类似的方法，然后将方法 组合起来解决当下问题。 文章用下班时间肝了一周才写完，看完点赞、转发 是对我最大的支持。 遍历数组方法 不会改变原数组的遍历方法 forEach() forEach() 方法.
程序猿头头(js数组reverse，sort，concat，slice， splice)
weixin_55769365的博客
03-22 343
reverse reverse不是排序方法，它只是数组颠倒方法，可以将数组的顺序颠倒过来。 // 书中的例子，只是作为反向排序讲解，不够全面 let values = [1, 2, 3, 4, 5]; values.reverse(); console.log(values); // [5,4,3,2,1] let numbers = [5,1,2,6,3]; numbers.reverse(); console.log(numbers); // [3, 6, 2, 1, 5] let chars =
javascript中Array的方法大全
HJ_FeiYoung的博客
08-09 216
javascript中Array的方法大全 pop：删除末尾元素 ​ eg: [1,2,3,4].pop() = [1,2,3] push：在数组末尾新添元素 ​ eg: [1,2,3,4].shift(5,6) = [1,2,3,4,5,6] shift：删除头元素 ​ eg: [1,2,3,4].shift() = [2,3,4] unshift：在数组头添加元素 ​ eg: [1,2,3,4].shift(-1,0) = [-1,0,1,2,3,4] ​ tips
JavaScript Array方法汇总
g841805的博客
04-09 771
不改变原数组的方法有：forEach map filter every some indexOf includes join concat slice reduce find。生成新数组的方法有:concat filter map join slice reduce(看具体情况) find。原数组改变的方法有：push pop shift unshift reverse sort splice。
JavaScript中Array怎么用？
Learn-anything.cn
12-20 224
一、Array Array 是 JavaScript 的全局数组对象，其元素可以是不同类型，如果需要元素是同一类型，可使用 TypedArray。 二、怎么用？ <!DOCTYPE html> <html lang='zh-CN'> <head> <meta charset="utf-8"> <title>Symbol</title> <script> // 创建数组
Javascript 常用的Array方法
黄烁的个人博客
01-14 762
目录Javascript 常用的Array方法--温习一下前言常用的 Array 方法Array.from()String 转换 ArraySet 转换 ArrayMap 转换 ArrayArray.form() 配合 Set 使数组去重合并Array.isArray()Array.of()Array.concat()Array.every()Array.filter()查询筛选对象数组Arra...
深入理解JavaScript Array对象的常用方法
"这篇文档是关于JavaScript中Array对象的一些常用方法的总结，包括push、pop、shift、unshift和concat方法。" 在JavaScript中，Array对象提供了多种操作数组的方法，这些方法对于处理和操作数组数据至关重要。以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值