From 5dbfc370ae90e37c245ccd347fac41145868b2c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E4=BF=8A=E9=94=8B?= <95995809+zzzzzzz123000@users.noreply.github.com> Date: Tue, 18 Oct 2022 20:25:03 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=89=E6=AC=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...44\270\232--\346\225\260\347\273\204.html" | 90 +++++ ...\350\256\260--\346\225\260\347\273\204.md" | 323 ++++++++++++++++++ 2 files changed, 413 insertions(+) create mode 100644 "25\346\210\264\344\277\212\351\224\213/\344\275\234\344\270\232/2022.10.17\344\275\234\344\270\232--\346\225\260\347\273\204.html" create mode 100644 "25\346\210\264\344\277\212\351\224\213/\347\254\224\350\256\260/2022.10.17\347\254\224\350\256\260--\346\225\260\347\273\204.md" diff --git "a/25\346\210\264\344\277\212\351\224\213/\344\275\234\344\270\232/2022.10.17\344\275\234\344\270\232--\346\225\260\347\273\204.html" "b/25\346\210\264\344\277\212\351\224\213/\344\275\234\344\270\232/2022.10.17\344\275\234\344\270\232--\346\225\260\347\273\204.html" new file mode 100644 index 0000000..8c1ada1 --- /dev/null +++ "b/25\346\210\264\344\277\212\351\224\213/\344\275\234\344\270\232/2022.10.17\344\275\234\344\270\232--\346\225\260\347\273\204.html" @@ -0,0 +1,90 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git "a/25\346\210\264\344\277\212\351\224\213/\347\254\224\350\256\260/2022.10.17\347\254\224\350\256\260--\346\225\260\347\273\204.md" "b/25\346\210\264\344\277\212\351\224\213/\347\254\224\350\256\260/2022.10.17\347\254\224\350\256\260--\346\225\260\347\273\204.md" new file mode 100644 index 0000000..3986743 --- /dev/null +++ "b/25\346\210\264\344\277\212\351\224\213/\347\254\224\350\256\260/2022.10.17\347\254\224\350\256\260--\346\225\260\347\273\204.md" @@ -0,0 +1,323 @@ +# 1.数组 + +## 1.1获取最后一个元素(at) + +```javascript +let fruits = ["Apple", "Orange", "Plum"]; + +// 与 fruits[fruits.length-1] 相同 +alert( fruits.at(-1) ); // Plum +``` + +- 如果 `i >= 0`，则与 `arr[i]` 完全相同。 +- 对于 `i` 为负数的情况，它则从数组的尾部向前数。 + +## 1.2 pop/push,shift/unshift 方法 + +- `push` 在末端添加一个元素. +- `shift` 取出队列首端的一个元素，整个队列往前移，这样原先排第二的元素现在排在了第一。 +- `pop` 从末端取出一个元素. + +### 1.2.1作用于数组末端的方法： + +#### 1.2.1 .1 pop + +取出并返回数组的最后一个元素： + +```javascript +let fruits = ["Apple", "Orange", "Pear"]; + +alert( fruits.pop() ); // 移除 "Pear" 然后 alert 显示出来 + +alert( fruits ); // Apple, Orange + +//fruits.pop() 和 fruits.at(-1) 都返回数组的最后一个元素，但 fruits.pop() 同时也删除了数组的最后一个元素，进而修改了原数组。 +``` + + + +#### 1.2.1.2 push + +在数组末端添加元素： + +```javascript +let fruits = ["Apple", "Orange"]; + +fruits.push("Pear"); + +alert( fruits ); // Apple, Orange, Pear + +//调用 fruits.push(...) 与 fruits[fruits.length] = ... 是一样的。 +``` + +### 1.2.2作用于数组首端的方法： + +#### 1.2.2.1 shift + +取出数组的第一个元素并返回它： + +```javascript +let fruits = ["Apple", "Orange", "Pear"]; + +alert( fruits.shift() ); // 移除 Apple 然后 alert 显示出来 + +alert( fruits ); // Orange, Pear +``` + +#### 1.2.2.2 unshift + +在数组的首端添加元素： + +```javascript +let fruits = ["Orange", "Pear"]; + +fruits.unshift('Apple'); + +alert( fruits ); // Apple, Orange, Pear +``` + +`push` 和 `unshift` 方法都可以一次添加多个元素： + +```javascript +let fruits = ["Apple"]; + +fruits.push("Orange", "Peach"); +fruits.unshift("Pineapple", "Lemon"); + +// ["Pineapple", "Lemon", "Apple", "Orange", "Peach"] +alert( fruits ); +``` + +## 1.3length + +`length` 属性的一个有意思的点是它是可写的。 + +如果我们手动增加它，则不会发生任何有趣的事儿。但是如果我们减少它，数组就会被截断。该过程是不可逆的， + +## 1.4[toString](https://zh.javascript.info/array#tostring) + +数组有自己的 `toString` 方法的实现，会返回以逗号隔开的元素列表。 + +## 1.5总结 + +## + +数组是一种特殊的对象，适用于存储和管理有序的数据项。 + +声明： + +```javascript +// 方括号 (常见用法) +let arr = [item1, item2...]; + +// new Array (极其少见) +let arr = new Array(item1, item2...); +``` + +调用 `new Array(number)` 会创建一个给定长度的数组，但不含有任何项。 + +- `length` 属性是数组的长度，准确地说，它是数组最后一个数字索引值加一。它由数组方法自动调整。 +- 如果我们手动缩短 `length`，那么数组就会被截断。 + +获取元素： + +- 你可以通过元素的索引获取元素，例如 `arr[0]` +- 我们也可以使用允许负索引的 `at(i)` 方法。对于负值的 `i`，它会从数组的末尾往回数。如果 `i >= 0`，它的工作方式与 `arr[i]` 相同。 + +我们可以通过下列操作以双端队列的方式使用数组： + +- `push(...items)` 在末端添加 `items` 项。 +- `pop()` 从末端移除并返回该元素。 +- `shift()` 从首端移除并返回该元素。 +- `unshift(...items)` 从首端添加 `items` 项。 + +遍历数组的元素： + +- `for (let i=0; i` 和 `<` 等运算符），因为它们不会对数组进行特殊处理。它们通常会像处理任意对象那样处理数组，这通常不是我们想要的。 + +但是，我们可以使用 `for..of` 循环来逐项比较数组。 + +# 2.数组方法 + +## 1.1添加/移除数组 + +### 1.1.1 splice + +arr.splice 它可以做所有事情：添加，删除和插入元素。 + +```javascript +arr.splice(start[, deleteCount, elem1, ..., elemN]) +``` + +它从索引 `start` 开始修改 `arr`：删除 `deleteCount` 个元素并在当前位置插入 `elem1, ..., elemN`。最后返回被删除的元素所组成的数组 + +```javascript +let arr = ["I", "study", "JavaScript"]; + +arr.splice(1, 1); // 从索引 1 开始删除 1 个元素 + +alert( arr ); // ["I", "JavaScript"] +//当只填写了 splice 的 start 参数时，将删除从索引 start 开始的所有数组项 +``` + +删除了 3 个元素，并用另外两个元素替换它们： + +```javascript +let arr = ["I", "study", "JavaScript", "right", "now"]; + +// 删除数组的前三项，并使用其他内容代替它们 +arr.splice(0, 3, "Let's", "dance"); + +alert( arr ) // 现在 ["Let's", "dance", "right", "now"] +``` + +`splice` 返回了被删除的元素所组成的数组： + +```javascript +let arr = ["I", "study", "JavaScript", "right", "now"]; + +// 删除前两个元素 +let removed = arr.splice(0, 2); + +alert( removed ); // "I", "study" <-- 被从数组中删除了的元素 +``` + +将 `deleteCount` 设置为 `0`，`splice` 方法就能够插入元素而不用删除任何元素： + +```javascript +let arr = ["I", "study", "JavaScript"]; + +// 从索引 2 开始 +// 删除 0 个元素 +// 然后插入 "complex" 和 "language" +arr.splice(2, 0, "complex", "language"); + +alert( arr ); // "I", "study", "complex", "language", "JavaScript" +``` + +在这里和其他数组方法中，负向索引都是被允许的。它们从数组末尾计算位置，如下所示 + +```javascript +let arr = [1, 2, 5]; + +// 从索引 -1（尾端前一位） +// 删除 0 个元素， +// 然后插入 3 和 4 +arr.splice(-1, 0, 3, 4); + +alert( arr ); // 1,2,3,4,5 +``` + +## [转换数组](https://zh.javascript.info/array-methods#zhuan-huan-shu-zu) + +让我们继续学习进行数组转换和重新排序的方法。 + +### [map](https://zh.javascript.info/array-methods#map) + +[arr.map](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 方法是最有用和经常使用的方法之一。 + +它对数组的每个元素都调用函数，并返回结果数组。 + +语法： + +```javascript +let result = arr.map(function(item, index, array) { + // 返回新值而不是当前元素 +}) +``` + +例如，在这里我们将每个元素转换为它的字符串长度： + +```javascript +let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length); +alert(lengths); // 5,7,6 +``` + +### [sort(fn)](https://zh.javascript.info/array-methods#sortfn) + +[arr.sort](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 方法对数组进行 **原位（in-place）** 排序，更改元素的顺序。(译注：原位是指在此数组内，而非生成一个新数组。) + +它还返回排序后的数组，但是返回值通常会被忽略，因为修改了 `arr` 本身。 + +语法： + +```javascript +let arr = [ 1, 2, 15 ]; + +// 该方法重新排列 arr 的内容 +arr.sort(); + +alert( arr ); // 1, 15, 2 +``` + +### [reverse](https://zh.javascript.info/array-methods#reverse) + +[arr.reverse](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) 方法用于颠倒 `arr` 中元素的顺序。 + +例如： + +```javascript +let arr = [1, 2, 3, 4, 5]; +arr.reverse(); + +alert( arr ); // 5,4,3,2,1 +``` + +它也会返回颠倒后的数组 `arr`。 + +### [split 和 join](https://zh.javascript.info/array-methods#split-he-join) + +举一个现实生活场景的例子。我们正在编写一个消息应用程序，并且该人员输入以逗号分隔的接收者列表：`John, Pete, Mary`。但对我们来说，名字数组比单个字符串舒适得多。怎么做才能获得这样的数组呢？ + +[str.split(delim)](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/String/split) 方法可以做到。它通过给定的分隔符 `delim` 将字符串分割成一个数组。 + +在下面的例子中，我们用“逗号后跟着一个空格”作为分隔符： + +```javascript +let names = 'Bilbo, Gandalf, Nazgul'; + +let arr = names.split(', '); + +for (let name of arr) { + alert( `A message to ${name}.` ); // A message to Bilbo（和其他名字） +} +``` + +`split` 方法有一个可选的第二个数字参数 —— 对数组长度的限制。如果提供了，那么额外的元素会被忽略。但实际上它很少使用： + +```javascript +let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2); + +alert(arr); // Bilbo, Gandalf +``` + +### [reduce/reduceRight](https://zh.javascript.info/array-methods#reducereduceright) + +当我们需要遍历一个数组时 —— 我们可以使用 `forEach`，`for` 或 `for..of`。 + +当我们需要遍历并返回每个元素的数据时 —— 我们可以使用 `map`。 + +[arr.reduce](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) 方法和 [arr.reduceRight](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight) 方法和上面的种类差不多，但稍微复杂一点。它们用于根据数组计算单个值。 + +语法是： + +```javascript +let value = arr.reduce(function(accumulator, item, index, array) { + // ... +}, [initial]); +``` + +该函数一个接一个地应用于所有数组元素，并将其结果“搬运（carry on）”到下一个调用。 + +参数： + +- `accumulator` —— 是上一个函数调用的结果，第一次等于 `initial`（如果提供了 `initial` 的话）。 +- `item` —— 当前的数组元素。 +- `index` —— 当前索引。 +- `arr` —— 数组本身。 + +应用函数时，上一个函数调用的结果将作为第一个参数传递给下一个函数。 \ No newline at end of file -- Gitee