js中的数组笔记

前言

作为js中常用的数据类型，你必须清楚常见的方法的名称作用以及返回值。

对象属性

常用属性：length 数组长度，数组长度大于等于元素个数，因为存在稀疏数组。

对象方法

方法详解

• 数组复制 因为数组不是原始数据类型，所以直接赋值拿到的是对象的地址，会因为地址一样引起原数据逇变化。因此为大家提供了以下的方法。

  var a,copyArr
  copyArr=a.slice()
  copyArr=a.concat()
  

• 数组链接 concat() 连接两个或多个数组,不改变原数组,返回被连接数组的一个副本

  var a = [1, 2, 3];
  var b = [4, 5];
  a.concat(b);   // [1, 2, 3, 4, 5]
  a   // [1,2,3]
  

• join() 把数组中所有元素放入一个字符串,不改变原数组,返回字符串

  var a = [1, 2, 3];
  a.join(',');  // "1,2,3"分隔符可以自己定义
  a  // [1,2,3]
  

• splice() 把数组中中的元素删除，可以指定某位置开始，删除若干的元素，如果大于其长度不会多删除，返回被删除的元素

  var a = [1, 2, 3];
  a.splice(1,5);  // 从第二个下标开始删除5个元素 ,因为其后只有2个元素，所以删除两个，返回 2 3
  a  // [1]
  

  备注：想了解更详细的可以去看犀牛书或者移步mdn文档介绍： Array.prototype.slice

• slice() 从已有的数组中返回选定的元素,不改变原数组,返回一个新数组.两个参数分别代表开始以及结束的指针，不包括结束元素的，完成对数组的浅拷贝。如果end被忽略，默认直到末尾元素；如果end大于数组长度，也会取到数组的末尾；如果end是负数，则代表返回倒数的元素，不包括，所以只能返回到倒数第二个元素；如果begin被忽略，返回原数组。更多参考slice详解

  var a = [1, 2, 3];
  a.slice(1,2);  // [2]
  a  // [1,2,3]
  

  描述：slice 不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝： 1.如果该元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。 2.对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

es6方法拓展

• 数组的解构赋值 es6允许按照一定的模式，从数组和对象之中提取值，对变量进行赋值，这称为解构（Destructuring）. 在以前的编码中，我们只能指定变量直接量。

  // before 
  var a=1;
  var b=2;
  var c=3;
  // now
  var [a,b,c]=[1,2,3]
  

  以上的代码表示会按照对应关系对变量进行赋值，本质上这种写法属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋值对应数值。

  var [foo,[bar],baz]=[1,[2],3];//结构对应，分别被赋值，请注意这里不是数组赋值，而是数组解构
   var [,,baz]=[1,[2],3];// baz 3
   var [a,b,...tail]=[1,2,3,4];//tail [3,4]
   var [foo]=[],1,'hello',false ,NaN //都不能正确赋值 为undefined,直接定义undefined 是会报错的。
   
  

• .from() 用于将两类对象转换为真正的数组：类数组的对象，可遍历的对象（es6 新增的set、map）结构。 类数组的结构 ，比如选择到的dom元素 let ps =document.getElementsByClass("a"); Array.from(ps).forEach() 只有数组才可以用forEach方法 注意：.from可以接受第二个参数，用来对每个元素进行处理

• . of() 用于将一组数值转换为数组,定义这个方法的主要原因是原来的构造器会造成参数不同，解析不同，一个数字参数的结果是生成这个数字的空数组，而多个的时候是数组赋值。

  Array.of(1,1,3) //生成三个元素的数组 [1,1,3]

• find(), findIndex() 他得参数是回调函数，直到找出返回true的元素,前者返回该元素，后者返回指针（只返回第一个匹配到的结果） [1,4].find(function(value,index,arr){ return value>2;})//4

• fill填充函数，用于指定值填充函数，还可以接受第二个，第三个参数,会改变原来的数组。

  Array.fill(num,stindex,endindex);
  ["a",'b','c'].fill(7,1,2); //["a",7,'c']
  

• 数组实例的entires() keys() values(),用于遍历数组，以前是for 循环。

  var arr=[1,6];
  for(let key of arr.keys()){
   key//
  }
  for(let value of arr.values()){
   value//浏览器暂不支持
  }
  for(let [index,ele] of arr.entires()){
  console.log(index,ele) ;//浏览器暂不支持
  }
  

• 数组推导，允许直接通过现有数组推导到新数组(实现暂时有问题)

  var a1=[1,1,2,6];
  var a2=[for (i of a1 ) i*2];
  

• observe() unobserve() 对数组的监听，当有add,update,delete,splice发生时触发，指定回调函数。

一些建议

有了es6的一些新方法，那么我们进行一些技术场景的时候记得按照最新的语法去使用。

在数组中判断是否具有某个元素，用Array.includes 替代 Array.indexOf

注意：要区分你的用途是什么，如果是只想判断有没有这个元素，这是一个布尔型的问题，因此用includes更合理‘而如果你是需要返回其index，那么indexOf无疑还是最合适的。

找到符合某条件的第一个元素，使用find代替filter

还是要很好的理解find方法的部分，如果需要查找的元素只是需要第一个，并且直接返回，find肯定是效率最高的，因为filter需要整个数组遍历过滤，而find是找到符合要求的元素直接返回跳出。

数组中是否存在某个元素，需要布尔型结果，用some而不是find

重点区分some和includes，前者是提供回调函数，让你提供判断的相关程序语句，而includes是提供的一个值

使用reduce代替filter和map的结合

相信很多小伙伴对reduce的方法是很陌生的，可以通过上面的方法详解找到其用法。通过一些活用，既可以判断实现过滤，也可以实现数组的遍历操作返回一个操作之后的归并结果（这个结果可以是数组，对象，布尔值等等）

• 参考文档：数组使用建议