js 对象与数组常用的方法分享

抽出了一点时间, 整理了一下 js 数组与对象的一些小方法, 在开发中减少代码量,大佬们勿喷, 欢迎补充 ! 周末愉快 !

数组方法

• fliter 方法

 // filter 方法
        // 遍历数组, 返回满足条件的数组,不会改变原数组;
        var arr = [1, 2, 3, 4, 5, 6]
        var newArr = arr.filter((item, index) => {
            return item > 3
        })
        console.log(arr, '原数组'); // 不变
        console.log(newArr, '新数组'); // 4,5,6 

• some 方法

//  some 方法
       //  遍历数组 , 只要数组中有一项元素满足的条件返回true, 全部不满足返回false;
       var arr = [1, 2, 3, 4, 5, 6]
       var isTrueOrFalse = arr.some(item => {
           return item > 4
       })
       console.log(isTrueOrFalse, "结果"); // true

• forEach 方法

// forEach 方法
       // 遍历数组 , 对每一个元素进行逻辑操作 , 不会改变原数组;
       var arr = [1, 2, 3, 4, 5, 6]
       var newArr = []
       arr.forEach((item, index) => {
           item = item + 1
           newArr.push(item)
       })
       console.log(arr, '原数组'); // [1, 2, 3, 4, 5, 6]
       console.log(newArr, '新数组'); // [2, 3, 4, 5, 6, 7]

• map 方法

// map方法
       // 遍历数组 , 返回一个满足条件的新的数组 , 不会改变原数组;
       var arr = [{
               'name': '小周',
               'phone': 110,
           }, {
               'name': '小王',
               'phone': 111,
           },
           {
               'name': '小李',
               'phone': 112,
           }
       ]
       var newArr = arr.map((item, index) => {
           return item.name
       })
       console.log(arr, '原数组'); // 不变
       console.log(newArr, "新数组"); // ['小周' , '小王' , '小李']

• every 方法

// 遍历数组每一项 , 只要一项不满足条件 , 则返回false , 全部满足返回true;与some方法相反;
        var arr = [1, 2, 3, 4, 5, 6]
        var isTrueOrFalse = arr.every(item => {
            return item > 3
        })
        console.log(isTrueOrFalse, "布尔值"); // false

• find 方法

 // find 方法
        //  find 方法会寻找满足条件的第一个元素并返回 , 不会改变原数组;
        var arr = [1, 2, 3, 4, 5]
        var newArr = arr.find(item => {
            return item > 1;
        })
        console.log(arr, '原数组'); // 不变
        console.log(newArr, '新数组');  // 2
         

• reduce 方法

// reduce 方法
        // 此方法传入的参数须为函数类型 , 可以在函数里面进行逻辑德操作 , 数组调用后, 会返回一个函数逻辑操作之后的值 ,不会影响原数组;
        var arr = [1, 2, 3]
        //  函数
        // function method(a,b){
        //         return a + b
        // }
        // 以上函数es6简写
        var method = (a, b) => a + b
        let newData = arr.reduce(method)
        console.log(arr, '原数组1111'); // 不变
        console.log(newData, "返回的新值    "); // 6 ;

对象方法

• Object.assign() 方法

	 // 参数一对象拼接参数二对象, 返回一个新对象; 
       // 注意 : 参数一对象会改变, 参数二对象不变;
       //        这种方法相当于浅拷贝 , 拷贝之后的对象, 如果发生改变, 相应的原被拷贝的对象也会发生改变;
       var obj1 = {
           a: '小王',
           b: '小李'
       }
       var obj2 = {
           c: '小张',
           d: '小刘'
       }
       var newObj = Object.assign(obj1, obj2)
       console.log(obj1, "obj1"); // 与返回的新对象一样 , 所有属性都存在;原对象改变了;
       console.log(obj2, "obj2"); // 不变, 还是的原对象里面有的属性;
       console.log(newObj, "新对象"); // {c: "小张", d: "小刘", a: "小王", b: "小李"}
       // +++++++
       var obj3 = {
           e: '小廖'
       }
       var newObj2 = Object.assign(newObj, obj3)
       console.log(obj1, "obj1"); //  {a: "小王", b: "小李", c: "小张", d: "小刘", e: "小廖"}
       console.log(newObj, "newObj"); //  {a: "小王", b: "小李", c: "小张", d: "小刘", e: "小廖"}
       console.log(newObj2, "newObj2"); //  {a: "小王", b: "小李", c: "小张", d: "小刘", e: "小廖"}
       console.log(obj3, "obj3"); // {e:'小廖'}

