From 867a9aae2b7e54eca0099c6f5d103d0ef171f6f4 Mon Sep 17 00:00:00 2001 From: Kevin CHEN <33132228+KevinZonda@users.noreply.github.com> Date: Wed, 18 Aug 2021 15:38:14 +0100 Subject: Fix syntax highlight Web/JavaScript/Reference/Statements/import, zh-CN (#2110) * optimise Statements/import * http -> https * remove code tag in pre --- .../javascript/reference/statements/import/index.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'files/zh-cn/web/javascript/reference') diff --git a/files/zh-cn/web/javascript/reference/statements/import/index.html b/files/zh-cn/web/javascript/reference/statements/import/index.html index b7634d9cef..203ce9b8cc 100644 --- a/files/zh-cn/web/javascript/reference/statements/import/index.html +++ b/files/zh-cn/web/javascript/reference/statements/import/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Statements/import

语法

-
import defaultExport from "module-name";
+
import defaultExport from "module-name";
 import * as name from "module-name";
 import { export } from "module-name";
 import { export as alias } from "module-name";
@@ -95,7 +95,7 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。
 
 

整个模块仅为副作用(中性词,无贬义含义)而导入,而不导入模块中的任何内容(接口)。 这将运行模块中的全局代码, 但实际上不导入任何值。

-
import '/modules/my-module.js';
+
import '/modules/my-module.js';

导入默认值

@@ -116,9 +116,9 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 // specific, named imports
-

When importing a default export with {{anch("Dynamic Imports", "dynamic imports")}}, it works a bit differently. You need to destructure and rename the "default" key from the returned object.

+

当用{{anch("动态导入")}}的方式导入默认导出时,其工作方式有所不同。你需要从返回的对象中解构并重命名 "default" 键。

-
(async () => {
+
(async () => {
   if (somethingIsTrue) {
     const { default: myDefault, foo, bar } = await import('/modules/my-module.js');
   }
@@ -140,15 +140,15 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。
 
 

关键字import可以像调用函数一样来动态的导入模块。以这种方式调用,将返回一个 promise

-
import('/modules/my-module.js')
+
import('/modules/my-module.js')
   .then((module) => {
     // Do something with the module.
-  });
+  });
 

这种使用方式也支持 await 关键字。

-
let module = await import('/modules/my-module.js');
+
let module = await import('/modules/my-module.js');

示例

@@ -227,6 +227,6 @@ for (const link of document.querySelectorAll("nav > a")) {
  • Limin Zhu, Brian Terlson and Microsoft Edge Team: Previewing ES6 Modules and more from ES2015, ES2016 and beyond
  • Hacks blog post by Jason Orendorff: ES6 in Depth: Modules
  • Hacks blog post by Lin Clark: ES modules: A cartoon deep-dive
  • -
  • Axel Rauschmayer's book: "Exploring JS: Modules"
  • +
  • Axel Rauschmayer's book: "Exploring JS: Modules"
  • The Modern JavaScript Tutorial(javascript.info): Export and Import
  • -- cgit v1.2.3-54-g00ecf From d00fb1d099abb38f9c19f1f6e8c7f48e46ac52b9 Mon Sep 17 00:00:00 2001 From: deepthan Date: Wed, 18 Aug 2021 22:49:15 +0800 Subject: Improve code indentation in Web/JavaScript/Reference/Statements/return, zh-CN (#2119) This PR fix alignment of return example . --- files/zh-cn/web/javascript/reference/statements/return/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'files/zh-cn/web/javascript/reference') diff --git a/files/zh-cn/web/javascript/reference/statements/return/index.html b/files/zh-cn/web/javascript/reference/statements/return/index.html index 9debeab7af..8c82917d96 100644 --- a/files/zh-cn/web/javascript/reference/statements/return/index.html +++ b/files/zh-cn/web/javascript/reference/statements/return/index.html @@ -69,11 +69,11 @@ a + b;
    function counter() {
       for (var count = 1; ; count++) {  // 无限循环
         console.log(count + "A"); // 执行5次
    -      if (count === 5) {
    -        return;
    -      }
    -      console.log(count + "B");  // 执行4次
    +    if (count === 5) {
    +      return;
         }
    +    console.log(count + "B");  // 执行4次
    +  }
       console.log(count + "C");  // 永远不会执行
     }
     
    -- 
    cgit v1.2.3-54-g00ecf
    
    
    From 31e0c24bf88829e4bc7af1910e38893eae10b772 Mon Sep 17 00:00:00 2001
    From: NoDocCat 
    Date: Tue, 31 Aug 2021 23:47:35 +0800
    Subject: Sync and tidy Global_Objects/Array from en-US to zh-CN
    
    ---
     .../reference/global_objects/array/index.html      | 443 -------------------
     .../reference/global_objects/array/index.md        | 467 +++++++++++++++++++++
     2 files changed, 467 insertions(+), 443 deletions(-)
     delete mode 100644 files/zh-cn/web/javascript/reference/global_objects/array/index.html
     create mode 100644 files/zh-cn/web/javascript/reference/global_objects/array/index.md
    
    (limited to 'files/zh-cn/web/javascript/reference')
    
    diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/index.html b/files/zh-cn/web/javascript/reference/global_objects/array/index.html
    deleted file mode 100644
    index 3b16a483c8..0000000000
    --- a/files/zh-cn/web/javascript/reference/global_objects/array/index.html
    +++ /dev/null
    @@ -1,443 +0,0 @@
    ----
    -title: Array
    -slug: Web/JavaScript/Reference/Global_Objects/Array
    -tags:
    -  - JavaScript
    -  - 二维数组
    -  - 全局对象
    -  - 参考手册
    -  - 数组
    -translation_of: Web/JavaScript/Reference/Global_Objects/Array
    ----
    -
    {{JSRef}}
    - -
    - -

    JavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。

    - -

    创建数组

    - -
    var fruits = ['Apple', 'Banana'];
    -
    -console.log(fruits.length);
    -// 2
    -
    - -

    通过索引访问数组元素

    - -
    var first = fruits[0];
    -// Apple
    -
    -var last = fruits[fruits.length - 1];
    -// Banana
    - -

    遍历数组

    - -
    fruits.forEach(function (item, index, array) {
    -    console.log(item, index);
    -});
    -// Apple 0
    -// Banana 1
    - -

    添加元素到数组的末尾

    - -
    var newLength = fruits.push('Orange');
    -// newLength:3; fruits: ["Apple", "Banana", "Orange"]
    - -

    删除数组末尾的元素

    - -
    var last = fruits.pop(); // remove Orange (from the end)
    -// last: "Orange"; fruits: ["Apple", "Banana"];
    - -

    删除数组最前面(头部)的元素

    - -
    var first = fruits.shift(); // remove Apple from the front
    -// first: "Apple"; fruits: ["Banana"];
    - -

    添加元素到数组的头部

    - -
    var newLength = fruits.unshift('Strawberry') // add to the front
    -// ["Strawberry", "Banana"];
    -
    - -

    找出某个元素在数组中的索引

    - -
    fruits.push('Mango');
    -// ["Strawberry", "Banana", "Mango"]
    -
    -var pos = fruits.indexOf('Banana');
    -// 1
    - -

    通过索引删除某个元素

    - -
    var removedItem = fruits.splice(pos, 1); // this is how to remove an item
    -
    -// ["Strawberry", "Mango"]
    - -

    从一个索引位置删除多个元素

    - -
    var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
    -console.log(vegetables);
    -// ["Cabbage", "Turnip", "Radish", "Carrot"]
    -
    -var pos = 1, n = 2;
    -
    -var removedItems = vegetables.splice(pos, n);
    -// this is how to remove items, n defines the number of items to be removed,
    -// from that position(pos) onward to the end of array.
    -
    -console.log(vegetables);
    -// ["Cabbage", "Carrot"] (the original array is changed)
    -
    -console.log(removedItems);
    -// ["Turnip", "Radish"]
    - -

    复制一个数组

    - -
    var shallowCopy = fruits.slice(); // this is how to make a copy
    -// ["Strawberry", "Mango"]
    - -

    语法

    - -
    [element0, element1, ..., elementN]
    -new Array(element0, element1[, ...[, elementN]])
    -new Array(arrayLength)
    -
    - -
    -
    -

    参数

    -
    -
    elementN
    -
    Array 构造器会根据给定的元素创建一个 JavaScript 数组,但是当仅有一个参数且为数字时除外(详见下面的 arrayLength 参数)。注意,后面这种情况仅适用于用 Array 构造器创建数组,而不适用于用方括号创建的数组字面量。
    -
    arrayLength
    -
    一个范围在 0 到 232-1 之间的整数,此时将返回一个 length 的值等于 arrayLength 的数组对象(言外之意就是该数组此时并没有包含任何实际的元素,不能理所当然地认为它包含 arrayLength 个值为 undefined 的元素)。如果传入的参数不是有效值,则会抛出 {{jsxref("RangeError")}} 异常。
    -
    - -

    描述

    - -

    数组是一种类列表对象,它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变,并且其数据在内存中也可以不连续,所以 JavaScript 数组不一定是密集型的,这取决于它的使用方式。一般来说,数组的这些特性会给使用带来方便,但如果这些特性不适用于你的特定使用场景的话,可以考虑使用类型数组 {{jsxref("TypedArray")}}。

    - -

    只能用整数作为数组元素的索引,而不能用字符串。后者称为关联数组。使用非整数并通过方括号点号来访问或设置数组元素时,所操作的并不是数组列表中的元素,而是数组对象的属性集合上的变量。数组对象的属性和数组元素列表是分开存储的,并且数组的遍历和修改操作也不能作用于这些命名属性。

    - -

    访问数组元素

    - -

    JavaScript 数组的索引是从0开始的,第一个元素的索引为0,最后一个元素的索引等于该数组的长度减1。如果指定的索引是一个无效值,JavaScript 数组并不会报错,而是会返回 undefined

    - -
    var arr = ['this is the first element', 'this is the second element', 'this is the last element'];
    -console.log(arr[0]);              // 打印 'this is the first element'
    -console.log(arr[1]);              // 打印 'this is the second element'
    -console.log(arr[arr.length - 1]); // 打印 'this is the last element'
    -
    - -

    虽然数组元素可以看做是数组对象的属性,就像 toString 一样,但是下面的写法是错误的,运行时会抛出 SyntaxError 异常,而原因则是使用了非法的属性名:

    - -
    console.log(arr.0); // a syntax error
    -
    -

    并不是 JavaScript 数组有什么特殊之处,而是因为在 JavaScript 中,以数字开头的属性不能用点号引用,必须用方括号。比如,如果一个对象有一个名为 3d 的属性,那么只能用方括号来引用它。下面是具体的例子:

    - -
    var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
    -console.log(years.0);   // 语法错误
    -console.log(years[0]);  // √
    -
    -
    renderer.3d.setTexture(model, 'character.png');     // 语法错误
    -renderer['3d'].setTexture(model, 'character.png');  // √
    -
    - -

    注意在 3d 那个例子中,引号是必须的。你也可以将数组的索引用引号引起来,比如 years[2] 可以写成 years['2']。 years[2] 中的 2 会被 JavaScript 解释器通过调用 toString 隐式转换成字符串。正因为这样,'2''02'years 中所引用的可能是不同位置上的元素。而下面这个例子也可能会打印 true

    - -
    console.log(years['2'] != years['02']);
    -
    -

    类似地,如果对象的属性名称是保留字(最好不要这么做!),那么就只能通过字符串的形式用方括号来访问(从 firefox 40.0a2 开始也支持用点号访问了):

    - -
    var promise = {
    -  'var'  : 'text',
    -  'array': [1, 2, 3, 4]
    -};
    -
    -console.log(promise['var']);
    -
    - -

    length 和数字下标之间的关系

    - -

    JavaScript 数组的 {{jsxref("Array.length", "length")}} 属性和其数字下标之间有着紧密的联系。数组内置的几个方法(例如 {{jsxref("Array.join", "join")}}、{{jsxref("Array.slice", "slice")}}、{{jsxref("Array.indexOf", "indexOf")}} 等)都会考虑 {{jsxref("Array.length", "length")}} 的值。另外还有一些方法(例如 {{jsxref("Array.push", "push")}}、{{jsxref("Array.splice", "splice")}} 等)还会改变 {{jsxref("Array.length", "length")}} 的值。

    - -
    var fruits = [];
    -fruits.push('banana', 'apple', 'peach');
    -
    -console.log(fruits.length); // 3
    -
    - -

    使用一个合法的下标为数组元素赋值,并且该下标超出了当前数组的大小的时候,解释器会同时修改 {{jsxref("Array.length", "length")}} 的值:

    - -
    fruits[5] = 'mango';
    -console.log(fruits[5]); // 'mango'
    -console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
    -console.log(fruits.length); // 6
    -
    - -

    也可以显式地给 {{jsxref("Array.length", "length")}} 赋一个更大的值:

    - -
    fruits.length = 10;
    -console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
    -console.log(fruits.length); // 10
    -
    -

    而为 {{jsxref("Array.length", "length")}} 赋一个更小的值则会删掉一部分元素:

    - -
    fruits.length = 2;
    -console.log(Object.keys(fruits)); // ['0', '1']
    -console.log(fruits.length); // 2
    - -

    这一节的内容在 {{jsxref("Array.length")}} 中有更详细的介绍。

    -

    正则匹配结果所返回的数组

    - -

    使用正则表达式匹配字符串可以得到一个数组。这个数组中包含本次匹配的相关信息和匹配结果。{{jsxref("RegExp.exec")}}、{{jsxref("String.match")}}、{{jsxref("String.replace")}} 都会返回这样的数组。看下面的例子和例子下面的表格:

    - -
    // 匹配1个 d 后面紧跟着至少1个 b,再后面又跟着1个 d 的子串,
    -// 并且需要记住子串中匹配到的 b 和最后的 d (通过正则表达式中的分组),
    -// 同时在匹配时忽略大小写
    -
    -myRe = /d(b+)(d)/i;
    -myArray = myRe.exec("cdbBdbsbz");
    -
    - -

    该正则匹配返回的数组包含以下属性和元素:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    属性/元素说明示例
    input只读属性,原始字符串cdbBdbsbz
    index只读属性,匹配到的子串在原始字符串中的索引1
    [0]只读元素,本次匹配到的子串dbBd
    [1], ...[n]只读元素,正则表达式中所指定的分组所匹配到的子串,其数量由正则中的分组数量决定,无最大上限[1]: bB
    - [2]: d
    - -

    属性

    - -
    Array.length
    - -
    -
    Array 构造函数的 length 属性,其值为1(注意该属性为静态属性,不是数组实例的 length 属性)。
    -
    {{jsxref("Array.@@species", "get Array[@@species]")}}
    -
    返回 Array 构造函数。
    -
    {{jsxref("Array.prototype")}}
    -
    通过数组的原型对象可以为所有数组对象添加属性。
    -
    - -

    方法

    - -
    -
    {{jsxref("Array.from()")}}
    -
    从类数组对象或者可迭代对象中创建一个新的数组实例。
    -
    {{jsxref("Array.isArray()")}}
    -
    用来判断某个变量是否是一个数组对象。
    -
    {{jsxref("Array.of()")}}
    -
    根据一组参数来创建新的数组实例,支持任意的参数数量和类型。
    -
    - -

    数组实例

    - -

    所有数组实例都会从 {{jsxref("Array.prototype")}} 继承属性和方法。修改 Array 的原型会影响到所有的数组实例。

    - -

    属性

    - -
    {{page('/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}
    - -

    方法

    - -

    修改器方法

    - -

    {{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}

    - -

    访问方法

    - -

    {{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}

    - -

    迭代方法

    - -

    {{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}

    - -

    数组泛型方法

    - -
    -

    泛型方法是非标准,并且已弃用,有可能不久就会移除。 需注意的是此方法同时有跨浏览器问题. 但是 Github上有可用的shim

    -
    - -

    有时我们会希望在字符串或其他类数组对象上使用数组所提供的方法(如函数的 {{jsxref("Functions/arguments", "arguments", "", 1)}})。此时你可以把一个字符串作为一个字符数组来看待(也就是说,把非数组以某种方式看成是一个数组)。比如,可以用下面的方法来检查变量 str 中的字符是否都是字母:

    - -
    function isLetter(character) {
    -  return character >= 'a' && character <= 'z';
    -}
    -
    -if (Array.prototype.every.call(str, isLetter)) {
    -  console.log("The string '" + str + "' contains only letters!");
    -}
    - -

    这种方法能够行得通,但不够简洁,JavaScript 1.6 中引入了一个泛型化的简写形式:

    - -
    if (Array.every(str, isLetter)) {
    -  console.log("The string '" + str + "' contains only letters!");
    -}
    - -

    {{jsxref("Global_Objects/String", "String")}} 对象也包含一些泛型方法,见: {{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}}。

    - -

    注意,这些并不属于 ECMAScript 标准,也不能在非 Gecko 浏览器中使用。你可以用标准方法 {{jsxref("Array.from()")}} 来替代上面的写法, from 方法可以将一个对象转换为真正的数组(虽然老的浏览器可能不支持):

    - -
    if (Array.from(str).every(isLetter)) {
    -  console.log("The string '" + str + "' contains only letters!");
    -}
    - -

    示例

    - -

    创建数组

    - -

    下面这个例子创建了一个长度为 0 的数组 msgArray,然后给 msgArray[0] 和 msgArray[99] 赋值,从而导致数组长度变为了 100。

    - -
    var msgArray = [];
    -msgArray[0] = 'Hello';
    -msgArray[99] = 'world';
    -
    -if (msgArray.length === 100) {
    -  console.log('The length is 100.');
    -}
    - -

    创建二维数组

    - -

    下面的例子创建了一个代表国际象棋棋盘的二维数组,然后将 (6, 4) 上的 Pawn (卒)拷贝到 (4, 4) 位置,而原本 (6, 4) 位置则被设置为空格。

    - -
    var board = [
    -  ['R','N','B','Q','K','B','N','R'],
    -  ['P','P','P','P','P','P','P','P'],
    -  [' ',' ',' ',' ',' ',' ',' ',' '],
    -  [' ',' ',' ',' ',' ',' ',' ',' '],
    -  [' ',' ',' ',' ',' ',' ',' ',' '],
    -  [' ',' ',' ',' ',' ',' ',' ',' '],
    -  ['p','p','p','p','p','p','p','p'],
    -  ['r','n','b','q','k','b','n','r'] ];
    -
    -console.log(board.join('\n') + '\n\n');
    -
    -// Move King's Pawn forward 2
    -board[4][4] = board[6][4];
    -board[6][4] = ' ';
    -console.log(board.join('\n'));
    -
    - -

    下面是输出:

    - -
    R,N,B,Q,K,B,N,R
    -P,P,P,P,P,P,P,P
    - , , , , , , ,
    - , , , , , , ,
    - , , , , , , ,
    - , , , , , , ,
    -p,p,p,p,p,p,p,p
    -r,n,b,q,k,b,n,r
    -
    -R,N,B,Q,K,B,N,R
    -P,P,P,P,P,P,P,P
    - , , , , , , ,
    - , , , , , , ,
    - , , , ,p, , ,
    - , , , , , , ,
    -p,p,p,p, ,p,p,p
    -r,n,b,q,k,b,n,r
    -
    - -

    用数组将一组值以表格形式显示

    - -
    values = [];
    -for (var x = 0; x < 10; x++){
    - values.push([
    -  2 ** x,
    -  2 * x ** 2
    - ])
    -};
    -console.table(values)
    - -

    结果为:

    - -
    0	1	0
    -1	2	2
    -2	4	8
    -3	8	18
    -4	16	32
    -5	32	50
    -6	64	72
    -7	128	98
    -8	256	128
    -9	512	162
    - -

    (第一列为索引)

    - -

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    规范状态说明
    {{SpecName('ES1')}}{{Spec2('ES1')}}初始定义。
    {{SpecName('ES5.1', '#sec-15.4', 'Array')}}{{Spec2('ES5.1')}}新增方法: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}
    {{SpecName('ES6', '#sec-array-objects', 'Array')}}{{Spec2('ES6')}} -

    新增方法:{{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}

    -
    {{SpecName('ESDraft', '#sec-array-objects', 'Array')}}{{Spec2('ESDraft')}} -

    新增方法:{{jsxref("Array.prototype.includes()")}}

    -
    - -

    浏览器兼容性

    - -
    {{Compat("javascript.builtins.Array")}}
    - -

    相关链接

    - - diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/index.md new file mode 100644 index 0000000000..70b70221e2 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/array/index.md @@ -0,0 +1,467 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - 数组 + - 类 + - 示例 + - 全局对象 + - JavaScript + - 参考手册 +browser-compat: javascript.builtins.Array +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +{{JSRef}} + +JavaScript的 **`Array`** 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。 + +## 描述 + +数组是一种类列表对象,它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变,并且其数据在内存中也可以不连续,所以 JavaScript 数组不一定是密集型的,这取决于它的使用方式。一般来说,数组的这些特性会给使用带来方便,但如果这些特性不适用于你的特定使用场景的话,可以考虑使用类型数组 {{jsxref("TypedArray")}}。 + +只能用整数作为数组元素的索引,而不能用字符串。后者称为 [关联数组](https://en.wikipedia.org/wiki/Associative_array)。使用非整数并通过 [方括号](/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#对象和属性) 或 [点号](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors) 来访问或设置数组元素时,所操作的并不是数组列表中的元素,而是数组对象的 [属性集合](/zh-CN/docs/Web/JavaScript/Data_structures#属性) 上的变量。数组对象的属性和数组元素列表是分开存储的,并且数组的遍历和修改操作也不能作用于这些命名属性。 + +### 常见操作 + +**创建数组** + +```js +let fruits = ['Apple', 'Banana'] + +console.log(fruits.length) +// 2 +``` + +**通过索引访问数组元素** + +```js +let first = fruits[0] +// Apple + +let last = fruits[fruits.length - 1] +// Banana +``` + +**遍历数组** + +```js +fruits.forEach(function(item, index, array) { + console.log(item, index) +}) +// Apple 0 +// Banana 1 +``` + +**添加元素到数组的末尾** + +```js +let newLength = fruits.push('Orange') +// ["Apple", "Banana", "Orange"] +``` + +**删除数组末尾的元素** + +```js +let last = fruits.pop() // remove Orange (from the end) +// ["Apple", "Banana"] +``` + +**删除数组头部元素** + +```js +let first = fruits.shift() // remove Apple from the front +// ["Banana"] +``` + +**添加元素到数组的头部** + +```js +let newLength = fruits.unshift('Strawberry') // add to the front +// ["Strawberry", "Banana"] +``` + +**找出某个元素在数组中的索引** + +```js +fruits.push('Mango') +// ["Strawberry", "Banana", "Mango"] + +let pos = fruits.indexOf('Banana') +// 1 +``` + +**通过索引删除某个元素** + +```js +let removedItem = fruits.splice(pos, 1) // this is how to remove an item + +// ["Strawberry", "Mango"] +``` + +**从一个索引位置删除多个元素** + +```js +let vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'] +console.log(vegetables) +// ["Cabbage", "Turnip", "Radish", "Carrot"] + +let pos = 1 +let n = 2 + +let removedItems = vegetables.splice(pos, n) +// this is how to remove items, n defines the number of items to be removed, +// starting at the index position specified by pos and progressing toward the end of array. + +console.log(vegetables) +// ["Cabbage", "Carrot"] (the original array is changed) + +console.log(removedItems) +// ["Turnip", "Radish"] +``` + +**复制一个数组** + +```js +let shallowCopy = fruits.slice() // this is how to make a copy +// ["Strawberry", "Mango"] +``` + +### 访问数组元素 + +JavaScript 数组的索引是从0开始的,第一个元素的索引为0,最后一个元素的索引等于该数组的 {{jsxref("Array.length", "长度")}} 减1。 + +如果指定的索引是一个无效值,JavaScript 数组并不会报错,而是会返回 `undefined`。 + +```js +let arr = ['this is the first element', 'this is the second element', 'this is the last element'] +console.log(arr[0]) // logs 'this is the first element' +console.log(arr[1]) // logs 'this is the second element' +console.log(arr[arr.length - 1]) // logs 'this is the last element' +``` + +虽然数组元素可以看做是数组对象的属性,就像 `toString` 一样,但是下面的写法是错误的,运行时会抛出 `SyntaxError` 异常,而原因则是使用了非法的属性名: + +```js +console.log(arr.0) // a syntax error +``` + +并不是 JavaScript 数组有什么特殊之处,而是因为在 JavaScript 中,以数字开头的属性不能用点号引用,必须用方括号。 + +比如,如果一个对象有一个名为 `3d` 的属性,那么只能用方括号来引用它。下面是具体的例子: + +```js +let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010] +console.log(years.0) // a syntax error +console.log(years[0]) // works properly +``` + +```js +renderer.3d.setTexture(model, 'character.png') // a syntax error +renderer['3d'].setTexture(model, 'character.png') // works properly +``` + +注意在 `3d` 那个例子中,引号是必须的。你也可以将数组的索引用引号引起来,比如 `years[2]` 可以写成 `years['2']`。 + +`years[2]` 中的 2 会被 JavaScript 解释器通过调用 `toString` 隐式转换成字符串。正因为这样,`'2'` 和 `'02'` 在 `years` 中所引用的可能是不同位置上的元素。而下面这个例子也可能会打印 `true`: + +```js +console.log(years['2'] != years['02']) +``` + +### 数组长度与数字下标之间的关系 + +JavaScript 数组的 {{jsxref("Array.length", "length")}} 属性和其数字下标之间有着紧密的联系。 + +数组内置的几个方法(例如 {{jsxref("Array.join", "join")}}、{{jsxref("Array.slice", "slice")}}、{{jsxref("Array.indexOf", "indexOf")}} 等)都会考虑 {{jsxref("Array.length", "length")}} 的值。 + +另外还有一些方法(例如 {{jsxref("Array.push", "push")}}、{{jsxref("Array.splice", "splice")}} 等)还会改变 {{jsxref("Array.length", "length")}} 的值。 + +```js +const fruits = [] +fruits.push('banana', 'apple', 'peach') + +console.log(fruits.length) // 3 +``` + +使用一个合法的下标为数组元素赋值,并且该下标超出了当前数组的大小的时候,解释器会同时修改 {{jsxref("Array.length", "length")}} 的值: + +```js +fruits[5] = 'mango' +console.log(fruits[5]) // 'mango' +console.log(Object.keys(fruits)) // ['0', '1', '2', '5'] +console.log(fruits.length) // 6 +``` + +也可以显式地给 {{jsxref("Array.length", "length")}} 赋一个更大的值: + +```js +fruits.length = 10 +console.log(fruits) // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x 4] +console.log(Object.keys(fruits)) // ['0', '1', '2', '5'] +console.log(fruits.length) // 10 +console.log(fruits[8]) // undefined +``` + +而为 {{jsxref("Array.length", "length")}} 赋一个更小的值则会删掉一部分元素: + +```js +fruits.length = 2 +console.log(Object.keys(fruits)) // ['0', '1'] +console.log(fruits.length) // 2 +``` + +这一节的内容在 {{jsxref("Array.length")}} 中有更详细的介绍。 + +### 正则匹配结果所返回的数组 + +使用正则表达式匹配字符串可以得到一个数组。这个数组中包含本次匹配的相关信息和匹配结果。{{jsxref("RegExp.exec")}}、{{jsxref("String.match")}}、{{jsxref("String.replace")}} 都会返回这样的数组。 + +看下面的例子和例子下面的表格: + +```js +// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +const myRe = /d(b+)(d)/i +const myArray = myRe.exec('cdbBdbsbz') +``` + +该正则匹配返回的数组包含以下属性和元素: + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    属性/元素 + 说明 + 示例 +
    input
    {{ReadOnlyInline}}
    正则表达式所匹配的原始字符串"cdbBdbsbz"
    index
    {{ReadOnlyInline}}
    匹配到的子串在原始字符串中的索引1
    [0]
    {{ReadOnlyInline}}
    最后匹配到的子串"dbBd"
    [1], ...[n]
    {{ReadOnlyInline}}
    正则表达式中所指定的分组所匹配到的子串,其数量由正则中的分组数量决定,无最大上限 + [1]: "bB"
    [2]: "d"
    +
    + +## 构造器 + +- {{jsxref("Array/Array", "Array()")}} + - : 创建一个新的 `Array` 对象 + +## 静态属性 + +- {{jsxref("Array/@@species", "get Array[@@species]")}} + - : 返回 Array 的构造函数 + +## 静态方法 + +- {{jsxref("Array.from()")}} + - : 从类数组对象或者可迭代对象中创建一个新的数组实例 +- {{jsxref("Array.isArray()")}} + - : 用来判断某个变量是否是一个数组对象 +- {{jsxref("Array.of()")}} + - : 根据一组参数来创建新的数组实例,支持任意的参数数量和类型 + +## 实例属性 + +- {{jsxref("Array.prototype.length")}} + - : 数组中的元素个数 +- {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}} + - : 包含了所有 ES2015 (ES6) 中新定义的、且并未被更早的 ECMAScript 标准收纳的属性名。这些属性被排除在由 [`with`](/zh-CN/docs/Web/JavaScript/Reference/Statements/with) 语句绑定的环境中 + +## 实例方法 + +- {{jsxref("Array.prototype.at()")}}{{Experimental_Inline}} + - : Returns the array item at the given index. Accepts negative integers, which count back from the last item. +- {{jsxref("Array.prototype.concat()")}} + - : 用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组 +- {{jsxref("Array.prototype.copyWithin()")}} + - : 浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度 +- {{jsxref("Array.prototype.entries()")}} + - : 返回一个新的 `Array Iterator` 对象,该对象包含数组中每个索引的键/值对 +- {{jsxref("Array.prototype.every()")}} + - : 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值 +- {{jsxref("Array.prototype.fill()")}} + - : 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素 +- {{jsxref("Array.prototype.filter()")}} + - : 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素 +- {{jsxref("Array.prototype.find()")}} + - : 返回数组中满足提供的测试函数的第一个元素的值。否则返回 `undefined` +- {{jsxref("Array.prototype.findIndex()")}} + - : 返回数组中满足提供的测试函数的第一个元素的**索引**。若没有找到对应元素则返回 `-1` +- {{jsxref("Array.prototype.flat()")}} + - : 按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回 +- {{jsxref("Array.prototype.flatMap()")}} + - : 使用映射函数映射每个元素,然后将结果压缩成一个新数组 +- {{jsxref("Array.prototype.forEach()")}} + - : 对数组的每个元素执行一次给定的函数 +- {{jsxref("Array.prototype.includes()")}} + - : 判断一个数组是否包含一个指定的值,如果包含则返回 `true`,否则返回 `false` +- {{jsxref("Array.prototype.indexOf()")}} + - : 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回 `-1` +- {{jsxref("Array.prototype.join()")}} + - : 将一个数组的所有元素连接成一个字符串并返回这个字符串 +- {{jsxref("Array.prototype.keys()")}} + - : 返回一个包含数组中每个索引键的 `Array Iterator` 对象 +- {{jsxref("Array.prototype.lastIndexOf()")}} + - : 返回指定元素在数组中的最后一个的索引,如果不存在则返回 `-1` +- {{jsxref("Array.prototype.map()")}} + - : 返回一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值 +- {{jsxref("Array.prototype.pop()")}} + - : 从数组中删除最后一个元素,并返回该元素的值 +- {{jsxref("Array.prototype.push()")}} + - : 将一个或多个元素添加到数组的末尾,并返回该数组的新长度 +- {{jsxref("Array.prototype.reduce()")}} + - : 对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值 +- {{jsxref("Array.prototype.reduceRight()")}} + - : 接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值 +- {{jsxref("Array.prototype.reverse()")}} + - : 将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组 +- {{jsxref("Array.prototype.shift()")}} + - : 从数组中删除第一个元素,并返回该元素的值 +- {{jsxref("Array.prototype.slice()")}} + - : 提取源数组的一部分并返回一个新数组 +- {{jsxref("Array.prototype.some()")}} + - : 测试数组中是不是至少有一个元素通过了被提供的函数测试 +- {{jsxref("Array.prototype.sort()")}} + - : 对数组元素进行原地排序并返回此数组 +- {{jsxref("Array.prototype.splice()")}} + - : 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容 +- {{jsxref("Array.prototype.toLocaleString()")}} + - : 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 {{jsxref("Object.prototype.toLocaleString()")}} 方法转成字符串 +- {{jsxref("Array.prototype.toString()")}} + - : 返回一个字符串表示指定的数组及其元素。数组中的元素将使用各自的 {{jsxref("Object.prototype.toString()")}} 方法转成字符串 +- {{jsxref("Array.prototype.unshift()")}} + - : 将一个或多个元素添加到数组的头部,并返回该数组的新长度 +- {{jsxref("Array.prototype.values()")}} + - : 返回一个新的 `Array Iterator 对象`,该对象包含数组每个索引的值 +- {{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} + - : 返回一个新的 `Array Iterator 对象`,该对象包含数组每个索引的值 + +## 示例 + +### 创建数组 + +下面这个例子创建了一个长度为 `0` 的数组 `msgArray`,然后给 `msgArray[0]` 和 `msgArray[99]` 赋值,从而导致数组长度变为了 `100`。 + +```js +let msgArray = [] +msgArray[0] = 'Hello' +msgArray[99] = 'world' + +if (msgArray.length === 100) { + console.log('The length is 100.') +} +``` + +### 创建二维数组 + +下面的例子创建了一个代表国际象棋棋盘的二维数组,然后将 `[6][4]` 上的 `p` (Pawn 兵) 拷贝到 `[4][4]`,而原本的 `[6][4]` 位置则被设置为空格。 + +```js +let board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ] + +console.log(board.join('\n') + '\n\n') + +// Move King's Pawn forward 2 +board[4][4] = board[6][4] +board[6][4] = ' ' +console.log(board.join('\n')) +``` + +下面是输出: + +```plain +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +``` + +### 用数组将一组值以表格形式显示 + +```js +values = [] +for (let x = 0; x < 10; x++){ + values.push([ + 2 ** x, + 2 * x ** 2 + ]) +} +console.table(values) +``` + +结果为: + +```plain +// The first column is the index +0 1 0 +1 2 2 +2 4 8 +3 8 18 +4 16 32 +5 32 50 +6 64 72 +7 128 98 +8 256 128 +9 512 162 +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 相关链接 + +- JavaScript 指南: + + - [对象属性索引](/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#对象属性索引) + - [索引集合类: 数组对象](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#数组对象array_object) + +- [Typed Arrays](/zh-CN/docs/Web/JavaScript/Typed_arrays) +- [RangeError: invalid array length](/zh-CN/docs/Web/JavaScript/Reference/Errors/Invalid_array_length) -- cgit v1.2.3-54-g00ecf From 9b37ed2edc8fbd37143588998788a155f6ffdafe Mon Sep 17 00:00:00 2001 From: NoDocCat Date: Wed, 1 Sep 2021 19:51:53 +0800 Subject: Add Array constructor page to zh-CN --- .../reference/global_objects/array/array/index.md | 81 ++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 files/zh-cn/web/javascript/reference/global_objects/array/array/index.md (limited to 'files/zh-cn/web/javascript/reference') diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md new file mode 100644 index 0000000000..708d629c23 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md @@ -0,0 +1,81 @@ +--- +title: Array() 构造器 +slug: Web/JavaScript/Reference/Global_Objects/Array/Array +tags: + - 数组 + - 构造器 + - JavaScript + - 参考手册 +browser-compat: javascript.builtins.Array.Array +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array +--- +{{JSRef}} + +**`Array()`** 构造器用于创建 {{jsxref("Array")}} 对象。 + +## 语法 + +```js +// literal constructor +[element0, element1, ..., elementN] + +// construct from elements +new Array(element0, element1, ..., elementN) + +// construct from array length +new Array(arrayLength) +``` + +### 参数 + +- `elementN` + - : `Array` 构造器会根据给定的元素创建一个 JavaScript 数组,但是当仅有一个参数且为数字时除外(详见下面的 `arrayLength` 参数)。注意,后者仅适用于用 Array 构造器创建数组,而不适用于用方括号创建的数组字面量。 +- `arrayLength` + - : 一个范围在 0 到 2^32 - 1 之间的整数,此时将返回一个 `length` 的值等于 `arrayLength` 的数组对象(言外之意就是该数组此时并没有包含任何实际的元素,不能理所当然地认为它包含 `arrayLength` 个值为 undefined 的元素)。如果传入的参数不是有效值,则会抛出 {{jsxref("RangeError")}} 异常 + +## 示例 + +### 数组字面量 + +可以通过使用 [数组字面量](/zn-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Array_literals) 创建数组 + +```js +let fruits = ['Apple', 'Banana']; + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "Apple" +``` + +### 单个参数的 Array 构造器 + +可以通过单个数字参数的构造器创建数组,数组的长度为传入的参数,该数组不包含任何实际的元素 + +```js +let fruits = new Array(2); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // undefined +``` + +### 多个参数的 Array 构造器 + +如果向构造器传入多个参数,则会创建一个包含所有传入参数的新数组 + +```js +let fruits = new Array('Apple', 'Banana'); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "Apple" +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 相关链接 + +- {{jsxref("Array")}} class -- cgit v1.2.3-54-g00ecf