03月07, 2019

JS基础(4)——数据结构(1)——数组基础

所谓数据结构,就是计算机存储和组织数据的方式。说得通俗一点,主要就是指将数据以什么样的结构存储到计算机里面。

在程序里面,最为常见的数据结构,就是数组,这种结构将多个数据有序的排列在一起,形成了一个组合。除了数组以外,集合,映射等 ECMAScript 6 新增加的数据结构,也会在本章中向大家详细介绍。

本章中我们将学习如下的内容:

  • 数组基础知识
  • 数组相关属性和方法
  • 集合
  • 映射

4-1 数组基础

数组是大多数语言里面最常见的一种数据结构,它是一个有序的值列表。

4-1-1 创建数组

创建数组的方式大致可以分为两种:字面量创建数组和使用构造函数创建数组。示例如下:

1. 字面量创建数组

let arr = [];

2. 构造函数创建数组

let arr = new Array();

需要注意的是,无论是字面量形式创建的数组,还是构造函数创建的数组,当我们使用typeof来打印其数据类型的时候,都会返回一个object,如下:

let arr1 = [];
let arr2 = new Array();
console.log(typeof arr1); // object
console.log(typeof arr2); // object

4-1-2 数组赋值

给数组赋值的方法也非常简单,不过可以分为先声明再赋值和声明时直接赋值,如下:

1. 先声明再赋值

let arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

注意下标是从 0 开始的。

2. 声明时直接赋值

let arr = [1,2,3,4,5];

需要注意的是我们可以在数组的任意位置进行赋值,数组的长度会自动改变,空的位置使用undefined来进行填充

let arr = [];
arr[0] = 1;
arr[4] = 10;
console.log(arr);
// [ 1, <3 empty items>, 10 ]

由于 JavaScript 是动态语言,所以 JavaScript 里面数组的数据类型可以是任意类型

let arr = [1,"Hello",3.14,true];

4-1-3 访问数组元素

通过数组的下标,我们可以轻松的访问到存储在数组里面的元素,如下:

let arr = [1,2,3,4,5];
console.log(arr[0]); // 1

需要注意数组里面的第一个元素是从下标 0 开始的。

除了这种常规的访问方式,我们还可以使用变量的方式来进行访问,如下:

let arr = [1,2,3,4,5];
let i = 2;
console.log(arr[i]); // 3

4-1-4 删除元素

我们可以使用delete运算符来删除数组中的某一个元素,示例如下:

let arr = [1,2,3,4,5];
delete arr[2]; // 删除数组中的第3个元素
console.log(arr);
// [ 1, 2, <1 empty item>, 4, 5 ]

4-1-5 数组的遍历

接下来我们来看一下数组的遍历,在 JavaScript 中,遍历数组的方式非常的多。这里先介绍几种常见的数组遍历方式。

通过 for 循环来遍历数组

最简单的方式就是通过for循环来进行数组的遍历,这也是一直以来被使用得最多的方式,示例如下:

let arr = [1, 2, 3, 4, 5];
for (let i=0;i

通过 for-in 来遍历数组

for-in主要迭代的是数组的键,然后我们通过键就可以找到相应的数组元素,示例如下:

let arr = [1, 2, 3, 4, 5];
for (let i in arr) {
    console.log(`键为${i}的元素值为${arr[i]}`);
}
// 键为 0 的元素值为 1
// 键为 1 的元素值为 2
// 键为 2 的元素值为 3
// 键为 3 的元素值为 4
// 键为 4 的元素值为 5

通过 for-of 来遍历数组

上面介绍的for-in是迭代数组的键,这里所介绍的for-of是直接迭代数组的值,示例如下:

let arr = [1, 2, 3, 4, 5];
for (let i of arr) {
    console.log(i);
}
// 1
// 2
// 3
// 4
// 5

通过 forEach 来遍历数组(扩展)

最后再介绍一种通过forEach的方式来遍历数组,不过这里涉及到了回调函数的知识。在第 5 章我们就会学习回调函数,所以这里大家先了解一下这种遍历的方式即可,示例如下:

let arr = [1,2,3,4,5,6,7,8,9,10];
// 将数组的每一项传入到回调函数,然后执行回调函数里面的操作
let i = arr.forEach(function(item){
    console.log(item);
});

使用迭代器进行遍历

在 ECMAScript 6 中,还专门提供了 3 个用于迭代可迭代元素的方法,分别是keys()values()以及entries()方法。

其中keys()是找到可迭代元素的键,values()是找到可迭代元素的值,entries()是同时找到可迭代元素的键和值。

示例:使用keys()方法遍历出数组的键

let arr = [3,5,8,1];
for(let i of arr.keys()){
    console.log(i);
}
// 0
// 1
// 2
// 3

示例:使用values()方法遍历出数组的值

let arr = [3,5,8,1];
for(let i of arr.values()){
    console.log(i);
}
// 3
// 5
// 8
// 1

注意:根据 Node.js 环境的版本,可能出现数组里面无法使用values()方法情况。

示例:使用entries()方法遍历出数组的键和值

let arr = [3,5,8,1];
for(let i of arr.entries()){
    console.log(i);
}
// [ 0, 3 ]
// [ 1, 5 ]
// [ 2, 8 ]
// [ 3, 1 ]

4-1-6 解构数组

首先我们需要了解什么是解构,所谓解构,就是将一个复杂类型的数据分解为一个普通类型数据。解构是从 ECMAScript 6 开始新添加的功能。可以对数组和对象进行解构。

这里我们先来看一下数组的解构,如下:

let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

这里,就是将 arr 这个数组里面的值分解给了 a,b,c

可以使用逗号来跳过不想要解构的元素,如下:

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

在解构出现之前,我们交换两个数需要使用到一个中间变量,但是现在我们可以使用解构来交换两个数

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

关于对象的解构,我们会在后面进行介绍,详细参见对象的相关章节。

4-1-7 多维数组

首先需要说明的是,JavaScript 里面不支持传统编程语言中的多维数组。但是,由于 JavaScript 的数组里面所存放的数据的数据类型可以是任意类型,所以我们可以模拟出多维数组

let a = ["Bill","Mary","Lucy"];
let b = [21,24,27];
let c = [a,b]; // 这里 c 就是一个多维数组

如果要访问多维数组里面的数据,可以使用下面的形式

let a = ["Bill","Mary","Lucy"];
let b = [21,24,27];
let c = [a,b];
console.log(c[0][2]); // Lucy

利用前面所介绍的解构,我们可以来解构一个多维数组,示例如下:

let arr = [[1,2,3],4,5];
let [a,b,c] = arr;
console.log(a); // [1,2,3]
console.log(b); // 4
console.log(c); // 5

4-1-8 扩展运算符

扩展运算符是 ECMAScript 6 开始新添加的运算符,用于取出可迭代对象的每一项。这里我们可以用它来快速的展开一个数组

let a = ["Bill","Mary","Lucy"];
let b = [21,24,27];
let c = [...a,...b];
console.log(c);
// [ 'Bill', 'Mary', 'Lucy', 21, 24, 27 ]

我们再来看一个例子:

let a = [1,2,3];
let b = [...a,4,5,6];
console.log(b);
// [ 1, 2, 3, 4, 5, 6 ]

有了这个运算符以后,我们可以使用它将字符串快速转为数组

let str = "Hello";
let arr = [...str];
console.log(arr);
// [ 'H', 'e', 'l', 'l', 'o' ]

本文链接:http://www.yanhongzhi.com/post/js-basis-8.html

-- EOF --

Comments