• 数组学习二


    1 for in 、for of、 for 

    const a = [1, 2, 3]
    const obj = {
        age: '19',
        name: '三三'
    }
    
    for (let i = 0; i < a.length; i++) {
        console.log((a[i]))
    }
    // 1, 2, 3
    for (let item in a) {
        console.log(a[item])
    }
    // 1,2,3
    for (let item of a) { 
      //for of 主要用在遍历数组
      console.log(item)
    }
    // 1,2,3
    for (let key in obj) {
      //for in 主要用在遍历对象属性
      console.log(key, ':', obj[key])
    }
    // age: 19 // name: 三三

    2、some()、every()

    // some 某个,every 每个
    
    // some是指数组中某个满足条件就返回true, 
    // every是指每一个满足条件才会返回true
    
    const students = [
        {name: '三三', age: 25},
        {name: '斑', age: 23},
        {name: '中级妖怪', age: 30}
    ]
    
    const res1 = students.some((item) => {
        return item.name.startsWith('三');
    })
    
    const res2 = students.every((item) => {
        return item.age > 10;
    })
    
    console.log(res1, res2) 
    // true true

    3、map()、forEach()

    const res = students.map(item => {
        return item.age // [25, 23, 30]
    }) 
    //map有返回值,返回数组类型,新数组,原数组不改变
    
    students.forEach(item => {
        item.age += 1 // 
    })
    /**

     * [ { "name": "三三", "age": 26 },
     * { "name": "斑", "age": 24 },
     * { "name": "中级妖怪", "age": 31 } ]

    */
    //forEach没有返回值,返回原数组,原数组改变

    4、filter()

    const res1 = studengs.filter((item) => { 
         // filter有返回值,返回值是新数组,把符合过滤条件的过滤出来,原数组不变
         return item.age >= 25;
    })
    
    console.log(res1)
    // [{name: "三三", age: 25}, {name: "中级妖怪", age: 30}]

    5、find()、findIndex()

    const res1 = students.find((item) { 
         // find 返回符合筛选挑条件的第一个元素
        return item.age >= 25;
    })
    console.log(res1) //{name: "三三", age: 25}
    
    const a = [1, 3, 5, 7];
    const s = a.find(item => {
      return item > 3
    }); console.log(s) // 5 const res1 = students.findIndex((item) => { //findIndex第一个满足条件的index索引 console.log(item) return item.age >= 25; }) console.log(res1) // 0

    6、reduce()、reduceRight()

    // 很多时候需要累加数组项或者其它数组项计算后得到一个值(比如说求和)
    
    // 参数 从左往右开始
    /*
        prev:它是上一次调用回调时返回的结果,每次调用的结果都会给prev
        cur:当前的元素
        index:当前的索引
        arr:循环的数组
    */
    
    // 求数组的和。
    const a = [1,2,3,4,5,6,7,8,9,10]
    const str = a.reduce((prev,cur,index,arr) => {
        return prev + cur ;
    })
    str // 55
    
    // reduceRight()方法,从右往左开始,参数和上面是一样。
    const str1 = a.reduceRight((prev,cur,index,arr) => {
        return prev + cur ;
    })
    // str1  // 55

    7、indexOf()、lastIndexOf()、includes()

    // indexOf() 是从左往右查,返回第一个匹配索引,大小写敏感,找不到返回-1,内部使用严格相等
    // lastIndexOf() 从右往左查,返回最后一个匹配索引
    // 注意:二者返回索引都是从左往右计算的 
    // includes()返回一个bool,表示包含给定的值
    const arr = [1,2,3,4,5,5,6,7,1]; console.log(arr.indexOf(5));// 4 下标为4的位置 console.log(arr.lastIndexOf(5));// 5
    console.log(arr.indexOf(5));
    
    
    [NaN].indexOf(NaN); //-1
    [NaN].includes(NaN); //true

    // 可与上面find() 对比学习

    8、assign() 与 解构运算符...

    /*
    Object.assign(target,...sources);
    target是目标对象
    sources是源对象
    返回目标对象
    */
    var o1= {a:1};
    var o2 = {b : 2};
    var o3 = {c:3};
    var obj = Object.assign(o1,o2,o3);
    console.log(obj)  //{a:1,b:2,c:3};
    console.log(o1)  //{a:1,b:2,c:3}; 注意目标对象也会发生变化
    
    // 可以用 ... 解构运算符代替
    var obj = {...o1,...o2,...o3}
    console.log(obj)  //{a:1,b:2,c:3};
    console.log(o1)  //{a:1};
  • 相关阅读:
    关于FPS游戏痕的问题
    移动端输入框获取焦点后,虚拟键盘弹起,把固定的底部也顶起来了
    正则匹配移动端
    js 判断对象是否为空
    jsonp跨域原理解析
    Webstorm的一些常用快捷键
    webstorm创建js文件时自动生成js注释
    帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
    this指北 (一篇读懂)
    原型链
  • 原文地址:https://www.cnblogs.com/lxl0419/p/15598428.html
Copyright © 2020-2023  润新知