JS 数组 学习笔记

什么是数组

数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。本质上数组属于一种特殊的，由Array构造出来的对象，typeof运算符返回数组的类型是 object，任何类型的数据都可以放入数组。

var arr = ['a', 'b', 'c']
typeof arr // 'object'

var arr2 = [
    {a: 1},
    [1, 2, 3],
    function(){ return true; }
]
arr2[0] // {a: 1}

数组的赋值和读取

var arr = []
// 赋值
arr[0] = 'a'
arr[1] = 'b'
arr[2] = 'c'
// 读取数组中编号是 2 的值 
arr[2] // c

多维数组

var a = [[1, 2], [3, 4]]
a[0][0] // 1
a[1][1] // 4

数组的键名

由于数组成员的键名是固定的（默认总是0、1、2...），因此数组不用为每个元素指定键名，而对象的每个成员都必须指定键名。JavaScript 语言规定，对象的键名一律为字符串，所以，数组的键名其实也是字符串。之所以可以用数值读取，是因为非字符串的键名会被转为字符串。

var arr = ['a', 'b', 'c']
arr['0']  // 'a'
arr[0]   // 'a'

//赋值的时候，编号值先转成字符串，再进行赋值
var a = [];
a[1.00] = 6;
a[1] // 6

length 属性

数组的length属性，返回数组的成员数量。

length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到length设置的值。

var arr = [ 'a', 'b', 'c' ];
arr.length // 3

arr.length = 2;
arr // ["a", "b"]

清空数组的一个有效方法，就是将length属性设为 0

如果设置的 length 大于当前元素的个数，那么数组中新增的空位的值都是 undefined

数组的遍历

• 使用 for...in循环，for...in不仅会遍历数组所有的数字键，还会遍历非数字键

  var a = [1, 2, 3];
  a.foo = true;
  
  for (var key in a) {
    console.log(key);
  }
  // 0
  // 1
  // 2
  // foo
  

• 使用 for或 while循环

  var a = [1, 2, 3];
  
  // for循环
  for(var i = 0; i < a.length; i++) {
    console.log(a[i]);
  }
  
  // while循环
  var i = 0;
  while (i < a.length) {
    console.log(a[i]);
    i++;
  }
  

• 使用 数组的forEach方法

  var a = [1, 2, 3];
  a.forEach(function(item){
      console.log(item)
  })
  

什么是伪数组

var obj = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}
obj[0] // 'a'
obj.length // 3
obj.push('d') // TypeError: obj.push is not a function

上面代码中的obj对象就是一个伪数组，虽然它有数组的 length 属性，编号也是从 0 开始，但是它并没有数组特有的 push 方法，它的原型链上没有 Array.prototype，这样的对象我们就称之为 伪数组。

典型的“伪数组”是函数中的arguments对象。

function fn1(){
    return arguments;
}
var arrayLike = fn1(1, 2, 3)
arrayLike[0] // 1
arrayLike.length // 3
arrayLike instanceof Array // false

如何将伪数组转成真正的数组？

使用数组的slice方法

var arr = Array.prototype.slice.call(arrayLike);

常见数组方法

• forEach

  var colors = ['red', 'green', 'blue'];
  colors.forEach(function (color) {
    console.log(color);
  });
  

• slice

  将数组切片，slice 不修改原数组，只是返回一个浅复制了原数组中元素的一个新数组。原数组的元素会按照下述规则拷贝：

  • 如果该元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。

  • 对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

  var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
  var citrus = fruits.slice(1, 3);
  console.log(fruits) // 'Banana', 'Orange', 'Lemon', 'Apple', 'Mango'
  console.log(citrus) // 'Orange', 'Lemon', 'Apple'
  
  fruits.slice(1) // 'Orange', 'Lemon', 'Apple', 'Mango'
  

• join

  join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符

  var elements = ['Fire', 'Air', 'Water'];
  console.log(elements.join()); // 'Fire,Air,Water'
  console.log(elements.join('-'));/ / 'Fire-Air-Water'
  
  var test = ['a']
  console.log(test) // 'a'
  

• contact

  concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

  var array1 = ['a', 'b', 'c'];
  var array2 = ['d', 'e', 'f'];
  
  console.log(array1.concat(array2));
  // expected output: Array ["a", "b", "c", "d", "e", "f"]
  

• push / pop

  pop()方法从数组中删除最后一个元素，并返回该元素的值，此方法更改数组的长度。

  push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

  var arr = [1, 2, 3]
  arr.push(4)  // 4
  console.log(arr) // 1,2,3,4
  arr.pop() // 4
  arr.length // 3
  console.log(arr) // 1,2,3
  

• filter ，滤网

  筛选符合条件的元素，然后合并返回一个新数组

  // 返回偶数
  var arr = [1, 2, 3, 4, 9]
  var newArr = arr.filter(function(value){
      return value % 2 === 0
  })
  console.log(newArr) // [2,4]
  // 上面的等价于下面的，使用箭头函数
  var newArr1 = arr.filter(value => value % 2 === 0)
  

• map ，可以想象成 LOL映射小地图

  map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。

  // 求每个元素的平方
  var arr = [1, 2, 3, 4, 9]
  var newArr = arr.map(function(value){
      return value * value ;
  })
  console.log(newArr) // [1, 4, 9, 16, 81]
  

• reduce

  语法：

  arr.reduce(function(累计容器, 数组中正在处理的元素[, 元素索引[, array]])[, 初始值])
  

  可以想象成土匪打劫，最开始土匪身上的钱是 0元，通过去打劫每一个人来累加自己身上的钱让自己富起来，腰藏万贯。

    // 求和示例
    var arr = [1, 2, 3, 4, 5]
    var newArr = arr.reduce(function(sum, n){
        return sum += n
    }, 0)
    console.log(newArr) // 15
  
    // 使用 reduce 实现 map
    var newArr1 = arr.reduce(function(arr, n){
        arr.push(n*n);
        return arr
    }, [])
    console.log(newArr1) // [1, 4, 9, 16, 25]
  
    // 使用 reduce 实现 filter
    var newArr2 = arr.reduce(function(arr, n){
        if(n % 2 === 0){
            arr.push(n)
        }
        return arr
    }, [])
    console.log(newArr2) // [2,4]
  
    // 求所有奇数的和
    var a = [1,2,3,4,5,6,7,8,9]
    a.reduce(function(sum, n){
      return n % 2 === 1 ? sum += n : sum;
    }, 0); // 25