Array 深入浅出

array 构造器

ES6 && API >>> WEBPACK && GULP >> REACT || VUE

Ctrl+B //打开项目下文件
Ctrl+N //新建文件untitled
Ctrl+M //跳转到语句顶部（底部）
Ctrl+D //选中光标前(中)语句
Ctrl+G //跳转到指定行号位置
Ctrl+J //上下行合并（删除中间enter，spase）
Ctrl+L //选中光标所在行
Ctrl+W //关闭当前文件
Ctrl+R //跳转到函数位置，css，html
Ctrl+\ //关闭侧边栏
Ctrl+[ ] //前后移一字符
Ctrl+< //设置

通常使用字面量去声明 以下例外 array更为简洁

const b  = Array(8);//[undefined × 8]
const a = [];
a.length = 8; //[undefined × 8]
//Array(8)更为简洁

未使用new 浏览器会做如下操作

function Array(){
  // 如果this不是Array的实例，那就重新new一个实例
  if(!(this instanceof arguments.callee)){
    return new arguments.callee();
  }
}

Array构造器根据参数长度的不同，做以下处理。

• new Array(arg1, arg2,…)，参数长度为0或长度大于等于2时，传入的参数将按照顺序依次成为新数组的第0至N项（参数长度为0时，返回空数组）。
• new Array(len)，当len不是数值时，处理同上，返回一个只包含len元素一项的数组；当len为数值时，根据如下规范，len最大不能超过32位无符号整型，即需要小于2的32次方（len最大为Math.pow(2,32) -1或-1>>>0），否则将抛出RangeError。

• Array.of()

  • Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

  Array.of(element0[, element1[, ...[, elementN]]]);
  Array.of(7);//[7]
  Array(7);//[undefined x 7]
  

• Array.from()

  • 只要一个对象有迭代器，Array.from就能把它变成一个数组（当然，是返回新的数组，不改变原对象）。以下均可转换。
    • 类数组对象 {0:'name',1:'sex',length:2}
    • 可遍历对象。map set

  Array.from(arrayLike[, mapFn[, thisArg]]);
  arrayLike
  想要转换成真实数组的类数组对象或可遍历对象。
  mapFn 可选
  可选参数，如果指定了该参数，则最后生成的数组会经过该函数的加工处理后再返回。
  thisArg 可选
  可选参数，执行 mapFn 函数时 this 的值。
  

  Array.from('abc');//["a", "b", "c"]
  

• Array.isArray()

  Array.isArray([]);//true
  Object.getPrototypeOf(array) === Array.prototype
  

• 数组推导 (浏览器支持率过低 暂不赘述);

    Object.getOwnPropertyNames(Array.prototype); //获取array  prototype 上的方法
  

改变自身值的方法(9个)

• pop

  pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。如果是栈的话，这个过程就是栈顶弹出。

  可操作类对象数组,如果类对象数组不具有长度属性,返回undefind,并追加长度为0

  栈是一种先进后出的结构，新添加的或待删除的元素都保存在栈的末尾，称作栈顶，另一端叫做栈底。

  var arr = [1,2,3,4];
  arr.pop();//[1,2,3]
  

• push

  push()方法添加一个或者多个元素到数组末尾，并且返回数组新的长度。如果是栈的话，这个过程就是栈顶压入。

  var arr = [];
  arr.push(1,2,3); [1,2,3]
  var arr2 = [4,5];
  var l = Array.prototype.push.apply(arr,arr2);// 5
  arr;// [1,2,3,4,5]
  

• reverse

  reverse()方法颠倒数组中元素的位置，第一个会成为最后一个，最后一个会成为第一个，该方法返回对数组的引用。

  语法：arr.reverse()

  var arr = [1,2,3];
  var arr2 = arr.reverse();
  arr;//[3,2,1]
  

  可操作类对象数组。

• shift

  shift()方法删除数组的第一个元素，并返回这个元素。如果是栈的话，这个过程就是栈底弹出。

  语法：arr.shift()

  var arr = [1,2,3];
  var itmes = arr.shift();
  arr;//[2,3]
  itme;// 1
  

  可操作类对象数组。

• sort

  sort()方法对数组元素进行排序，并返回这个数组。

  语法：arr.sort([comparefn])

  //无comparefn,转换为unicode 进行排序
  var arr = [1,2,3,10,5];
  arr.sort(); // [1, 10, 2, 3, 5]
  //
  

