现代Javascript教程 - 学习笔记07 - 解构赋值

Tomorrowed
158 阅读5分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

解构赋值 - es6语法学习！主要应用于数组 和对象的赋值！

看了后面的文章，把解构赋值和rest参数和spread语法一起写了！

  • rest参数 - 在函数位置上的 ... 代表剩余参数
  • spread语法 - 用于拆解数组或对象，也是 ... 和rest的区别，注意位置！！

学习链接

解构赋值

Rest 参数与 Spread 语法 (javascript.info)

简介

解构赋值 - 主要应用于 数值 和对象，用于提取它们的一部分，也可以简化赋值过程！

再次介绍一下数组，对象 和Map，set

  • 数组，基于对象，开辟一个连续的空间，一个有序的集合
  • 对象，主要存储键值对，其中键得是 字符串
  • Map，也可以存储键值对，键可以是任意值，NaN也可以当键！
  • Set，存储唯一 值！值的集合！

为什么要解构？ 如果我们只需要对象，数组中的一部分，可以通过解构的方式提取出来！

数组的解构！- []

let arr = ["John", "Smith"]
let [firstName, surname] = arr; - 注意这里解构数组，用的方括号！！

也可以这样！
let [firstName, surname] = 'John Smith'.split(' '); - 重点是解构的是数组！可迭代！

它等于
let firstName = arr[0]
let surname = arr[1] - 上面一个方括号就可以解决！

使用逗号，可以忽略不要的元素！
let [firstName, ,title] = 'John Smith XXXXXX'.split(' ')
这个title = XXXXXX

左侧被赋值的，也可以是对象中的属性！
let user = {}
let [user.firstName, ,user.title] = 'John Smith XXXXXX'.split(' ')

for of 中的解构 - 对象
// [key, value] - 解构赋值
// Object.entries(user) 对象的遍历方法，返回 [key, value]
for(let [key, value] of Object.entries(user)) {
}

for of - map 
for(let [key, value] of map) { // 因为map是可迭代的！
}

数组解构总结：

  • 左侧被赋值用方括号，右侧可迭代！- 数组解构

交换变量值

  • 传统方法，一个临时变量保存，然后交换
  • [guest, amdin] = [admin, guest] - 这样就交换了

剩余参数 - 也叫rest参数

  • 在传入的参数中定义，如果传入的参数太多，不想一个一个写上去怎么办？
  • 可以在最后一个参数上，写入...rest,这个重点是前面的三个点，后面的名字有意义即可
  • 一定要放在最后！
  • 这个rest的值，就等于剩下的参数了！

image.png

默认值

  • 在解构赋值的时候，
  • 如果右边的值，为空怎么办？
  • 可以提前给左边的值赋值，如果没有的话，就优先使用！

image.png

对象的解构！- {}

数组和对象都是可迭代的 - 可以循环！

看看对象的解构！

  • 用的是 {} 大括号！- 数组用的是方括号[]！
  • 等号右侧应该是个对象！
  • 对象的解构意思是，把对象属性的值，赋值给变量！
  • 变量的顺序不重要，变量，看起来都是对象的键。。

image.png

如何修改解构赋值的 变量名？

  • 加个 : 冒号 - 修改名字
  • 代表 - “什么值：赋值给谁”
  • 如果用的是 = 等号，代表默认值
  • 冒号和等号，还可以结合使用，即修改了名字，又有了默认值。。。。。

image.png

对象中的剩余参数

  • 也是使用 ...代表剩下的，通过它可以访问右侧对象中的剩余变量！
  • 低级的浏览器，可能不支持，需要polyfill，第三方工具。。如bable

image.png

这里有个特殊的情况。。

  • 以上代码，都是用 解构的方式 初始化 出来的变量！
  • 如果事先已经有了变量，如何进行解构赋值？？？？
  • 在外层加个括号，，还没有遇见过这样的情况。。先记录一下。。

