js forEach(),indexOf(),find(),map(),截取层级不确定的树形结构数据的前两级的方法

435

这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战

forEach

forEach会改变原来的数组

var arr = [1, 2, 3, 4];
var sum = 0;
arr.forEach(function(value, index, array) {

    array[index] = array[index] * 100; //结果为true
    sum += value;

});

console.log(sum); //10
console.log(arr); //[100, 200, 300, 400]

使用forEach给数据添加一个属性isShow, 控制照片的显示与隐藏

   //第一点 使用forEach给数据循环添加一个属性isShow, 控制照片的显示与隐藏
   let list = [{
       "publishInstitution": "惠来县气象台",
       "type": "yellow_11B09"
   }, {
       "publishInstitution": "陆河县气象台",
       "type": "orange_11B09"
   }, ]
   list.forEach(item => {
       item.isShow = true

   });

   console.log(list) //[{"publishInstitution":"惠来县气象台","type":"yellow_11B09","isShow":true},{"publishInstitution":"陆河县气象台","type":"orange_11B09","isShow":true}]
   let newList = JSON.parse(JSON.stringify(list)) //深拷贝,使数据可以被监听到,解决数据更新了,但是页面不更新的问题
   //第二点, 
   const type = "orange_11B09"
   newList.forEach(item => {
       if (item.type == type) {
           item.isShow = false
       }
   })
   console.log(newList) //[{"publishInstitution":"惠来县气象台","type":"yellow_11B09","isShow":true},{"publishInstitution":"陆河县气象台","type":"orange_11B09","isShow":false}]

js树形结构截取前面两级

    // 
    let treeData = [{
        id: 0,
        name: '00',
        children: [{
                id: 1,
                name: '01',
                children: [{
                    id: 11,
                    name: '11',
                    children: [{
                        id: 13,
                        name: '13',
                        children: [],
                    }],
                }]
            },
            {
                id: 2,
                name: '02',
                children: [{
                    id: 22,
                    name: '22',
                    children: [],
                }]
            }
        ]
    }]
    console.log(interceptLevel(treeData, 3));
    // 数据来源截取(data数据结构,index需要保留的层级)
    function interceptLevel(data, index) {
        index--;
        return data.map(e => {
            if (e.children && index > 0) {
                interceptLevel(e.children, index);
            } else {
                delete e.children;
            }
            return e;
        })
    }

js 判断字符串中是否包含某个字符串

indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。

var str = "123"; 
console.log(str.indexOf("3") != -1 ); // true

find()

使用场景:选择器中页面显示的值与接口通信时的值不一致时需要

        const examTypes = [{
            "text": "全国大学英语四级考试(CET4)",
            "key": 1
        }, {
            "text": "全国大学英语六级考试(CET6)",
            "key": 2
        }, {
            "text": "全国大学日语四级考试(CJT4)",
            "key": 3
        }, {
            "text": "全国大学日语六级考试(CJT6)",
            "key": 4
        }, {
            "text": "全国大学德语四级考试(PHS4)",
            "key": 5
        }, {
            "text": "全国大学德语六级考试(PHS6)",
            "key": 6
        }, {
            "text": "全国大学俄语四级考试(CRT4)",
            "key": 7
        }, {
            "text": "全国大学俄语六级考试(CRT6)",
            "key": 8
        }, {
            "text": "全国大学法语四级考试(TFU4)",
            "key": 9
        }]
        const text = "全国大学英语四级考试(CET4)"
        const key = examTypes.find(i => i.text === text).key
        console.log(key)//1
        

map()

map()不改变原来的数组

一种使用场景:将一个数组对象转换成只包含其他一个元素的数组,如下例子:

          const examTypes = [{
              "text": "全国大学英语四级考试(CET4)",
              "key": 1
          }, {
              "text": "全国大学英语六级考试(CET6)",
              "key": 2
          }, {
              "text": "全国大学日语四级考试(CJT4)",
              "key": 3
          }, {
              "text": "全国大学日语六级考试(CJT6)",
              "key": 4
          }, {
              "text": "全国大学德语四级考试(PHS4)",
              "key": 5
          }, {
              "text": "全国大学德语六级考试(PHS6)",
              "key": 6
          }, {
              "text": "全国大学俄语四级考试(CRT4)",
              "key": 7
          }, {
              "text": "全国大学俄语六级考试(CRT6)",
              "key": 8
          }, {
              "text": "全国大学法语四级考试(TFU4)",
              "key": 9
          }]
          const newExamTypes = examTypes.map(item => item.text)
          console.log(newExamTypes) //["全国大学英语四级考试(CET4)", "全国大学英语六级考试(CET6)", "全国大学日语四级考试(CJT4)", "全国大学日语六级考试(CJT6)", "全国大学德语四级考试(PHS4)", "全国大学德语六级考试(PHS6)", "全国大学俄语四级考试(CRT4)", "全国大学俄语六级考试(CRT6)", "全国大学法语四级考试(TFU4)"]
           

使用场景,通过路由跳转到详情页面,最好定义好参数,如index ,可以方便日后随机下架入口

        const ecologyQuery = [
            "气象灾害预警",
            "全国重点城市空气质量实时数据查询",
            "全国重点城市空气质量日报查询",
            "全国排污许可证查询",
            "建设项目环评已批准项目审批情况查询"
        ]
        const ecologyUri = "views/EcologyService/Query?index="//路由
        const listData = ecologyQuery.map((item, index) => {
            return {
                name: item,
                uri: ecologyUri + index
            }
        })
        console.log(listData) //[{"name":"气象灾害预警","uri":"views/EcologyService/Query?index=0"},{"name":"全国重点城市空气质量实时数据查询","uri":"views/EcologyService/Query?index=1"},{"name":"全国重点城市空气质量日报查询","uri":"views/EcologyService/Query?index=2"},{"name":"全国排污许可证查询","uri":"views/EcologyService/Query?index=3"},{"name":"建设项目环评已批准项目审批情况查询","uri":"views/EcologyService/Query?index=4"}]

在chrome中复制完整Array, Object的方法

有的时候在chrome打印出来的Array、Object的方法很方便阅读,但是不太方便复制,接下来介绍一种可以方便复制出来的方法:

1.第一步:显示

image.png

2.第二步:右键选中Store object as global variable image.png

3.输入JSON.stringify(temp1)即可复制 image.png