• 如果指明了comparefn，数组将按照调用该函数的返回值来排序。若 a 和 b 是两个将要比较的元素：

  • 若 comparefn(a, b) < 0，那么a 将排到 b 前面；
  • 若 comparefn(a, b) = 0，那么a 和 b 相对位置不变；
  • 若 comparefn(a, b) > 0，那么a , b 将调换位置；

  var arr = [1,3,55,6,100,10,23];
  arr.sort((a,b) => a-b); //[1, 3, 6, 10, 23, 55, 100]
  

  var arr = ['shift','push','revarse','pop','sort'];
  arr.sort((a,b)=>a.localeCompare(b));//["pop", "push", "revarse", "shift", "sort"]
  //localeCompare
  //返回一个数字表示是否 引用字符串 在排序中位于 比较字符串 的前面，后面，或者二者相同。
  //  当 引用字符串 在 比较字符串 前面时返回 -1
  //  当 引用字符串 在 比较字符串 后面时返回 1
  //  相同位置时返回 0
  

• splice

  splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

  语法

  array.splice(start)
  array.splice(start, deleteCount)
  array.splice(start, deleteCount, item1, item2, ...)
  

  • array.splice(start)

      var arr = [1,2,3,4,5];
      arr.splice(0);//[1,2,3,4,5]
      arr; //[]
    
      var arr = [1,2,3,4,5];
      arr.splice(3);//[4,5]
      arr; //[1,2,3]
    
      var arr = [1,2,3,4,5];
      arr.splice(6);//[]
      arr;//[1,2,3,4,5]
    
      var arr = [1,2,3,4,5];
      arr.splice(-1); //[5]
      arr;//[1, 2, 3, 4]
    
      //start
      //指定修改的开始位置（从0计数）。(1)(2)
      //如果超出了数组的长度，则从数组末尾开始添加内容。(3)
      //如果是负值，则表示从数组末位开始的第几位（从1计数）。(4)
    

  • array.splice(start, deleteCount)

    var arr = [1,2,3,4,5];
    arr.splice(0,3);//[1,2,3]
    arr; //[4,5]
    
    var arr = [1,2,3,4,5];
    arr.splice(0,0);//[]
    arr;//[1,2,3,4,5]
    
    var arr = [1,2,3,4,5];
    arr.splice(0,10); //[1,2,3,4,5]
    arr;//[]
    //deleteCount
    //整数，表示要移除的数组元素的个数。(1)
    //如果 deleteCount 是 0，则不移除元素。这种情况下，至少应添加一个新元素。(2)
    //如果 deleteCount 大于start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。(3)
    

  • array.splice(start, deleteCount, item1, item2, ...)

    var arr = [1,2,3,4,5];
    arr.splice(0,3,'splice');//[1,2,3]
    arr;//['splice',4,5]
    
    var arr = [1,2,3,4,5];
    arr.splice(-1,2,'hi','children');
    arr;//[[1,2,3,'hi','children']
    //item1, item2, ...
    //要添加进数组的元素,从start 位置开始。
    //如果不指定，则 splice() 将只删除数组元素。
    

• unshift

  将一个或多个元素添加到数组的开头，并返回新数组的长度

  栈底插入

  语法arr.unshift(element1, ..., elementN)

  var arr = [1,2];
  arr.unshift(-1,0);
  arr;//[-1,0,1,2]
  
  arr.unshift([-3,-2]);
  arr;//[[-3,-2],-1,0,1,2];
  
  Array.prototype.unshift.apply(arr,[-4]);
  arr;// [-4,[-3,-2],-1,0,1]
  

• copyWithin(ES6)

  copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。

  语法：arr.copyWithin(target, start=0[, end = this.length])

  • taget 指定被替换元素的索引
  • start 指定替换元素起始的索引
  • end 可选，指的是替换元素结束位置的索引。

  [1,2,3,4,5,6].copyWithin(-2);//[1,2,3,4,1,2]
  //无start默认为0，end为arr.length
  [1,2,3,4,5,6].copyWithin(0,3);//[4,5,6,4,5,6]
  [1,2,3,4,5,6].copyWithin(0,2,3);//[3,2,3,4,5,6]
  [1,2,3,4,5,6].copyWithin(-2,-3,-1);// [1, 2, 3, 4, 4, 5]
  

  可用于类数组对象

• fill(ES6)

  fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

  语法

  arr.fill(value)
  arr.fill(value, start)
  arr.fill(value, start, end)
  

  可用于类数组对象

  var arr = [1,2,3,4,5];
  arr.fill(6);//[6,6,6,6,6]
  arr.fill(5,3);//[6,6,6,5,5];
  arr.fill(1,0,3);//[1,1,1,5,5]
  

不会改变自身的方法(9个)