您的位置：首页 > 编程学习 > > 正文

es6新增语法以及用法（ES6 解构赋值的原理及运用）

更多时间：2022-01-23 02:22:24 类别：编程学习浏览量：2704

es6新增语法以及用法

ES6 解构赋值的原理及运用

交换变量的值

正常想到交换变量的值的方式

let x = 1,
    y = 2,
    temp = 0

temp = x // x = 1 = temp
x = y // y = 2 = x
y = temp // temp = 1 = y

console.log('x => ', x)
console.log('y => ', y)

利用解构赋值交换变量

let x = 1;
let y = 2;
[x, y] = [y, x];

console.log('x => ', x)
console.log('y => ', y)

这样交换变量x和y的值，写法不仅简洁，而且易读，语义非常清晰。

从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回，有了解构赋值，就变得更加方便了。

提取hobbies数组中的第二个值

function getArray() {
    return {
        name: 'kongsam',
        age: 21,
        hobbies: ['骑行', '动漫', '羽毛球']
    }
}
console.log(getArray().name + '喜欢' + getArray().hobbies[1]) // 动漫

利用解构赋值获取hobbies数组中的第二个值

let {name, age, hobbies} = getArray()
console.log(name + '喜欢' + hobbies[1]) // 动漫

遍历Map结构

对于for...of循环遍历来说，遍历出来的值是一个数组，而解构赋值对于数组是可以“模式匹配”的，这很快速地取出键-值。

es6新增语法以及用法（ES6 解构赋值的原理及运用）

for...of循环遍历配合解构赋值获取键-值就非常方便。

for (let [key, value] of map) {
    console.log("key => ", key)
    console.log("value => ", value)
}

es6新增语法以及用法（ES6 解构赋值的原理及运用）

函数参数的解构赋值

// let { x = 10, y = 5 } = {}

function f({ x = 10, y = 5 } = {}) {
    return [x, y]
}

console.log(f({ x: 100, y: 50 })) // [100, 50]
console.log(f({ x: 3 })) // [3, 5]
console.log(f({})) // [10, 5]
console.log(f()) // [10, 5]

可以给函数的参数中传入对象，并且可以对传入的对象设置默认值。它将被解构到函数内部里进行使用，你也可以这样理解。

function f(x = 10, y = 5) {
    return [x, y]
}

console.log(f(100, 50)) // [100, 50]
console.log(f(3)) // [3, 5]
console.log(f()) // [10, 5]

上面的写法不一样，也会导致结果不一样

function f({ x, y } = { x: 10, y: 5 }) {
    return [x, y]
}

console.log(f({ x: 100, y: 50 })) // [100, 50]
console.log(f({ x: 3 })) // [3, undefined]
console.log(f({})) // [undefined, undefined]
console.log(f()) // [10, 5]

第三和第四个打印会有undefined，这是因为传入的x或y不对应对象属性中的值，匹配不成功所导致的。

以上就是ES6 解构赋值的原理及运用的详细内容，更多关于ES6 解构赋值的资料请关注开心学习网其它相关文章！

标签：ES6 解构赋值

上一篇：phpstudy配置教程（phpStudy2018安装教程及本地服务器的配置方法）

下一篇：sqlserver游标使用场景（解析SQL Server聚焦移除Bookmark Lookup、RID Lookup、Key Lookup）

您可能感兴趣

es6新增语法以及用法（ES6 解构赋值的原理及运用）