B5net

人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

javascript和es6知识:数组的常用循环迭代和操作处理

Published on:2022-05-05
const arr = [100, 200, 300, 400]


一、for循环 :for ..index , for ...in,for..of,forEach


for (let index = 0; index < arr.length; index++) {
     console.log(index, arr[index]) // index为数组的键0,1,2,3
}


for (const index in arr) {//会跳过值为undefined的元素
    console.log(index, arr[index]) // index为数组的键0,1,2,3
}


for (const item of arr) {
    //item为数组的值 100,200,300,400
}


arr.forEach((item, index) => {
    // index为数组的键0,1,2,3
    //item为数组的值 100,200,300,400
})



二、.es6循环,扩展运算符...以及解构


1. some方法,返回true或者false。只要数组的值有一个满足里面的判断就返回true,否则返回false

const result = arr.some((item) => {
     return item > 300
}) // 返回true


2. every方法,返回true或者false。只有数组的所有值都满足里面的判断才会返回true,否则返回false

const result = arr.every(item=>{
return item >300;
})// 返回false


3. map方法,对数组的每一项进行操作,并返回一个操作后的新的数组

const result = arr.map(item=>{
return item*2;
})// 返回[200,400,600,800]


4. filter方法,对数组的每一项进行过滤,返回一个满足过滤条件的新数组

const result = arr.filter(item=>{
return item<300
});// 返回[100,200]


5. find方法,返回数组中满足条件的第一个元素的值。否则返回 undefined;找到满足条件,后续代码不执行。

const result = arr.find(item=>{
return item>200
});//返回300


6. findIndex方法,返回数组中满足条件的第一个元素的键。否则返回 -1。使用方法和find一致

7. reduce方法,数组的归并,可以进行求和、去重等等各种操作,最终返回最后一次的回调返回值

 const result = arr.reduce((pre, item, index, arr) => {
        return pre + item
}, 1000) //返回2000

回调参数:

    prev 表示上一次调用回调时的返回值,第一次为第二个参数初始值1000;

    item, 表示当前正在处理的数组元素;

    index 表示当前正在处理的数组元素的索引

    arr 表示原数组;

第二个参数 1000为初始值,可以根据需要填写 对象,数组及其他基本类型等,也可以不写


8.entries 遍历键值对

    let arr = [100, 200, 300, 200, 400]
    for (let [key, value] of arr.entries()) {
        console.log(key, value)
    }


9.扩展运算符...

     ①实现数组合并

   const arr1 = ['小李', '小黄']
   const newArr = [...arr,...arr1]  //[100, 200, 300, 400, '小李', '小黄']


     ②扩展运算符添加

   const new1 =  [500,...arr]
  const new2 =  [...arr,500]

     

    ③将set对象转为数组

    let seet = new Set()
    seet.add({ id: '1' })
    seet.add(2)
    seet.add('100')
    const arr = [...seet.keys()] // 返回 [{ id: '1' },2,'100']

     使用set值的唯一性,可以用来去重

    let arr = [100, 200, 300, 200, 400]
    let seet = new Set(arr)
    const newarr = [...seet.keys()]  // [100, 200, 300, 400]


10. 解构

    const arr = [100, 200, 300, 400]
    const [a, b, c] = arr
    console.log(a, b, c) //a,b,c分别为对应下表的元素值


11. arr.keys() 和 arr.values() ,返回的是迭代器对象,需要for..of 进行遍历获取 


三、判断数组中是否含有某个元素


1.indexOf lastIndexOf 返回某个元素在数组中第一次和最后一次的下标,没有返回-1 ,

arr.indexOf(200)


2.includes 数组是否包含指定值,返回true或false

 arr.includes(200)


四、数组的拼接、截取、转换


1. join和toString 数组转字符串,原数组不变

const str = arr.join(',') // '100,200,300,400'
const str = arr.toString() // '100,200,300,400'


2.contact 数组合并,后面数组放在前面的数组最后,原数组不变

