javascript Array对象
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); // falseevery() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
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); // 154、其它方法
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,Runoobfrom() 通过给定的对象中创建一个数组
实例
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
参考:菜鸟手册