JavaScript 新旧替换三：参数转换

目录

• 引子
• ES5 方式
• ES2015+ 方式
• 应用
• 参考资料

引子

在 ES2015 之前，有把函数的 arguments 转变为某种可以当作数组来使用的方法，现在可以摆脱这些方法了。

这是继 JavaScript 新旧替换二：赋值和取值的第三篇。

• Origin
• My GitHub

ES5 方式

主要是使用了 apply() 方法，该方法用途是在特定的作用域中调用函数，实际上等于设置函数体内 this 对象的值。该接受两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是 Array 的实例，也可以是 arguments 对象。

function foo() {
  var args = Array.prototype.slice.apply(arguments);
  console.info(args); // [1,2,3,4,5]
  console.info(args instanceof Array); // true
}
foo(1,2,3,4,5);

Back to top

ES2015+ 方式

在 ES2015 中引入了一个新的运算符 https://xxholic.github.io/segment.，称为 spread 或 rest（展开或收集）运算符。不同情况下，会有不同的特性。

function foo(https://xxholic.github.io/segment.args) {
  console.info(args); // [1,2,3,4,5]
  console.info(https://xxholic.github.io/segment.args); // 1 2 3 4 5
}
foo(1,2,3,4,5);

这里运算符 https://xxholic.github.io/segment. 使用的特性有：

• foo(https://xxholic.github.io/segment.args) 中使用了收集的特性，把一系列值收集到一起成为一个数组。
• console.info(https://xxholic.github.io/segment.args) 中使用了展开的特性，这里把数组 args 展开为一组函数调用的参数。

在 ES2018 中这个运算符引入到了对象。它会取出对象的所有可遍历属性，拷贝到当前对象中。

使用于对象常见的几种情况如下：

一般对象

let obj = {a:1,b:2};
let objCopy = {https://xxholic.github.io/segment.obj};
objCopy.a = 2;
console.info(obj); // {a:1,b:2}
console.info(objCopy); // {a:2,b:2}

let complexObj = {a:{b:1},c:2};
let complexObjCopy = {https://xxholic.github.io/segment.complexObj};
complexObjCopy.a.b = 2;
console.info(complexObj); // {a:{b:2},b:2}
console.info(complexObjCopy); // {a:{b:2},b:2}

可见只是进行了浅拷贝，等同于使用 Object.assign() 方法。

数组

let objArray = {https://xxholic.github.io/segment.['a','b']};
console.info(objArray); // {0: "a", 1: "b"}

let complexObjArray = {https://xxholic.github.io/segment.['a',['b'],'c']};
console.info(complexObjArray); // {0: "a", 1: ["b"],2:"c"}

字符串

let objStr = {https://xxholic.github.io/segment.'hi'};
console.info(objStr); // {0: "h", 1: "i"}

其它

{https://xxholic.github.io/segment.1} // {}

{https://xxholic.github.io/segment.true} // {}

{https://xxholic.github.io/segment.undefined} // {}

{https://xxholic.github.io/segment.null} // {}

{https://xxholic.github.io/segment.NaN} // {}

Back to top

应用

运算符 https://xxholic.github.io/segment. 较常见应用有：

复制对象或数组

let obj = {a:{b:1},c:2};
let objCopy = {https://xxholic.github.io/segment.obj};
objCopy.a.b = 2;
console.info(obj); // {a:{b:2},b:2}
console.info(objCopy); // {a:{b:2},b:2}

let arr = ['1',['2']];
let arrCopy = [https://xxholic.github.io/segment.arr];
arrCopy[1][0] = '3';
console.info(arr); // ['1',['3']]
console.info(arrCopy); // ['1',['3']]

需要注意都是浅拷贝。

合并对象或数组

let objA = {a:1}, objB = {b:2};
let obj = {https://xxholic.github.io/segment.objA,https://xxholic.github.io/segment.objB};
console.info(obj); // {a:1,b:2}

let arrA = ['1'], arrB = ['2'];
let arr = [https://xxholic.github.io/segment.arrA,https://xxholic.github.io/segment.arrB];
console.info(arr); // ['1',2']

与解构结合

与对象解构结合

与对象解构结合需要满足的条件有：

• 等号右边是一个对象。
• 解构必需是最后一个参数，否则会报错。

let {a,https://xxholic.github.io/segment.b} = undefined; // Uncaught TypeError: Cannot destructure property `a` of 'undefined' or 'null'.

let {https://xxholic.github.io/segment.q,k} = {m:1,n:2,k:3}; // Uncaught SyntaxError: Rest element must be last element

let {x,https://xxholic.github.io/segment.z} = {x:1,y:2,z:3};
z // {y:2,z:3}

使用了扩展运算符后，把目标对象上所有可遍历但尚未被读取的属性，分配到指定对象上。

与数组解构结合

与数组解构结合需要满足的条件有：

• 等号右边是一个数组。
• 解构必需是最后一位，否则会报错。

let [https://xxholic.github.io/segment.x] = 123; // 123 is not iterable

let [https://xxholic.github.io/segment.q,k] = [1,2,3]; // Uncaught SyntaxError: Rest element must be last element

let [x,https://xxholic.github.io/segment.z] = [1,2,3];
z // [2,3]

Back to top

参考资料

• ECMAScript Standard
• JavaScript高级程序设计（第3版）
• 你不知道的JavaScript（下卷）
• ECMAScript 6 入门

标签：xxholic,github,https,JavaScript,let,新旧,io,segment,替换
来源： https://www.cnblogs.com/thyshare/p/12906100.html