WEB前端教程：JavaScript 数组基础

学习如何定义数组，以及使用数组解构赋值技巧

课程目标

学习如何定义数组，以及使用数组解构赋值技巧
掌握数组基本属性：length，基本方法：pop，push，shift，unshift
学会使用 forEach()遍历数组

数组定义

JavaScript 中的数组允许您在同一个变量中存储多个元素。您可以存储数字、字符串、布尔值、数组、对象等。这些可以在同一个阵列中混合。这里有些例子：

const emptyArr = [];
const names = ["Zack", "Alex"];
const scores = [99, 72, 60, 12];
const mixValues = [10, false, "apple"];

length 属性

您可以使用该.length 属性获取数组中的元素数。例如：

const emptyArr = [];
const names = ["Zack", "Alex"];
const scores = [99, 72, 60, 12];

emptyArr.length; // 0
names.length; // 2
scores.length; //4

Array.prototype.length | MDN(opens new window)

获取数组元素和修改数组

您可以通过数组索引获取数组元素，通过使用方括号语法获得从数组中的元素[]与 index 从 0 开始。

const users = ["Sam", "Alex", "Charley"];
users[1]; //"Alex"

您可以使用.push()方法向数组添加元素,.pop()方法删除数组最后一个元素并返回该元素。.shift()方法从数组中移除第一个元素并返回移除的元素。 .unshift()方法将一个或多个元素添加到数组的开头。

const arr = [1, 2, 3];
arr.push(20); // 返回4（数组长度） 数组为:[1,2,3,20]
arr.pop(); // 返回20（最后一个元素） 数组为:[1,2,3]
arr.shift(); // 返回1 （第一个元素）数组为:[2,3]
arr.unshift(10); // 返回3（数组长度） 数组为:[10,2,3]

数组和常量

即使变量 users 是用 const 定义的，我们依然可以慈昂 users 中添加数据那是因为 const 意味着您只能在定义变量时为其赋值一次。但这并不意味着变量是不可变的。它的内容可以改变。

将其声明为 const 您所问的有什么好处？好处是一旦您将其定义为数组，它将始终保持为数组，这意味着您可以安全地对其调用数组方法。但是，数组内容可以更改。

const users = [];
users.push("Amy"); //返回数组长度1
console.log(users); // ['Amy'] 数组改变了

forEach 迭代数组

数组迭代是您将在 JavaScript 中使用的最重要的概念之一。

假设我们有一个成绩数组，你想循环（或迭代）这个数组中的每个项目。以下是在 JavaScript 中执行此操作的方法：

const users = ["Zack", "Alex"];

grades.forEach(function(grade) {
  console.log(grade);
});

此代码将把成绩数组中的每个成绩记录到控制台。所以你会得到

Zack
Alex

数组解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性从数组中取出,赋值给其他变量，如下例子:

var user1, user2;
[user1,user2] = ['Amy', 'Jennie'];
console.log(user1); // Amy
console.log(user2); // Jennie

[user1, user2, ...restUsers] =['Amy', 'Jennie', 'Zack', 'Penny', 'Danny'];
console.log(user1); // Amy
console.log(user2); // Jennie
console.log(restUsers); // [Zack, Penny, Danny]

任务

下载数组练习任务.zip (opens new window),您将得到 index.html,index.js,score.js,style.css 四个文件，保存到本地。

打开 score.js 文件，为了让您集中精力练习数组，请您按照以下要求完成任务，具体请您在 score.js 文件中实现函数功能

我们有一个嵌套数组,按学生成绩从高到低排列,每一个子数组包含了学生姓名和学生分数
它会作为参数 rows 传入下面需要实现的几个函数中

const data = [
  ["AMY", "100"],
  ["Lisa", "99"],
  ["Jackson", "98"],
  ["Jennie", "97"],
];

请您使用 forEach 方法完成该函数 renderScoreTableRows，使其返回以下 HTML：

<tr>
    <td>学生姓名</td>
    <td>学生总分</td>
</tr>

请你使用数组解构赋值完成 printFirst 函数，打印第一名成绩

第一名名字赋值给变量 first_name，
第一名成绩赋值给变量 first_score，
并且使其返回以下 HTML：

<li>第一名：学生姓名，分数：学生分数</li>

请你使用数组解构赋值完成 printLast 函数，打印最后一名成绩

最后一名名字赋值给变量 last_name，
最后一名成绩赋值给变量 last_score，
并且使其返回以下 HTML：

<li>最后一名：学生姓名，分数：学生分数</li>

请您使用完成该函数 printAverage 函数，打印学生的总平均分(精确到两位小数)，使其返回以下 HTML：

<li>平均分:平均分分数</li>

如果您成功编写了函数功能，实现效果如下图所示

自测问题

如果使用 const 定义了数组，那您还能改变数组吗？
下面会在控制台打印什么结果？

const arr = [1, 2, 13, 15];
arr.push(20);
console.log(arr);

下面 logGrades 函数会返回 10 还是 20?

function logGrades(grades) {
    grades.forEach(function(grade) {
        console.log(grade);
        return 10;
    });
    return 20;
}

进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-22 11:41
阅读 ( 429 )
分类：WEB前端开发