添加元素(数组末端)

青旅半醒 2022-06-05 04:57 187阅读 0赞

题目是这样的;

在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组。

输入：

\[1,2,3,4\],10

输出：

\[1,2,3,4,10\]

第一种：

兼顾处理，可在函数内做判断（在输入参数item是数组时，可以做是否是数组兼容性判断）

function append(arr, item) \{  
var newArr=\[item\];  
    \[\].unshift.apply(newArr, arr);  
    return newArr;  
\}

`unshift()` 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

这个方法能够通过 [`call`][call] 或 [`apply`][apply] 方法作用于类似数组的对象上。不过对于没有 length 属性（代表从0开始的一系列连续的数字属性的最后一个）的对象，调用该方法可能没有任何意义。

/\*var arr = \[1, 2\];

arr.unshift(0); //result of call is 3, the new array length  
//arr is \[0, 1, 2\]

arr.unshift(-2, -1); // = 5  
//arr is \[-2, -1, 0, 1, 2\]

arr.unshift( \[-3\] );  
//arr is \[\[-3\], -2, -1, 0, 1, 2\]  
\*/

`第2种：：使用concat将传入的数组或非数组值与原数组合并,组成一个新的数组并返回`

` `

`var`  `append3 = ` `function` `(arr, item) {`

`  ` `return`  `arr.concat(item);`

`};`

`第3种：：使用slice浅拷贝+push组合`

`var`  `append2 = ` `function` `(arr, item) {`

`    ` `var`  `newArr = arr.slice(0);  ` `// slice(start, end)浅拷贝数组`

`    ` `newArr.push(item);`

`    ` `return`  `newArr;`

`};`

`第4种：：普通的迭代拷贝`

`var` `append =` `function` `(arr, item) {`

`    ` `var` `length = arr.length,`

`        ` `newArr = [];`

`    ` `for` `(` `var` `i = 0; i < length; i++) {`

`        ` `newArr.push(arr[i]);`

`    ` `}`

`    ` `newArr.push(item);`

`    ` `return` `newArr;`

`};`

apply  <---> ...扩展运算符

# 1  含义 #

扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  console.log(...\[1, 2, 3\])  
2.  // 1 2 3  
3.  console.log(1, ...\[2, 3, 4\], 5)  
4.  // 1 2 3 4 5  
5.  \[...document.querySelectorAll('div')\]  
6.  // \[<div>, <div>, <div>\]

该运算符主要用于函数调用。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **function** push(array, ...items) \{  
2.  array.push(...items);  
3.  \}  
4.  **function** add(x, y) \{  
5.  **return** x + y;  
6.  \}  
7.  **var** numbers = \[4, 38\];  
8.  add(...numbers) // 42

上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。

扩展运算符与正常的函数参数可以结合使用，非常灵活。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **function** f(v, w, x, y, z) \{ \}  
2.  **var** args = \[0, 1\];  
3.  f(-1, ...args, 2, ...\[3\]);

# 替代数组的 apply 方法 #

由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  // ES5 的写法  
2.  **function** f(x, y, z) \{  
3.  // ...  
4.  \}  
5.  **var** args = \[0, 1, 2\];  
6.  f.apply(**null**, args);  
7.  // ES6 的写法  
8.  **function** f(x, y, z) \{  
9.  // ...  
10. \}  
11. **var** args = \[0, 1, 2\];  
12. f(...args);

下面是扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  // ES5 的写法  
2.  Math.max.apply(**null**, \[14, 3, 77\])  
3.  // ES6 的写法  
4.  Math.max(...\[14, 3, 77\])  
5.  //  等同于  
6.  Math.max(14, 3, 77);

上面代码表示，由于 JavaScript 不提供求数组最大元素的函数，所以只能套用Math.max函数，将数组转为一个参数序列，然后求最大值。有了扩展运算符以后，就可以直接用Math.max了。

另一个例子是通过push函数，将一个数组添加到另一个数组的尾部。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  // ES5 的写法  
2.  **var** arr1 = \[0, 1, 2\];  
3.  **var** arr2 = \[3, 4, 5\];  
4.  Array.prototype.push.apply(arr1, arr2);  
5.  // ES6 的写法  
6.  **var** arr1 = \[0, 1, 2\];  
7.  **var** arr2 = \[3, 4, 5\];  
8.  arr1.push(...arr2);

