勇宝趣学JavaScript第二章(解构赋值)

ES6中,我们经常使用到解构赋值这个知识点,今天我们就来好好讲讲这一小部分知识点。咱们争取这回一次性讲明白。

今天是元宵节,祝大家节日快乐,只有我自己还在无聊的码字。

给我点个赞吧,嘿嘿!!!

一、数组的解构赋值

ES6允许我们对一个数组或者是对象从中进行取值,然后在对变量进行赋值的这个操作叫做解构。

1.1 基本用法

  1. 在以前,我们是这样对变量进行赋值的

    js 复制代码
    let a = 1;
    let b = 2;
    let c = 3;
  2. 然而在ES6中,我们可以书写成以下方式:

    js 复制代码
    let [a, b, c] = [1, 2, 3]
    
    console.log(a, b, c); // 1 2 3

这种写法有一个专业术语,叫做模式匹配 。其实我更喜欢叫映射(一一对应)。

  1. 还有嵌套结构的写法

    js 复制代码
    let [a, [b, c], d] = ['JavaScript', ['Vue', 'React'], 'Node'];
    
    console.log(a, b, c, d); // JavaScript Vue React Node
  2. 如果我们想获取数组的某一个下标的值可以这样写:

    js 复制代码
    let [, [, a], b] = ['JavaScript', ['Vue', 'React'], 'Node'];
    
    console.log(a, b); // React Node
  3. 通过...可以获取到剩余值

    js 复制代码
    let [a, ...b] = ['JavaScript', 'Vue', 'React', 'Node'];
    
    console.log(a); // JavaScript
    console.log(b); // ['Vue', 'React', 'Node']
  4. 如果解构不成功,首先不会报错,控制台会打印undefined

    js 复制代码
    let [a, b] = ['Javascript'];
    
    console.log(b); // undefined
  5. 解构也可以是不完全解构,不比如我们只用到数组的第一项。

    js 复制代码
    let [a] = ['JavaScript', 'vue', 'Node'];
    
    console.log(a); // JavaScript

1.2 解构原理

  1. 我们来简单说一下,为什么数组和对象可以解构,根本原因是我们的对象有Interator接口

    js 复制代码
    let web = ['JavaScript', 'Vue'];
    
    console.log(web.__proto__);

有了这个接口,我们还可以对数组或对象进行遍历。

拓展 :在ES6中SetMap也是可以解构和遍历的。

1.3 设置默认值

  1. 解构允许我们设置一个默认值,当我们取不到值的时候就会显示默认值

    js 复制代码
    let [first, second = 'iyongbao' ] = ['Daven'];
    
    console.log(first, second); // Daven iyongbao
  2. 注意 如果数组的某一项是undefined,那么也会启用默认值。而null是正常赋值的。

    js 复制代码
    let [a, b = 'Vue', c] = ['JavaScript', undefined, null];
    
    console.log(a, b, c); // JavaScript Vue null
  3. 这里我给大家出一道面试题,大家看看会打印什么?

    js 复制代码
    let [x = y, y = 1] = [];
    
    console.log(x, y); // ??? 

为什么会这样呢?欢迎评论区告诉我。

二、对象的解构赋值

2.1 基本用法

  1. 解构不仅适用于数组,也适用于对象。但是二者有一个很明显的区别。先把结论和说一下:数组是有序的,而对象可以是无序的,因为对象是一个个键值对(key=>value)

    解构数组变量的取值由数组的位置来决定,解构对象需要变量名和对象属性一致才能取到正确的值。

    js 复制代码
    // 第一种写法
    // let { username, age } = { username: 'iyongbao', age: 26 };
    
    // 第二种:顺序可以颠倒,但是值不会变
    let { age, username, hobbys } = { username: 'iyongbao', age: 26, hobby: 'Vue' };
    
    console.log(username, age, hobbys); // iyongbao 26 
    console.log(hobby); // undefined
  2. 如果我就想变量名和对象属性名不一样,也是可以操作的。

    js 复制代码
    let { age: aaa } = { username: 'iyongbao', age: 26 };
    
    console.log(aaa); // iyongbao
    console.log(age); // 报错:ReferenceError: age is not defined
  3. 和数组一样,对象也是支持嵌套解构的

    js 复制代码
    let { userInfo: { hobby }} = { userInfo: { name: 'iyongbao', age: 26, hobby: ['Vue', 'React'] } };
    
    console.log(hobby); // ['Vue', 'React']

    这其实就是对象的多次解构

