最新消息:20210917 已从crifan.com换到crifan.org

【已解决】ES6中的Three dots三个点…的含义

JS crifan 4415浏览 0评论

对于:

  UPDATE_MAIN_ENTRY_NUM: ({mainEntries, …state}, { nums }) => {
    mainEntries.forEach((e, i) => {
      e.number = nums[i];
    });
    return {
      mainEntries,
      …state
    };
  },

中三个点表示更多的参数,还算容易理解

但是:

redux-tutorial-cn/04_get-state.js at master · react-guide/redux-tutorial-cn

var reducer_3 = function (state = {}, action) {
    console.log(‘reducer_3 was called with state’, state, ‘and action’, action)
    switch (action.type) {
        case ‘SAY_SOMETHING’:
            return {
                …state,
                message: action.value
            }
        default:
            return state;
    }
}
还要注意:之所以这个例子能用ES7 Object Spread notation ,是因为它只对 state 里的
//         { message: action.value} 做了浅拷贝(也就是说, state 第一个层级的属性直接被 { message: action.value } 覆盖掉了

为何传入的参数是state

而不是

…state

却可以也加上三个点?

ES6 三个点

es6 扩展运算符 三个点(…) – 现在学习也不晚 – 博客频道

ES6 扩展运算符 三个点(…) – 简书

函数的扩展 – ECMAScript 6 入门 – 极客学院Wiki

“ES6 引入 rest 参数(形式为“…变量名”),用于获取函数的多余参数,这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

扩展运算符

扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。

// ES6的写法

Math.max(…[14, 3, 77])

// 等同于

Math.max(14, 3, 77);

作者简介 – ECMAScript 6 入门 – 极客学院Wiki

三个点怎样改变了 JavaScript | Blog of Gavin

ES7 Object Spread notation

使用对象展开运算符 | Redux 中文文档 Join the chat

【总结】

三个点,有两种含义:

(1)剩余rest参数

函数的参数中,放在最后的一个可变参数前面加上三个点

举例:

function add(…values) {
   let sum = 0;
   for (var val of values) {
      sum += val;
   }
   return sum;
}
add(2, 5, 3) // 10

(2)扩展运算符==对象展开运算符(Object Spread notation)

它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。

举例:

// ES6的写法
Math.max(…[14, 3, 77])
// 等同于
Math.max(14, 3, 77);

转载请注明:在路上 » 【已解决】ES6中的Three dots三个点…的含义

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
92 queries in 0.178 seconds, using 23.36MB memory