Array 类型
数组定义: 数据的有序列表。
不同点: 与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据。
数组大小: ECMAScript数组的大小可以动态调整,即随着数据的增加自动增长。
创建数组的基本方式
- 使用Array构造函数。如下面代码:
var colors = new Array();
var colors = new Array(20);
var colors = new Array("red","blue","green");
- 使用数组字面量表示法。数组字面量由一对包含数组项的方括号表示,多个数组项之间以逗号分开,如下所示:
var colors = ["red","blue","green"];
var name = [ ];
var values = [1,2];
数组的索引与length属性
- 读取和设置数组的值时,要使用方括号并提供响应值的基于0的数字索引。
var colors = ["red","blue","green"]; // 定义一个字符串数组
alert(colors[0]); // 显示第一项
colors[2] = "black"; // 修改第三项
colors[3] = "brown"; // 新增第四项
- length属性,数组的项数保存在length属性中。
length属性会返回0或更大的值,如下:
var colors = ["red","blue","green"]; // 定义一个字符串数组
var names = [];
alert(colors.length); // 3
alert(names.length); // 0
- length属性特点
1、他不只是可读的,通过这个属性,可以从数组的末尾移除项或添加新项;
2、新增的每一项都会取得undefined值。
var colors = ["red","blue","green"]; // 定义一个字符串数组
alert(colors.length) = 2; // 移除了最后一项
alert(colors[2]); // undefined
var colors = ["red","blue","green"]; // 定义一个字符串数组
alert(colors.length) = 4; // 新增了一项
alert(colors[3]); // undefined
一、检测数组
- 对于一个网页或者一个全局作用域而言,使用instanceof
- Array.isArray()方法
二、转换方法
2.1 toLocaleString()
toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串,并返回结果。
语法:Date.toLocaleString()
返回值: 日期和时间以字符串形式输出。
// 根据本地时间把 Date 对象转换为字符串:
var d = new Date();
var n = d.toLocaleString();
console.log(n); //2020/11/1 下午11:57:00
// 还可以将数字变成千分位格式:
let num=12345678;
console.log(num.toLocaleString()); // 12,345,678
2.2 toString()
把数组转换为字符串,并返回结果。
每个值的字符串表示拼接成了一个字符串,中间以逗号分割。
语法:arrayObject.toString()
返回值: 日期和时间以字符串形式输出。
var colors = ["red","blue","green"]
console.log(colors.toString()); //red,blue,green
2.3 valueOf()
valueOf() 方法可返回 String 对象的原始值。
语法:string.valueOf()
var colors = ["red","blue","green"]
console.log(colors.valueOf()); //["red", "blue", "green"]
三、栈方法
3.1 push()
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
注意: 新元素将添加在数组的末尾。
注意: 此方法改变数组的长度。
提示: 在数组起始位置添加元素请使用 unshift() 方法。
语法: array.push(item1, item2, …, itemX)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
//fruits 结果输出:Banana,Orange,Apple,Mango,Kiwi
3.2 pop()
pop() 方法用于删除数组的最后一个元素并返回删除的元素。
注意:此方法改变数组的长度!
提示: 移除数组第一个元素,请使用 shift() 方法。
语法: array.pop()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
//fruits 结果输出:Banana,Orange,Apple
四、队列方法
4.1 unshift()
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
注意: 该方法将改变数组的数目。
提示: 将新项添加到数组末尾,请使用 push() 方法。
语法: array.unshift(item1,item2, …, itemX)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
//fruits 将输出:Lemon,Pineapple,Banana,Orange,Apple,Mango
4.2 shift()
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
注意: 此方法改变数组的长度!
提示: 移除数组末尾的元素可以使用 pop() 方法。
语法: array.unshift(item1,item2, …, itemX)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
//fruits结果输出:Orange,Apple,Mango
五、重排序方法
5.1 reverse()
reverse() 方法用于颠倒数组中元素的顺序。
语法: array.reverse()
//颠倒数组中元素的顺序:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//fruits 结果输出:Mango,Apple,Orange,Banana
5.2 sort()
sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
注意: 当数字是按字母顺序排列时"40"将排在"5"前面。
使用数字排序,你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
数组在原数组上进行排序,不生成副本。
语法: array.sort(sortfunction)
参数sortfunction可选。规定排序顺序。必须是函数。
//数字排序(数字和升序):
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
//fruits输出结果:1,5,10,25,40,100
//数字排序(数字和降序):
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
//fruits输出结果:100,40,25,10,5,1
//数字排序 (字母和降序):
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
//fruits输出结果:Orange,Mango,Banana,Apple
六、操作方法
6.1 concat()
concat() 方法用于连接两个或多个字符串。
该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串。
语法:string.concat(string1, string2, …, stringX)
//连接3个字符串:
var str1="Hello ";
var str2="world!";
var str3=" Have a nice day!";
var n = str1.concat(str2,str3);
//n 输出结果: Hello world! Have a nice day!
6.2 slice()
slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
注意: slice() 方法不会改变原始数组。
语法:array.slice(start, end)
参数 | 描述 |
---|---|
start | 可选。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
//在数组中读取元素:
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
//citrus 结果输出: Orange,Lemon
//使用负值从数组中读取元素
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(-3,-1);
//myBest 结果输出: Lemon,Apple
6.3 splice()
splice() 方法用于添加或删除数组中的元素。
注意:这种方法会改变原始数组。
语法:array.splice(index,howmany,item1,…,itemX)
//数组中添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
//fruits 输出结果: Banana,Orange,Lemon,Kiwi,Apple,Mango
//移除数组的第三个元素,并在数组第三个位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
//fruits 输出结果:Banana,Orange,Lemon,Kiwi,Mango
//从第三个位置开始删除数组后的两个元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
//fruits 输出结果: Banana,Orange
七、位置方法
7.1 indexOf()
indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回 -1。
提示如果你想查找字符串最后出现的位置,请使用 lastIndexOf() 方法。
语法:array.indexOf(item,start)
参数 | 描述 |
---|---|
item | 必须。查找的元素。 |
start | 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。 |
//查找数组中的 "Apple" 元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//a 结果输出: 2
//以上输出结果意味着 "Apple" 元素位于数组中的第 3 个位置。
//查找数组中 "Apple" 的元素, 在数组的第四个位置开始检索:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);
//a 结果输出: 6
7.2 lastIndexOf()
lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找。
如果要检索的元素没有出现,则该方法返回 -1。
该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾(没有指定 start 参数时)。如果找到一个 item,则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。
如果在数组中没找到指定元素则返回 -1。
提示: 如果你想查找数组首次出现的位置,请使用 indexOf() 方法。
//查找数组中"Apple"的位置:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.lastIndexOf("Apple");
//a 输出结果: 6
//从数组中的第四个位置查找字符串 "Apple"出现的位置:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.lastIndexOf("Apple",4);
//a 结果输出:2
八、5个迭代方法
注意: 这五种迭代方法都不会对空数组进行检测。都不会改变原始数组(基本数据类型)。
每个方法都接受两个参数:
1)数组中的每个元素都会执行的函数function(currentValue, index,arr)。
函数function的参数
参数 | 描述 |
---|---|
currentValue | 必须。当前元素的值 |
index | 可选。当前元素的索引值 |
arr | 可选。当前元素属于的数组对象 |
2)thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。
8.1 every()
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
语法: array.every(function(currentValue,index,arr), thisValue)
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
var aaa = ages.every(checkAdult);
console.log(aaa); //false
8.2 some()
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
语法: array.some(function(currentValue,index,arr),thisValue)
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
var aaa = ages.some(checkAdult);
console.log(aaa); //true
8.3 filter()
创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
语法:array.filter(function(currentValue,index,arr), thisValue)
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
var aaa = ages.filter(checkAdult);
console.log(aaa); //[32, 33, 40]
console.log(ages); //[32, 33, 16, 40]
8.4 forEach()
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意:forEach()返回值为 undefined,即没有返回值
语法:array.forEach(function(currentValue, index, arr), thisValue)
//将数组中的所有值乘以特定数字:
var numbers = [65, 44, 12, 4];
function myFunction(item, index, arr) {
arr[index] = item * 2;
}
var aaa = numbers.forEach(myFunction);
console.log(aaa); //undefined
console.log(numbers); //[130, 88, 24, 8]
8.5 map()
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
语法: array.map(function(currentValue,index,arr), thisValue)
var numbers = [4, 9, 16, 25];
var sq = numbers.map(Math.sqrt);
console.log(sq); //[2,3,4,5]
console.log(numbers); //[4, 9, 16, 25]
九、归并方法
9.1 reduce()
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法: array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
函数function的参数
参数 | 描述 |
---|---|
total | 必需。初始值, 或者计算结束后的返回值。 |
currentValue | 必须。当前元素的值 |
currentIndex | 可选。当前元素的索引值 |
arr | 可选。当前元素属于的数组对象 |
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
var Sum = numbers.reduce(getSum);
console.log(Sum); //125
9.2 reduceRight()
reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
注意: reduce() 对于空数组是不会执行回调函数的。
语法:array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
var numbers = [2, 45, 30, 100];
function getSum(total, num) {
return total - num;
}
var Sum = numbers.reduceRight(getSum);
console.log(Sum); //23