diff --git a/cn/arrays/README.md b/cn/arrays/README.md new file mode 100644 index 00000000..b5782a9b --- /dev/null +++ b/cn/arrays/README.md @@ -0,0 +1,100 @@ +--- +章节:6 +页码:47 +描述:数组是数据的列表,是编程中的基础部分。我们可以在数组中存储多种类型的数据。 +--- + +# 第6章 +# 数组(Arrays) + +数组是编程中的基础部分。数组是一种数据列表。我们可以在一个变量中存储大量数据,这使我们的代码更易读、更易理解,也更方便对相关数据进行操作。 + +数组中的数据称为 `元素`。 + +下面是一个简单的数组示例: + +```javascript +// 1, 1, 2, 3, 5 和 8 是数组中的元素 +let numbers = [1, 1, 2, 3, 5, 8]; +``` + +数组可以使用数组字面量或 `new` 关键字轻松创建: + +```javascript +const cars = ["Saab", "Volvo", "BMW"]; // 使用数组字面量 +const cars = new Array("Saab", "Volvo", "BMW"); // 使用 new 关键字 +``` + +可以通过索引访问数组的值。数组的第一个元素索引总是 `0`,因为数组索引从 `0` 开始。 +索引也可以用于修改数组元素: + +```javascript +const cars = ["Saab", "Volvo", "BMW"]; +console.log(cars[0]); +// 结果: Saab + +cars[0] = "Opel"; // 修改数组的第一个元素 +console.log(cars); +// 结果: ['Opel', 'Volvo', 'BMW'] +``` + +{% hint style="working" %} +数组是一种特殊的对象类型。数组中也可以包含 对象 +。 +{% endhint %} + +数组的 `length` 属性返回元素的数量。数组支持的方法如下表所示: + +| 方法名称 | 描述 | +| ----------------- | ------------------------------------------------------------------------------ | +| `at()` | 返回指定索引的元素或 `undefined` | + +| `concat()` | 返回两个或多个数组的组合 | + +| `every()` | 如果回调函数对数组中每个元素都返回 `true`,则返回 `true` | + +| `filter()` | 返回一个新数组,包含回调函数返回 `true` 的元素 | + +| `find()` | 返回第一个使回调函数返回 `true` 的元素 | + +| `findIndex()` | 返回第一个使回调函数返回 `true` 的元素索引 | + +| `findLast()` | 返回最后一个使回调函数返回 `true` 的元素 | + +| `findLastIndex()` | 返回最后一个使回调函数返回 `true` 的元素索引 | + +| `flat()` | 返回一个新数组,将所有子数组元素递归展开到指定深度 | + +| `flatMap()` | 先运行 `map()`,再运行深度为 1 的 `flat()` | + +| `forEach()` | 对数组中的每个元素执行回调函数,返回 `undefined` | + +| `indexOf()` | 返回搜索元素第一次出现的索引 | + +| `join()` | 将数组中的所有元素连接成一个字符串 | + +| `lastIndexOf()` | 返回搜索元素最后一次出现的索引 | + +| `map()` | 执行回调函数后返回一个新数组 | + +| `pop()` | 删除数组的最后一个元素并返回该元素 | + +| `push()` | 在数组末尾添加一个或多个元素,并返回数组的新长度 | + +| `reduce()` | 使用 `callback(accumulator, currentValue, currentIndex, array)` 对数组进行归约操作,返回最终结果 | + +| `reduceRight()` | 与 `reduce()` 类似,但从数组末尾开始 | + +| `reverse()` | 原地翻转数组元素,并返回数组的引用 | + +| `shift()` | 删除数组的第一个元素并返回该元素 | + +| `slice()` | 提取数组的一部分并返回新数组 | + +| `some()` | 如果回调函数对数组中至少一个元素返回 `true`,则返回 `true` | + +| `sort()` | 原地对数组元素进行排序,并返回数组的引用 | + +| `splice()` | 从数组中删除元素(可选择性替换),并返回删除的元素 | + +| `unshift()` | 在数组开头添加一个或多个元素,并返回数组的新长度 | diff --git a/cn/arrays/for-each.md b/cn/arrays/for-each.md new file mode 100644 index 00000000..183a06a5 --- /dev/null +++ b/cn/arrays/for-each.md @@ -0,0 +1,45 @@ +章节:6 +页码:46 +描述:forEach 方法会对数组中的每一个数组元素执行一次所提供的函数。 + + +# 对每一个元素 + +`forEach` 方法会对数组中的每一个元素执行一次所提供的函数。以下是使用 `forEach` 的语法: + +```javascript +array.forEach(function(element, index, array) { + // element:当前正在处理的数组元素 + // index:当前正在处理的数组元素的索引 + // array:调用 forEach 方法的原数组 +}); +``` + +例如,假设你有一个数字数组,并希望在控制台中输出每个数字的两倍,可以使用 `forEach` 如下所示: + +```javascript +let 数字 = [1, 2, 3, 4, 5]; +数字.forEach(function(数值) { + console.log(数值 * 2); +}); +``` + +你也可以使用箭头函数语法来定义传递给 `forEach` 的函数: + +```javascript +数字.forEach((数值) => { + console.log(数值 * 2); +}); +``` + +或者: + +```javascript +数字.forEach(数值 => console.log(数值 * 2)); +``` + +`forEach` 方法不会改变原始数组。它只是遍历数组中的元素,并对每一个元素执行所提供的函数。 + +{% hint style="working" %} +`forEach()` 方法不会对空数组执行回调函数。 +{% endhint %} diff --git a/cn/arrays/indices.md b/cn/arrays/indices.md new file mode 100644 index 00000000..eab14e1b --- /dev/null +++ b/cn/arrays/indices.md @@ -0,0 +1,34 @@ +章节:6 +页码:58 +描述:数组是元素的集合,每个元素都被分配了一个称为索引的数字位置。索引是从零开始的,这意味着数组的第一个元素索引为 0,第二个元素索引为 1,依此类推。 + +# 索引 + +现在你已经有了一个数据元素数组,那么如果你想访问其中的某一个特定元素,该怎么办呢?这正是**索引(index)**的作用。索引指的是数组中的一个位置。索引在逻辑上是依次递增的,但需要注意的是,在大多数编程语言中,数组的第一个索引都是 `0`。方括号 `[]` 用于表示你正在引用数组中的某个索引位置。 + +```javascript +// 这是一个字符串数组 +let fruits = ["apple", "banana", "pineapple", "strawberry"]; + +// 我们将变量 banana 设置为 fruits 数组中第二个元素的值。 +// 请记住,索引从 0 开始,因此 1 表示第二个元素。 +// 结果:banana = "banana" +let banana = fruits[1]; +``` + +你也可以使用数组索引来设置或修改数组中某个元素的值: + +```javascript +let array = ['a', 'b', 'c', 'd', 'e']; +// 索引: 0 1 2 3 4 +array[4] = 'f'; +console.log(array); // 结果:['a', 'b', 'c', 'd', 'f'] +``` + +请注意,如果你尝试使用超出数组范围的索引来访问或设置元素(即索引小于 `0`,或大于等于数组的长度),将会得到 `undefined` 值。 + +```javascript +console.log(array[5]); // 输出:undefined +array[5] = 'g'; +console.log(array); // 结果:['a', 'b', 'c', 'd', 'f', 'g'] +``` \ No newline at end of file diff --git a/cn/arrays/join.md b/cn/arrays/join.md new file mode 100644 index 00000000..292621b2 --- /dev/null +++ b/cn/arrays/join.md @@ -0,0 +1,38 @@ +章节:6 +页码:53 +描述:join 方法会将数组转换为一个字符串,并把所有元素连接在一起,而不会修改原始数组。 + + +# 连接(Join) + +`join` 方法会将数组转换为一个字符串,并将所有元素连接在一起。它**不会改变原始数组**。以下是使用 `join` 的语法: + +```javascript +array.join([separator]); +``` + +`separator` 参数是可选的,用于指定在结果字符串中分隔各个元素所使用的字符。如果省略该参数,数组元素将使用逗号(`,`)进行分隔。 + +例如: + +```javascript +let array = ["one", "two", "three", "four"]; + +console.log(array.join(" ")); + +// 结果:one two three four +``` + +{% hint style="working" %} +可以指定任意分隔符,但默认分隔符是逗号 `(,)`。 +{% endhint %} + +在上述示例中,使用了空格作为分隔符。你还可以使用 `join` 将**类数组对象**(例如 `arguments` 对象或 `NodeList` 对象)转换为字符串,方法是先使用 `Array.prototype.slice()` 将其转换为真正的数组: + +```javascript +function printArguments() { + console.log(Array.prototype.slice.call(arguments).join(', ')); +} + +printArguments('a', 'b', 'c'); // 结果:a, b, c +``` \ No newline at end of file diff --git a/cn/arrays/length.md b/cn/arrays/length.md new file mode 100644 index 00000000..1f345704 --- /dev/null +++ b/cn/arrays/length.md @@ -0,0 +1,46 @@ +--- +章节: 6 +页码: 44 +描述: 数组有一个名为 length 的属性,用于测量数组的长度(元素数量)。 +--- + +# 长度(Length) + +数组有一个名为 `length` 的属性,它的含义正如其名——表示数组的长度。 + +```javascript +let array = [1, 2, 3]; + +let l = array.length; + +// 结果:l = 3 +``` + +length 属性也可以用来设置数组中元素的数量。例如: + +```javascript +let fruits = ["Banana", "Orange", "Apple", "Mango"]; +fruits.length = 2; + +console.log(fruits); +// 结果:['Banana', 'Orange'] +``` + +你还可以将 length 作为索引来获取数组中的最后一个元素。例如: + +```javascript +console.log(fruits[fruits.length - 1]); // 结果:Orange +``` + +你也可以使用 length 属性向数组末尾添加元素。例如: + +```javascript +fruits[fruits.length] = "Pineapple"; +console.log(fruits); // 结果:['Banana', 'Orange', 'Pineapple'] +``` + +{% hint style="info" %} +当数组中的元素被添加或删除时,`length` 属性会自动更新。 +{% endhint %} + +还需要注意的是,`length` 是一个属性,而不是方法,因此在访问它时不需要使用括号。它只是数组对象的一个属性,你可以像访问其他对象属性一样访问它。 \ No newline at end of file diff --git a/cn/arrays/map.md b/cn/arrays/map.md new file mode 100644 index 00000000..9d75742c --- /dev/null +++ b/cn/arrays/map.md @@ -0,0 +1,48 @@ +--- +章节: 6 +页码: 49 +描述: map 方法会遍历数组,并使用回调函数处理数组中的每一个元素,从而生成一个新的数组。 +--- + +# Map + +`Array.prototype.map()` 方法会遍历数组,并对数组中的每一个元素执行一次回调函数。 +回调函数的返回值会组成一个新的数组,而原数组不会被修改。 + +```javascript +let newArray = oldArray.map(function (element, index, array) { + // element:当前正在处理的数组元素 + // index:当前元素的索引 + // array:调用 map 方法的原数组 + // return 的值会被添加到 newArray 中 +}); +``` + +例如,假设你有一个数字数组,并希望创建一个新数组,使其元素是原数组中每个数字的两倍: + +```javascript +const numbers = [2, 4, 6, 8]; + +const doubledNumbers = numbers.map(number => number * 2); + +console.log(doubledNumbers); +// 结果:[4, 8, 12, 16] +``` + +你也可以使用完整的箭头函数写法: + +```javascript +const doubledNumbers = numbers.map((number) => { + return number * 2; +}); +``` + +或者更简洁地写成: + +```javascript +const doubledNumbers = numbers.map(number => number * 2); +``` + +{% hint style="info" %} +`map()` 方法不会对空元素执行回调函数,并且不会改变原数组,它始终返回一个新数组。 +{% endhint %} \ No newline at end of file diff --git a/cn/arrays/pop.md b/cn/arrays/pop.md new file mode 100644 index 00000000..f0723431 --- /dev/null +++ b/cn/arrays/pop.md @@ -0,0 +1,43 @@ +--- +章节: 6 +页码: 52 +描述: pop 方法会移除数组的最后一个元素,并返回该元素。该方法会改变数组的长度。 +--- + +# Pop + +`pop()` 方法会移除数组的最后一个元素,并返回该元素。 +此方法会**直接修改原数组**,并改变数组的长度。 + +`语法`: +```javascript +array.pop(); +``` + +`示例`: +```javascript +let arr = ["一", "二", "三", "四", "五"]; + +arr.pop(); + +console.log(arr); +// 结果:['一', '二', '三', '四'] +``` + +你也可以结合循环使用 `pop()` 方法来移除数组中的所有元素: + +```javascript +let array = ["a", "b", "c"]; + +while (array.length > 0) { + array.pop(); +} + +console.log(array); +// 结果:[] +``` + +{% hint style="working" %} +`pop()` 方法只适用于数组,而不适用于类数组对象(如 arguments 或 NodeList)。 +如果需要操作这些对象,可以先使用 `Array.prototype.slice()` 将它们转换为真正的数组。 +{% endhint %} \ No newline at end of file diff --git a/cn/arrays/push.md b/cn/arrays/push.md new file mode 100644 index 00000000..09421b2f --- /dev/null +++ b/cn/arrays/push.md @@ -0,0 +1,52 @@ +--- +章节: 6 +页码: 55 +描述: push 方法用于向数组末尾添加一个或多个元素,并返回数组的新长度。 +--- + +# Push + +`push()` 方法用于向数组的**末尾**添加一个或多个元素。 +该方法会**修改原数组**,并返回数组的**新长度**。 + +## 语法` +```javascript +array.push(element1[, ...[, elementN]]); +``` + +其中 element1, ..., elementN 表示要添加到数组末尾的一个或多个元素。 + +## 示例 +```javascript +let array = [1, 2, 3]; + +array.push(4); + +console.log(array); +// 结果:[1, 2, 3, 4] +``` + +你也可以一次性向数组中添加多个元素: + +```javascript +array.push(5, 6); +console.log(array); +// 结果:[1, 2, 3, 4, 5, 6] +``` + +你也可以将 `push()` 用于类数组对象(如 arguments),但需要先将其转换为真正的数组: + +```javascript +function printArguments() { + let args = Array.prototype.slice.call(arguments); + args.push('d', 'e', 'f'); + console.log(args); +} + +printArguments('a', 'b', 'c'); +// 结果:["a", "b", "c", "d", "e", "f"] +``` + +{% hint style="info" %} +`push()` 方法会修改原数组,而不会创建一个新的数组。 +{% endhint %} \ No newline at end of file diff --git a/cn/arrays/reverse.md b/cn/arrays/reverse.md new file mode 100644 index 00000000..b53225d9 --- /dev/null +++ b/cn/arrays/reverse.md @@ -0,0 +1,36 @@ +--- +章节: 6 +页码: 59 +描述: reverse 方法用于反转数组中元素的顺序。它会修改原数组,并返回对该数组的引用。 +--- + +# Reverse + +`reverse()` 方法可以用于任何类型的数组,包括字符串数组、数字数组以及对象数组。 +该方法会**原地反转数组**,也就是说,它会直接修改原数组。 + +## 示例:对象数组 + +```javascript +let users = [ + { name: "约翰·史密斯", age: 30 }, + { name: "简·多", age: 25 } +]; + +users.reverse(); + +console.log(users); +// 结果: [ +// { name: "简·多", age: 25 }, +// { name: "约翰·史密斯", age: 30 } +// ] +``` + +`reverse()` 方法会原地调换调用数组对象的元素,修改原数组,并返回对数组的引用。 + +示例:数字数组 +```javascript +const numbers = [1, 2, 3]; +const reversedArray = numbers.reverse(); +console.log(reversedArray); // [3, 2, 1] +``` \ No newline at end of file diff --git a/cn/arrays/shift.md b/cn/arrays/shift.md new file mode 100644 index 00000000..718cdf86 --- /dev/null +++ b/cn/arrays/shift.md @@ -0,0 +1,45 @@ +--- +章节: 6 +页码: 51 +描述: shift 方法用于删除数组的第一个元素,并将剩余元素的索引依次左移。它会修改原数组。 +--- + +# Shift + +`shift()` 方法会删除数组的**第一个元素**,并将所有元素的索引左移。 +此方法会**直接修改原数组**,并返回被删除的元素。 + +## 语法 + +```javascript +array.shift(); +``` + +示例: + +```javascript +let array = [1, 2, 3]; + +array.shift(); + +console.log(array); +// 结果:[2, 3] +``` + +你也可以结合循环使用 `shift()` 方法来移除数组中的所有元素: + +```javascript +let array = [1, 2, 3]; + +while (array.length > 0) { + array.shift(); +} + +console.log(array); +// 结果:[] +``` + +{% hint style="working" %} +`shift()` 方法只适用于数组,而不适用于类数组对象(如 arguments 或 NodeList)。 +如果需要操作这些对象,可以先使用 `Array.prototype.slice()` 将它们转换为真正的数组。 +{% endhint %} \ No newline at end of file diff --git a/cn/arrays/slice.md b/cn/arrays/slice.md new file mode 100644 index 00000000..c7aae2aa --- /dev/null +++ b/cn/arrays/slice.md @@ -0,0 +1,61 @@ +--- +章节: 6 +页码: 60 +描述: JavaScript 的 `arr.slice()` 方法返回一个包含原数组部分元素的新数组,原数组保持不变。 +--- + +# Slice + +`slice()` 方法用于从数组中提取一部分元素,并返回一个新的数组,原数组不会被修改。 + +## 语法 + +```javascript +arr.slice([begin[, end]]) +``` + +`begin`:定义要提取的起始索引。如果省略,默认从索引 0 开始。 + +`end`:定义要提取的结束索引(不包括该索引)。如果省略,默认提取到数组末尾。如果 `end` 大于数组长度,则自动取数组长度。 + +## 示例 1:复制整个数组 +```javascript +function func() { + // 原数组 + let arr = [23, 56, 87, 32, 75, 13]; + + // 提取的新数组 + let new_arr = arr.slice(); + + console.log(arr); + console.log(new_arr); +} + +func(); +// 结果: +// [23, 56, 87, 32, 75, 13] +// [23, 56, 87, 32, 75, 13] +``` + +## 示例 2:引用对象 + +`slice()` 方法会复制对象引用到新数组(例如嵌套数组或对象)。如果修改引用对象,这些修改会在新数组中可见。 + +```javascript +let human = { + name: "David", + age: 23, +}; + +let arr = [human, "Nepal", "Manager"]; +let new_arr = arr.slice(); + +// 原始对象 +console.log(arr[0]); // { name: 'David', age: 23 } + +// 修改新数组中的对象 +new_arr[0].name = "Levy"; + +// 修改在原数组中也可见 +console.log(arr[0]); // { name: 'Levy', age: 23 } +``` \ No newline at end of file diff --git a/cn/arrays/sort.md b/cn/arrays/sort.md new file mode 100644 index 00000000..a59d2dbb --- /dev/null +++ b/cn/arrays/sort.md @@ -0,0 +1,53 @@ +--- +章节: 6 +页码: 57 +描述: `sort()` 方法按特定顺序对数组元素进行排序。默认情况下,它会将元素作为字符串进行升序排序。 +--- + +# Sort + +`sort()` 方法可以按特定顺序(升序或降序)对数组元素进行排序。 +默认情况下,`sort()` 会将元素作为字符串排序,并根据 UTF-16 编码值进行升序排列。 + +## 语法 + +```javascript +array.sort([compareFunction]) +``` + +`compareFunction(可选)` :用于定义排序顺序的函数。如果省略,元素将按字符串表示的升序排列。 + +## 示例 1:按字符串排序 + +```javascript +let city = ["California", "Barcelona", "Paris", "Kathmandu"]; +let sortedCity = city.sort(); + +console.log(sortedCity); +// 结果: ['Barcelona', 'California', 'Kathmandu', 'Paris'] +``` + +{% hint style="info" %} +数字排序时可能会出现问题。例如,字符串 "35" 会被认为比 "100" 大,因为默认字符串比较按字符顺序进行,"3" 大于 "1"。 +{% endhint %} + +## 示例 2:使用比较函数进行数字排序 +为了解决数字排序问题,可以提供一个比较函数。比较函数返回负值、零或正值来定义排序顺序: + +返回负值:`a` 排在 `b` 前面 + +返回正值:`a` 排在 `b` 后面 + +返回 0:`a` 和 `b` 相等,顺序不重要 + +```javascript +const points = [40, 100, 1, 5, 25, 10]; +points.sort((a, b) => a - b); + +console.log(points); +// 结果: [1, 5, 10, 25, 40, 100] +``` + +{% hint style="working" %} +`sort()` 方法会修改原数组。 +{% endhint %} \ No newline at end of file diff --git a/cn/arrays/spread.md b/cn/arrays/spread.md new file mode 100644 index 00000000..a25a7191 --- /dev/null +++ b/cn/arrays/spread.md @@ -0,0 +1,35 @@ +--- +章节: 6 +页码: 50 +描述: Spread 操作符允许快速操作数组或对象。它提供了简洁的语法来复制、合并或提取数组元素,以及复制对象属性。 +--- + +# Spread + +可以使用 `Spread` 操作符 (`...`) 将一个数组或对象快速复制到另一个数组或对象中。 +它允许在函数调用或数组字面量中展开可迭代对象(如数组),或在对象字面量中展开键值对。 + +## 示例 + +```javascript +let arr = [1, 2, 3, 4, 5]; + +console.log(...arr); +// 结果: 1 2 3 4 5 + +let arr1; +arr1 = [...arr]; // 将 arr 复制到 arr1 + +console.log(arr1); +// 结果: [1, 2, 3, 4, 5] + +arr1 = [6, 7]; +arr = [...arr, ...arr1]; + +console.log(arr); +// 结果: [1, 2, 3, 4, 5, 6, 7] +``` + +{% hint style="working" %} +`Spread` 操作符仅在支持该特性的现代浏览器中有效。如果需要兼容旧浏览器,需要使用 Babel 等转译器将 `Spread` 语法转换为等效的 ES5 代码。 +{% endhint %} \ No newline at end of file diff --git a/cn/arrays/unshift.md b/cn/arrays/unshift.md new file mode 100644 index 00000000..09ab7e7f --- /dev/null +++ b/cn/arrays/unshift.md @@ -0,0 +1,44 @@ +--- +章节: 6 +页码: 48 +描述: unshift 方法可以向数组开头添加一个或多个元素,并返回数组的新长度。 +--- + +# Unshift + +`unshift()` 方法会将一个或多个新元素添加到数组的**开头**。 +它会**修改原数组**,并返回数组的**新长度**。 + +## 语法 + +```javascript +array.unshift(element1[, element2[, ...[, elementN]]]) +``` + +`element1, ..., elementN` 表示要添加到数组开头的一个或多个元素。 + +## 示例 1:向数组开头添加单个元素 +```javascript +let array = [0, 5, 10]; +let newLength = array.unshift(-5); // 返回 4 + +console.log(array); +// 结果: [-5, 0, 5, 10] +console.log(newLength); +// 结果: 4 +``` + +## 示例 2:向数组开头添加多个元素 +```javascript +const numbers = [1, 2, 3]; +const newLength = numbers.unshift(-1, 0); + +console.log(numbers); +// 结果: [-1, 0, 1, 2, 3] +console.log(newLength); +// 结果: 5 +``` + +{% hint style="working" %} +`unshift()` 方法会修改原数组,不会创建新数组。 +{% endhint %} \ No newline at end of file