数组、对象便利方法汇总全-包括es6新方法

一、数组便利方法合集方法

• 数据量没有成百上千，一下方法的一般性能都不会有太大的区别
• 不会改变原数组的方法：forEach、map、filter、reduce、some、every、reduceRight、find、findIndex
• 会改变原数组的方法：fill、copyWithin

便利方法/方式	函数带参	使用解释	推荐使用场景	备注
for	-	根据数组下标便利	基本通用
优化的for	-	将长度提前计算出来	数组较大的时候优化效果比较明显
for  in	-	遍历对象返回的对象的key值 遍历数组返回的数组的下标(key)	推荐使用于对象便利（因为便利的是键名）
for  of 【es6新增】	-	只能用于数组便利，对象可以配合Object.keys()使用	数组使用还是比较推荐的	可以正确响应break、continue和return语句
forEach	3个参数 item：当前元素 value：当前元素索引 arr：当前操作数组	-	forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数 数据量大的时候不推荐使用耗费性能高	forEach不会获取新数组也没有return值，自动将代码置入try finally块
map	3个参数同forEach方法	默认返回一个数组 这个新数组的每一个元素都是原数组元素执行了回调函数之后的返回值	高阶函数 1、要修改数组值获取新数组可使用 2、其他	map方法不改变原数组，需要重新赋值获取
filter	3个参数同forEach方法	过滤，即对数组元素的一个条件筛选， 默认返回一个数组，原数组的元素执行了回调函数之后返回值若为true，则会将这个元素放入返回的数组中。 若无负荷条件则返回空数组	高阶函数 1、要删除某个值获取新数组使用 2、其他	不改变原数组，需要重新赋值获取
reduce	第一个参数是一个回调函数（必须），第二个参数是初始值（可选） ，依次为本轮循环的累计值、当前循环的元素（必须），该元素的下标（可选），数组本身（可选）	reduce方法，会让数组的每一个元素都执行一次回调函数，并将上一次循环时回调函数的返回值作为下一次循环的初始值，最后将这个结果返回。 如果没有初始值，则reduce会将数组的第一个元素作为循环开始的初始值，第二个元素开始执行回调函数。	reduce是高阶函数（即可调用其他函数使用的方法）具体使用可深度调研	不改变原数组，返回最终操作结果
reduceRight	参数同reduce	reduceRight()方法的功能和reduce()功能是一样的 不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加	同上	不改变原数组，
every	3个参数同forEach方法	返回布尔值 当返回值全部为true时，every方法会返回true，有一个返回值是false就为false	判断某个数组是否不存在某个值	不改变原数组
some	3个参数同forEach方法	返回布尔值 当有一个为true时，停止便利some方法返回true	判断某个数组是否存在某个值的时候	不改变原数组
find【es6新增】	第一个参数是回调函数必须，第二个参数thisValue是可选值，第一个参数里的forEach里面的三个参数值	find()方法返回数组中符合测试函数条件的第一个元素 如果没有符合条件的元素返回 undefined	判断数组内是否包含某种条件的值的元素	不改变原数组，对于空数组，函数是不会执行的
findIndex【es6新增】		find()方法返回数组中符合测试函数条件的第一个元素的索引 没有符合返回-1	类似字符串查找的indexOf的用法，判断数组内是否包含某种条件的值的元素。	不改变原数组
copyWithin【es6新增】	三个参数 target（必需）：从该位置开始替换数据。如果为负值，表示倒数。 start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。 end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。	在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组	copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中	会改变原数组
fill	3个参数 value[必须]：填充的值 start[可选]：开始填充位置 end[可选]：停止填充位置	使用一个固定值来替换数组中的元素。 该固定值可以是字母、数字、字符串、数组等等	fill() 方法用于将一个固定值替换数组的元素。	会改变原数组
keys() 【es6新增】	-	键名的便利-	对象要便利键名的时候使用	它们都返回一个遍历器对象，一般配合let of使用
values 【es6新增】	-	键值的便利-	对象要便利键值的时候可使用	它们都返回一个遍历器对象，一般配合let of使用
entries 【es6新增】	-	键值对的便利-	for (let [index, elem] of this.arr.entries()) {               console.log(index, elem);}	它们都返回一个遍历器对象，一般配合let of使用
includes【es6新增】	-	判断数中是否包含给定的值 返回布尔值	判断数中是否包含给定的值，同indexOf类似	可判断undefined、NaN
indexOf	-	判断数中是否包含给定的值 有值返回该值位置，无值返回-1	判断数中是否包含给定的值	不可判断undefined、NaN

二、对象便利

• 将对象转化成类数组再用以上方法便利即可
• 对象便利如下

