数组方法
上一页改写某一格时,颜色的个数原地不动。这一页是购物篮,里面有面包、牛奶和鸡蛋。方法调用可以让件数变多,也可以变少。
个数可以动
这五个调用改的是你已经拿着的那个数组,既不是字符串方法交还的新文本,也不是你自己存在对象上的函数。push、pop、unshift、shift 和 splice 是列表自带的工具。
一张卡片上的五个调用
卡片留在示例旁边,免得每次翻回上面。很多时候返回的值并不是篮子本身。它可能是一个数,也可能是离开的那一项,或者一个小数组。
📊 五个数组调用
| 调用 | 作用位置 | 返回什么 | length |
|---|---|---|---|
push |
末尾 | 新的长度 | 按你传入的项数变长 |
pop |
末尾 | 被拿走的项 | 少一 |
unshift |
开头 | 新的长度 | 按你传入的项数变长 |
shift |
开头 | 被拿走的项 | 少一 |
splice |
你选定的索引 | 由被删项组成的小数组 | 按删除个数变短 |
往里加的调用把新长度当成数字交回来,从一端拿走的调用交回离开的那一项。splice 哪怕只删一格也交回一个小数组,那个词就坐在结果的索引 0 上。
茶放在末尾
篮子从面包、牛奶和鸡蛋开始。push 把茶放在鸡蛋后面。你立刻听到的数字,就是现在有几格。
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,因为只在末尾追加了一项。两个参数就会长出两格。这一页只传一个参数,数字才好读。
let cart = ["bread", "milk", "eggs"];
let gone = cart.pop();
console.log(gone);
console.log(cart.length);
最后一项离开
pop 从末尾提起鸡蛋并把那个字符串交回来,length 变成 2。篮子剩下面包,然后是牛奶。这次调用不交回新的长度。空篮子会交回 undefined,本页的示例从不从空篮子开始。
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,并没有覆盖掉原来的格子。每个旧项都朝末尾挪了一格。
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。
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 写进段落。这一行应当是个数,不是购物清单。
<!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 进去的东西前面。
换一篮再练
- 用
push把茶加到面包、牛奶和鸡蛋后面,同时读返回的数字和索引 3。 pop一次,读被拿走的词和新的长度,再用unshift把茶放到最前,看索引 0 和 1。shift一次,读离开的词和新的索引 0,再对索引 1 做删除一格的splice,把removed[0]和长度放在一起看。- 在页面上
push茶,刷新,读这一行,再把茶改成果酱,刷新第二次。
容易丢分的地方
- 本想加一格,却写了
cart[1] = "tea",或者忘了push和pop的括号 - 把
pop交回的值当成了新的长度 - 以为
splice交回的是牛奶这个字符串,而不是一个数组 - 以为
unshift之后索引 0 仍是面包,或把本页和遍历每一项、按值查找混在一起
带走这些
- 这些调用改的是同一个数组
push和unshift交回新的长度,pop和shift交回离开的项splice交回由被删项组成的小数组- 段落可以在
push之后只显示长度 - 下一课是数组遍历,数组查找排在那之后
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己,看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部