JavaScript:数组

数组,是一种将多个数据值以类似列表的形式存储在一个地方的数据类型。

// 可以用变量存储数据值,但是如果数据过多,追踪使用就会变得麻烦
let beiJing = "北京";
let shangHai = "上海";
let shenZhen = "深圳";
// 使用数组就可以以类似列表的形式方便存储数据
let city = ["北京","上海","深圳"]; // 以方括号包括、以逗号隔开每个数据值

数组

// 使用数组就可以以类似列表的形式方便存储数据

 // 以方括号包括、以逗号隔开每个数据值
let city = ["北京","上海","深圳"];

// 不单是字符串,其他的数据类型包括数组都可以存进数组
let arrayDemo = ["字符串",null,undefind,1,true,[1,"hi"]];

// 如果放在一起不好阅读也可以以逗号结尾换行
let multipleArray = [
    [true,123],
    ["hi"],
    1
];

数组索引

还记得字符串索引吗,数组的索引和字符串的特别是一样的,都是从 0 开始。通过引用元素在数组中的位置来访问数组中的每个元素用来引用元素位置的名称就是元素索引(也称为下标)

let city = ["北京","上海","深圳"];
console.log(city[0]); // "北京"

// 能读取也能写入,比如想把「上海」修改成「成都」
city[1] = "成都";
console.log(city[1]); // "成都"

数组属性和方法

数组之所以是强大的数据结构是因为它有一系列属性和方法,可以将属性视为有关数据结构的特殊信息,例如在数组中有一个名为 length 的特殊属性。可以将方法想象成数据结构能够调用的特殊预定义函数,一些常用数组方法如 reverse 它可以颠倒数组中元素的顺序,还有 sort 它对数组中的元素进行排序,而 push 和 pop 这两种方法允许在数组中添加和删除元素。

JavaScript 提供了大量用于修改数组和访问数组中的值的内置方法,请参阅 MDN 文档或在 JavaScript 控制台中输入 [] 查看所有可用的数组方法列表。

Array.length

可以通过使用 length 属性了解数组的长度。

// 字符串中也有 length 属性
let name = "Firefox";
console.log(name.length); // 7
// 数组里也是可以用此来计算数组的长度,也就是数组中数值的个数
let city = ["北京","上海","深圳"];
console.log(city.length); // 3
// 利用索引以及数组长度减去 1 来获得最后一个元素
console.log(city[city.length-1]); // "深圳"

Push 和 Pop

数组具有一个内置的方法可以用于向数组中添加元素和移除其中的元素。修改数组最常见的两个方法是 push() 和 pop()。

push() 方法,会将元素添加到数组的末尾,并且在添加后返回数组的长度。

let city = ["北京","上海","深圳"];
// 将字符串「杭州」加到数组「city」
city.push('杭州'); // 7
console.log(city); // Array(4) [ "北京", "上海", "深圳", "杭州" ]

pop() 方法将删除数组末尾的元素,并且返回删除掉的元素。

let city = ["北京","上海","深圳"];
city.pop(); // "深圳"
city.pop(); // "上海"
console.log(city); // Array [ "北京" ]

对于 pop() 方法,你不需要传递值;相反,pop() 将始终删除数组末尾的最后一个元素。

Splice

splice() 是另一个很有用的方法,可以让你向数组的任意位置添加元素和移除任意位置的元素。

虽然 push() 和 pop() 只能向数组的末尾添加元素和移除末尾的元素,splice() 可以指定索引位置以添加新的元素,以及指定要删除的元素数量(如果有)。

let city = ["北京","上海","深圳","杭州"];
// 从索引下标第一位删到第二位,并且添加字符串 "广州" 和 "成都"
city.splice(1, 2, "广州", "成都"); // Array [ "上海", "深圳" ]
console.log(city); // Array(4) [ "北京", "广州", "成都", "杭州" ]

此外,使用 splice() 方法删除后所返回的数组还可以加以利用如存入变量后用于它处

