正在加载...

数组方法

上一页改写某一格时,颜色的个数原地不动。这一页是购物篮,里面有面包、牛奶和鸡蛋。方法调用可以让件数变多,也可以变少。

个数可以动

这五个调用改的是你已经拿着的那个数组,既不是字符串方法交还的新文本,也不是你自己存在对象上的函数。push、pop、unshift、shift 和 splice 是列表自带的工具。

一张卡片上的五个调用

卡片留在示例旁边,免得每次翻回上面。很多时候返回的值并不是篮子本身。它可能是一个数,也可能是离开的那一项,或者一个小数组。

📊 五个数组调用

调用 作用位置 返回什么 length
push 末尾 新的长度 按你传入的项数变长
pop 末尾 被拿走的项 少一
unshift 开头 新的长度 按你传入的项数变长
shift 开头 被拿走的项 少一
splice 你选定的索引 由被删项组成的小数组 按删除个数变短

往里加的调用把新长度当成数字交回来,从一端拿走的调用交回离开的那一项。splice 哪怕只删一格也交回一个小数组,那个词就坐在结果的索引 0 上。

茶放在末尾

篮子从面包、牛奶和鸡蛋开始。push 把茶放在鸡蛋后面。你立刻听到的数字,就是现在有几格。

把茶加到末尾

javascript
let cart = ["bread", "milk", "eggs"];
let n = cart.push("tea");
console.log(n);
console.log(cart[3]);
console.log(cart.length);

n 是 4,这是新的长度,不是单词 tea。索引 3 放着茶,length 也是 4,因为只在末尾追加了一项。两个参数就会长出两格。这一页只传一个参数,数字才好读。

拿走最后一项

javascript
let cart = ["bread", "milk", "eggs"];
let gone = cart.pop();
console.log(gone);
console.log(cart.length);

最后一项离开

pop 从末尾提起鸡蛋并把那个字符串交回来,length 变成 2。篮子剩下面包,然后是牛奶。这次调用不交回新的长度。空篮子会交回 undefined,本页的示例从不从空篮子开始。

把茶放到最前

javascript
let cart = ["bread", "milk", "eggs"];
let n = cart.unshift("tea");
console.log(n);
console.log(cart[0]);
console.log(cart[1]);

换了一个开头

unshift 也返回 4,因为那是新的长度,而索引 0 现在是茶。面包滑到索引 1,并没有覆盖掉原来的格子。每个旧项都朝末尾挪了一格。

拿走最前一项

javascript
let cart = ["bread", "milk", "eggs"];
let gone = cart.shift();
console.log(gone);
console.log(cart[0]);
console.log(cart.length);

开头空出来

shift 交回面包,也就是离开的那一项,不是长度。之后索引 0 是牛奶,length 等于 2。鸡蛋仍在最后。它只是改坐到索引 1。

切掉中间那一格

javascript
let cart = ["bread", "milk", "eggs"];
let removed = cart.splice(1, 1);
console.log(removed[0]);
console.log(cart.length);
console.log(cart[1]);

你选定的那一格

第一个参数是起始索引,第二个参数是要删几格。牛奶离开,removed 是只有一格的数组,所以 removed[0] 才是牛奶,调用本身并不是字符串牛奶。length 变成 2,索引 1 是鸡蛋,因为面包留在 0,鸡蛋补上了空位。删除个数如果传 0,就会插入而不删除。那个写法先放着。

页面印出新的长度

用 push 把茶加进去。再把 length 写进段落。这一行应当是个数,不是购物清单。

页面示例 — push 之后的长度

html
<!DOCTYPE html>
<html>
<head>
<title>array-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let cart = ["bread", "milk", "eggs"];
cart.push("tea");
let box = document.getElementById("line");
box.textContent = cart.length;
</script>
</body>
</html>

段落显示 4。把推进去的字符串从茶改成果酱再刷新,行仍是 4,因为你还是只加了一项。词变了,个数没变。面包、牛奶和鸡蛋留在你 push 进去的东西前面。

换一篮再练

  1. 用 push 把茶加到面包、牛奶和鸡蛋后面,同时读返回的数字和索引 3。
  2. pop 一次,读被拿走的词和新的长度,再用 unshift 把茶放到最前,看索引 0 和 1。
  3. shift 一次,读离开的词和新的索引 0,再对索引 1 做删除一格的 splice,把 removed[0] 和长度放在一起看。
  4. 在页面上 push 茶,刷新,读这一行,再把茶改成果酱,刷新第二次。

容易丢分的地方

  • 本想加一格,却写了 cart[1] = "tea",或者忘了 push 和 pop 的括号
  • 把 pop 交回的值当成了新的长度
  • 以为 splice 交回的是牛奶这个字符串,而不是一个数组
  • 以为 unshift 之后索引 0 仍是面包,或把本页和遍历每一项、按值查找混在一起

带走这些

  • 这些调用改的是同一个数组
  • push 和 unshift 交回新的长度,pop 和 shift 交回离开的项
  • splice 交回由被删项组成的小数组
  • 段落可以在 push 之后只显示长度
  • 下一课是数组遍历,数组查找排在那之后

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己,看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部