复习了一下数组的常用api,练习的是一些自己容易混淆或者是忽略的参数和细节~
还是自己敲一遍清楚一些,光看也没用~
先把总结写在前面:
-
改变原数组的操作:pop / push / shift / unshift / splice / reverse / sort
-
不改变原数组的操作:concat / filter / join / slice / reduce / findIndex / forEach / map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组常用api</title>
</head>
<body>
<script>
var commonArr = [1,2,3,4];
var strArr = ['apple','orange','purple','lemon']
var noArr = [];
// concat:合并数组(>=2),不会改变原有数组,返回一个新数组(浅拷贝)
var concatArr = commonArr.concat([5,6]);
console.log(commonArr,concatArr) // [1,2,3,4] [1,2,3,4,5,6]
//filter:创建一个新数组,其中包含通过测试的元素,没有测试通过的元素返回[](不改变原有数组)
var filterArr = commonArr.filter(item=>item>2);
var fitlterStrArr = strArr.filter((item,index)=>item.length>5)
console.log(commonArr,filterArr,fitlterStrArr) // [1,2,3,4] [3,4]
// find:返回测试成功的第一个元素,没有则返回undefined (不会改变原有数组)
var findElement1 = commonArr.find((item,index,arr)=>item>2,window); // 3
var findElement2 = commonArr.find(item=>item>4); // undefined
console.log(findElement1,findElement2)
// findIndex:返回测试成功的第一个元素的索引,没有则返回-1 (不会改变原有数组)
var findElementIndex = commonArr.findIndex((item,index)=>{return item>1 && index>2})
console.log(commonArr,findElementIndex); // [1,2,3,4] 3
// :对数组的每个元素都执行一次给定的函数,返回值 undefined (不会改变原有数组)
const arraySparse = [1,2,3,,6];
var sparseResult = arraySparse.forEach((item,index)=>{
noArr.push(item + 1);
})
console.log(sparseResult,noArr)
// map:返回一个由原数组每个元素执行回调函数的结果组成的新数组 (不会改变原有数组)
var mapArr = strArr.map((item,index)=>item.length<6);
console.log(mapArr) // [true, false, false, true]
console.log(commonArr.map(item=>item*2)) // [2 4 6 8]
// indexOf:返回在数组中找到一个给定元素的第一个索引,否则返回-1 (不会改变原有数组)
var findIndex1 = commonArr.indexOf(1);
console.log(findIndex1) // 0
var findIndex3 = commonArr.indexOf(3,-1); // -1表示从数组末尾第一个元素开始往后查找
console.log(findIndex3) // -1
var findIndex2 = commonArr.indexOf(2,-4);
console.log(findIndex2); // 1
// join:数组转为字符串,若数组为空,返回空字符串 (不会改变原有数组)
const joinStr = strArr.join(); // join不传分隔符,默认是逗号
console.log(joinStr,typeof joinStr) // apple,orange,purple,lemon string
console.log(strArr.join(''),strArr); // appleorangepurplelemon ["apple", "orange", "purple", "lemon"] // 传入空字符表示所有元素之间没有任何分隔符
// pop:删除数组最后一个元素并返回该元素值 改变原数组
console.log(commonArr.pop(),commonArr) // 4--删除值 [1,2,3]
// push:将一个或多个元素添加到数组的末尾，并返回该数组的新长度 改变原数组
console.log(commonArr.push(4,5),commonArr) // 5--数组长度 [1, 2, 3, 4, 5]
//shift:删除数组第一个元素并返回该元素的值 改变原数组 若数组为空,返回undefined
console.log(commonArr.shift(),commonArr) // 1--删除值 [2, 3, 4, 5]
// unshift:将一个或多个元素添加到数组的开头，并返回该数组的新长度 (修改原有数组)。
console.log(commonArr.unshift(0,9,1),commonArr) // 7---数组长度 [0, 9, 1, 2, 3, 4, 5]
// reduce:对数组每个元素执行reducer函数(升序),并将结果汇总为单个返回值 (不会改变原有数组)
// reducer(累计器,当前值,当前索引,源数组) 累计器---累计回调的返回值
// 注:如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始
var sum = commonArr.reduce((accu,curr,index,arr)=>{
return accu+curr;
},10);
console.log(sum,commonArr) // 34
// 将二维数组转换为一维
var faltArr = [1,[2,3],5];
// 直接使用扁平化 不会改变原有数组)
console.log((faltArr.flat())) // [1, 2, 3, 5]
// 使用reduce
var faltArrResult=faltArr.reduce((accu,curr,index,arr)=>{
console.log(accu,curr)
return accu.concat(curr)
},[]);
console.log(faltArrResult) // [1, 2, 3, 5]
// slice:返回含有被提取元素的新数组[begin,end),原数组不改变(浅拷贝原数组)
var sliceArr = (faltArrResult.slice(2,4))
console.log(sliceArr,faltArrResult) // [3, 5] [1, 2, 3, 5]
sliceArr.push(99);
console.log(sliceArr,faltArrResult) // [3, 5] [1, 2, 3, 5] 数组 布尔值等不产生影响
var objArr = [{name:'aaa',age:12},{name:'bbb',age:123},{name:'ccc',age:1234}];
var sliseObj = objArr.slice(0,2);
console.log(sliseObj,objArr) // [{name:'aaa',age:444},{name:'bbb',age:123}]; [{name:'aaa',age:444},{name:'bbb',age:123},{name:'ccc',age:1234}]
sliseObj[0].age = 444;
console.log(sliseObj,objArr) // [{name:'aaa',age:444},{name:'bbb',age:123}]; [{name:'aaa',age:444},{name:'bbb',age:123},{name:'ccc',age:1234}]
// splice(开始位置,删除几个元素,添加哪些元素):删除或替换现有元素或者原地添加新的元素来修改数组,返回被删除的元素组成的一个数组。此方法会改变原数组
var spliceArr = objArr.splice(0,2);
console.log(spliceArr) // [{name:'aaa',age:444},{name:'bbb',age:123}]
console.log(commonArr) // [0, 9, 1, 2, 3, 4, 5]
// commonArr.splice(0,4,888);
// console.log(commonArr) //[888,3,4,5]
console.log(commonArr.splice(1,2)) // [9,1]
console.log(commonArr) // [0, 2, 3, 4, 5]
console.log(commonArr.splice(1,0,1)) // [] 没有删除元素，则返回空数组(这里是新增元素)
console.log(commonArr) // [0, 1, 2, 3, 4, 5]
// 改变原数组的操作:pop push shift unshift splice reverse(反转数组) sort
</script>
</body>
</html>
--------------------------------分割线-----------------------------------------------------------
加更几个数组练习题:
1.下面这段代码输出什么?
["1","2","3"].map(parseInt)
结果为: 1 NaN NaN
解析如下:
["1","2","3"].map(parseInt) // parseInt 不传参数的这种写法,会默认传入当前循环的(item,index)
// 其遍历过程相当于parseInt(1,0) // 1
// parseInt(2,1) // NaN
// parseInt(3,2) // NaN
上述代码等价于:
["1","2","3"].map((item,index)=>parseInt(item,index))// parseInt(数值,进制数--默认为0 10进制 2 表示2进制)
2.实现数组去重的几种方法:
const arrs = [1,2,3,4,1,3,5,5,6,1,2,9];
// 1.使用indexOf:返回在数组中找到一个给定元素的第一个索引,否则返回-1 (不会改变原有数组)
function unique1(arr){
if(!Array.isArray(arr))return;
var newArr = []; // 创建新数组接收不同值
for(var i=0;i<arr.length;i++){
if(newArr.indexOf(arr[i]) === -1) { // 在新数组中查找有没有arrs中的值,没有就把当前值push进新数组,有则不做任何操作,进入下一次循环
newArr.push(arr[i])
}
}
return newArr;
}
console.log(unique1(arrs)) // [1, 2, 3, 4, 5, 6, 9] 字符串数组和数字都可以用,特殊字符不行
// 2.sort:数组排序(升序或降序) 只能用于数字
function unique2(arr) {
if(!Array.isArray(arr))return;
let sortArr = arr.sort((a,b)=>a-b); // 升序
let newArr = [];
for(let i=0;i<sortArr.length;i++) {
// 相邻元素比较
if(arr[i] != arr[i+1]) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(unique2(arrs)) // [1, 2, 3, 4, 5, 6, 9]
// 3.splice(开始位置,删除几个元素,添加哪些元素):删除或替换现有元素或者原地添加新的元素来修改数组,返回被删除的元素组成的一个数组。此方法会改变原数组
function unique3(arr) {
if(!Array.isArray(arr))return;
// 循环元素
for(let i=0;i<arr.length;i++) {
// 循环比较值 删除重复元素 i=0 i=1 i=2
for(let j = i+1;j<arr.length;) { // j =1 j=2
if(arr[i] === arr[j]) {
arr.splice(j,1); // arr = [1,1,2]
} else {
j++ //j=3
}
}
}
return arr
}
console.log(unique3(arrs)) // [1, 2, 3, 4, 5, 6, 9]
// 4.includes: 数组是否包含某个具体值
function unique4(arr) {
if(!Array.isArray(arr))return;
let newArr = [];
for(let i=0;i<arr.length;i++) {
if(!newArr.includes(arr[i])) {
newArr.push(arr[i])
}
}
return newArr
}
console.log((unique4(arrs))) // [1, 2, 3, 4, 5, 6, 9]
// 5.set对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用
function unique5(arr) {
// 使用构造器将Array转为Set对象
let newArr = new Set(arr);
return [...newArr] // 使用...操作符将Set转换Array
}
console.log(unique5(arrs)) // [1, 2, 3, 4, 5, 6, 9]
3.数组中每个元素出现的次数:
解题思路是:把数组元素写入为新对象的属性,并把新对象的属性值置为1,如果重复属性,则属性值+1
function showTime(arr) {
let obj= {};
for(let i=0;i<arr.length;i++) {
let data = arr[i];
let count = obj[data]; // 将数组值写入对象属性
if(count) {
obj[data] += 1; // 重复,属性值加1
} else {
obj[data] = 1;
}
}
return obj;
}
console.log(showTime([1,1,1,1,2,3,[1,2,1]])) // {1: 4, 2: 1, 3: 1}
1418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
