ES6——解构赋值和剩余参数

简介: 解构赋值和剩余参数

ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。

以前的写法:

let obj = {username:'JavaScript123',pwd:'123456'};
let username = obj.username;
let pwd = obj.pwd;
console.log(username);
console.log(pwd);

20210923083301977.png

解构赋值:

let obj = {username:'JavaScript123',pwd:'123456'};
let{username,pwd} = obj;
console.log(username,pwd);

2021092308324728.png

还可以这样写:

let obj = {username:'JavaScript123',pwd:'123456'};
function func({username,pwd}){
  console.log(username,pwd);
}
  func(obj);

20210923083514702.png

他可以对数组进行解构:

let arr = ['a','b',false,123,'你好'];
let[a,b,,,]=arr;
console.log(a,b);

没有值就不用打印,以免报错

20210923083659926.png

对象模型解构中的剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
    console.log(a);
    console.log(b);
    console.log(rest);

20210923083927848.png

解构默认值:

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

例: 计算函数任意个参数之和:

function sum(...num) {
    var sum = 0;
    for (let i = 0; i < num.length; i++) {
    sum += parseInt(num[i])  //parseInt() 函数可解析一个字符串,并返回一个整数。
    }
    console.log(sum)
  }
  sum(1, 2, 3)      //6
  sum(1, 2, "3")     //6
  sum(1, 2, "4和5")   //7

20210923084414493.png

arguments:类数组对象

// arguments类数组对象
  function fn1(){
    console.log(arguments);
  }
  // 无论多少对象都可以全部接收
  fn1('a',0,{foo:'Hello'});

20210923105049322.png

总结解构赋值:

1、解构赋值就是把数据解构进行分解,然后给其变量进行赋值。

2、如果解构不成功,也就是变量和值的个数不一致的时候,变量值为undefined。

3、数组解构用中括号包裹,多个变量用逗号隔开,对象解构用花括号包裹,多个变量用逗号隔开

4、利用解构赋值能够让我们方便的去取对象中的属性跟方法

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数

function sum (first, ...args) {
     console.log(first); // 10
     console.log(args); // [20, 30] 
 }
 sum(10, 20, 30)

剩余参数和解构配合使用

let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students; 
console.log(s1);  // 'wangwu' 
console.log(s2);  // ['zhangsan', 'lisi']



相关文章
|
7月前
|
JavaScript
ES6之变量的解构赋值
ES6之变量的解构赋值
|
7月前
|
JSON JavaScript 前端开发
ES6 变量的解构赋值
ES6 变量的解构赋值
|
1月前
|
JavaScript 前端开发
如何使用解构赋值来处理具有默认值的函数?
使用解构赋值来处理具有默认值的函数,可以使函数的参数和返回值更加灵活和易于使用,提高代码的可读性和可维护性,同时也减少了因参数缺失或返回值不完整而导致的错误。
56 7
|
1月前
|
JavaScript 前端开发
如何在函数中使用解构赋值来处理具有默认值的函数的返回值?
在函数中使用解构赋值来处理具有默认值的函数的返回值,可以使代码更加简洁、清晰,并且能够更好地应对各种可能的返回情况,增强代码的健壮性和可维护性。
105 64
|
前端开发 JavaScript API
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
|
JSON JavaScript 前端开发
ES6(变量的解构赋值)
ES6(变量的解构赋值)
71 0
|
前端开发 JavaScript 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(三)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(三)
|
前端开发 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(二)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(二)