面试常问平时项目中数组【Array】的常用操作方法总结
js中数组的操作方法还是很多的：比如如下图代码图解总结分析它的使用方法和本质；
注意下map和forEach的区别：map()可以返回值赋给新的数组，forEach()不可以，forEach()默认遍历谁就返回谁；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组常用方法</title>
</head>
<body>
<script type="text/javascript">
// 数组对象的作用是：使用单独的变量名来存储一系列的值。
// 创建数组的方式1: new Array();
// new Array();
// new Array(size); size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值
// new Array(element0, element1, ..., elementn); element ..., elementn 是参数列表
// Array 对象属性
// constructor 返回对创建此对象的数组函数的引用。
// length 设置或返回数组中元素的数目。
// prototype 使您有能力向对象添加属性和方法。
let arr1 = new Array(7)
console.log(arr1,'创建数组的方式1')
let arr2 = new Array(1,2,3,4,5)
console.log(arr2,'arr2') // [1, 2, 3, 4, 5] "arr2"
// 创建数组的方式2: 直接创建
let arr3 = [1,2,3,4];
let arr4 = [];
let arr5 = new Array();
console.log(arr4,arr5,'2个空数组')
// 数组常用的一些方法
// 1.push() 向数组的末尾添加一个或更多元素，并返回新的长度。
let testArr = [1,2,3,4,5];
testArr.push(6)
console.log(testArr,'数组尾部增加了项')
// 2.pop() 删除并返回数组的最后一个元素；
testArr.pop()
console.log(testArr,'数组删除了最后一项')
// 3.reverse() 颠倒数组中元素的顺序。
testArr.reverse()
console.log(testArr,'颠倒数组中元素的顺序')
// 4.unshift()向数组的开头添加一个或更多元素，并返回新的长度。
testArr.unshift(10,12)
console.log(testArr,'数组的开头添加项')
// 5.shift()删除并返回数组的第一个元素
testArr.shift()
console.log(testArr,'数组的开头第一项')
// 6.join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。或者 toString()
let ntestArr = testArr.join() // arrayObject.join(separator)
console.log(ntestArr,'数组转字符串') // 12,5,4,3,2,1 数组转字符串
// 7.concat()连接两个或更多的数组，并返回结果 该方法不会改变现有的数组。
let ptestArr = testArr.concat([12,13,14])
console.log(ptestArr,'连接数组')
// 8.sort()对数组的元素进行排序
let btestArr = testArr.sort((a,b) => {
return b - a
})
console.log(btestArr,'排序从升序 a-b 和 降序 b-a')
// 9.splice()删除元素，并向数组添加新元素。
// arrayObject.splice(index,'要删除的项目数量。如果设置为 0，则不会删除项目',item1,.....,itemX)
testArr.splice(0,2,'aa','bb')
console.log(testArr,'数组的开头第一项')
// 数组遍历方法
let list = [10,9,8]
// 1.for循环
for(i = 0,len=list.length; i < len; i++) {
console.log(i,'下标',list[i],'值')
}
// 2. forEach 没有返回值
//参数：value数组中的当前项, index当前项的索引, array原始数组；
//数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
list.forEach((item,index,array) => {
console.log(index,'下标',item,'值')
})
// 3.map 有返回值，可以return出来
list.map((value,index,array) => {
console.log(value,'值',index,'下标',array)
return list.push(200)
})
console.log(list,'map可以重组数组') // [10, 9, 8, 200, 200, 200] "map可以重组数组"
// 4.for of 可以正确响应break、continue和return语句
for(let item of list.keys()){
console.log('可以遍历for of的下标', item);
}
for(let item of list){
console.log('遍历数组', item);
}
// 5.filter方法
const nlist = [1,2,3,4,8,9,10]
const newNlist = nlist.filter(item => item > 7)
console.log(newNlist,'filter方法') // [8, 9, 10] "filter方法"
// 6.数组的find() 用于找出第一个符合条件的数组成员,如果没有符合条件的成员，则返回undefined;
const narr = [1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
})
console.log(narr,'find的使用') // 10 "find的使用"
// 7.数组的 findIndex() 返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
const vIndex = [1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
})
console.log(vIndex,'findIndex的使用') // 2 "findIndex的使用"
// 8.数组的some()方法 some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true
const earr = [ 1, 2, 3, 4, 5, 6 ];
const learr = earr.some( function( item, index, array ){
return item > 3;
})
console.log(learr,'some') // true "some"
// 9.数组的 every()对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true
const warr = [ 1, 2, 3, 4, 5, 6 ];
const newwarr = warr.every( function( item, index, array ){
return item > 3;
})
console.log(newwarr,'every') // false "every"
// 数组的解构2赋值和拓展运算符的使用
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first,'第一个',...rest,'剩下的') // 1 "第一个" 2 3 4 5 "剩下的"
const tarr1 = [1,2,2,3];
const tarr2 = [4,5,6];
console.log([...tarr1,...tarr2],'合并数组')
// 类数组转成数组的方法
/*
1.遍历类数组,push进一个空数组[]里面;
2.Array.prototype.slice.call(arrayLike);
3.Array.prototype.concat.apply([], arrayLike);
4.Array.prototype.splice.call(arrayLike, 0);
5.Array.from() 类数组转成数组 ES6提供的方法
*/
console.log(Array.from(new Set([...tarr1,...tarr2])),'合并并去重数组')
// Array.of方法用于将一组值，转换为数组
console.log(Array.of(3, 11, 8)) // [3,11,8]
// ES6数组的填充
const parr = new Array(10).fill(3); // fill后面跟的每一项的值
console.log(parr,'数组的快捷填充')
// 数组实例的 entries()，keys() 和 values()
// keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
// Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值
// [1, 2, 3].includes(2) // true
// 数组求和 常规循环 或者 reduce
// reduce 接受一个函数，函数有四个参数，分别是：上一次的值，当前值，当前值的索引，数组
const total = [1,2,3,4].reduce((pre, cur)=>pre + cur);
console.log(total,'求和')
</script>
</body>
</html>
如下图数组自带的属性和方法：__proto__
数组的操作方法就这么多了；
代码整理实属不易之事，转载注明出处！！！
