tian~

Appearance

Return to top
on this page

扫码联系

编程学习&& IT

tian

解构赋值

课程简介

学什么

数组的解构赋值

对象的解构赋值

其它数据类型的解构赋值

数组的解构赋值

原理

默认值

应用

对象的解构赋值

原理

默认值

应用

其他数据类型的解构赋值

字符串的解构赋值

数值和布尔值的解构赋值

undefined和null的解构赋值

1.解构赋值初识

  • 认识解构赋值
  • 什么是解构赋值

1.认识解构赋值

js
const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];
console.log(a, b, c);

使用解构赋值

js
const [a, b, c] = [1, 2, 3];
console.log(a, b, c);

2.什么是解构赋值

解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量

2.数组解构赋值

数组解构赋值的原理

  • 模式（结构)匹配

  • 索引值相同的完成赋值

1.模式（结构）匹配

js
 [] = [1, 2, 3];

2.索引值相同的完成赋值

js
const [a, b, c] = [1, 2, 3];
console.log(a, b, c);

练习

不取的，可以直接用逗号跳过

js
const [a, [, , b], c] = [1, [2, 4, 5], 3];
console.log(a, b, c);

数组解构赋值的默认值

  • 默认值的基本用法
  • 默认值的生效条件

1.默认值的基本用法

js
const [a, b] = [];
//相当于
// const [a, b] = [undefined, undefined];

使用默认值

js
const [a = 1, b = 2] = [];
console.log(a, b);

2.默认值的生效条件

只有当一个数组成员严格等于（===）undefined 时，对应的默认值才会生效

js
const [a = 1, b = 2] = [3];
const [a = 1, b = 2] = [3, 0];
const [a = 1, b = 2] = [3, null];
const [a = 1, b = 2] = [3, undefined];
console.log(a, b);

3.默认值表达式

如果默认值是表达式，默认值表达式是惰性求值的

js
const fn = () => {
    console.log('我被执行了');
    return 666;
};
// const [x = fn()] = [1];

const [x = fn()] = [];
console.log(x);

4.默认值可以引用解构赋值的其他变量

前提是该变量必须是已经声明的

js
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError
//上面最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明

数组解构赋值的应用

1.常见的类数组的解构赋值

arguments

js
function fn() {
    // console.log(arguments);
    // console.log(arguments.push); //undefined
    const [a, b] = arguments;
    console.log(a, b);
}
// fn();
fn(1, 2);

NodeList

html
<p>111</p>
<p>222</p>
<p>333</p>

<script>
	console.log(document.querySelectorAll('p'));
    
    const [p1, p2, p3] = document.querySelectorAll('p');
    
	console.log(p1, p2, p3);
</script>

2.函数参数的解构赋值

js
const array = [1, 1];

const add = arr => arr[0] + arr[1];

console.log(add(array));

使用解构赋值

js
const add = ([x, y]) => x + y;

console.log( add(array) );

//还可以使用函数默认值
const add = ([x = 0, y = 0]) => x + y;
console.log( add([]) );

3.交换变量的值

js
let x = 1;
let y = 2;
// let tmp = x;
// x = y;
// y = tmp;
// console.log(x, y);

[x, y] = [y, x]; 
//相当于
[x, y] = [2, 1];
console.log(x, y);

3.对象解构赋值

对象解构赋值的原理

模式(结构)匹配

属性名相同的完成赋值

1.模式（结构）匹配

js
{}={}

2.属性名相同的完成赋值

js
 const { age, username } = { username: 'tian', age: 18 };

完整写法

js
const { "age": age, "username": username } = { username: 'tian', age: 18 };
//属性名引号可以省略

取别名

js
const { age: age, username: uname } = { username: 'tian', age: 18 };
console.log(age, uname);

对象解构赋值的注意事项

  • 对象解构赋值的默认值

  • 将一个已经声明的变量用于解构赋值

  • 可以取到继承的属性

1.默认值的生效条件

对象的属性值严格等于 undefined 时，对应的默认值才会生效

js
const { username = 'ZhangSan', age = 18} = { username: 'tian', age:58};
console.log(username);
console.log(age); //18

2.默认值表达式

如果默认值是表达式，默认值表达式是惰性求值的

3.将一个已经声明的变量用于解构赋值

如果将一个已经声明的变量用于对象的解构赋值，整个赋值需在圆括号中进行

js
let { x } = { x: 1 };
console.log(x);
js
let x = 2;
//不加圆括号会理解为代码块
({ x } = { x: 1 });
console.log(x);

数组就不需要

js
let x = 2;
[x] = [1];
console.log(x);

4.可以取到继承的属性

js
const { a = 1 } = {}
console.log(a)
js
const { toString } = {};
console.log(toString);

//toString 是对象继承而来的

//Object.prototype
console.log(Object.prototype);
console.log({});

对象解构赋值的应用

1.函数参数的解构赋值

js
const logPersonInfo = (user) => console.log( user.username, user.age);

logPersonInfo({ username: "tian", age: 18 });
js
const logPersonInfo = ( { username, age } ) => {
    console.log(username, age);
};

logPersonInfo({ username: "tian", age: 18 });

同样可以搭配默认值使用

js
const logPersonInfo = ({ username = "tian", age = 18 }) => {
    console.log(username, age);
};

logPersonInfo({});

2.复杂嵌套

js
const obj = {
    x: 1,
    y: [2, 3, 4],
    z: {
        a: 5,
        b: 6,
    },
};

// 对这个复杂对象进行解构赋值
let {
    y: [, three],
    y: y,
    z: z,
    z:{
        b:b
    }
} = obj;

console.log(three);
console.log(y);
console.log(z);
console.log(b);

4.其它数据类型的解构赋值

1.字符串的解构赋值

数组形式的解构赋值

js
const [a, b, , , c] = 'hello';
console.log(a, b, c);

对象形式的解构赋值

js
const { 0: a, 1: b, length } = 'hello';
console.log(a, b, length);
console.log('hello'.length);

//由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
console.log(first); //1
console.log(last); //3

字符串既可以按数组形式来解构赋值，也可以按对象形式来解构赋值

2.数值和布尔值的解构赋值

先将等号右边的值转为对象

js
//如果数值是123会转换为对应的包装对象
console.log(new Number(123));

数值

js
const { a = 1, toString:s } = 123;

console.log(a,s);

console.log(Number.prototype.toString === s); // true

布尔值

js
const { b = 2, toString: s } = true;

console.log(b, s);

console.log(Boolean.prototype.toString === s);  // true

3.undefined 和 null 的解构赋值

由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错

js
const { toString } = undefined;
const { toString } = null; //报错

课程总结

数组的解构赋值

对象的解构赋值

其它数据类型的解构赋值

数组/对象的解构赋值

数组/对象解构赋值的原理

模式(结构)匹配

索引值/属性名相同的完成赋值

注意:数组是索引值，对象是属性名

数组成员/对象的属性值严格等于(===) undefined时，对应的默认值才会生效

如果默认值是表达式，默认值表达式是惰性求值的

对象的解构赋值

将一个已经声明的变量用于解构赋值，整个赋值需在圆括号中进行

对象的解构赋值可以取到继承的属性或方法

其它数据类型的解构赋值

字符串可以按数组或对象的形式解构赋值

数值和布尔值的解构赋值需要先将等号右边的值转为对象

undefined和null无法转为对象，解构赋值都会报错