数组
- 目录
- 1.concat() 方法
- 2.copyWithin()方法
- 3.every()方法
- 4.fill()方法
- 5.filter()方法
- 6.find()方法
- 7.findIndex()方法
- 8.forEach()方法
- 9.indexOf()方法
- 10.join()方法
- 11.lastIndexOf()方法
- 12.map()方法
- 13.pop()方法
- 14.push()方法
- 15.reduce()方法
- 16.reduceRight()方法
- 17.reverse()方法
- 18.shift()方法
- 19.slice()方法
- 20.some()方法
- 21.sort()方法
- 22.splice()方法
- 23.toString()方法
- 24.unshift()方法
- 25.valueOf()方法
| 方法 | 描述 |
|---|---|
| findIndex() | 返回符合传入测试（函数）条件的数组元素索引。 |
| forEach() | 数组每个元素都执行一次回调函数。 |
| indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| filter() | 检测数值元素，并返回符合条件所有元素的数组。 |
| splice() | 从数组中添加或删除元素。 |
| sort() | 对数组的元素进行排序。 |
| concat() | 连接两个或更多的数组，并返回结果。 |
| join() | 把数组的所有元素放入一个字符串。 |
| pop() | 删除数组的最后一个元素并返回删除的元素。 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reverse() | 反转数组的元素顺序。 |
| shift() | 移去数组的第一个元素，并返回这个元素的值。 |
| every() | 检测数值元素的每个元素是否都符合条件。 |
| fill() | 使用一个固定值来填充数组。 |
| copyWithin() | 从数组的指定位置拷贝元素到数组的另一个指定位置中。 |
| find() | 返回符合传入测试（函数）条件的数组元素。 |
| lastIndexOf() | 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。 |
| map() | 通过指定函数处理数组的每个元素，并返回处理后的数组。 |
| pop() | 删除数组的最后一个元素并返回删除的元素。 |
| reduce() | 将数组元素计算为一个值（从左到右）。 |
| reduceRight() | 将数组元素计算为一个值（从右到左） |
| slice() | 选取数组的的一部分，并返回一个新数组 |
| some() | 检测数组元素中是否有元素符合指定条件。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值。 |
内容:
1.concat() 方法
- 定义和用法
用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 - 实例
//合并三个数组的值：
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
//children 输出结果：Cecilie,Lone,Emil,Tobias,Linus,Robin
2.copyWithin()方法
- 定义和用法
用于从数组的指定位置拷贝元素到数组的另一个指定位置中。 - 实例
//复制数组的前面两个元素到后面两个元素上：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
//fruits 输出结果：
//Banana,Orange,Banana,Orange
3.every()方法
-
定义和用法
every()方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回true。
注意：every()不会对空数组进行检测，不会改变原始数组。 -
实例
//检测数组 ages 的所有元素是否都大于 18 :
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
//输出结果为:
false
4.fill()方法
-
定义和用法
fill()方法用于将一个固定值替换数组的元素。 -
实例
//使用固定值填充数组：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");
//fruits 输出结果：
Runoob,Runoob,Runoob,Runoob
5.filter()方法
-
定义和用法
filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测，不会改变原始数组。 -
实例
//返回数组 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
//输出结果为:
32,33,40
6.find()方法
-
定义和用法
find() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素。
find()方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回true 时, find()返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: find()对于空数组，函数是不会执行的， 并没有改变数组的原始值。 -
实例
//获取数组中年龄大于 18 的第一个元素
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 16;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
fruits 输出结果：
18
7.findIndex()方法
-
定义和用法
findIndex()方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex()对于空数组，函数是不会执行的，并没有改变数组的原始值。 -
实例
//获取数组中年龄大于 18 的第一个元素索引位置
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}
//fruits 输出结果：
2
8.forEach()方法
-
定义和用法
forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach()对于空数组是不会执行回调函数的。 -
实例
//列出数组的每个元素：
//输出结果：
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25
9.indexOf()方法
-
定义和用法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。 如果在数组中没找到字符串则返回 -1。 提示如果你想查找字符串最后出现的位置，请使用lastIndexOf() 方法。 -
实例
//查找数组中的 "Apple" 元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//a 结果输出：
2
以上输出结果意味着 "Apple" 元素位于数组中的第 2 个位置。
10.join()方法
-
定义和用法
join()方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的。 -
实例
//把数组中的所有元素转换为一个用-连接的字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join("-");
//energy输出结果：
Banana-Orange-Apple-Mango
11.lastIndexOf()方法
-
定义和用法
lastIndexOf()方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索，字符位置是从 0 开始的。如果要检索的字符串值没有出现，则该方法返回 -1。
提示： 如果你想查找字符串首次出现的位置，请使用indexOf()方法。 -
实例
//查找数组元素 "Apple"出现的位置：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
//a 输出结果：
2
12.map()方法
-
定义和用法
map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意：map()不会对空数组进行检测，不会改变原始数组。 -
实例
//返回一个数组，数组中元素为原始数组的平方根:
var numbers = [4, 9, 16, 25];
function myFunction() {
x = document.getElementById("demo")
x.innerHTML = numbers.map(Math.sqrt);
}
//输出结果为:
2,3,4,5
13.pop()方法
-
定义和用法
pop()方法用于删除数组的最后一个元素并返回删除的元素。
注意：此方法改变数组的长度！
提示： 移除数组第一个元素，请使用shift()方法。 -
实例
//移除最后一个数组元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
//fruits 结果输出：
Banana,Orange,Apple
14.push()方法
-
定义和用法
push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。
注意： 新元素将添加在数组的末尾，此方法改变数组的长度。
提示： 在数组起始位置添加元素请使用 unshift()方法。 -
实例
//数组中添加新元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
//fruits 结果输出：
Banana,Orange,Apple,Mango,Kiwi
15.reduce()方法
-
定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
注意:reduce() 对于空数组是不会执行回调函数的。 -
实例
//计算数组元素相加后的总和：
var numbers = [1, 2, 3, 4];
function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
//输出结果：
10
- 实例2
数组arr = [1,2,3,4]求数组的和
//forEach 实现
var arr = [1,2,3,4],
sum = 0;
arr.forEach(function(e){sum += e;}); // sum = 10 just for demo
//map 实现
var arr = [1,2,3,4],
sum = 0;
arr.map(function(obj){sum += obj});//return undefined array. sum = 10 just for demo
//reduce实现
var arr = [1,2,3,4];
arr.reduce(function(pre,cur){return pre + cur}); // return 10
reduce() 专为累加这种操作而设计。
16.reduceRight()方法
-
定义和用法
reduceRight()方法的功能和reduce() 功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。
注意: reduce()对于空数组是不会执行回调函数的。 -
实例
//计算数组元素相加后的总和：
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
}
//输出结果：
125
17.reverse()方法
-
定义和用法
reverse()方法用于颠倒数组中元素的顺序。 -
实例
//颠倒数组中元素的顺序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//fruits 结果输出：
Mango,Apple,Orange,Banana
18.shift()方法
- 定义和用法
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
注意： 此方法改变数组的长度！
提示： 移除数组末尾的元素可以使用 pop()方法。 - 实例
//从数组中移除元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
//fruits结果输出:
Orange,Apple,Mango
//fruits.shift()结果输出：
Banana
19.slice()方法
-
定义和用法
slice()方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意： slice()方法不会改变原始数组。 -
实例
//在数组中读取元素：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
citrus 结果输出:
Orange,Lemon
20.some()方法
-
定义和用法
some()方法用于检测数组中的元素是否满足指定条件（函数提供）。
some()方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测，不会改变原始数组。 -
实例
//检测数组中是否有元素大于 18:
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
//输出结果为:
true
21.sort()方法
-
定义和用法
sort()方法用于对数组的元素进行排序。
默认排序顺序为按字母升序。
注意：当数字是按字母顺序排列时"40"将排在"5"前面。
使用数字排序，你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
注意：这种方法会改变原始数组！ -
实例1
//数组排序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
//fruits 输出结果：
Apple,Banana,Mango,Orange
- 实例2
//降序函数
var desc = function(x,y) {
if (x > y)
return -1; //返回一个小于0 的数即可
else
return 1; //返回一个大于0 的数即可
}
//升序函数
var asc = function(x,y) {
if (x > y)
return 1; //返回一个大于0 的数即可
else
return -1; //返回一个小于0 的数即可
}
var arr2 = [4,6,4,2,7,9,0,1];
arr2.sort(desc); //降序排序
document.writeln(arr2); //9,7,6,4,4,2,1,0
document.writeln("
");
arr2.sort(asc); //升序排序
document.writeln(arr2); //0,1,2,4,4,6,7,9
22.splice()方法
- 定义和用法
splice() 方法用于插入、删除或替换数组的元素。
从指定的索引开始删除若干元素，然后再从该位置添加若干元素，注意：这种方法会改变原始数组。 - 实例
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
原数组arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
原数组arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
原数组arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
23.toString()方法
-
定义和用法
toString()方法可把数组转换为字符串，并返回结果。
注意： 数组中的元素之间用逗号分隔。 -
实例
//将数组转换为字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
//fruits将输出：
Banana,Orange,Apple,Mango
24.unshift()方法
-
定义和用法
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
注意： 该方法将改变数组的数目。
提示: 将新项添加到数组末尾，请使用push() 方法。 -
实例
//将新项添加到数组起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
//fruits 将输出：
Lemon,Pineapple,Banana,Orange,Apple,Mango
//fruits.unshift 将输出：
6
25.valueOf()方法
-
定义和用法
valueOf() 方法返回Array对象的原始值。
该原始值由 Array 对象派生的所有对象继承。
valueOf()方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。
注意： valueOf() 方法不会改变原数组。 -
实例1
//valueOf() 是数组对象的默认方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf();
// fruits.valueOf()与 fruits返回值一样。
//v输出结果为：
Banana,Orange,Apple,Mango
valueOf()：返回最适合该对象类型的原始值；
toString(): 将该对象的原始值以字符串形式返回。
这两个方法一般是交由JS去隐式调用，以满足不同的运算情况。
在数值运算里，会优先调用valueOf()，如a + b;
在字符串运算里，会优先调用toString()，如alert©;。