ES6新特性篇之解构赋值(Destructuring,前端开发技术【附源码】_进阶大礼包

[](

)简介

=================================================================

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

[](

)一、对象的解构

======================================================================

[](

)1.基本赋值


 var o = {p: 42, q: true};  var {p, q} = o;  console.log(p); // 42  console.log(q); // true 

[](

)2.无声明赋值


一个变量可以独立于其声明进行解构赋值。

 var a, b;  ({a, b} = {a: 1, b: 2});  console.log(a); // 1  console.log(b); // 2 

注意:

  1. 赋值语句周围的圆括号 ( … ) 在使用对象字面量无声明解构赋值时是必须的。

    {a, b} = {a: 1, b: 2} 不是有效的独立语法,因为左边的 {a, b} 被认为是一个块而不是对象字面量。

  2. 你的 ( … ) 表达式之前需要有一个分号,否则它可能会被当成上一行中的函数执行。

  3. 左右两边语句的变量名称需要一一对应

[](

)3.给新的变量名赋值


可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。

 var o = {p: 42, q: true};  var {p: foo, q: bar} = o;  console.log(foo); // 42   console.log(bar); // true  

注意:

  1. 可以不需要定义foo、bar变量

[](

)4.默认值


变量可以先赋予默认值。当要提取的对象没有对应的属性,变量就被赋予默认值。

 var {a = 10, b = 5} = {a: 3};  console.log(a); // 3  console.log(b); // 5 

[](

)5.给新的变量命名并提供默认值


一个属性可以同时 1)从一个对象解构,并分配给一个不同名称的变量 2)分配一个默认值,以防未解构的值是 undefined。

 var {a:aa = 10, b:bb = 5} = {a: 3};  console.log(aa); // 3  console.log(bb); // 5 

注意:

  1. 可以不需要定义aa、bb变量

[](

)6.对象属性计算名和解构


计算属性名,如 object literals,可以被解构。

let key = “z”;

let { [key]: foo } = { z: “bar” };

console.log(foo); // “bar”

[](

)二、数组的解构

======================================================================

[](

)1.基本用法


 var a, b, rest;  [a, b] = [10, 20];  console.log(a); // 10  console.log(b); // 20 

[](

)2.左右两边都是变量


右边也可以是函数的返回值

 // 例一  var a, b;   var c = [1, 2];  [a, b] = c;   console.log(a); // 1  console.log(b); // 2  // 例二  function f() {    return [1, 2];  }  var a, b;   [a, b] = f();   console.log(a); // 1  console.log(b); // 2 

[](

)3.默认值


为了防止从数组中取出一个值为undefined的对象,可以在表达式左边的数组中为任意对象预设默认值。

 var a, b;  [a=5, b=7] = [1];  console.log(a); // 1  console.log(b); // 7 

[](

)4.交换变量


在一个解构表达式中可以交换两个变量的值。没有解构赋值的情况下,交换两个变量需要一个临时变量(或者用低级语言中的XOR-swap技巧)。

 var a = 1;  var b = 3;  [a, b] = [b, a];  console.log(a); // 3  console.log(b); // 1 

[](

)5.忽略某些返回值


你也可以忽略你不感兴趣的返回值:

 function f() {    return [1, 2, 3];  }  var [a, , b] = f();  console.log(a); // 1  console.log(b); // 3 

你也可以忽略全部返回值:

 [,,] = f(); 

[](

)6.将剩余数组赋值给一个变量


当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量。

 var [a, ...b] = [1, 2, 3];  console.log(a); // 1  console.log(b); // [2, 3] 

注意:

  1. 如果剩余元素右侧有逗号,会抛出 SyntaxError,因为剩余元素必须是数组的最后一个元素。
 var [a, ...b,] = [1, 2, 3];  // SyntaxError: rest element may not have a trailing comma 

[](

)三、函数中的解构

=======================================================================

[](

)1.基本用法


 function test({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})   {    console.log(size, cords, radius);  }  test({    cords: { x: 18, y: 30 },    radius: 30  }); // big {x: 18, y: 30} 30 

[](

)2.在es6箭头函数中的用法


在箭头函数中访问不了arguments,那入参在不确定的情况下怎么样动态获取呢?箭头函数的特性[?戳这里](

)

 var test = (...arg) => {  console.log(arg)  }  test(1,2,3) // [1, 2, 3] 

[](

)四、字符串中的解构

========================================================================

[](

)1.获取字符单个字符


 var [a, b, c] = 'abcde';  console.log(a);//"a"  console.log(b);//"b"  console.log(c);//"c" 

[](

)2.获取字符串长度


 const { length } = 'abcde';  console.log(length);// 5 

[](

)五、vue项目实战中应用

===========================================================================

[](

)1.对象合并属性及提取变量


 // vue监听不到object属性变化时  let tmp = {a:"change"}  this.obj = Object.assign({},this.obj, ...tmp)  // 提取接口返回result的值  let result = {a: 'input', b: 'button'}  let {a, b} = result 

[](

)2.在实际项目中import的用法


  // dom.js  /* istanbul ignore next */  /*eslint-disable*/  import Vue from 'vue';  const isServer = Vue.prototype.$isServer;  const SPECIAL_CHARS_REGEXP = /([:-_]+(.))/g;  const MOZ_HACK_REGEXP = /^moz([A-Z])/;  const ieVersion = isServer ? 0 : Number(document.documentMode);  ### 文末  我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。  首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。  更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。  **前端面试题汇总**  ![](https://s2.51cto.com/images/20210916/1631776576797922.jpg)  **JavaScript**  **[CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**  ![](https://s2.51cto.com/images/20210916/1631776577648104.jpg)  **性能**  ![](https://s2.51cto.com/images/20210916/1631776577933266.jpg)  **linux**  ![](https://s2.51cto.com/images/20210916/1631776577240460.jpg)  **前端资料汇总**  ![](https://s2.51cto.com/images/20210916/1631776578628689.jpg)

本站由小牛团队全力维护,小牛十年了,大家已经步入中年 。本站源码全部经过团队成员测试并调试,价格可能比其它网站略贵几元钱,不解释!
小牛资源 » ES6新特性篇之解构赋值(Destructuring,前端开发技术【附源码】_进阶大礼包

发表评论

全站资源亲测可用,价格略高几元,不解释

立即查看 了解详情