Array的常用方法使用
1.数组增加
push: 向数组的末尾添加新的元素(参数可以是多个),返回数组长度,改变原数组
var arr = [];
var arrLength = arr.push('1');
console.log(arrLength); // 1
arrLength = arr.push('2','3','4');
console.log(arrLength); // 4
console.log(arr); // ['1','2','3','4']
unshift: 向数组的开头添加新的元素(参数可以是多个),返回数组长度,改变原数组
var arr = [];
var arrLength = arr.unshift('4');
console.log(arrLength); // 1
arrLength = arr.unshift('1','2','3');
console.log(arrLength); // 4
console.log(arr); // ['1','2','3','4']
concat:用于连接两个或多个数组(参数可以是多个),返回新数组,不改变原数组
没有传递参数的情况下,concat只是复制当前数组并返回副本
var arr = ['1', '2', '3'];
var newArr = arr.concat();
console.log(arr); // ['1','2','3']
console.log(newArr); // ['1','2','3']
console.log(arr === newArr); // false
参数为一或多个数组,则将这些数组中的每一项都添加到副本数组中
var arr1 = ['1'];
var arr2 = ['2'];
var arr3 = ['3'];
var newArr = arr1.concat(arr2, arr3);
console.log(arr1); // ['1']
console.log(arr2); // ['2']
console.log(arr3); // ['3']
console.log(newArr); // ['1','2','3']
参数传递的值而不是数组,这些值会被添加到副本数组的末尾
var arr = ['1'];
var newArr = arr.concat('2', '3');
console.log(arr); // ['1']
console.log(newArr); // ['1','2','3']
参数可以为值和数组(不建议这样使用)
var arr = ['1'];
var arr2 = ['3'];
var newArr = arr.concat('2', arr2);
console.log(arr); // ['1']
console.log(arr2); // ['3']
console.log(newArr); // ['1','2','3']
2.数组删除
pop: 删除数组的末尾元素,返回它删除的元素的值,改变原数组
var arr = ['1','2','3'];
var lastData = arr.pop();
console.log(arr); // ['1','2']
console.log(lastData); // '3'
shift: 删除数组的第一个元素,返回它删除的元素的值,改变原数组
var arr = ['1','2','3'];
var firstData = arr.shift();
console.log(arr); // ['2','3']
console.log(firstData); // '1'
splice(index,howmany,item1,…,itemX): 删除从 index 处开始的零个或多个元素,返回被删除的元素的数组,第二个以后的参数为在index处插入的元素,改变原数组
从指定位置删除元素
var arr = ['1','2','3'];
var deleteDataList = arr.splice(1,2); // 从下标1处删除两个元素
console.log(arr); // ['1']
console.log(deleteDataList); // ['2','3']
从指定位置插入多个元素
var arr = ['1','2','5'];
var deleteDataList = arr.splice(2,0,'3','4'); // 从下标为2的位置上插入多个元素
console.log(arr); // ['1','2','3','4','5']
console.log(deleteDataList); // [] //第二个参数为0 不删除元素
从指定位置删除元素并插入多个元素
var arr = ['1','2','5'];
var deleteDataList = arr.splice(2,1,'3','4'); // 从下标为2的位置上删除一个元素后,再插入多个元素
console.log(arr); // ['1','2','3','4']
console.log(deleteDataList); // ['5']
3.数组截取
slice(start,end):截取从 start 到 end (不包括该元素)中的元素,返回一个新的数组
无参数表示返回当前数组的一个副本,默认start为0,end为字符串长度length
var arr = ['1','2','3'];
var newArr = arr.slice();
console.log(arr); // ['1','2','3']
console.log(newArr); // ['1','2','3']
console.log(newArr === arr); // false
只有一个参数,则该参数为start值,end默认为字符串长度length
var arr = ['1','2','3'];
var newArr = arr.slice(1);
console.log(arr); // ['1','2','3']
console.log(newArr); // ['2','3']
两个参数,从start到end(不包括end下标的元素)
var arr = ['1','2','3','4','5'];
var newArr = arr.slice(1,3);
console.log(arr); // ['1','2','3','4','5']
console.log(newArr); // ['2','3']
参数为负数,则规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推
var arr = ['1','2','3','4','5'];
var newArr1 = arr.slice(-2); // 相当于arr.slice(arr.length + (-2)) -> arr.slice(3)
var newArr2 = arr.slice(0, -2); // 相当于arr.slice(0, arr.length + (-2)) -> arr.slice(0,3)
var newArr3 = arr.slice(-4,-2); // 相当于arr.slice(arr.length + (-4), arr.length + (-2)) -> arr.slice(1,3)
console.log(arr); // ['1','2','3','4','5']
console.log(newArr1); // ['4','5']
console.log(newArr2); // ['1','2','3']
console.log(newArr3); // ['2','3']
start参数大于等于数组长度,不管是否有end参数,结果返回空数组
var arr = ['1','2','3','4','5'];
var newArr1 = arr.slice(5); // arr长度为5,start === arr.length
var newArr2 = arr.slice(6); // arr长度为5 start > arr.length
var newArr3 = arr.slice(5,1); // arr长度为5 start === arr.length
console.log(arr); // ['1','2','3','4','5']
console.log(newArr1); // []
console.log(newArr2); // []
console.log(newArr3); // []
start参数大于等于end参数,结果返回空数组
var arr = ['1','2','3','4','5'];
var newArr1 = arr.slice(3,2); // arr长度为5 start参数大于end参数
var newArr2 = arr.slice(3,3); // arr长度为5 start参数等于end参数
console.log(arr); // ['1','2','3','4','5']
console.log(newArr1); // []
console.log(newArr2); // []
4.数组查找
indexOf: 返回数组中第一个满足条件的索引(从0开始), 不满足返回-1
只有一个参数的情况,参数表示要查找的元素
var arr = ['1','2','3'];
var checkElement1 = arr.indexOf('2');
var checkElement2 = arr.indexOf('4');
console.log(checkElement1); // 1
console.log(checkElement2); // -1
两个参数的情况,第一个参数表示要查找的元素,第二个参数表示开始查找的下标位置
var arr = ['1','2','3'];
var checkElement1 = arr.indexOf('2', 1); // 从下标为0的位置开始查找元素‘2’
var checkElement2 = arr.indexOf('2', 2); // 从下标为2的位置开始查找元素‘2’
console.log(checkElement1); // 1
console.log(checkElement2); // -1
find():传参是一个函数,返回数组中第一个满足条件的数据,不满足返回undefined;使用find方法后,要对查询到的数据进行undefined的判断,才能正常使用数据
数组为非空数组
var arr = ['1','2','3'];
var findData1 = arr.find(val => val === '2'); // 查找元素值为‘2’的数据
var findData2 = arr.find(val => val === '4'); // 查找元素值为‘4’的数据
console.log(findData1); // '2'
console.log(findData2); // undefined
数组为空数组,查询结果返回undefined
var arr = [];
var findData1 = arr.find(val => val === '2'); // 查找元素值为‘2’的数据
var findData2 = arr.find(val => val === '4'); // 查找元素值为‘4’的数据
console.log(findData1); // undefined
console.log(findData2); // undefined
includes():判断数组是否包含某值,返回 true 或 false
var arr = ['1','2','3'];
var includeData1 = arr.includes('2'); // 查找数组是否存在元素值为‘2’的数据
var includeData2 = arr.includes('4'); // 查找数组是否存在元素值为‘4’的数据
console.log(includeData1); // true
console.log(includeData2); // fasle
5.数组遍历
forEach():传参为一个函数,数组里的元素个数有几个,该函数就会执行几次,不会生成新数组
数组中的元素是基本数据类型,或者对象直接被赋值,不会改变原数组的数据
var arr = ['1', 2, true, undefined, Symbol(1), null, {}]; // 数组元素为基本类型
var newArr = arr.forEach(function (val, index, array) {
val = 'change';
});
console.log(arr); // ['1', 2, true, undefined, Symbol(1), null, {}]
console.log(newArr); // undefined (forEach方法无返回值)
数组中的元素是对象,遍历更改对象属性值,会改变原数组对象属性的数据
var arr = [{ a: 1 }, { a: 2}]; // 数组元素为对象
arr.forEach(function (val, index, array) {
val.a = val.a * 2;
});
console.log(arr); // [{ a: 2 }, { a: 4}]
循环过程中,回调方法中使用return不会报错,但是无效,不能跳出循环
var arr = [{ a: 1 }, { a: 2}];
arr.forEach(function (val, index, array) {
val.a = val.a * 2;
if (index === 0) { // 想要在符合条件时之后退出 该return并不会跳出循环
return;
}
});
console.log(arr); // [{ a: 2 }, { a: 4}]
使用break和continue跳出整个循环或当前循环的,会报错
var arr = [{ a: 1 }, { a: 2}];
arr.forEach(function (val, index, array) {
val.a = val.a * 2;
if (index === 0) {
break;
}
});
map():传参为一个函数,函数必须有return,数组里的元素个数有几个,该函数就会执行几次,会返回一个新数组,不改变原数组的值
var arr = [1, 2, 3];
var newArr = arr.map(function (val) {
return val * 2
});
console.log(arr); // [1, 2, 3]
console.log(newArr); // [2, 4, 6]
filter():传参为一个函数,函数return 一个可以转化为boolean类型的值,遍历数组,过滤出符合条件的元素并返回一个新数组,不改变原数组的值
回调函数return一个boolean值
var arr = [1, 2, 3];
var newArr = arr.filter(function (val) {
return val === 2
});
console.log(arr); // [1, 2, 3]
console.log(newArr); // [2]
回调函数return一个非boolean类型值,会总动转换为true或false
// 0、''、null、undefined 转化为boolean为false
var arr = [0, 1, 2, 3, '', null, undefined, {}, []];
var newArr = arr.filter(function (val) {
return val;
});
console.log(arr); // [0, 1, 2, 3, '', null, undefined, {}, []];
console.log(newArr); // [1, 2, 3, {}, []];
若没有符合条件的元素,则filter会返回一个空数组
var arr = [1, 2, 3];
var newArr = arr.filter(function (val) {
return val === 4;
});
console.log(arr); // [1, 2, 3]
console.log(newArr); // []
some():传参为一个函数,函数return 一个可以转化为boolean类型的值,some返回值为一个boolean值,遍历数组,只要有一个元素满足条件就返回 true,否则返回 false;不改变原数组的值
var arr = [1, 2, 3];
var newArr = arr.some(function (val) {
return val === 2;
});
console.log(arr); // [1, 2, 3];
console.log(newArr); // true;
当空数组调用some方法时,返回false;
var arr = [];
var newArr = arr.some(function (val) {
return val === 2;
});
console.log(arr); // [];
console.log(newArr); // false;
every():传参为一个函数,函数return 一个可以转化为boolean类型的值,方法返回结果为一个boolean值,遍历数组,每一个元素都满足条件 则返回 true,否则返回 false;不改变原数组的值
// 只有数组的所有元素满足要求时,结果才为true
var arr = [1, 2, 3];
var newArr = arr.every(function (val) {
return val <= 3;
});
console.log(arr); // [1, 2, 3];
console.log(newArr); // true;
// 只要有一个元素不满足要求,则结果就为false
var arr = [1, 2, 3, 4];
var newArr = arr.every(function (val) {
return val <= 3;
});
console.log(arr); // [1, 2, 3, 4];
console.log(newArr); // false;
reduce():可以将回调参数的结果作为下一个参数使用。
W3语法
array.reduce(function(prev, cur, index, arr), initialValue);
/*
prev: 必需。初始值, 或者计算结束后的返回值。
cur: 必需。当前元素。
index: 可选。当前元素的索引;
arr: 可选。当前元素所属的数组对象。
initialValue: 可选。传递给函数的初始值,相当于total的初始值。
*/
如果传入了初始值0,则第一次遍历时prev的值为0,cur的值为数组第一项1
var arr = [1, 2, 3];
// 因为传入了初始值0,所以第一次遍历时prev的值为0
var totle = arr.reduce(function (prev, cur, index) {
console.log('prev', prev); // 0->1->3
return prev + cur;
},0);
console.log(arr); // [1, 2, 3];
console.log(totle); // 6;
没有传入了初始值,则第一次遍历时prev的值为数组第一项数据1,cur的值为数组第二项数据2
var arr = [1, 2, 3];
// 没有传入了初始值,则第一次遍历时prev的值为数组第一项数据1,cur的值为数组第二项数据2
var totle = arr.reduce(function (prev, cur, index) {
console.log('prev', prev); // 1->3
console.log('cur', cur); // 2->3
console.log('index', index); // 1->2
return prev + cur;
});
console.log(arr); // [1, 2, 3];
console.log(totle); // 6;
如果数组为空,并且没有传入了初始值,则reduce方法会报错
var arr = [];
// 数组为空,并且没有传入了初始值,reduce方法会报错
var totle = arr.reduce(function (prev, cur, index) {
console.log('prev', prev); // 未执行
console.log('cur', cur); // 未执行
console.log('index', index); // 未执行
return prev + cur;
});
console.log(arr); // 未执行
console.log(totle); // 未执行
如果数组为空,传入了初始值,则reduce方法不会报错,所以一般来说我们提供初始值通常更安全
var arr = [];
// 数组为空,并且没有传入了初始值,reduce方法会报错
var totle = arr.reduce(function (prev, cur, index) {
console.log('prev', prev); // 未执行
console.log('cur', cur); // 未执行
console.log('index', index); // 未执行
return prev + cur;
},0);
console.log(arr); // []
console.log(totle); // 0