当前位置：网站首页>学习笔记之常用数组api 改变原数组和不改变原数组的有哪些?
学习笔记之常用数组api 改变原数组和不改变原数组的有哪些?
2022-07-26 09:30:00 【豆芽不吃豆】
复习了一下数组的常用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}
边栏推荐
猜你喜欢
Under a directory of ext3 file system, subfolders cannot be created, but files can be created
js中树与数组的相互转化（树的子节点若为空隐藏children字段）
![[MySQL] understand the important architecture of MySQL (I)](/img/89/5fb595b0112fac987626857b76f9a4.png)
[MySQL] understand the important architecture of MySQL (I)
MySql5.7.25源码安装记录
arc-gis的基本使用2
MySQL transaction
el-table实现增加/删除行，某参数跟着变
登录模块用例编写
Innovus is stuck, prompting x error:
Great reward for interview questions
随机推荐
arcgis的基本使用4
v-for动态设置img的src
【Flutter -- 布局】Align、Center、Padding 使用详解
Order based evaluation index (especially for recommendation system and multi label learning)
什么是异步操作
phpexcel导出emoji符号报错
matlab simulink实现模糊pid对中央空调时延温度控制系统控制
TabbarController的封装
Windows backs up the database locally by command
sublime 安装插件
安卓 实现缓存机制,多种数据类型缓存
Wechat applet avatarcropper avatar clipping
Selection and practice of distributed tracking system
Your login IP is not within the login mask configured by the administrator
wap端微信h5支付，用于非微信浏览器
Add DLL
Byte buffer stream & character stream explanation
I'm faded
OnTap 9 file system limitations
调用DLL开启线程的问题