数组方法的分类
根据是否会改变原数组进行分类
改变原数组的方法
push/pop方法
push: 在数组尾部添加元素,会增加数组的长度,返回值 是新数组长度
pop: 在数组尾部取出元素,会减少数组的长度,返回值 是被删除的数据
var arr = [1, 2, 3, 4, 5];
arr.push(6);
console.log(arr); // [1, 2, 3, 4, 5, 6]
var a = arr.pop();
console.log(arr); // [1, 2, 3, 4, 5]
console.log(a); // 6
注意:push()是可以一次添加多个元素的,例如arr.push(1, 2, 3)
unshift/shift方法
unshift: 在头部添加元素,会增加数组长度,返回值 是新数组长度
shift: 在头部删除元素,返回值是 被删除的数据
var arr = [1, 2, 3, 4, 5];
arr.shift();
console.log(arr); // [2, 3, 4, 5]
arr.unshift(6);
console.log(arr); // [6, 3, 4, 5]
sort排序
对数组进行排序,会影响数组元素,返回值是 新数组
var arr = [21, 10, 31, 42, 5]
arr.sort()
console.log(arr); // [10, 21, 31, 42, 5] 只排一次
arr.sort((a, b) => a-b);
console.log(arr); // [5, 10, 21, 31, 42] a-b正序 b-a倒序
reverse数组翻转
返回值: 返回反转后数组
var arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]
fill元素填充
ES6为Array增加了fill()方法,用一个固定值填充一个数组中从开始索引到终止索引。不包括终止索引
返回值: 填充后的新数组
格式: arr.fill( value [, start [, end ] ] )
参数:
- value 填充值
- start 可选, 起始索引, 默认值为0
- end 可选, 终止索引, 默认值为this.length
var arr = [1, 2, 3, 4, 5];
arr.fill(7, 1, 4); // 用7填充数组中索引为[1, 4)的全部元素
console.log(arr); // [1, 7, 7, 7, 5]
splice方法
通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组的形式返回被修改的内容。他是功能最强大的一个方法。
格式: array.splice(start [ , deleteCount [ , item1 [ item2 [ , [ , …] ] ] ] ] )
- start
指定修改的开始位置(从0计数)。如果超出了数组的长度,则从 数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第0位。 - deleteCount 可选
整数,表示要移除的数组元素的个数。
如果 deleteCount 大于 start之后的元素的总数,则从 start 后面的元素都将被删除(含第start位 )。
如果 deleteCount 被忽略了, 或者它的值大于等于array.lenth - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。
如果 deleteCount 是0或者负数,则不移除元素。这种情况下,至少应添加一个新元素。 - item1, item2, …可选
要添加进数组的元素,从 start位置开始。如果不指定,则 splice()将只删除数组元素。
他可以实现如下功能:
- 添加
- 删除
- 修改
var arr = [1, 2, 3];
arr.splice(0, 0, 'a', 'b'); // 向数组头部添加元素'a', 'b'
arr.splice(0, 3); // 从下标为0的元素开始,删除3个元素,以数组的格式返回删除的元素
arr.splice(2, 1, 'a'); // 从下标为2的元素开始,删除1个,并插入元素a,相当于arr[2] = "a", 以数组的形式返回已删除的元素
不改变原数组的方法
concat方法
实现拼接数组,不会改变原数组,会返回一个拼接后的新数组
var arr1 = [1, 2, 3];
var arr2 = [4, 5];
arr1.concat(arr2);
console.log(arr1.length); // 3 arr1不会变化
console.log(arr1.concat(arr2)) // [1, 2, 3, 4, 5]
slice方法
从数组中截取一部分,并以截取后的数组格式返回,不会改变原数组。
格式: slice(下标起点, 下标终点)
var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.slice(1, 4)); // [2, 3, 4]
join 方法
返回一个字符串,不会改变原数组
var arr = [1, 2, 3, 4, 5];
arr.join('-');
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr.join('-')); // '1-2-3-4-5'
indexOf/lastIndexOf方法
不会改变原数组, 返回指定数值的数组下标
var arr = [1, 2, 3, 2, 5];
console.log(arr.indexOf(2)); // 1 返回值为2的数组的下标
console.log(arr.indexOf(2,2)); // 3 第一个参数表示要查找的数,第二个参数表示查找起点位置的索引
console.log(arr.indexOf(6)); // -1
console.log(arr.lastIndexOf(2)); // 3 从数组的末尾开始向前查找,返回正序下标
console.log(arr.lastIndexOf(2,2)); // 1 从数组的末尾开始向前查找,返回正序下标
forEach方法
不会改变数组方法,没有返回值
var arr = [1, 2, 3, 2, 5];
// 参数为: 遍历的数组内容, 内容对应的数组索引,数组本身
arr.forEach(function(item, index, arr) {
console.log( item, index, arr );
// 1 0 true
// 2 1 true
// 3 2 true
// 2 3 true
// 5 4 true
})
console.log(arr); // [1, 2, 3, 2, 5]
var arr1 = arr.forEach(function(a) { // forEach方法没有返回值
return a * 2;
})
console.log(arr1); // undefined
map方法
返回一个新数组,这个数组中每一项是对原数组中每一项调用某个函数而得到的。
var arr = [1, 2, 3, 2, 5];
// 参数为: 遍历的数组内容, 内容对应的数组索引,数组本身
var arr1 = arr.map(function(item) {
return item * 2
})
console.log(arr); // [1, 2, 3, 2, 5]
console.log(arr1); // [2, 4, 6, 4, 10]
filter方法
不会改变原数组,且返回一个新数组,新数组中的项是从原数组中选出来的某些项组成。
var arr = [1, 2, 3, 2, 5];
// 参数为: 遍历的数组内容, 内容对应的数组索引,数组本身
var arr1 = arr.filter(function(item){
// 返回满足过滤条件的数据
return item > 2;
})
console.log(arr); // [1, 2, 3, 2, 5]
console.log(arr1); // [3, 5]
every方法
不会改变原数组,且返回一个布尔值
判断数组中每一项都说是否满足条件,所有项都满足条件才会返回true
var arr = [1, 2, 3, 2, 5];
// 参数同上
var arr1 = arr.every(function(item) {
return item > 2
})
console.log(arr); // [1, 2, 3, 2, 5]
console.log(arr1); // false
some方法
不会改变原数组,且返回一个布尔值
判断数组中每一项都说是否满足条件,只要有一项满足条件就会返回true
var arr = [1, 2, 3, 2, 5];
// 参数同上
var arr1 = arr.some(function(item) {
return item > 2
})
console.log(arr); // [1, 2, 3, 2, 5]
console.log(arr1); // true
reduce方法
不会改变原数组,迭代数组的所有项,然后构建一个最终返回的值,从数组的第一项开始逐个遍历到最后。
var arr = [1, 2, 3, 2, 5];
// reduce方法有两个参数:在每一项上调用的函数和(可选的)作为归并基础的初始值
// reduce方法的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象
// 这个函数返回的任何值都会作为第一个参数自动传给下一项
// 第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项
var sum = arr.reduce(function(pre, cur, index, array) {
return pre + cur
}, 10)
console.log(arr); // [1, 2, 3, 2, 5]
console.log(sum); // 23
// 参数二10为基础值,如果不写数组第一项则为基础值
reduceRight
用法同reduce,只不过是从右向左。
find/findIndex
不会改变原数组,返回数组中满足提供的测试函数的第一个元素的值/下标
findIndex找不到返回-1
find找不到返回undefined
var arr = [1, 2, 3, 2, 5];
var arr1 = arr.find(item => item >= 2);
console.log(arr1); // 2
console.log(arr); // [1, 2, 3, 2, 5]
includes方法
用来判断一个数组是否包含一个指定的值,返回true或false
var arr = [1, 2, 3, 2, 5];
console.log(arr.includes(2)); // true
console.log(arr.includes(6)); // false
toLocaleString方法
不会改变原数组,返回一个字符串表示数组中的元素,数组中的元素将使用各自的toLocaleString方法转成字符串,这些字符串将使用一个人特定语言环境的字符串(例如一个逗号" , ")隔开。
var arr = [1111111, 2222222];
console.log(arr.toLocaleString()); // "1,111,111,2,222,222"
console.log(arr); // [1111111, 2222222]
toString
不会改变原数组,返回一个字符串,表示指定的数组及其元素
var arr = [1, 2, 3];
console.log(arr.toString()); // "11,111,111,2,222,222"
console.log(arr); // [1, 2, 3]
静态方法
Array.from()
将伪数组或可迭代对象(包括arguments Array,Map,Set,String…)转换成数组对象
- 格式: Array.from(arrayList, mapFn, thisArg)
- 参数:
arrayLike:想要转换成数组的伪数组对象或可迭代对象
mapFn (可选参数):如果指定了该参数,新数组中的每个元素会执行该回调函数
thisArg (可选参数):可选参数,执行回调函数 mapFn 时 this 的指向对象 - 返回值:一个新的数组实例
// 第三个参数用法
let diObj = {
handle: function(n){
return n + 2
}
}
console.log('%s', Array.from(
[1, 2, 3, 4, 5],
function (x){
return this.handle(x)
},
diObj)) // 3,4,5,6,7
快速生成数组方法Array(10)
10是长度,生成的是伪数组
const arr = Array.from(Array(10), (val,index) => index+1)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Array.isArray
判断是否是数组
var obj = {}
console.log(Array.isArray(obj) ) // false
小结
javascript的数组的方法中
- 会改变原数组的有:push, pop, unshift, shift, sort, reverse, splice, fill
- 返回值是布尔值的有:isArray, every, some, includes
- 参数可以是函数的有:map, forEach, filter, every, some, find, findIndex, sort, reduce,reduceRight