解构赋值,你不能不懂!
时间:2022-05-06
本文章向大家介绍解构赋值,你不能不懂!,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
解构赋值
很多人可能和我一样,第一次看到这个词的时候摸不着头脑。但是冷静再看一遍好像明白了,“把数据结构分解开分别进行赋值”。
- 我们先看几个小例子
let [a,b,c] = [1,2,3];
console.log(a,b,c);//1 2 3
let {name,age} = {name:"jack",age:"18"};
console.log(name,age);//jack 18
let {toString,length} = "hello";
console.log(toString === String.prototype.toString,length);//true 5
let [a,b,c,d,e] = "world";
console.log(a,b,c,d,e);//w o r l d
let {shift,length,key} =[1,2,3];
console.log(shift,length,key);//[Function: shift] 3 undefined
function fo([x,y,z]){
console.log(x,y,z);
}
fo([3,4,2]);//3,4,2
function fobj({x,y,z}){
console.log(x,y,z);
}
fobj({z:1,y:4,x:2});//2 4 1
let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x) // "a"
相信大家不难从上述的几段代码案例总结出来解构赋值的规律,我总结到如下几点: 1、解构主体为数组或者对象。 2、解构源必须具备Iterator接口或者经过转换之后具备Iterator接口。(什么是Iterator可看我接下来文章) 3、数组解构是按顺序进行解构(有序),对象是通过方法名或者属性名进行结构(无序)。 4、数组解构解构源会被转换为数组,对象解构解构源会被转换成对象。 5、解构对象时关键词解构会从当前实例持续向上访问原型链直到查不到返回undefined。
以上总结包含了大部分基础场景我们会遇到的情况,但还是有更多的细节需要我们注意下:
- 我们可以嵌套解构
let [a,[b,{name,age}],d] = [1,[4,{name:1,age:1}],6];
console.log(a,b,d,name,age);//1 4 6 1 1
- 我们也可以改变解构的变量名
var {b:x,a:y} = {a:1,b:2};
console.log(x,y);//2 1
- 解构赋值可以设置默认值
var [x=1,y=2] = [,0];
console.log(x,y);//1 0
var {x=1,y=2] = {y:0};
console.log(x,y);//1 0
- 数组解构赋值对于不可迭代实例将报错
let [val] = 1;
let [val] = false;
let [val] = NaN;
let [val] = undefined;
let [val] = null;
let [val] = {};
- 数组解构可以跳跃赋值
//取出数组第三个
var [,,x] = [1,2,4];
console.log(x)//4
- 数组解构可以截取
let [,...x] = [1,2,4];
console.log(x)//[ 2, 4 ]
那它有哪些用途呢?
1、交换变量,是一种很酷的玩法
var {x:y,y:x} = {x:1,y:2};
console.log(x,y);//2 1
let x=1;let y = 2;
[y,x] = [x,y];
console.log(x,y);//2 1
2、接受函数返回的多个值
function test(){
return [1,2,3];
}
let [a,b,c] = test();
console.log(a,b,c);//1 2 3
function test(){
return {x:1,y:2,z:3};
}
let {y,z,x} = test();
console.log(y,z,x);//1 2 3
3、接受不按顺序的函数参数
function get({name,age,sex}){
console.log(name,age,sex);
}
get({name:"Topqiang",age:24,sex:1});//Topqiang 24 1
get({age:24,name:"Topqiang",sex:1});//Topqiang 24 1
get({name:"Topqiang",sex:1,age:24});//Topqiang 24 1
接口封装调用函数再也不用考虑参数顺序了,以后我们在封装方法提供工具包时就可以让我们的关注点放在业务本身而无需关注参数传入的顺序上。这是多么美好的一件事。 4、设置默认值
function get({name="topqiang",age,sex}){
console.log(name,age,sex);
}
get({age:24,sex:1});//Topqiang 24 1
5、为模块化编程提供优雅的模块引入方式
const {read,write} = require("fs");
6、函数的参数列表可以自动装载成数组
function getarr(...args){
console.log(args);
}
getarr(1,23,4);//[ 1, 23, 4 ]
。。。还有我没有发现的好处。。。
以上就是我对解构赋值的一些总结,希望能对还没入门的你提供到一些帮助。es6给我们提供了很多优美的语法糖,让我们编起码来更优雅,更易读(前提懂es6),更规范。但是这些语法糖相对es5实现方式性能怎么样?要不要来我们现场交流交流呢(详情请阅读原文找到我)!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法