ES6展开运算符

shaonbean 发布于2019-08-20 11:19 / 1930人阅读

摘要：语法用于函数调用用于数组字面量函数传参目前为止我们都是使用方法来将一个数组展开成多个参数使用的展开运算符可以这么写选择性传参还可以同时展开多个数组数据解构析构数组数据构造两个对象连接返回新的对象两个数组连接返回新的数组在中间插入数组在尾部

语法

用于函数调用

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"}}

GPU云服务器云服务器 ES6 es6-系列 ES6入门 es6 js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80504.html

带你入门 JavaScript ES6 (二)

摘要：上一篇学习下一代语法一，我们学习了关于块作用域变量或常量声明和语法新的字符串拼接语法模版字面量数组元素或对象元素的解构赋值和对象字面量简写的相关知识。这便是扩展运算符的用途之一。本文同步带你入门 JavaScript ES6 (二)，转载请注明出处。上一篇学习下一代 JavaScript 语法: ES6 (一)，我们学习了关于块作用域变量或常量声明 let 和 const 语法、...

chanthuang 2019-08-21 18:26 评论0 收藏0
ES6之数组的扩展

摘要：它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为的成员，然后返回该成员。上面代码中，方法的回调函数可以接受三个参数，依次为当前的值当前的位置和原数组。数组的扩展展开运算符展开运算符（用三个连续的点 ( ... ) 表示）是 ES6 中的新概念，使你能够将字面量对象展开为多个元素。合并数组展开运算符的一个用途是结合数组。如果你需要结合多个数组，在...

paney129 2019-08-21 18:39 评论0 收藏0
ES6 ...操作符

摘要：在语法中，操作符有两种意义剩余语法，参数和展开语法，展开数组对象，作为函数数组对象的扩展运算符。使用和参数进行操作其余参数传给原始函数展开语法运算则可以看作是参数的逆运算。在ES6语法中，...操作符有两种意义：rest(剩余语法，rest参数) 和 spread(展开语法，展开数组/对象)，作为函数、数组、对象的扩展运算符。从某种意义上说，剩余语法与展开语法是相反的：剩余语法将多...

MorePainMoreGain 2019-08-23 12:12 评论0 收藏0
【ES6】迭代器与可迭代对象

摘要：通过生成器创建的迭代器也是可迭代对象，因为生成器默认会为属性赋值。我们可以用来访问对象的默认迭代器，例如对于一个数组获得了数组这个可迭代对象的默认迭代器，并操作它遍历了数组中的元素。 ES6 新的数组方法、集合、for-of 循环、展开运算符（...）甚至异步编程都依赖于迭代器（Iterator ）实现。本文会详解 ES6 的迭代器与生成器，并进一步挖掘可迭代对象的内部原理与使用方法 ...

terasum 2019-08-23 12:35 评论0 收藏0
es6 -- 默认参数Default，不定参数Rest，扩展运算符Spread详解

摘要：将数组中的每个元素展开为函数参数扩展运算符取代方法的一个实际的例子，应用方法，简化求出一个数组最大元素的写法。欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言记录一下在实际开发中，很有用的三个es6的新方法用法详解默认参数 function f(x, y=13) { // 如果没有传入y或传入了undefined，y的默认值为13 retur...

Betta 2019-08-23 15:20 评论0 收藏0