2.2 对象解构过程

我们来聊一聊这个解构赋值的过程是怎么样的。

js 复制代码
let { username: username } = { username: 'iyongbao', age: 26 };
  1. 解构: 程序会去{ username: 'iyongbao', age: 26 }对象中找属性为username的值;
  2. 赋值:找到后赋值给我们声明name变量,因为ES6特性,如果值一样,我们可以省略
  3. 所以说真正被赋值是后者不是前者

所以总结出为什么报错,age是匹配的模式,aaa才是真正的变量。

2.3 设置默认值

  1. 和数组一样,解构对象也是可以设置默认值的,大同小异。

    js 复制代码
    let { color = 'red' } = {};
    let { name, age = 26 } = { name: 'iyongbao' }
    
    console.log(color, name, age); // red iyongbao 26

注意 :默认值生效条件是获取的值为undefined

js 复制代码
let { color = 'red' } = { color: undefined };

let { background = 'green' } = { background: null };

console.log(color, background); // red null

三、字符串的解构赋值

3.1 基本用法

  1. 字符串也是可以进行解构赋值的,编辑器会把字符串转换为一个类似数组对象

    js 复制代码
    let [a, b, c, d, e, f, g] = 'iyongbao';
    
    console.log(a, b, c, d, e, f, g); // i y o n g b a
  2. 我们也可以解构出来字符串长度

    js 复制代码
    let { length } = 'iyongbao';
    
    console.log(length); // 8

    为什么会这样 :首先程序包装我们的字符串为一个实例对象,让这个实例去访问指定的属性或方法,然后获取对象中的length,最后销毁自己。(其实String在底层字符串是以字符数组的形式保存的。)

四、函数参数的解构赋值

函数参数也是可以进行解构赋值

js 复制代码
function add ([x, y]) {
    return x + y;
}

console.log(add([1, 2])); // 3

4.1 参数默认值

  1. 可以给参数设置默认值(第一种)

    js 复制代码
    function foo ({ x = 1, y = 2}) {
        return [x, y];
    }
    
    foo({ x: 3, y: 4}); // [3, 4]
    foo({ x: 5 }); // [5, 2]
    foo({}); // [1, 2]

上面的函数需要传入一个对象,通过解构赋值得到对应的值,如果解构失败则使用默认值

  1. 可以给参数设置默认值(第二种)

    js 复制代码
    function foo ({ x, y } = { x: 1, y: 2}) {
        return [x, y];
    }
    
    foo({ x: 1, y: 2}); // [1, 2]
    foo({ x: 3 }); // [3, undefined]
    foo({}); // [undefined, undefined]
    foo(); // [1, 2]

这种赋值注意是整体赋值只要我们传入参数默认值不起作用了。

思考:看一看一下会打印什么值:

js 复制代码
let newArr = [1, undefined, 2].map((x = 'iyongbao') => x);

console.log(newArr); // ???

五、闲聊

本来想的是码完字去写写代码,维护一下网站,可是写完发现已经快要11点了,今天也是元宵节,就饶过自己,好好睡一觉。真心希望我写的东西能让更多的人看到,也真心希望我写的东西能帮助到一些人,虽然很基础。

相关推荐
别拿曾经看以后~23 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死26 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试29 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人38 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人38 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR44 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter