ES6——解构赋值和默认参数

发布于:2024-04-11 ⋅ 阅读:(166) ⋅ 点赞:(0)

什么是解构赋值

它属于ES6的语法,是一种特殊的赋值语法,可以方便地将数组或对象中的值解构到变量中;

这样可以简化变量的声明和赋值操作,提高代码的可读性和可维护性。

1、数组解构

使用数组解构可以将数组中的元素解构到变量中。
解构时需要使用方括号([ ])来包裹变量名

const numbers = [1, 2, 3, 4];

const [a, b, c, d] = numbers;//解构赋值处

console.log(a, b, c, d); 

/ *输出:1 2 3 4*/

在上面的例子中,数组中的第一个元素被解构到变量a中,第二个元素被解构到变量b中,以此类推。
如果数组中的元素数量少于变量数量,未被解构的变量将会是undefined。

const numbers = [1, 2, 3];
const [a, b, c, d] = numbers;
console.log(a, b, c, d); 
/* 输出:1 2 3 undefined */

2、对象解构

使用对象解构可以将对象中的属性解构到变量中。解构时需要使用花括号({ })来包裹变量名,并且变量名要与对象属性名相同

const person = { name: 'asd', age: 20 };
const { name, age } = person;
console.log(name, age);
 /*输出:asd 20*/ 

在上面的例子中,对象中的name属性被解构到变量name中,age属性被解构到变量age中。如果对象中没有对应的属性,变量将会是undefined。

const person = { name: 'asd', age: 20 };
const { name, age,sex } = person;
console.log(name, age,sex); 
/*输出:asd 20 undefined*/

3、默认值

可以为解构赋值设置默认值,当变量未被解构时将会使用默认值。

const numbers = [1, 2];
const [a, b, c = 3] = numbers;
console.log(a, b, c); 
// 输出:1 2 3

在上面的例子中,变量c设置了默认值为3。由于数组中只有两个元素,变量c未被解构,因此使用了默认值。

4、剩余操作符

可以使用剩余操作符(…)将剩余的数组元素或对象属性解构到一个新的数组或对象中。

const numbers = [1, 2, 3, 4];
const [a, b, ...rest] = numbers;
console.log(a, b, rest); // 输出:1 2 [3, 4]
 
const person = { name: 'Alice', age: 20, gender: 'female' };
const { name, ...rest } = person;
console.log(name, rest);
 // 输出:Alice { age: 20, gender: 'female' }

在上面的例子中,使用剩余操作符可以将剩余的数组元素或对象属性解构到一个新的数组或对象中。在数组解构中,剩余操作符需要放在最后;在对象解构中,剩余操作符可以放在任意位置。

什么是默认参数

在ES6中,可以为函数的参数设置默认值,这样在函数调用时,如果没有传递该参数或传递的值为undefined,就会使用默认值。这样可以简化函数的调用,避免出现undefined的情况。

1、设置默认值

在函数定义时,可以通过赋值运算符(=)来为参数设置默认值。

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}
 
greet(); // 输出:Hello, Guest!
greet('Alice'); // 输出:Hello, Alice!

在上面的例子中,greet函数的name参数设置了默认值为’Guest’。当没有传递参数或传递的参数为undefined时,将会使用默认值

2、默认值表达式

function multiply(a, b = 2 * a) {
  return a * b;
}
 
console.log(multiply(5)); // 输出:50
console.log(multiply(5,2)); // 输出:10

在上面的例子中,multiply函数的b参数设置了默认值为2 * a。当没有传递第二个参数时,将会使用默认值,计算结果为b=5 * 2 = 10,ab=510=50;当传递第二个参数,就会直接计算a*b=5 * 2 = 10

3、默认参数对arguments对象的影响

使用默认参数不会影响arguments对象的长度

function sum(a, b = 0) {
  console.log(arguments.length);
  return a + b;
}
 
console.log(sum(1)); // 输出:1,返回:1
console.log(sum(1, 2)); // 输出:2,返回:3

sum函数的b参数设置了默认值为0。即使没有传递第二个参数,arguments对象的长度仍然是1。
需要注意的是,默认参数的作用域是函数内部,而不是全局作用域。这意味着默认参数可以访问函数体内的其他变量和参数,但不能访问函数外部的变量。
Arguments对象的属性length声明了传递给当前函数的参数的个数。该属性只在函数体内被定义。


网站公告

今日签到

点亮在社区的每一天
去签到