品牌型网站制,品牌建设影响,h5在线制作工具手机版,使用jsp开发的网站展开语法定义
展开语法Spread Syntax#xff0c;可以在函数调用/数组构造时#xff0c;将数组表达式或者string在语法层面展开#xff1b;还可以在构造字面量对象时#xff0c;将对象表达式按照key-value的方式展开。#xff08;字面量一般指[1, 2, 3]或者{name:md…展开语法定义
展开语法Spread Syntax可以在函数调用/数组构造时将数组表达式或者string在语法层面展开还可以在构造字面量对象时将对象表达式按照key-value的方式展开。字面量一般指[1, 2, 3]或者{name:mdn}这种简洁的构造方式。
展开语法
函数调用
myFunction(...iteratorObj);字面量数组构造或字符串
[...iteratorObj, 4, ...hello, 6]构造字面量对象时进行克隆或者属性拷贝ECMAScript2018规范新增特性
需要我们注意的是此时通过Spread Syntax克隆或者属性拷贝属于浅拷贝。
let objClone { ...obj };展开语法示例
在函数调用时使用展开语法
如果我们像要将args数组中的元素迭代为函数参数一般使用Function.prototype.apply的方式进行调用。因为apply方法可以接收一个数组或者类数组对象其中的数组元素将作为单独的参数传给调用的函数。
function myFunction(x, y, z) {}
var args [1, 2, 3];
myFunction.apply(null, args);如果有了展开语法Spread Syntax语法我们可以写成 myFunction(...args)表示什么意思呢我们主要关注...args的操作...args此时表示将args数组进行**展开操作。**那么展开之后实际上整体的效果相当于myFunction(1, 2, 3)所以效果是和上面例子相同。
function myFunction(x, y, z) {}
var args [1, 2, 3];
myFunction(...args);在new表达式中应用
使用new关键字来调用构造函数是不能直接使用数组apply的方式。apply执行的是调用[[call]]而不是构造[[Constructor]]。 此时我们是不能够直接通过apply的方式去调用myFunction函数因为apply方法调用的是[[call]] internal Property而不是[[Constructor]] internal Property所以不能够达到目的。
function myFunction(x, y, z){};
var args [1, 2, 3];
new myFunction.apply(null, args);如果有了展开语法Spread Syntax我们可以写成var dateFields [1970, 0, 1];
var d new Date(...dateFields);如果不使用展开语法的话想要将数组元素传递给构造函数实现的方式可能是这样的 主要的思路虽然我们不能直接通过new myConstructor.apply(null, myArguments)的方式将myArguments数组中的元素传递给构造函数myConstructor。但是我们可以找一个缓冲层做铺垫比如例子中的partial函数。
疑问一return constructor.apply(this, args)在做些什么主要是使用借用构造函数的方式去处理实例化对象内部的属性。疑问二return constructor.apply(this, args)为什么要return此时的结果是return undefined为什么不会影响到程序的执行呢因为new关键字调用构造函数时构造函数内部会自动创建this对象并且将this对象返回出去。如果你手动返回原始值的话是不会对构造函数返回值造成影响。如果你返回的是**引用值**此时才会受到影响。
function applyAndNew(constructor, args) {function partial() {// 借用构造函数return constructor.apply(this, args);}if (typeof constructor.prototype object) {// 继承关系 partial 继承 myConstructorpartial.prototype Object.create(constructor.prototype);}return partial;
}function myConstructor() {console.log(arguments.length: arguments.length);console.log(arguments);this.prop1val1;this.prop2val2
}var myArguments [hi, how, are, you, mr, null];
var myConstructorWithArguments applyAndNew(myConstructor, myArguments);
console.log(new myConstructorWithArguments);构造字面量数组时使用展开语法
没有展开语法的时候只能使用push、splice、concat等方法来将已有数组元素变成新数组的一部分。有了展开语法通过字面量方式构造新数组会变得更简单更优雅。
var parts [shoulders, knees];
var lyrics [head, ...parts, and, toes];构造字面量对象时使用展开语法
Rest/Spread Properties for ECMAScript提议对字面量对象增加了展开的特性。其行为是将已有对象的所有可枚举属性拷贝到新构造的对象中。 对象合并对象浅拷贝你可以使用展开语法。
var obj1 { foo: bar, x: 42 };
var obj2 { foo: baz, y: 13 };var clonedObj { ...obj1 };
// 克隆后的对象{ foo: bar, x: 42 }var mergedObj { ...obj1, ...obj2 };
// 合并后的对象{ foo: baz, x: 42, y: 13 }只用于可迭代对象
在数组或者函数参数中使用展开语法时该语法只能用于可迭代对象
var obj {key1: value1};
var array [...obj]; // TypeError: obj is not iterable展开多个值
在函数调用时使用展开语法请注意不能超过JavaScript引擎限制的最大参数个数。
剩余语法剩余参数定义
剩余语法Rest Syntax看起来和展开语法完全相同不同在于剩余参数用于解构数组和对象。从某种意义上来说剩余语法和展开语法是相反的展开语法将数组展开为其中的各个元素而剩余语法则是将多个元素收集起来并“凝聚”为单个元素。 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
剩余语法的描述
如果函数的最后一个命名参数以...为前缀则它将成为一个由剩余参数组成的真数组其中从0包括到theArgs.length(排除)的元素由传递给函数的实际参数提供。 在下面的例子中thisArgs将收集该函数的第三个参数因为第一个参数被映射到a而第二个参数映射到b和所有后续参数。
function(a, b, ...theArgs) {// ...
}剩余参数和arguments对象的区别
剩余参数和arguments对象之间的区别主要在于
剩余参数只包含哪些没有对应形参的实参而arguments对象包含了传给函数的所有实参。arguments对象不是一个真正的数组而剩余参数是真正的Array实例也就是说你能够在它上面直接使用所有的数组方法。arguments对象还有一些附加的属性比如callee。
解构剩余参数
剩余参数可以被解构这意味着他们的数据可以被解包到不同的变量中。
function f(...[a, b, c]) {return a b c;
}f(1) // NaN (b and c are undefined)
f(1, 2, 3) // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)剩余语法不仅仅用于函数参数
注意一点剩余语法是一种语法不仅仅只用作于函数参数。也可以用作收集数组解构时剩余的元素。
const [a, ...args] [1, 2, 3, 4];
console.log(a); // 1
console.log(args); // [2, 3, 4]