上面代码的 ES5 写法中，push方法的参数不能是数组，所以只好通过apply方法变通使用push方法。有了扩展运算符，就可以直接将数组传入push方法。  
下面是另外一个例子。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  // ES5  
2.  **new** (Date.bind.apply(Date, \[**null**, 2015, 1, 1\]))  
3.  // ES6  
4.  **new** Date(...\[2015, 1, 1\]);

# \--- #

# 3  扩展运算符的应用 #

## （ 1 ）合并数组 ##

扩展运算符提供了数组合并的新写法。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  // ES5  
2.  \[1, 2\].concat(more)  
3.  // ES6  
4.  \[1, 2, ...more\]  
5.  **var** arr1 = \['a', 'b'\];  
6.  **var** arr2 = \['c'\];  
7.  **var** arr3 = \['d', 'e'\];  
8.  // ES5 的合并数组  
9.  arr1.concat(arr2, arr3);  
10. // \[ 'a', 'b', 'c', 'd', 'e' \]  
11. // ES6 的合并数组  
12. \[...arr1, ...arr2, ...arr3\]  
13. // \[ 'a', 'b', 'c', 'd', 'e' \]

## （ 2 ）与解构赋值结合 ##

扩展运算符可以与解构赋值结合起来，用于生成数组。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  // ES5  
2.  a = list\[0\], rest = list.slice(1)  
3.  // ES6  
4.  \[a, ...rest\] = list  
5.  下面是另外一些例子。  
6.  **const** \[first, ...rest\] = \[1, 2, 3, 4, 5\];  
7.  first // 1  
8.  rest // \[2, 3, 4, 5\]  
9.  **const** \[first, ...rest\] = \[\];  
10. first // undefined  
11. rest // \[\]:  
12. **const** \[first, ...rest\] = \["foo"\];  
13. first // "foo"  
14. rest // \[\]

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **const** \[...butLast, last\] = \[1, 2, 3, 4, 5\];  
2.  //  报错  
3.  **const** \[first, ...middle, last\] = \[1, 2, 3, 4, 5\];  
4.  //  报错

## （ 3 ）函数的返回值 ##

JavaScript 的函数只能返回一个值，如果需要返回多个值，只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **var** dateFields = readDateFields(database);  
2.  **var** d = **new** Date(...dateFields);

上面代码从数据库取出一行数据，通过扩展运算符，直接将其传入构造函数Date。

## （ 4 ）字符串 ##

扩展运算符还可以将字符串转为真正的数组。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  \[...'hello'\]  
2.  // \[ "h", "e", "l", "l", "o" \]

上面的写法，有一个重要的好处，那就是能够正确识别 32 位的 Unicode 字符。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  'x\\uD83D\\uDE80y'.length // 4  
2.  \[...'x\\uD83D\\uDE80y'\].length // 3

上面代码的第一种写法， JavaScript 会将 32 位 Unicode 字符，识别为 2 个字符，采用扩展运算符就没有这个问题。因此，正确返回字符串长度的函数，可以像下面这样写。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **function** length(str) \{  
2.  **return** \[...str\].length;  
3.  \}  
4.  length('x\\uD83D\\uDE80y') // 3

凡是涉及到操作 32 位 Unicode 字符的函数，都有这个问题。因此，最好都用扩展运算符改写。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  let str = 'x\\uD83D\\uDE80y';  
2.  str.split('').reverse().join('')  
3.  // 'y\\uDE80\\uD83Dx'  
4.  \[...str\].reverse().join('')  
5.  // 'y\\uD83D\\uDE80x'

上面代码中，如果不用扩展运算符，字符串的reverse操作就不正确。

## （ 5 ）实现了 Iterator 接口的对象 ##

任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **var** nodeList = document.querySelectorAll('div');  
2.  **var** array = \[...nodeList\];

上面代码中，querySelectorAll方法返回的是一个nodeList对象。它不是数组，而是一个类似数组的对象。这时，扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了 Iterator 接口。