let city = ["北京","上海","深圳","杭州"];
// 从索引下标 1 开始,删除 2 位,并且添加字符串 "广州" 和 "成都"
let topTity = city.splice(1, 2, "广州", "成都"); // 将返回的数组存到变量
console.log(topTity); // Array [ "上海", "深圳"]

splice() 是非常强大的方法,使你能够以多种方式操纵数组。用一行代码就能完成各种添加或删除元素的操作。

let city = ["北京","上海","深圳","杭州"];
// 从下标 -2 开始删除 0 位,并添加字符串 "广州" 和 "成都"
city.splice(-2, 0, "广州", "成都"); // Array []

console.log(city); // Array(6) [ "北京", "上海", "广州", "成都", "深圳", "杭州" ]

你可能会搞不懂 -2 是什么,如果数组的长度 -1 就是做后一位,那么 -2 就是倒数第二位,从倒数第二位开始删除 0 个元素,那就是什么都没删,然后接着加入字符串,所以就有了以上结果。

请参阅 MDN 文档查看多个示例代码段列表,了解 splice() 的强大之处。

数组循环

将数据存储到数组中后,需要能够高效地访问和操纵数组中的每个元素,而不需要为每个元素编写重复的代码,这时就可以利用循环。

查看 MDN 文档 数组方法列表了解更多方法。

for 循环

let iosDevice = ["iphone", "ipad", "ipod"];

// 变量 `i` 用来遍历数组中的每个元素
for (let i = 0; i < iosDevice.length; i++) {
    console.log(iosDevice); // 比如将数组内容依次打印到控制台
    iosDevice[i] += " !!!"; // 比如数组中每个值后面加上字符串空格和三个冒号
    iosDevice[i] = iosDevice[i].toUpperCase(); // 比如数组中的字符串利用字符串方法变成大写
}

forEach 循环

forEach() 方法也可以循环访问数组,并使用内嵌函数表达式操纵数组中的每个元素。

let citys = ["北京","上海","深圳","杭州"];
citys.forEach(function(city){
    console.log(city); // 可以遍历数组中的每个元素
    city += "真棒!"; // 操作数组中的每个元素
    console.log(city); // 操作结果,注意此时没有修改原数组
})
console.log(citys); // 所以原数组还是之前的内容

forEach() 方法不需要明确指定索引就能循环访问数组。

Map

在 JavaScript 中可通过许多方式遍历数组,每种方式都有其优点和缺点。

for 循环用途广泛可使你完全控制循环过程,你可以明确定义数组中的开始和停止位置、是否要跳过数组中的值、甚至是否想使用 break 语句提前中断循环,在没有把握时不妨使用 for 循环来遍历数组。

如果想要从头到尾遍历每个元素,forEach 可让你快捷地遍历数组,但用途比常规的 for 循环要窄一些,不过胜在可以直接访问每个元素,而且无需使用索引元素就能做到这一点。

而通过 map 方法,你可以对数组中的每个元素执行某种操作,然后返回新的数组。

forEach 和 map 的主要区别是 forEach() 始终返回 undefined。但使用强大的 map() 方法可以轻松地通过现有数组创建一个新的数组。

let citys = ["北京","上海","深圳","杭州"];

let topCity = citys.map(function(city) {
  city += "真棒!";
  return city;
});

console.log(topCity);

map() 方法和 forEach() 方法用法类似,相比 for 循环能更很容易修改数组中每个元素。

遍历嵌套数组

let gridNum = [
  [1,2,3,4,5],
  [6,7,8,9,10],
  [11,12,13,14,15]
];

// 首先和往常一样,想要遍历就使用 for 循环
for (let row = 0; row < gridNum.length; row++){
    // 此时如果打印结果可以得到数组内的每个数组
    // console.log(gridNum[row]);
    // 那么再内嵌一个 for 循环将得到的结果再遍历一次
    for(let column = 0; column < gridNum[row].length; column++){
        console.log(gridNum[row][column])
    }
}

Conners Hua

这个家伙很懒,什么都没有留下。

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注