方法	推荐使用场景	备注
for in	一般对象均可便利	for (let item in this.obj) {       console.log("键名",item) //键名     console.log("键值",this.obj[item]) //键值}
Object.keys	键名的便利	Object.keys(this.obj
Object.values	键值的便利	Object.values(this.obj)
Object.entries	将对象便利成数组	Object.entries(this.obj)
Object.getOwnPropertyNames	键名的便利	Object.getOwnPropertyNames(this.obj)

三、代码示例

data: {
 arr:[11,22,234],
 obj:{aa:1,bb:2,cc:3,dd:4}
 },
// 数组便利
arrFuc() {
      //1、 for
      for (let i = 0; i < this.arr.length; i++) {
        console.log(this.arr[i]); //11、22、234
      }
      //2、 for优化，长度缓存数组较大时对优化效果较明显
      for (let j = 0, len = this.arr.length; j < len; j++) {
        console.log(this.arr[j]); //11、22、234
      }
      //3、 for in
      for (let k in this.arr) {
        console.log(this.arr[k]); //11、22、234
      }
      //4、 for of ES6引进的新方法，对象需要通过和Object.keys()搭配使用，
      // 可以正确响应break、continue和return语句
      for (let l of this.arr) {
        console.log(l); //11、22、234
      }
      //5、 forEach便利，参数：value数组中的当前项, index当前项的索引, array原始数组；
      this.arr.forEach(item => {
        console.log(item); //11、22、234
      });
      //6、 map的回调函数中支持return返回值可以return出来
      // return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；
      var newArr = this.arr.map((item, ind, arr) => {
        if (item == 22) {
          return 33;
        } else {
          return item;
        }
      });
      console.log("map", newArr); //map [11, 33, 234]
      //7、 filter遍历,不会改变原始数组,返回新数组，关键在于正确实现一个“筛选”函数。
      var newArr2 = this.arr.filter(item => {
        return item != 22;
      }); //返回数组项不等于22的
      console.log(newArr2); //[11, 234]
      //8、 every是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true，否则返回false[返回布尔值]
      var everyResult = this.arr.every((item, index, array) => {
        return item > 11;
      });
      console.log("every方法", everyResult); //every方法 false
      //9、 some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true【返回布尔值】
      var someResult = this.arr.some((item, index, array) => {
        return item == 11;
      });
      console.log("some方法", someResult); //some方法 true
      //10、reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
      // reduce接受一个函数，函数有四个参数，分别是：上一次的值，当前值，当前值的索引，数组
      console.log("reduce方法", this.arr.reduce((a, b) => a + b)); //reduce方法 267
      //10.1、reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加

      //11、find()方法返回数组中符合测试函数条件的第一个元素。正确返回该数值，否则返回undefined
      console.log(
        "find方法",
        this.arr.find(ele => {
          return ele == 11;
        })
      ); //find方法 11
      console.log(
        "find方法",
        this.arr.find(ele => {
          return ele == 111;
        })
      ); //find方法 undefined
      // 11.1\findIndex()只返回符合要求的第一个数索引
      console.log(
        "findIndex",
        this.arr.findIndex((item, index, arr) => {
          console.log(item);
          return item > 20;
        }),
        this.arr
      ); //findIndex 1 (3) [11, 22, 234, __ob__: Observer]
      //12、splice(start,length,item)删，增，替换数组元素，返回被删除数组，无删除则不返回【会改变原数组】
      this.arr.splice(0, 1, 555);
      console.log("splice方法", this.arr); //splice方法 (3) [555, 22, 234, __ob__: Observer]
      // 13、ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
      for (let index of this.arr.keys()) {
        console.log("keys()键名的遍历", index); //keys()键名的遍历 0 keys()键名的遍历 1 keys()键名的遍历 2
      }
      for (let elem of this.arr.values()) {
        console.log("values()键值的遍", elem); //values()键值的遍 555 values()键值的遍 22 values()键值的遍 234
      }
      for (let [index, elem] of this.arr.entries()) {
        console.log("entries()键值对的遍历", index, elem); //entries()键值对的遍历 0 555 entries()键值对的遍历 1 22 entries()键值对的遍历 2 234
      }
      //14、copyWithin，3个参数第一个参数表示替换到指定索引的位置，第二个参数表示开始复制的的位置，第三个参数是结束位置，23参数没有默认从头开始复制, 替换到结束
      console.log("原数组", this.arr); //原数组 (3) [555, 22, 234, __ob__: Observer]
      this.arr.copyWithin(1, 0);
      console.log("copyWithin", this.arr); //copyWithin (3) [555, 555, 22, __ob__: Observer]
      //15、fill
      console.log("fill", this.arr.fill(11111, 0, 2)); //fill (3) [11111, 11111, 22, __ob__: Observer]
      this.arr.push("undefined");
      //16、indexOf、includes
      console.log(
        "indexOf",
        this.arr.indexOf(22),
        this.arr.indexOf("undefined")
      ); //indexOf 2 3
      console.log(
        "includes",
        this.arr.includes(22),
        this.arr.includes("undefined")
      ); //includes true true
    },
    // 对象便利
    objFuc() {
      // 1、let in
      for (let item in this.obj) {
        console.log("键名", item); // 键名name,键名age
        console.log("键值", this.obj[item]); //键值yan,键值22
      }
      //2、Object.keys 键名的便利
      console.log(Object.keys(this.obj)); //  ["name", "age"]
      //3、Object.values 键值的便利
      console.log(Object.values(this.obj)); // ["yan", 22]
      //4、Object.entries 键值的便利
      console.log(Object.entries(this.obj)); // 0: (2) ["name", "yan"] 1: (2) ["age", 22]
      console.log(Object.getOwnPropertyNames(this.obj)); //["name", "age", "__ob__"]
      for (let item of Object.keys(this.obj)) {
        console.log(item); //name,age
      }
    }	  	

四、总结

大家有什么其他方法也可评论里@我，持续更新分享！