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

评论

  • 匿名