ES6新特性篇之解构赋值（Destructuring）及在项目实际中的应用(3)

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 4.**默认值**

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

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

• 二、数组的解构

• • 1.基本用法

• 2.左右两边都是变量

• 3.**默认值**

• 4.**交换变量**

• 5.**忽略某些返回值**

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

• 三、函数中的解构

• • 1.基本用法

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

• 四、字符串中的解构

• • 1.获取字符单个字符

• 2.获取字符串长度

• 五、vue项目实战中应用

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

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

简介

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

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

一、对象的解构

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

1.基本赋值

---

var o = {p: 42, q: true};

var {p, q} = o;

console.log§; // 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”

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

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

项目实战中应用

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

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

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

[外链图片转存中…(img-m5GaJCU0-1715778900196)]