首页 > 其他分享> 文章详细

ES6新特性-解构赋值

2021-12-13 21:02:27 阅读：104 来源： 互联网

标签：ES6 console log name 解构 let 20 赋值

ES6新特性-解构赋值

Spread / Rest 操作符
数组的解构
对象的解构
默认值和参数的解构

Spread / Rest 操作符

Spread / Rest 操作符：Spread / Rest 操作符指的是 '...'，具体是 Spread 还是 Rest 需要看上下文语境。

(1)当被用于迭代器中时，它是一个 Spread 操作符：迭代器 (Iterator)是按照一定的顺序对一个或多个容器中的元素行进遍历的一种机制。

spread运算符常常用于数组的解析与构造：

function foo(x,y,z) {
              console.log(x,y,z);
            }
             
            let arr = [1,2,3];
            foo(...arr); // 1 2 3

(2)当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符：

function foo(...args) {
              console.log(args);
            }
            foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

数组的解构

(1)在ES5标准中赋值多个变量采用的方法是：

	   var a = 10;
       var b = 20;
       var c = 30;

ES6提供了更简洁的解构赋值来实现上述变量的定义：

            let [a,b,c] = [10,20,30];
            console.log(a);
            console.log(b);
            console.log(c);

等号右边的值会按照顺序依次赋值给左边的变量。

(2)非一一对应关系的赋值

        let [a,b] = [10,20,30]
        console.log(a,b); //输出10,20

        let [a,b,c] = [10,20]
        console.log(a); //10
        console.log(b); //20
        console.log(c); //undefined

(3)也可以通过"…"把特定的元素放在变量里

        let [a,...arr] = [10,20,30]
        console.log(a); //10
        console.log(arr); //20,30

(4)在ES6中可以通过解构赋值来互换变量

        let a = 10;
        let b = 20;
        [a,b] = [b,a];
        console.log(a,b)

对象的解构

(1)对象解构的写法与数组解构类似

  let obj = {
            name: '张三',
            age: 20,
            height: '178com'
        }

        let { name,age,height } = obj; //变量的名称必须和对象的属性名相同
        console.log(name,age,height);

(2)也可以解构多层对象

let person = {
    name: '张三',
    age: 20,
    family: {
        father: '张武',
        mother: '李燕'
    }
}
let { name,age,family: {father,mother }} = person
console.log(name,father)

(3)在解构对象时也可以自定义变量名称：

   let obj = {
           name: '张三',
           ge: 20
      }
   let { name:myname,age:myage } = obj;
   console.log(myname,myage);

默认值和参数的解构

(1)不管是数组的解构赋值,还是对象的解构赋值都可以添加默认参数。

   let obj = {
       name: '李四',
       age: 20
    }

   let { name,age,height="178com" } = obj;
   console.log(height); //178com

(2)在函数参数中使用解构,参数解构也可以给默认参数

  function fun({name,age,height="178com"} = {}){
                console.log(name,age); //张三,20
            }
            let obj = {
                name: '张三',
                age: 20
            }
     fun(obj)

标签：ES6,console,log,name,解构,let,20,赋值
来源： https://blog.csdn.net/shao_xuan_/article/details/121852010

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6新特性-解构赋值