const arr1 = ['小李', '小黄']
const newArr = arr.concat(arr1) //[100, 200, 300, 400, '小李', '小黄']


4. 添加元素

    push 在结尾处添加元素,返回新数组的长度

    unshift 向数组头部添加新元素,返回新数组的长度

    let arr = [100, 200, 300, 400]
    arr.push(500)
    arr.unshift(500)


5. splice 删除或添加元素,改变原数组

    删除:第一个参数为开始下标,第二个参数为删除数量,返回值为删除的数组

    let arr = [100, 200, 300, 400]
    arr.splice(1, 2) //返回[200,300]
    console.log(arr) //返回 [100,400]

   添加:从第三个参数开始,每一个都是要添加得元素,依次添加在数组后面

    arr.splice(1, 2, 500)
console.log(arr) //返回 [100,400,500]


6.slice(start,end) 用数组的某个片段切出新数组,参数为开始和结束(不包含)下标,原数组不变

    let arr = [100, 200, 300, 400]
//结束下标不截取
const new1 = arr.slice(1, 2) //[200]
//第二个参数不写,默认到最后
const new2 = arr.slice(1) //[200, 300, 400]
//第二个参数为负数,代表从最后往前数,最后一个是-1,往前依次-2,-3
const new3 = arr.slice(1, -1) //[200,300]


7. pop 删除并返回数组最后一个元素,空数组返回undefined,原数组改变

    const arr = [100, 200, 300, 400]
const lastItem = arr.pop() // 返回 400
console.log(arr) // [100,200,300]


8. shift  删除并返回数组第一个元素,空数组返回undefined,原数组改变

    const arr = [100, 200, 300, 400]
    const firstItem = arr.shift() // 返回 100
    console.log(arr) //[200, 300, 400]

9. delete arr[index] ,删除数组某个下标的值,长度索引不变,只是将值改为undefined


五、对象转数组 Array.from()


1. map转数组

let map = new Map();
map.set('key0', 'value0');
map.set('key1', 'value1');
console.log(Array.from(map)); // [['key0', 'value0'],['key1','value1']]


2.set转数组,set里面的值唯一

    let seet = new Set()
    seet.add({ id: '1' })
    seet.add(2)
    seet.add('100')
    const arr = Array.from(seet) // 返回 [{ id: '1' },2,'100']


3.字符串转数组

    let str = 'abc';
console.log(Array.from(str)); // ["a", "b", "c"]


六、数组排序sort


1.默认数值情况,根据元素从第一位开始比较从小到大排序

    let arr = [100, 300, 400, 200, 400]
    arr.sort()
    console.log(arr) //返回[100, 200, 300, 400, 400]
    let arr = [106, 105, 20, 50, 22]
    arr.sort()
    console.log(arr) //返回 [105, 106, 20, 22, 50]


2.升序和降序  a-b 升序  b-a 降序 ,a和b是数组中的元素

    let arr = [106, 105, 20, 50, 22]
    arr.sort((a, b) => {
        return a - b
    })
    console.log(arr) //[20, 22, 50, 105, 106]


3.对象数组,可以根据某个属性进行排序,同样适用上面的

    let arr = [
        { name: '小李', age: 20 },
        { name: '小王', age: 18 },
        { name: '小刘', age: 19 }
    ]
    arr.sort((a, b) => {
        return a.age - b.age //升序,反过来就是降序
    })


留言列表(0)

    留言

    B5net

    人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

    开源项目
    • B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
    • B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
    • B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
    • B5VueCMF_H5:vue3.0 + Webpack/Vite + Vuex + VueRouter + Vant3 搭建快速开发基本Demo
    • See also:gitee.com@b5net
    最新评论
    瀑布 :你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
    瀑布 :你好,今天看到你的开源项目,很喜欢,感谢你的开源
    冰舞 on Laravel定时任务的实现 :测试测试测试测试测试测试 测试测试测试测试测试测试测试测试测试测试
    文章分类