1. 解构赋值
在 ES6 中，我们可以使用解构赋值的方式，将对象或数组中的值赋值给变量。这种方式显得更加简洁明了，既方便阅读代码又避免了重复调用对象/数组中同一个属性/元素。
1.1 对象解构
对象解构使用的语法是： {}。以下是一个简单的例子：
-- -------------------- ---- ------- ----- ------ - - ----- ----- ---- --- ------ ------ ----- - ----- - ----- ---- ----- - - ------ ----------------- -- -- ---------------- -- -- ------------------ -- - ----- ---- -
在上面的例子中，我们从 person 对象中解构出了 name、age 和 hobby 三个属性，并将它们赋值给了相应的变量。
1.2 数组解构
数组解构使用的语法是：[]。以下是一个简单的例子：
const nums = [1, 2, 3] const [first, second, third] = nums console.log(first) // 1 console.log(second) // 2 console.log(third) // 3
在上面的例子中，我们从 nums 数组中解构出了 first、second 和 third 三个元素，并将它们赋值给了相应的变量。
1.3 默认值
当解构的对象没有对应的属性/元素时，我们可以给变量设置一个默认值。以下是一个简单的例子：
const person = {
name: '小明',
age: 20,
}
const { name, age, hobby = ['游泳'] } = person
console.log(hobby) // [ '游泳' ]在上面的例子中，我们从 person 对象中解构出了 name 和 age 两个属性，并将它们赋值给了相应的变量。由于 person 对象中没有 hobby 属性，我们将 hobby 变量设置了一个默认值 [ '游泳' ]。
2. 函数参数默认值
在 ES6 中，我们还可以为函数的参数设置默认值。这样做可以方便我们编写函数，避免在使用函数时需要传入一些相同的默认参数。
以下是一个简单的例子：
function sayHello(name = 'World') {
console.log(`Hello, ${name}!`)
}
sayHello() // Hello, World!
sayHello('小明') // Hello, 小明!在上面的例子中，我们定义了一个 sayHello 函数，函数的参数 name 设置了一个默认值 'World'。在调用函数时，如果没有传入 name 参数，函数将会默认输出 Hello, World!。如果传入了 name 参数，函数将会输出 Hello, ${name}!。
3. 应用场景
3.1 解构赋值的应用场景
解构赋值可以在以下场景中使用，使代码更简洁：
- 从对象或数组中提取值并将它们赋值给变量。
- 在函数返回值中直接获取需要的值。
- 强制属性名称、数组元素位置等的一致性。
3.2 函数参数默认值的应用场景
函数参数默认值可以在以下场景中使用，使代码更加简洁：
- 当需要传入默认参数时，在调用函数时无需传参。
- 当需要传入默认参数时，在调用函数时只传入必要参数即可。
4. 总结
ES6 中的解构赋值和函数参数默认值虽然看起来像是语法糖，但是它们可以极大地减少代码冗余度，使代码更加简洁。学习这两种方法可以使我们更好地理解 JavaScript 的语法，并在实际应用中提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d5820968c7c53b0828b6d