image.png

嵌套对象，解构！

  • 指的是，对象有很多层级 - 对象套对象 或对象套数组，接着往下套。。。。
  • 有啥定义啥。。。。

image.png

智能函数参数

  • 指的是，传递参数时
  • 如果要传递的有很多很多，一个一个写，很麻烦
  • 如何解决？ 直接传递一个对象
  • 然后在函数的参数中，用解构的方法，解构那个传递的对象！
  • 如果想直接用默认值，直接传递一个空的对象，啥都不传，会报错。。

image.png

2232. 向表达式添加括号后的最小结果

2232. 向表达式添加括号后的最小结果 - 力扣（LeetCode） (leetcode-cn.com)

给你一个下标从 0 开始的字符串 expression ，格式为 "+" ，其中 和 表示正整数。请你向 expression 中添加一对括号，使得在添加之后， expression 仍然是一个有效的数学表达式，并且计算后可以得到 最小 可能值。左括号 必须 添加在 '+' 的左侧，而右括号必须添加在 '+' 的右侧。

用到了解构赋值，也用到了之前学的字符串，数组转字符串，很棒的题！

思路：

  • 给了一个字符串 247+38 ， 他的最小值是 2 * （47 + 38 ） = 2 * 85 = 170
  • 以 加号，分两个数组，分出的数组，当作倍数，必须要添加 一个括号进去！
  • 枚举 - 两个for，用slice分割数组
  • 每次求解和，如果出现更小的数，改变值，并记录下标
  • 退出循环的时候，就找到最小值的位置，可以插入 左右括号 - 左右两个数组中。。
  • 返回，把数组拼接 加号，通过join返回字符串。。。

// 以 + 做为分割点 
let arr = expression.split('+'); //两个数组 - 247，38，还需要继续拆！
let min = Infinity, minIndex = [0, 0];  // 最小值的初始值
let left = arr[0].split(''), right = arr[1].split(''); // 两个数组！用于插入左右括号

// 比较数据 
for(let i = 0; i < left.length; i++) // 左侧枚举
{ 
    //右侧从第一个位置开始，因为括号，不能直接加在 加号旁边，至少得有个数。。。
    for(let j = 1; j <= right.length; j++) 
    { 
        // 前面的+号，是转成数字，
        // 通过slice分割数组并串联成字符串，前面用 加号，隐式转换成数字类型
        // 公式，就是，拆出去的乘以 中间用括号包裹的， 乘以右边拆出去的。
        // 主要就是这个下标
        // [0,i] * ([i,] + [0, j]) * [j,] - 如果不存在留个初始值。
        let sum = (+left.slice(0, i).join('') || 1) *
        ((+left.slice(i).join('') || 1) + (+right.slice(0, j).join('') || 0)) * 
        (+right.slice(j).join('') || 1); 
        
        if(sum < min) { 
            min = sum; 
            minIndex = [i, j]; // 记录下标，因为值变小了。。
         } 
     } 
} 
  
// 插入 
left.splice(minIndex[0], 0, '('); // 左侧插入 左括号 - splice - yyds
right.splice(minIndex[1], 0, ')'); 
        
// 拼接！ 
return [...left, '+', ...right].join('') }; - 解构赋值！！spread 语法！

总结

定义，传送，接收，解构！

解构主要用于数组和对象，写到这，总算是看出方便之处了！

  • 数组解构 - [], 对象解构 - {}
  • 剩余参数 - 后面的参数不想写了，可以用！
  • 解构赋值 - 不想一个一个let，不想写数组下标，可以用！
  • 解构用于交换值，很好！
  • for of中解构，[key, value]
  • 嵌套对象解构，一个一个按层级走吧。。。
  • 智能函数参数 - 传入对象，在参数中解构，使用默认值就很棒！

你没有摘到的，只是春天里的一朵花，整个春天还是你的。

avatar
文章
阅读
粉丝