lwz blog

# 数组 （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] 数组的解构赋值

从数组中提取值，对变量进行赋值，这被称为数组解构赋值。如果解构不成功，变量的值就等于undefined。

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

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

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

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

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。 用途1： 不使用第三个变量交换两个变量的值。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

// 上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

上面代码中，因为x能取到值，所以函数f根本不会执行。上面的代码其实等价于下面的代码。

let x;
if ([1][0] === undefined) {
  x = f();
} else {
  x = [1][0];
}

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

var a = 1, b = 3;

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

# [ES6]扩展运算符 ... 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]

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

# Array.from ES6

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

# Array.of() ES6

Array.of()方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

← 对象详情 →