对于那些没有部署 Iterator 接口的类似数组的对象，扩展运算符就无法将其转为真正的数组。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  let arrayLike = \{  
2.  '0': 'a',  
3.  '1': 'b',  
4.  '2': 'c',  
5.  length: 3  
6.  \};  
7.  // TypeError: Cannot spread non-iterable object.  
8.  let arr = \[...arrayLike\];

上面代码中，arrayLike是一个类似数组的对象，但是没有部署 Iterator 接口，扩展运算符就会报错。这时，可以改为使用Array.from方法将arrayLike转为真正的数组。

## （ 6 ） Map 和 Set 结构， Generator 函数 ##

扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  let map = **new** Map(\[  
2.  \[1, 'one'\],  
3.  \[2, 'two'\],  
4.  \[3, 'three'\],  
5.  \]);  
6.  let arr = \[...map.keys()\]; // \[1, 2, 3\]

Generator 函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **var** go = **function**\*()\{  
2.  yield 1;  
3.  yield 2;  
4.  yield 3;  
5.  \};  
6.  \[...go()\] // \[1, 2, 3\]

上面代码中，变量go是一个 Generator 函数，执行后返回的是一个遍历器对象，对这个遍历器对象执行扩展运算符，就会将内部遍历得到的值，转为一个数组。  
如果对没有iterator接口的对象，使用扩展运算符，将会报错。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **var** obj = \{a: 1, b: 2\};  
2.  let arr = \[...obj\]; // TypeError: Cannot spread non-iterable object

[call]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call
[apply]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
[view plain]: http://blog.csdn.net/qq_30100043/article/details/53391308#

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 java数组添加元素(数组元素反转Java)

用java编程实现将一数组中的元素逆存放？用java编程实现将一以整型数组为例，已知一个十元素数组b： int a\[\]=new int\[10\];for(int

小咪咪/ 2023年09月25日 08:14/ 0 赞/ 81 阅读

相关 php 数组添加元素、删除元素

拆分数组 PHP数组添加一个元素的方式： push(), arr\[\], Php代码 $arr = array(); array_push($

拼搏现实的明天。/ 2022年09月24日 14:23/ 0 赞/ 206 阅读

相关添加数组元素

package Test; import java.util.Arrays; import java.util.Scanner; public class Two \{

超、凢脫俗/ 2022年07月15日 07:12/ 0 赞/ 186 阅读

相关添加元素（数组开头）

题目描述在数组 arr 开头添加元素 item。不要直接修改数组 arr，结果返回新的数组示例1 输入 [1, 2, 3, 4], 10 输出

快来打我*/ 2022年06月05日 05:23/ 0 赞/ 219 阅读

相关添加元素(数组末端)

题目是这样的; 在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组。输入： \[1,2,3,4\],10 输出： \[1,2,3,4

青旅半醒/ 2022年06月05日 04:57/ 0 赞/ 188 阅读

相关 Java—数组添加元素

[Java—数组添加元素][Java] \[java\] [view plain][][copy][view plain][print][view plain][?][v

﹏ヽ暗。殇╰゛Y/ 2022年04月11日 11:45/ 0 赞/ 235 阅读

相关 jquery 数组添加元素

var arrList = \[‘a’,‘b’,‘c’,‘d’\]; arrList.splice(jQuery.inArray(‘b’,arrList),1); aler

水深无声/ 2022年03月17日 02:44/ 0 赞/ 356 阅读

相关 js中数组添加元素

[https://www.cnblogs.com/meng-ma-blogs/p/8352787.html][https_www.cnblogs.com_meng-ma-blo

曾经终败给现在/ 2022年03月16日 05:42/ 0 赞/ 253 阅读

相关 Java中数组添加元素

Java中数组添加元素方法：使用sort()方法对Java数组中的元素进行排序，使用inserElement()方法向数组中插入元素，我们通过定义printArra

你的名字/ 2021年09月28日 13:36/ 0 赞/ 472 阅读

相关 linux shell 数组添加元素

向Shell数组添加元素有多种方法，每种方法在使用时都有一些需要注意的地方，没有见过这方面的总结资料，所以自己总结一下。直接下标添加 array_name[i

妖狐艹你老母/ 2021年08月27日 12:13/ 0 赞/ 501 阅读