美文网首页ES6
ES6知识点复习(二)

ES6知识点复习(二)

作者: 假笑boys | 来源:发表于2022-07-15 15:20 被阅读0次

变量的解构赋值

\color{#FF8C00}{\rm\large{数组的解构赋值}}
  let [a,b,c] = [1,2,3]
  console.log(a,b,c)  // 1,2,3
  let [one,...two] = [12,13,14,15]
  console.log(one,two)  // 12,[13,14,15]
  let [x,y,...z] = ['a']
  console.log(x,y,z)   // a undefined []
  // 对于 set结构,也可以使用数组的解构赋值
  let [first,twos,three] = new Set(['a','b','c'])
  console.log(first)
\color{#FF8C00}{\rm\large{默认值}}
  • 解构赋值允许指定默认值,es6内部使用严格相等运算符 ===
  • 默认值可以引用解构赋值的其他变量,但该变量必须是已经声明。
  let [x=1,y=x] = []
  console.log(x,y) 1,1
  let [x=1,y=x] = [2]
  console.log(x,y)  // 2,2
  let [x=1,y=x] = [1,2]
  console.log(x,y)  // 1,2
  let [x=y,y=1] = [];
  console.log(x,y)  //  Cannot access 'y' before initialization  无法在初始化之前使用 
  因为x用y做默认值时,y还没有声明。

\color{#FF8C00}{\rm\large{对象的解构赋值}}
  • 解构不仅可以用于数组,还可以用于对象
    let { foo,bar} = {foo:'aaa',bar:'bbb'}
    console.log(foo,bar) // aaa,bbb
  • 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
 let { baz } = {foo:'aaa',bar:'bbbb'}
 console.log(baz)  // undefined

  • 解构失败 变量的值等于 undefined
  • 如果变量名与属性名不一致 必须写成如下:
  let { foo:baz } = {foo:'justin',bar:'bieber'}
  console.log(baz)
  • 对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
\color{#FF8C00}{\rm\large{对象解构赋值-默认值}}
  var { x=3 } = {}
  console.log(x) // 3
  var {x,y=5} ={x:1}
  console.log(x,y) // 1,5
  var {x:y=3} ={}
  console.log(y) // 3
  var {x:y=3} = {x:5}
  console.log(y) // 5

\color{#FF8C00}{\rm\large{注意点}}
  • 将一个已经声明的变量用于解构赋值,必须非常小心
  • 错误写法
 let x;
 {x} = {x:1}
 console.log(x) //SyntaxError: Unexpected token '=' 
  • 正确写法
 let x;
 ({x}={x:1}) 
 console.log(1)`

\color{#FF8C00}{\rm\large{字符串的解构赋值}}
const [a,b,c,d,e] = 'justin'
console.log(a,b,c,d,e) // j u s t i 
 
  • 类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值
let {length:len} ='justin'
console.log(len) // 6
\color{#FF8C00}{\rm\large{数值和布尔值的解构赋值}}
  • 解构赋值时,如果等号右边是数值和布尔值,则会转为对象
let {toString:s} = 1234
console.log(s=== Number.prototype.toString)  // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

\color{#FF8C00}{\rm\large{函数参数的解构赋值}}
  function add([x,y]){
    return x+y
  }
  add([1,2]) // 3
  • 比较特殊例子
  [[1,2],[3,4]].map(([a,b]) => a+b)  // [3,7]
  • 特殊写法
  function move({x, y} = { x: 0, y: 0 }) {
    return [x, y];
  }

  move({x: 3, y: 8}); // [3, 8]
  move({x: 3}); // [3, undefined]
  move({}); // [undefined, undefined]
  move(); // [0, 0]
  • 上面代码是为函数move的参数指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。
\color{#FF8C00}{\rm\large{用途}}
  let x =1;
  let y =2;
  [x,y]=[y,x] 
  • 从函数返回多个值
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
  • 提取JSON数据
  • 函数参数的默认值
  • 遍历Map解构

相关文章

  • ES6知识点复习(二)

    变量的解构赋值 解构赋值允许指定默认值,es6内部使用严格相等运算符 === 默认值可以引用解构赋值的其他变量,但...

  • 004_ES6知识点总结(01)let及const声明

    ES6知识点整理 近期准备面试,把ES6的内容详细复习一遍整理来源素材:阮一峰《ES6标准入门》(第三版);htt...

  • 无标题文章

    综和复习本月知识点总结: 一:微信小程序 二:vue复习 三:js复习 四:新知识点 一:微信小程序知识点总结 开...

  • ES6知识点复习

    变量提升 JavaScript代码在执行时会经历3个主要的步骤(比起那些编译过程只有三个步骤的语言的编译器,Jav...

  • 原型与原型链以及继承

    今天复习下原型与原型链的知识,以及记录新学的继承知识点。 知识点纲要 原型与原型链 es5与es6继承 什么是原型...

  • ES6知识点复习(三)

    字符串的新增方法 返回布尔值,表示是否找到了参数字符串。 返回布尔值,表示参数字符串是否在原字符串的头部。 返回布...

  • ES6知识点复习(一)

    let 命令 let 用于声明变量。用法类似于 var 只在let命令所在的代码块内有效。 常见对比例子(var,...

  • Java并发知识点快速复习手册(下)

    前言 本文快速回顾了常考的的知识点,用作面试复习,事半功倍。 面试知识点复习手册 已发布知识点复习手册 Java基...

  • 2022年11月复习《独立思考》

    复习模板 日期: 分享者: 复习课程和知识点: 对知识点的理解(用你自己的话表达): 知识点的适用(使用)场景: ...

  • ES6面试、复习干货知识点汇总

    [Vue中文社区](javascript:void(0);) 今天 作者:StevenLikeWatermelon...

网友评论

    本文标题:ES6知识点复习(二)

    本文链接:https://www.haomeiwen.com/subject/zffcirtx.html