首页 > 专栏 > 前端 > 文章详情
ES6 的扩展运算符,三个点... 发布于:2021-03-26 10:38:41   来源:阮一峰   查看:4  讨论:0
对象的扩展运算符:(取出参数对象中所有可遍历属性,拷贝到当前对象中。==Object.assign()方法。)
//对象的扩展运算符wXd易塔云建站-模板下载,web开发资源,技术博客
//对象的扩展运算符(...):取出参数对象中所有可遍历属性,拷贝到当前对象wXd易塔云建站-模板下载,web开发资源,技术博客
var bar = {a:1, b:2}wXd易塔云建站-模板下载,web开发资源,技术博客
var foo = {...bar};wXd易塔云建站-模板下载,web开发资源,技术博客
console.log(foo);wXd易塔云建站-模板下载,web开发资源,技术博客
//上述方法等价于:Object.assign(目标对象, arguments:源对象)wXd易塔云建站-模板下载,web开发资源,技术博客
foo = Object.assign(foo, {a:2, b:3, c:4});wXd易塔云建站-模板下载,web开发资源,技术博客
console.log(foo);//{a:2, b:3, c:4}wXd易塔云建站-模板下载,web开发资源,技术博客
foo = Object.assign(foo, bar);wXd易塔云建站-模板下载,web开发资源,技术博客
console.log(foo);//{a:1, b:2, c:4}wXd易塔云建站-模板下载,web开发资源,技术博客
//Object.assign()用于对象合并,将源对象的所有可枚举属性,复制到目标对象。wXd易塔云建站-模板下载,web开发资源,技术博客
var bar = {a:1, b:2, c:{nickname:'old'}}wXd易塔云建站-模板下载,web开发资源,技术博客
var foo = {...bar, b: 'what'};wXd易塔云建站-模板下载,web开发资源,技术博客
foo.c.nickname = 'new'wXd易塔云建站-模板下载,web开发资源,技术博客
foo.b = 4;wXd易塔云建站-模板下载,web开发资源,技术博客
console.log(foo);//{a:1, b:'what', c:{nickname: 'old'}}wXd易塔云建站-模板下载,web开发资源,技术博客
console.log(bar);
数组的扩展运算符:原理同上,取出参数对象中所有可遍历属性,拷贝到当前对象中。
//将数组使用为参数序列,带入到函数中wXd易塔云建站-模板下载,web开发资源,技术博客
function add(a, b){wXd易塔云建站-模板下载,web开发资源,技术博客
    return a + b;wXd易塔云建站-模板下载,web开发资源,技术博客
}wXd易塔云建站-模板下载,web开发资源,技术博客
const numbers = [4, 39];wXd易塔云建站-模板下载,web开发资源,技术博客
console.log(add(...[4, 6]))wXd易塔云建站-模板下载,web开发资源,技术博客
console.log(add(...numbers))wXd易塔云建站-模板下载,web开发资源,技术博客
//复制数组wXd易塔云建站-模板下载,web开发资源,技术博客
const arr1 = [1, 2]wXd易塔云建站-模板下载,web开发资源,技术博客
const arr2 = [...arr1];wXd易塔云建站-模板下载,web开发资源,技术博客
console.log(arr2)wXd易塔云建站-模板下载,web开发资源,技术博客
//与解构赋值结合,生成新数组wXd易塔云建站-模板下载,web开发资源,技术博客
// const [first, ...rest] = [1, 2, 3, 4, 5, 6];//这种赋值方式,叫解构赋值而已wXd易塔云建站-模板下载,web开发资源,技术博客
// console.log(first);wXd易塔云建站-模板下载,web开发资源,技术博客
// console.log(rest)wXd易塔云建站-模板下载,web开发资源,技术博客
//报错情况:将扩展运算符用于数组赋值,只能放在参数最后一位。wXd易塔云建站-模板下载,web开发资源,技术博客
// const [...rest, first] = [1,2,3,4,5];wXd易塔云建站-模板下载,web开发资源,技术博客
// console.log(rest);//Rest element must be last elementwXd易塔云建站-模板下载,web开发资源,技术博客
//将字符串转换为真正的数组wXd易塔云建站-模板下载,web开发资源,技术博客
console.log([...'hello'])wXd易塔云建站-模板下载,web开发资源,技术博客
//常用:将某些数据结构转换为数组wXd易塔云建站-模板下载,web开发资源,技术博客
function fooFun(){wXd易塔云建站-模板下载,web开发资源,技术博客
    const args = [...arguments];wXd易塔云建站-模板下载,web开发资源,技术博客
    console.log(args)wXd易塔云建站-模板下载,web开发资源,技术博客
};wXd易塔云建站-模板下载,web开发资源,技术博客
fooFun(2,3,'a',{a:1, b:2, c:3},34)wXd易塔云建站-模板下载,web开发资源,技术博客
// 用于替换es5中的Array.prototype.slice.call(arguments)写法。

评论

  • 匿名