首页 > 其他分享 >ES6 解构基础用法和应用!

ES6 解构基础用法和应用!

时间:2023-03-17 12:12:00浏览次数:58  
标签:username ES6 console log age 用法 let 解构

ES6 解构基础用法和应用!

注意:解构只与语法有关,不与 let,var,const相关

 

一、数组解构取值

//数组---取值
let arr = ["张三", "李四","王五"];
let a = arr[0];
let b = arr[1];
let c = arr[2];
--------------------------

//值和变量数量是一一对应的时候
let arr = ["张三", "李四","王五"];
let [a,b,c] = arr;
console.log(a);  //张三
console.log(b);  //李四
console.log(c);  //王五

//值和变量数量不是一一对应的时候
let [a1,b1,c1,d1,e1]=[4,5,6]
console.log(a1);  //4
console.log(b1);  //5
console.log(c1);  //6
console.log(d1);  //undefined  值和变量数量不是一一对应,多的打印Undefined

二、对象的解构取值

//定义一个对象
let obj={
          username:'张三',
          age:18,
          sex:'女',
          hobby:['看书','游戏','唱歌']
        }
   
let {username,age,sex,hobby}=obj
console.log(username,age,sex,hobby);  //张三 18 女 ['看书', '游戏', '唱歌']
        
//深度解构
let { username,sex, age, hobby:[a2,b2,c2] } = obj;
console.log(username,age,sex,a2,b2,c2); //张三 18 女 看书 游戏 唱歌


//解构
const { age, username } = { username: 'Alex', age: 18 }; 
//18 "Alex"
//完整形式为:
const { age: age, username: username } = { username: 'Alex', age: 18 };
// 18 "Alex"
console.log(age, username);

三、同名、异名、深度解构 

//定义一个对象
    var obj2 = {
        userName: "张三",
        teacherInfo: {
            teacherName: "李四"
        },
        stuList: [{
            stuName: "小夫",
            age: 20
        },
        {
            stuName: "大熊",
            age: 20
        }
        ]
    }

3.1 同名解构

// 同名解构
    let {
        userName,
        teacherInfo,
        stuList
    } = obj2
    console.log(userName,teacherInfo,stuList) //张三 {teacherName: '李四'} (2) [{…}, {…}]

3.2 异名解构

// 异名解构
    let {
        userName: a3,
        teacherInfo: b3,
        stuList: c3
    } = obj2
    console.log(a3,b3,c3); //张三 {teacherName: '李四'} (2) [{…}, {…}]

3.3 深度解构

// 深度解构
    let {
        userName,
        teacherInfo: {
            teacherName
        },
        stuList: [{ },
            {
                stuName
            }
        ]
    } = obj2
    console.log(userName,teacherName,stuName); //张三 李四 大熊

四、交换变量

//交换变量
let x = 10, y = 20;
console.log(x, y); //10 20
[x, y] = [y, x]; //直接将两个变量互换console.log(x,y);
console.log(x,y);  //20 10

五、解构的赋值

//解构的赋值
let userName3 = "张三";
let age3 = 18;
let obj3 = { userName3, age3 };
console.log(obj3);  //{userName3: '张三', age3: 18}

 

标签:username,ES6,console,log,age,用法,let,解构
From: https://www.cnblogs.com/mayue001/p/17226184.html

相关文章

  • 前端操作cookie的用法
    前端操作cookie的方法        +前端操作cookie的方法        +增删改查四个操作      设置cookie      ......
  • sencha-touch2.0控件nestlist的简单用法
    通过nestlist可以自定义一个有标题到内容的一个组合布局如图<font><font>Ext.create(的“Ext.tab.Panel”,{</font></font><font></font><font><font>全屏:真实,<......
  • 信息系统优化、解构、逆向的建议
    信息系统优化、解构、逆向是一种分析和改进信息系统的方法。下面我将分别介绍它们的基本思路和方法。1,信息系统优化信息系统优化是指通过对系统进行分析和改进,以提高其......
  • SerialPort控件的详细用法
    SerialPort控件的详细用法属性如下:BaudRate:波特率DataBits:数据位Parity:奇偶校验位PortName:端口号StopBits:停止位ByteToRead:获取输入缓冲区的IsOpen:获取是否开启串......
  • 爬虫相关 requests高级用法、解析json、ssl认证(了解)、使用代理(重要)、超时设置、
    requests高级用法解析json#发送http请求,返回的数据会有xml格式,也有json格式importrequestsdata={'cname':'','pid':'','keyword':'500','page......
  • requests高级用法-代理池搭建-爬取某视频网站-爬取新闻
    目录requests高级用法-代理池搭建-爬取某视频网站-爬取新闻昨日回顾今日内容详细1requests高级用法1.0解析json1.1ssl认证(了解)1.2使用代理(重要)1.3超时处理1.4异......
  • requests高级用法和代理池搭建
    目录requests高级用法1.0解析json2.ssl认证--了解3.使用代理(重要)4.超时设置5.异常处理6.上传文件代理池搭建1.代理池搭建2.django后端获取客户端的ip3.爬取某视频网址4.......
  • requests高级用法,代理池搭建, 爬取某视频网站,爬取新闻
    requests高级用法,代理池搭建,爬取某视频网站,爬取新闻requests高级用法1.0解析json'''发送http请求,返回的数据会有xml格式,也有json格式'''importrequestsdata={......
  • ES6.面向对象(主)和面向过程
    面向过程优点:效率高,因为不需要实例化对象。缺点:耦合度高,扩展性差,不易维护(例如:每个步骤都要有,不然就不行)面向对象优点:耦合低(易复用),扩展性强,易维护,由于面向对象有封装、......
  • requests高级用法
    爬虫requests高级用法解析json发送http请求返回的数据有xml格式也会有json格式importrequestsdata={'cname':'','pid':'','keyword':'500',......