什么是解构赋值?

时间: 2019-07-10阅读: 140标签: 变量

解构赋值给我们一种新的变量赋值方式,主要可以利用数组解构赋值和对象解构赋值。它的用途包括:交换变量值,提取函数返回值,函数参数定义,默认值设定等等,给我们编程带来便利。


解构赋值的用途

1.交换变量的值
var x = 1;
var y = 2;
[x,y] = [y,x];//成功交换x,y的值。

2.提取函数返回的多个值(实现快速的提取对应的值)
function demo(){
    return {"name":"张三","age":21}
}
var {name,age} = demo();
console.log(name);//结果:张三
console.log(age);//结果:21

3.定义函数参数(方便提取JSON对象中想要的参数)
function demo({a,b,c}){
    console.log("姓名:"+ a);
    console.log("身高:"+ b);
    console.log("体重:"+ c);
}
demo({a:"张三",b:"1.72m",c:"50kg",d:"8000"});

4.函数参数的默认值
function demo({name="张三"}){
    console.log("姓名:"+name);//结果:姓名:张三
}
demo({});
1.数组的解构赋值
var [a,b,c] = [1,2,3]; //把数组的值分别赋给下面的变量;
console.log(a);//a的值为1
console.log(b);//b的值为2
console.log(c);//c的值为3

1).结构赋值可以嵌套的
var [ a,b,[ c1,c2 ] ] = [ 1,2,[ 3.1,3.2 ] ];
console.log(c1);//结果:c1的值为3.1
console.log(c2);//结果:c2的值为3.2

2).不完全解构
var [a,b,c] = [1,2];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2

3).赋值不成功,变量的值为undefined
var [a,b,c] = [1,2];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为undefined

4).允许设定默认值
var [a,b,c=3] = [1,2];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为3

5).覆盖默认值3
var [a,b,c=3] =[1,2,4];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为4

注意:当新的值为undefined的时候,是不会覆盖默认值的。


2.对象的解构赋值 
 var { a,b,c } = {"a":1,"c":3,"b":2};
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为3

var { a } = {"b":2};
console.log(a);//结果:a的值为undefined

var { b:a,} = {"b":2};
console.log(a);//结果:a的值为2


1)对象解构赋值也可以嵌套
var {a:{b}} = {"a":{"b":1}};
console.log(b);//结果:b的值为1

2)可以指定默认值
var {a,b=2} = {"a":1};
console.log(b);//结果:b的值为默认值2

3.字符串的解构赋值
var [a,b,c,d,e,f] = "123456";
console.log(a);//1
console.log(b);//2
console.log(c);//3
console.log(d);//4
console.log(e);//5
console.log(f);//6


链接: http://www.fly63.com/article/detial/4136

js变量提升的坑

在js函数内部是可以直接修改全局的变量的,个人感觉是不好的设计, 但是确实存在这个概念,原理:先查看有没有函数变量bb,查看形参有没有bb

如何给程序中的变量起个好名字?

作为开发人员,你要花费大量的敲代码时间来创建变量和考虑给变量起个名字。 名字无处不在。 你可以命名文件、类、方法和变量。而命名的不同导致有的是好代码,有的是糟糕的代码,最终这会严重影响代码维护的成本

js避免污染全局变量

造成污染全局变量的原因?在经典页面中,经常会有这样的引用js,上面定义的函数都是全局变量 这就造成了污染全局变量,那么这样有什么危害呢?随着项目的变大,全局变量越来越多,变量很容易覆盖。

js变量提升

首先先看下变量提升的规则:1.变量声明、函数声明都会被提升到作用域顶处;2.当出现相同名称时,优先级为:变量声明 < 函数声明 < 变量赋值,我们看下代码在js编译器的实际运行顺序,结合规则看下你就懂了

理解JS变量提升

本文讲解Javascript变量提升引起的问题以及如何规避。今天看到一道有意思的面试题,考察的还真是JS的基本功,理解1:立即执行函数有独立的作用域,访问不到外部name

js判断变量是否为整数

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。isNaN() 全局函数来判断一个值是否是 NaN 值。使用Math.round、Math.ceil、Math.floor判断整数取整后还是等于自己

Js中的变量提升

变量提升是 Javascript 中一个很有趣,也让很多人迷惑的特征。那么,Javascript 为什么要设计这个特征呢?我来看 Javascript 创始人 Brendan Eich 的 twitter:

ES6 变量和函数参数的临时死区

ES6的第一章便是讲新增了let和const这两个变量,可以用于定义块级作用域的变量。相对于于var定义的变量,由let和const定义的变量作用域不会被提升。但是值得注意的是,由let和const定义的变量还拥有一个会让人恨容易犯错的特性:临时死区

Js变量的扩展与解构

在ES6之前定义变量都是用var这个关键字,var是在全局的环境下声明的一个变量,而且这个变量有一个变量的提升;也就是说,即使把变量放在后面,但是JavaScript引擎的运行的时候会把变量提到代码的最上层,然后先声明再赋值

Js中变量声明效率问题

应该是JavaScript中访问变量中具体值时:【theVar1】的形式要比【theVar.theVar1】要快。也就是说,【多个具有联系的常量值独自定义成多个变量】的做法的效率要比【多个具有联系的常量值定义成一个变量的多个属性】来得高

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全