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

秒客网

JS 数组学习笔记

什么是数组

数组的遍历

什么是伪数组

常见数组方法

相关文章

JS 数组 学习笔记

什么是数组

数组的遍历

什么是伪数组

常见数组方法

相关文章

JS 数组学习笔记