[转] ES6展开运算符

最新推荐文章于 2025-06-14 20:23:59 发布

转载最新推荐文章于 2025-06-14 20:23:59 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chris-oil/p/9353511.html

本文详细介绍了ES6中的展开运算符的多种应用场景，包括函数调用、数组字面量、选择性传参、数据解构及构造等，并通过实例展示了如何使用展开运算符简化代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法
用于函数调用

myFunction(...iterableObj);
用于数组字面量

[...iterableObj, 4, 5, 6]
函数传参
目前为止,我们都是使用Function.prototype.apply方法来将一个数组展开成多个参数:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
使用es6的展开运算符可以这么写：

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
选择性传参

function filter(type, ...items) {
    return items.filter(item => typeof item === type);
}
filter('boolean', true, 0, false);        // => [true, false]
filter('number', false, 4, 'Welcome', 7); // => [4, 7]
还可以同时展开多个数组：

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);
数据解构
let cold = ['autumn', 'winter'];
let warm = ['spring', 'summer'];
// 析构数组
let otherSeasons, autumn;
[autumn, ...otherSeasons] = cold;
otherSeasons      // => ['winter']
数据构造
两个对象连接返回新的对象

let a = {aa:'aa'}
let b = {bb:'bb'}
let c = {...a,...b}
console.log(c)
// {"aa":"aa","bb":"bb"}
两个数组连接返回新的数组

let d = ['dd']
let e = ['ee']
let f = [...d,...e]
console.log(f)
// ["dd","ee"]
在中间插入数组

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
在尾部插入数组

// ES5
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将arr2中的所有元素添加到arr1中
Array.prototype.push.apply(arr1, arr2);

// ES6
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
数组加上对象返回新的数组

let g = [{gg:'gg'}]
let h = {hh:'hh'}
let i = [...g,h]
console.log(i)
// [{"gg":"gg"},{"hh":"hh"}
数组+字符串

let j = ['jj']
let k = 'kk'
let l = [...j,k]
console.log(l)
// ["jj","kk"]
带有数组和对象的结合

 
let state = {
    resultList: [],
    currentPage: 0,
    totalRows: {}
}
let data = {
    resultList: [{new:'new'}],
    currentPage: 2,
    totalRows: {row:'row'}
}
let combile = {
                ...state,
                resultList: [
                    ...state.resultList,
                    ...data.resultList
                ],
                currentPage: data.currentPage,
                totalRows: data.totalRows
            }
console.log(combile)
// {"resultList":[{"new":"new"}],"currentPage":2,"totalRows":{"row":"row"}}

转载于:https://www.cnblogs.com/chris-oil/p/9353511.html