解构赋值的总结。论如何找到去学习js的知识点。
结构赋值有什么用?对我们有什么帮助?所有的知识都是为了给我们更好的体验,或者解决一些事情。我个人觉得只有这样这个知识才能体现出自己的价值,融入到你生活中,被你深深的记住。之前的学习过程中一直在看这个知识点说了什么?想着把他记住了。结果就是当下记住了,然后过几天就像从来没见过一样。仔细回想一下,这样的学习知识,很难落地。而不能落地,那就是无用功。最近,抱着这个学习的方法,果然大有提高。一天记住了array原型上所有的方法以及基本的用途。至今已经有一周了,早上回想了下,还是很熟悉。希望能帮助大家更好的学习。当然,在之后能够总结整理下更好了,我会把一个比较完整的知识点画一幅图。然后把用途和图对应起来记忆。--推荐一个思维导图软件mindMaster。
那么接下来不逼逼,看看结构赋值的理解。
1:定义。ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。首先我们要看下定义,重点赋值,从对象或者数组中提取出来进行赋值。这是他的目的。然后按照一定的模式,这是一些规则,我们抱着目的学习规则。
2:这里我直接去看他的作用了。按照说明有以下几点作用
(1):交换变量的值。比如如何实现x,y互换值。以前我们可能会定义一个中间量来实现,但是现在不用了。只要这样就好了
let x = 1; let y = 2; [x, y] = [y, x]; //这里后边的[y,x]是一个数组。相当于定义了一个数组。***是个数组 前边的[x,y]原本也是个数组,但这个时候他只是用x,y去对应数组中的对应位置的值。因此可以实现两个值的互换
(2):取得函数的返回值。比如我们请求后台的接口,后台会给我们一个对象里边包含状态码,响应提示文本,返回的数据。比如以下。
返回的对象 {code: 0, text:'成功上传文件',data:{name: 'hjd'}} 这个时候我们要进行处理了。在回调函数中 (data) => { if(String(data.code) === '0') { this.data = data.data } } 。 那么这个时候如果我们用解构赋值呐?很简单 ({code,data}) => { if(String(code) === '0') { this.data=data } }
(3):函数参数的默认值。
jQuery.ajax = function (url, { async = true, beforeSend = function () {}, cache = true, complete = function () {}, crossDomain = false, global = true, // ... more config } = {}) { // ... do stuff }; 指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句
3:解构赋值通常都在和默认值配合使用。比如函数参数设置默认值。那么默认值生效的条件是什么呐?严格不等于undefined。例如
-
let [foo = true] = [null]; console.log(foo) //foo这个时候为null let [foo = true] = []; console.log(foo) //foo这个时候就为true
4:可能最需要注意的就是对象的解构赋值。例如以下情况
let x; {x} = {x: 1}; // 这个时候会报错因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。所以我们要这样来解决。 let x; ({x} = {x: 1});