javascript Array对象

2026-04-25 13:00:58 258
分类:javascript归档

javascript中的数组比较灵活,不需要声明时赋值,可以增删改查,任意改变。

Array对象的属性有constructor,length,prototype。

到es6时,Array提供的方法已经有30个了。

js数组常用的方法有:

  • join() - 用数组的元素组成字符串

  • toString() - 把数组转换为字符串,并返回结果。

  • isArray() - 判断对象是否为数组。

  • push() 和 pop() - 添加/删除数组的最后一个元素

  • shift() 和 unshift() - 添加/删除数组的第一个元素

  • sort() 和 reverse() - 数组排序

  • concat() - 合并一个或多个数组

  • from() - 通过给定的对象中创建一个数组。(可以用作数组深拷贝)

  • slice() - 选取数组的的一部分,并返回一个新数组。

  • splice() - 从数组中添加或删除元素。

  • indexOf()和 lastIndexOf() - 搜索数组中的元素,并返回它所在的位置。

  • includes() - 判断一个数组是否包含一个指定的值。

  • forEach() - 数组遍历

  • entries() - 返回数组的可迭代对象。

  • keys() -  用于从数组创建一个包含数组键的可迭代对象。

  • map() - 通过指定函数处理数组的每个元素,并返回处理后的数组。

  • filter() - 数组过滤

  • every() 和 some() - 检测数组元素中是否有元素符合指定条件。

  • find() 和 findIndex() - 返回符合传入测试(函数)条件的数组元素/元素索引。

  • reduce() 和 reduceRight() - 将数组元素计算为一个值

下面是常用数组操作整理:

1、查找、过滤、判断是否包含某值

find() 查找元素

实例

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = numbers.find((item)=>{
    return item>5; // 找到符合条件的元素,之后的值不会再调用执行函数
});
console.log(result); // 6

定义和用法

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined

注意: find() 对于空数组,函数是不会执行的。

注意: find() 并没有改变数组的原始值。

findIndex()  查找元素索引

实例

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = numbers.findIndex((item)=>{
    return item>5;
});
console.log(result); // 6

定义和用法

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。

如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组,函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

filter() 数组过滤

实例

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = numbers.filter((item)=>{
    return item>5;
});
console.log(result); // [6, 7, 8, 9]

定义和用法

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。

every() 检测数值元素的每个元素是否都符合条件

实例

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = numbers.every((item)=>{
    return item>5; // 只要有一个条件不满足则整个表达式返回 false ,且剩余的元素不会再进行检测
});
console.log(result); // false

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。

every() 方法使用指定函数检测数组中的所有元素:

如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。

如果所有元素都满足条件,则返回 true。

注意: every() 不会对空数组进行检测。

注意: every() 不会改变原始数组。

some() 检测数组元素中是否有元素符合指定条件

实例

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = numbers.some((item)=>{
    return item>5; // 只要有一个条件满足则整个表达式返回 true ,且剩余的元素不会再进行检测
});
console.log(result); // true

定义和用法

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

includes() 判断一个数组是否包含一个指定的值

实例

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = numbers.includes(5)
console.log(result); // true

定义和用法

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

indexOf() 搜索数组中的元素,并返回它所在的位置

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var result = fruits.indexOf("Apple");
console.log(result); // 2

定义和用法

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

提示如果你想查找字符串最后出现的位置,请使用 lastIndexOf() 方法。

2、增删改数组

push()和pop() 向尾部添加/删除数据

unshift()和shift() 向开头添加/删除数据

slice() 选取数组的的一部分,并返回一个新数组

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
console.log(citrus); // Orange,Lemon

定义和用法

slice() 方法可从已有的数组中返回选定的元素。

slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

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

语法

splice() 从数组中添加或删除元素

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
console.log(fruits); // Banana,Orange,Lemon,Kiwi,Apple,Mango

定义和用法

splice() 方法用于插入、删除或替换数组的元素。

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

语法

array.splice(index,howmany,item1,.....,itemX)

3、数组遍历

sort() 对数组的元素进行排序

实例

// 默认按字母升序排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruites); // Apple,Banana,Mango,Orange

// 降序排序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
console.log(points); // 100,40,25,10,5,1
注意:在原数组上进行排序,会改变原始数组

reverse() 反转数组的元素顺序

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits); // Mango,Apple,Orange,Banana

keys() 返回数组的可迭代对象,包含原始数组的键(key)

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.keys();

document.getElementById("demo1").innerHTML = x.next().value; // 0
document.getElementById("demo2").innerHTML = x.next().value; // 1
document.getElementById("demo3").innerHTML = x.next().value; // 2

定义和用法

keys() 方法用于从数组创建一个包含数组键的可迭代对象。

如果对象是数组返回 true,否则返回 false。

entries() 返回数组的可迭代对象,包含原始数组的键(key)值(value)

map() 通过指定函数处理数组的每个元素,并返回处理后的数组

注意:不会改变原始数组

实例

var numbers = [1, 2, 3, 4, 5];
var result = numbers.map((item, i) => {
    return item * i;
});
console.log(result); // [0, 2, 6, 12, 20]

定义和用法

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。

reduce()和reduceRight() 将数组元素计算为一个值(从左到右)/(从右到左)

实例

var numbers = [1, 2, 3, 4, 5];
var result = numbers.reduce((total, num) => {
    return total + num;
});
console.log(result); // 15

4、其它方法

isArray() 判断对象是否为数组

concat() 合并一个或多个数组

实例

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
console.log(children); // Cecilie,Lone,Emil,Tobias,Linus,Robin

定义和用法

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
console.log(fruits); // Banana,Orange,Banana,Orange

定义和用法

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

语法

array.copyWithin(target, start, end)

fill() 使用一个固定值来填充数组

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");
console.log(fruits); // Runoob,Runoob,Runoob,Runoob

from() 通过给定的对象中创建一个数组

实例

var myArr = Array.from("RUNOOB");
console.log(myArr); // ["R", "U", "N", "O", "O", "B"]

join() 把数组的所有元素放入一个字符串

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
console.log(energy); // Banana,Orange,Apple,Mango

toString() 把数组转换为字符串,并返回结果

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
console.log(fruits); // Banana,Orange,Apple,Mango


参考:菜鸟手册