常用数组方法总结

最新推荐文章于 2022-11-26 20:29:01 发布

置顶 Li星辰

最新推荐文章于 2022-11-26 20:29:01 发布

阅读量196

点赞数

分类专栏： Javascript 文章标签： javascript es6

本文链接：https://blog.csdn.net/lilingjun63/article/details/118530409

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

数组方法总结

1.数组的方法

数组.splice(开始索引,删除个数,添加元素1添加元素2…) 删除,替换,添加 改变原数组

const arr = [1,2,3,4,5]
arr.splice(1,1)  // 删除
console.log(arr) // [1,3,4,5]
arr.splice(1,0,2) // 添加
console.log(arr) // [1,2,3,4,5]
arr.splice(1,1,3) // 替换
console.log(arr) // [1,3,3,4,5]

数组.slice(开始索引,结束索引) 将从开始索引到结束索引的数组项复制到一个新数组返回值:新数组
```
 const arr = [1, 2, 3, 4, 5]
 const newArr = arr.slice(1,4) 
 console.log(newArr); // [2,3,4]
```

数组.concat(数组1,数组2,值1,值2),拼接数组生成一个新数组可以传入数组或者值返回值:新数组

 const arr1 = [1, 2, 3, 4, 5]
 const arr2 = [6,7]
 const newArr = arr1.concat(arr2,8,{name:'zs',age:18})
 console.log(newArr); //[1, 2, 3, 4, 5, 6, 7, 8, {name:'zs',age:18}]

数组.forEach((item,索引,原数组) => {}) 函数作为一个参数为数组的每个元素都运行一个函数.该函数没有返回值

const arr = [1, 2, 3,]             
arr.forEach((item,index,arr) => {
console.log(`${index}:${item}`);
})
/*
0:1
1:2
2:3
*/

2.数组搜索:按索引

数组.indexof(item,索引) 从索引开始搜索item,如果找到则返回索引,否则返回-1

const arr = [‘zs’,‘ls’,‘ww’]
console.log(arr.indexOf(‘zs’)) // 0
console.log(arr.indexOf(‘ls’,1)) // 1
console.log(arr.indexOf(‘mz’)) // -1
~~~

数组.lastIndexOf(item,索引) 和上面相同,只是从右向左搜索

const arr = [‘zs’,‘ls’,‘ww’]
console.log(arr.lastIndexOf(‘ww’)) // 2
console.log(arr.lastIndexOf(‘ls’,1)) // 1
console.log(arr.lastIndexOf(‘mz’)) // -1
~~~

数组.includes(item,索引) 从索引from 开始搜索item,如果找到则返回true,没找到则返回false

const arr = ['zs', 'ls', 'ww']
console.log(arr.includes('ww')) // true
console.log(arr.includes('ls', 1)) // true
console.log(arr.includes('hh')) // false

注意:

这些方法使用的是严格相等 === 比较所以如果我们搜索false,会精确到的确是false 而不是数字0
如果我们想检查是否包含某个元素,并且不想知道确切的索引,那么数组.includes 是首选
此外,includes 是一个非常小的差别是它能正确的处理NaN, 而不像 indexOf/lastIndexOf

3.数组搜索:按特定条件搜索

数组.find((item,index,array)=>{…}) 如果返回 true ,则返回 item 并停止迭代;对于假值(false)的情况,则返回 undefined

const arr = [1, 2, 3]
const bool = arr.find(item =>item ===1)
console.log(bool); // 1
const bool2 = arr.find(item=>item === 4)
console.log(bool2); // undefined

数组.findIndex(()=>{}) 同find 返回的是找到的元素的索引而不是元素本身,并且在未找到任何内容时返回-1

 const arr = [1, 2, 3]
 const i = arr.findIndex(item => item === 1)
 console.log(i); // 0
 const i2 = arr.findIndex(item => item === 4)
 console.log(i2) // -1

数组.filter(()=>{}) find直接返回第一个符合条件的元素,如果有多个可以用filter,返回的是多有匹配元素组成的数组
```
 const arr = [1, 2, 3, 2, 2]
 const newArr = arr.filter(item => item === 2)
 console.log(newArr);// [2,2,2]
```

4.转换数组

数组.map((item,index,array)=>{}),它对数组的每个元素都调用函数,并返回结果数组.
数组.sort() 对数组进行原位(in-place)排序
数组.reverse() 颠倒数组中的元素,改变原数组,也返回颠倒后的数组
字符串.spllit(’,’,3) 将字符串中逗号处分割为字符串并取出前三个元素返回新的数组
数组.join(’,’) 使用逗号连接数组返回一个字符串
数组.reduce() 累加器 let res = 数组.reduce((accu,cur)=>accu+cur,0)

5.检查是否为数组

Array.isArray(arr) 返回布尔值可以区别对象和数组
数组.some(fn) 方法测试数组中是不是至少有1个元素通过了被提供的函数测试.返回值Boolean
数组.every(fn) 对数组的每个元素调用函数fn,如果任何/所有的结果为 true,则返回true,否则返回false

6.数组方法的应用

遍历数组

当我们需要遍历一个了数组式–我们可以使用forEach,for 或 for…of
当我们需要遍历并返回每个元素的数据时–我们可以使用map

数组去重

使用Set

let arr = [100, 234, 2342,1112, 100, 300, '100', 'hello', 'hello', NaN, NaN]
let newArr = [...new Set(arr)]

使用reduce + includes
```
unique
```

数组拷贝

浅拷贝
1. 扩展运算符 let newArr = […arr]
2. 利用concat方法,不写参数 let newArr = arr.concat()
3. 利用数组截取 let newArr = arr.slice(0)

深拷贝

1.JSON

let obj2= JSON.parse(JSON.stringify(obj1))

2.递归实现

let obj = {
            name: 'zs',
            age: 123
        }
        // 定义函数 获取对象的构造函数(类) 名
        function getObjectClass(obj) {
            return Object.prototype.toString.call(obj).slice(8, -1)
        }
        // 深拷贝的函数
        function deepClone(obj) {
            // 判断obj是对象是数组还是其他 
            if (getObjectClass(obj) === 'Object') {
                var res = {} // 创建空的对象
            } else if (getObjectClass(obj) === 'Array') {
                var res = [] // 创建空的数组
            } else {
                return obj // 直接把参数返回
            }
            // 对传入的对象(遍历)进行遍历
            for (let i in obj) {
                res[i] = deepClone(obj[i])
            }
            return res;
        }
        const obj2 = deepClone(obj)
        console.log(obj2 === obj); // false