js数组操作方法扩展运算符倒序pop等

09 Jun 2020

1. 扩展运算符

复制数组：

我们可以使用展开操作符复制数组，不过要注意的是这是一个浅拷贝

const arr1 = [1,2,3];

const arr1 = [1,2,3];

const arr2 = [...arr1];

console.log(arr2);

// [ 1, 2, 3 ]

合并数组：

假设我们有两个数组想合并为一个，早期间我们可以使用concat方法，但现在可以使用展开操作符：

const arr1 = [1,2,3];

const arr2 = [4,5,6];

const arr3 = [...arr1, ...arr2];

console.log(arr3);

// [ 1, 2, 3, 4, 5, 6 ]

const arr3 = [...arr2, ...arr1];

console.log(arr3);

// [4, 5, 6, 1, 2, 3];

向对象添加属性或者合并对象：

要向这个user对象添加age，我们可以再次利用展开操作符。

const user = {

  firstname: 'Chris',

  lastname: 'Bongers'

};
const output = {...user, age: 31};

rest 参数：

这里，我们将数组分为三个单独的参数，然后传递给函数。

const myFunc = (x1, x2, x3) => {

  console.log(x1);

  console.log(x2);

  console.log(x3);

};

const arr1 = [1, 2, 3];

myFunc(...arr1);

// 1

// 2

// 3

展开字符串：

const str = 'Hello';

const arr = [...str];

console.log(arr);

// [ 'H', 'e', 'l', 'l', 'o' ]

2. 数组操作方法

pop方法

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

filter方法

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

map方法

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

foreach方法

forEach() 方法对数组的每个元素执行一次给定的函数。

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

扩展阅读：

详解JavaScript扩展运算符的10种用法（总结）：https://www.php.cn/js-tutorial-472816.html
Array.prototype.pop()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
Array.prototype.filter()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Array.prototype.map()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Array.prototype.forEach()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

如有侵权联系删除