数组是引用类型,JavaScript中万物皆对象。
数组元素可以是一个字符串,数字,数组,布尔,或者其他对象类型。
数组的创建
1.使用数组字面量
let arr0 = [1, "array", true, Date.now()];
2.使用构造函数Array()
let arr1 = new Array();//等同于[]
let arr2 = new Array(1, 2, 3, "array");//显示指定
let arr3 = new Array(10);//指定长度
数组的属性
属性 | 描述 |
---|---|
length | 设置或返回数组元素的个数 |
constructor | 返回创建数组对象的原型函数 |
prototype | 向数组对象添加属性或方法 |
数组的方法
会改变自身的方法
- pop()
功能:用于删除数组的最后一个元素并返回删除的元素。
参数:无
返回值:返回删除的元素
let arr = [2, 4, 6, 'a', 8, true, 9];
arr.pop();
console.log(arr);//[ 2, 4, 6, 'a', 8, true ]
- push()
功能:向数组的末尾添加一个或更多元素,并返回新的长度。
参数:push(newData1, newData2, ......)
返回值:新数组长度
let arr = [2, 4, 6, 'a', 8, true, 9];
arr.push("c");
console.log(arr);//[ 2, 4, 6, 'a', 8, true, "c" ]
- shift()
功能:用于删除并返回数组的第一个元素。
参数:无
let arr = [2, 4, 6, 'a', 8, true, 9];
console.log(arr.shift());//2
console.log(arr);//[ 4, 6, 'a', 8, true, 9 ]
- unshift()
功能:向数组的开头添加一个或更多元素,并返回新的长度。
参数:unshift(newData1, newData2, ......)
let arr = [2, 4, 6, 'a', 8, true, 9];
arr.unshift(()=>{});
console.log(arr);//[ [Function], 2, 4, 6, 'a', 8, true, 9 ]
- reverse()
功能:颠倒数组中元素的顺序,并返回更改后的数组
参数:无
let arr = [2, 6, 'a', 8, true, 9];
arr.reverse();
console.log(arr);//[ 9, true, 8, 'a', 6, 2 ]
- sort()
功能:对数组中的元素进行排序,默认是升序,返回新数组
参数:无
注意:在排序前,会先调用数组的toString()
方法,将每个元素都转成字符之后,再进行排序,此时会按照字符串的排序,逐位比较,进行排序。
let arr = [2, 16, 'a', 8, true, 9];
arr.sort();
console.log(arr);//[ 16, 2, 8, 9, 'a', true ]
解决方法:通过传入自定义函数 。sort(fn)
若fn(a,b)函数返回负数,则a
排在b
前面。
若fn(a,b)函数返回负数,则b
排在a
前面。
function fnS_B(a,b){ //从小到大
return a-b;
}
function fnB_S(a,b){ //从大到小
return b-a;
}
//注意:Number('a')为 NaN,不能用于排序。
let arr = [2, 16, 8, true, 9];
console.log(arr.sort(fnS_B));
console.log(arr.sort(fnB_S));
- splice()
功能:向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素。数组的长度前后不会改变。
参数:splice(start,num,data1,data2,...); 所有参数全部可选;分为多种情况
- start:整数,规定添加/删除项目位置的索引,使用负数可从数组结尾处规定删除的位置
- num:整数,规定要删除元素的数量,若为0则不会删除
- data1,data2,data3.....:可选,规定需要添加的元素
let arr = [2, 8, true, 9];
arr.splice(1, 0, 'a', 'b');
console.log(arr);//[ 2, 'a', 'b', 8, true, 9 ]
arr.splice(1,2,16);
console.log(arr);//[ 2, 16, 8, true, 9 ]
- copyWithin()
#ES6
功能:从数组的指定位置拷贝元素到数组的另一个指定位置。并返回新数组。
参数:array.copyWithin(target, start, end)
- target:必需。复制到指定目标索引位置。
- start:可选。元素复制的起始位置。默认start = 0。
- end:可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。
注意:复制的元素是[start,end)
let arr = [2, 8, 'a', true, 9];
console.log(arr.copyWithin(1, 2, 4));//[ 2, 'a', true, true, 9 ]
- fill
#ES6
功能:用于将一个固定值替换数组的元素。
参数:array.fill(value, start, end)
- target :必需。复制到指定目标索引位置。
- start:可选。元素复制的起始位置。默认start = 0。
- end:可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。
注意:复制的元素是[start,end)
let arr = [2, 8, 'a', true, 9];
console.log(arr.fill(6, 1, 3));//[ 2, 6, 6, true, 9 ]
不会改变自身的方法
这些方法都返回操作后的结果
- concat()
功能:用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
参数:array1.concat(array2,array3,...,arrayX)
let arr1= [1,'a',false];
let arr2=[2,'b',true];
console.log(arr1.concat(arr2));//[ 1, 'a', false, 2, 'b', true ]
- join()
功能:join() 方法用于把数组中的所有元素转换一个字符串并返回这个字符串。元素是通过指定的分隔符进行分隔的。
参数:array.join(separator)
separator:可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
let arr = [2, 8, 'a', true, 9];
console.log(arr.join('-')); //2-8-a-true-9
- slice()
功能:从已有的数组中返回选定的元素。slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
参数:slice(start, end)
start
:可选。规定从何处开始选取。end
:可选。规定从何处结束选取。注意:选取元素为[ start, end )
let arr = [2, 8, 'a', true, 9];
console.log(arr.slice()); //[ 2, 8, 'a', true, 9 ]
console.log(arr.slice(1, 3)); //[ 8, 'a' ]
- toString()
功能:可把数组转换为字符串,并返回结果。数组中的元素之间用逗号分隔。
参数:无。
let arr = [2, 8, 'a', true, 9];
console.log(arr.toString()); //2,8,a,true,9
- indexOf()
功能:可返回数组中某个指定的元素位置。若要检索的元素没有出现,则该方法返回 -1。
参数:array.indexOf(item,start)
- item:必选。查找的元素。
- start:可选。规定在数组中开始检索的位置。默认start = 0。它的合法取值是 0 到 array.length - 1。
let arr = [2, 8, 'a', true, 9];
console.log(arr.indexOf(8)); // 1
console.log(arr.indexOf(9, 2)); // 4
console.log(arr.indexOf(8, -1)); //
- lastIndexOf()
功能:返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找。 若要检索的元素没有出现,则该方法返回 -1。
参数:array.lastIndexOf(item,start)
- item:必选。查找的元素。
- start:可选。规定在数组中开始检索的位置。默认start= -1。
let arr = [2, 8, 'a', 8,true, 9];
console.log(arr.lastIndexOf(8, 1)); // 1
console.log(arr.lastIndexOf(8)); // 3
- includes()
#ES7
功能:用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
参数:arr.includes(item, start)
- item:必选。查找的元素。
- start:可选。规定在数组中开始检索的位置。默认start= 0。如果为负值,则按升序从 array.length + start 的索引开始搜索。
注意与indexOf()的区别。
let arr = [2, 8, 'a', true, 9];
console.log(arr.includes(8)); //true
console.log(arr.includes(8, 2)); //false
console.log(arr.includes(8, -2)); //false
遍历方法
- forEach()
功能:用于调用数组的每个元素,并将元素传递给回调函数。不会对空数组进行检测。
参数:array.forEach(function(currentValue, index, arr), thisValue)
function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。
currentValue
:必需。当前元素。index
:可选。当前元素的索引值。arr
:可选。当前元素所属的数组对象。- thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//将数组所有元素相加
let sum = 0;
function add(item){
sum+=item;
}
let arr = [1,3,8,6];
arr.forEach(add);
console.log(sum); //18
- map()
功能:1.同forEach功能;
2.返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
3.原数组不改变。
参数:array.map(function(currentValue,index,arr), thisValue)
function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。
currentValue
:必需。当前元素。index
:可选。当前元素的索引值。arr
:可选。当前元素所属的数组对象。- thisValue:可选。执行回调函数时用作this的值。如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。
//输出数组的平方
function fn(item) {
return item * item;
}
let arr = [6, 2, 8, 5];
console.log(arr.map(fn)); //[ 36, 4, 64, 25 ]
- filter()
功能:创建一个新的数组,新数组中的元素指定数组中符合条件的所有元素。如果没有符合条件的元素则返回空数组。
参数:array.filter(function(currentValue,index,arr), thisValue)
function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。必须返回一个boolean值。
currentValue
:必需。当前元素。index
:可选。当前元素的索引值。arr
:可选。当前元素所属的数组对象。- thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//输出数组中的偶数
function fn(item) {
if (item % 2) {
return false;
} else {
return true;
}
}
let arr = [6, 2, 8, 5];
console.log(arr.filter(fn)); //[ 6, 2, 8 ]
- every()
功能:用于检测数组所有元素是否都符合指定条件。如果所有元素都通过检测返回 true,否则返回 false。
参数:array.every(function(currentValue,index,arr), thisValue)
function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。
currentValue
:必需。当前元素。index
:可选。当前元素的索引值。arr
:可选。当前元素所属的数组对象。- thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//判断数组元素是否都为偶数
function fn(item) {
if (item % 2) {
return false;
} else {
return true;
}
}
let arr = [6, 2, 8, 5];
console.log(arr.every(fn)); //false
- some()
功能:用于检测数组中的元素是否满足指定条件。
some() 方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
参数:array.every(function(currentValue,index,arr), thisValue)
function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。
currentValue
:必需。当前元素。index
:可选。当前元素的索引值。arr
:可选。当前元素所属的数组对象。- thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//判断数组中是否存在奇数
function fn(item) {
if (item % 2) {
return true;
} else {
return false;
}
}
let arr = [6, 2, 8, 5];
console.log(arr.some(fn)); // true
- reduce()
功能:从数组的第一项开始,为数组中的每一个元素依次执行函数,逐个遍历到最后,迭代数组的所有项,返回计算结果。
参数:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
function(total,currentValue, index,arr):必选。数组中每个元素需要调用的函数。
total
:必需。初始值, 或者计算结束后的返回值。currentValue
:必需。当前元素。currentIndex
:可选。当前元素的索引。arr
:可选。当前元素所属的数组对象。- initialValue:可选。传递给函数的初始值
//将数组所有元素相加
function fn(total, item) {
return total += item;
}
let arr = [1, 3, 8, 6];
console.log(arr.reduce(fn, 0)); //18
- reduceRight()
功能:从数组的末尾开始,为数组中的每一个元素依次执行函数,逐个遍历到数组的第一个元素,迭代数组的所有项,返回计算结果。(与reduce执行顺序相反)
参数:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
function(total,currentValue, index,arr):必选。数组中每个元素需要调用的函数。
total
:必需。初始值, 或者计算结束后的返回值。currentValue
:必需。当前元素。currentIndex
:可选。当前元素的索引。arr
:可选。当前元素所属的数组对象。- initialValue:可选。传递给函数的初始值
//将数组所有元素相加
function fn(total, item) {
return total += item;
}
let arr = [1, 3, 8, 6];
console.log(arr.reduceRight(fn, 0)); // 18
- find()
#ES6
功能:返回通过测试的第一个元素值。如果没有符合条件的元素返回 undefined
参数:array.find(function(currentValue, index, arr),thisValue)
function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。
currentValue
:必需。当前元素。index
:可选。当前元素的索引值。arr
:可选。当前元素所属的数组对象。- thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//查找第一个大于5的元素值
function fn(item) {
return item>5;
}
let arr1 = [1, 3, 8, 6];
console.log(arr1.find(fn)); // 8
let arr2 = [1, 3, 2, 5];
console.log(arr2.find(fn)); // undefined
- findIndex()
#ES6
功能:返回通过测试的第一个元素值的索引。如果没有符合条件的元素返回 -1
参数:array.findIndex(function(currentValue, index, arr), thisValue)
function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。
currentValue
:必需。当前元素。index
:可选。当前元素的索引值。arr
:可选。当前元素所属的数组对象。- thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//查找第一个大于5的元素值的索引
function fn(item) {
return item>5;
}
let arr1 = [1, 3, 8, 6];
console.log(arr1.findIndex(fn)); // 2
let arr2 = [1, 3, 2, 5];
console.log(arr2.findIndex(fn)); // -1
- entries(),keys() 和 values()
#ES6
功能:用于遍历数组。它们都返回一个遍历器对象。可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
参数:无
let arr = [1, 3];
console.log(arr.keys());
for (let i of arr.keys()) {
console.log(i);
}
//0
//1
for (let i of arr.values()) {
console.log(i);
}
//1
//3
for (let [i, elem] of arr.entries()) {
console.log(i + "--" + elem);
}
//0--1
//1--3
其他
- 扩展运算符
...
功能:将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。
//扩展运算符
function add(a, b) {
return a + b;
}
let arr = [2, 3];
console.log(add(...arr));// 5
- from()
ES6
功能:将类数组对象和可遍历对象转化为数组。
参数:Array.from(object, fn, thisValue)
- object:必需,要转换为数组的对象
- fn:可选,数组中每个元素要调用的函数
- thisValue:可选,映射函数(mapFunction)中的 this 对象
let obj ={
0:'a',
1:'b',
2:'c',
length:3
};
console.log(Array.from(obj));//[ 'a', 'b', 'c' ]
- of()
ES6
功能:用于将一组值,转换为数组。主要目的是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
参数:Array.of(element0[, element1[, ...[, elementN]]])
Array(); //[]
Array.of(); //[]
Array(3);//[ , , ,]
Array.of(3);//[3]
Array(2, 4);//[2,4]
Array.of(2, 4);//[2,4]
数组应用
数组去重
- indexOf()
// indexOf()
function unique(array) {
let res = [];
for (let i of arr) {
if (res.indexOf(i) === -1) {
res.push(i);
}
}
return res;
}
let arr = [1, 1, "1", true];
console.log(unique(arr)); //[ 1, '1', true ]
- object 键值对
function unique(arr) {
let obj = {};
let res = [];
for (let i of arr) {
if (!obj[i]) {
obj[i] = true;
res.push(i);
}
}
return res;
}
let arr = [1, 1, "1", true];
console.log(unique(arr)); //[ 1, true ]
- set、map
ES6
function unique(array){
return Array.from(new Set(array));
// return [...(new Set(array))];
}
let arr = [1, 1, "1", true];
console.log(unique(arr)); //[ 1, '1', true ]
求数组的最值
使用 Math 的静态方法
Math.max();
Math.min();
- apply()
let arr = [1, 6, 2, 8];
console.log(Math.max.apply(null,arr));//8
console.log(Math.min.apply(null,arr));//1
- 扩展运算符
ES6
let arr = [1, 6, 2, 8];
console.log(Math.max(...arr)); //8
console.log(Math.min(...arr)); //1
数组乱序
//数组乱序
function fn(){
return Math.random()-0.5;
}
let arr = [1,2,3,4,5,6];
console.log(arr.sort(fn));
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。