• Object.is()方法

 // Object.is()方法
        // Object.is()方法类似于'===', 可以判断两个对象中的键与值是否相等,返回布尔值;
        // 注意 : 需要把两个对象转换为JSON字符串格式 , 再去判断; 直接判等,为false;
        var obj1 = {
            a: '小王',
        }
        var obj2 = {
            a: '小王'
        }
        obj1 = JSON.stringify(obj1)
        obj2 = JSON.stringify(obj2)
        var isTrueOrFalse = Object.is(obj1, obj2)
        console.log(isTrueOrFalse, "布尔值"); // true
        // +++++
        var obj3 = {
            a: '小王',
            b: '小刘'
        }
        obj3 = JSON.stringify(obj3)
        var isTrueOrFalse2 = Object.is(obj1, obj3)
        console.log(isTrueOrFalse2, "布尔值"); //false

• Object.keys()方法

// Object.keys()方法
        // 1 : 传入对象, 返回属性名(键);
        // 2 : 传入字符串, 返回相对应的每一个的字符串的索引值作为数组返回;
        // 3 : 传入数组 , 返回索引列表
        // 4 : 传入构造函数, 未实例前返回空数组 , 实例后返回构造函数的属性名做为数据形式返回;
        var obj1 = {
            name: '小李',
            age: '20',
            gender: '男'
        }
        // 1 : 传入对象, 返回属性名
        var newArr = Object.keys(obj1)
        console.log(newArr, "新数组"); // ["name", "age", "gender"]
        // 2 : 传入字符串, 返回相对应的每一个的字符串的索引值作为数组返回;
        var str = '赵丽颖'
        var indexs = Object.keys(str)
        console.log(indexs, "索引列表"); // [0 , 1, 2]
        // 3 : 传入数组 , 返回索引列表
        var arr = ['小李', '20', '男']
        var indexs = Object.keys(arr)
        console.log(indexs, '索引列表'); // [0,1,2]
        // 4: 传入构造函数, 未实例前返回空数组 , 实例后返回构造函数的属性名做为数据形式返回;
        function Person(name, age, gender) {
            this.name = "小李"
            this.age = "20"
            this.gender = '男'
        }
        var newPerson = Object.keys(Person)
        console.log(newPerson, "构造函数未实例"); // []
        var person = new Person()
        var newPerson = Object.keys(person)
        console.log(newPerson, '构造函数已实例'); // ["name", "age", "gender"]

• Object.values()方法

// Object.values()方法
        // Object.values()方法会把传入进去的对象的属性值按顺序的以数组的形式返回;
        var obj1 = {
            name: '小李',
            age: '20',
            gender: '男'
        }
        var newObj = Object.values(obj1)
        console.log(newObj, 'newObj'); // ["小李", "20", "男"]
        var obj2 = {
            1: '哈哈',
            2: '嘻嘻',
            3: '呵呵'
        }
        var newObj2 = Object.values(obj2)
        console.log(newObj2, "newObj2"); //["哈哈", "嘻嘻", "呵呵"]

• Object.entries()方法

// Object.entries()方法
        // Object.entries()方法会把传进去的对象的键与值分别作为数组中的一项 , 已数组的形式输出;
        var obj1 = {
            name: '小李',
            age: '20',
            gender: '男'
        }
        var newArr = Object.entries(obj1)
        console.log(newArr,'数组'); // [['name','小李'],['