JS数组知识

数组 （Array）

一个变量只能保存一个数据，当有一连串数据需要保存时就需要用到数组：

数组 是一个可以存储一组或是一系列相关数据的容器。

为什么要使用数组?
解决大量相关数据的存储和使用的问题。

创建数组并赋值

创建数组

实例化构造函数

var arr = new Array();

隐式创建 (内部调用new Array())

var arr = [];

数组赋值

创建数组并赋值

var arr = new Array("a","b","c");   // ['a','b','c']

var arr = ["a","b","c"];

创建数组后赋值
数组中存储的是有序的数据，所以可根据数据所在位置的序号进行赋值，这个位置叫做下标
语法：

数组名[下标]

示例

var arr = [];
arr[0]="a";
arr[1]="b";
arr[2]="c";
// 上面的操作等价于  var arr = ["a","b","c"];

赋值特点

• 数组的下标是从 0 开始计算，arr[0]就是arr数组的第一个值
• 数组中可是 以存储任意数据类型的数据，在一个数组中可以包含对象元素、函数、数组

数组的访问

通过数组下标访问数据

• 访问数据：直接通过下标获取数组对应位置的值
• 修改数据：直接将数据赋值给对应数组对应位置

// 访问arr数组的第一个值
var one = arr[0];
// 修改arr数字的第一个值为'x';
arr[0] = "x"

数组的长度

数组的长度即数组中存储数据的个数，数组上有一个length属性可用来访问数组的长度

var arr = [1,2,3,4,5];
arr.length   // 5

数组最后一个数据的下标： length-1
访问数组最后一个元素：arr[length-1]

数组的遍历

通过循环依次获取 0 到 length-1 的下标，即可实现遍历数组，访问所有数组数据

for循环遍历

var arr=[1,2,3];
for(var i=0;i<arr.length;i++){
  console.log(arr[i]);
}

// 控制台输出
> 1
> 2
> 3

for...in 循环

var arr = [1,2,3];
for(var i in arr){
  // i 是数组下标
  // arr[i] 是数组数据
}

但是最好不要用for in 循环来遍历数组，它是用来遍历对象的。如果在数组原型上添加方法，它也会遍历出来

[ES6]for...of 循环

for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象），以及字符串。

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  // i 值是键名
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  // i 值是键值，  并且只返回具有数字索引的属性
  console.log(i);   //  "3", "5", "7"
}

二维数组

数组中的每一个子元素都是数组

var arr = [[1,2,3],[4,5],[6]]

遍历二维数组

for(var i =0; i<arr.length;i++){
  for(var j =0; j<arr.length;j++){
    console.log(arr[i][j])
  }
}

数组扩展

[ES6] 数组的解构赋值

从数组中提取值，对变量进行赋值，这被称为数组解构赋值。

var [one, two, three] = [1,2,3];
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

为了防止从数组中取出一个值为undefined的对象，还可以为这个对象设置默认值。

var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

用途1： 不使用第三个变量交换两个变量的值。

var a = 1, b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

用途2： 函数形参接收数组参数
当一个函数实参为数组时，可以利用解构可以将实参数据解析

function f([x, y]) {
  // x:1    y:2
  return x + y;
}
var add = f([1,2]);
console.log(add); // 3

用途3： 解析一个从函数返回的数组
当一个函数返回值为数组时，解构使得处理返回值为数组时更加方便

function f() {
  return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

[ES6]扩展运算符 ...

扩展运算符（spread）是三个点...。它好比 函数rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])        // 1 2 3
console.log(1, ...[2, 3, 4], 5)  // 1 2 3 4 5

用途

1.函数调用传参

// 将数组参数items转化为数字，从而进行push
function push(array, ...items) {
array.push(...items);
}

// 将数组中数据相加
function add(x, y) {
return x + y;
}
let numbers = [4, 38];
add(...numbers) // 42

// 寻找数组最值
Math.max(...[numbers])    // 38
Math.min(...[numbers])    // 4

2.数组拷贝

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

3.数组合并

let arr1 = [1,2,3], arr2 = [4,5,6];
let newarr = [...arr1, ...arr2]

不过，这种方法是浅拷贝，使用的时候需要注意。