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

来源：https://www.cnblogs.com/wubh/p/JavaScript-Array.html

标签

对象数组