JS ES6的变量的结构赋值

变量的结构赋值用户很多

1、交换变量的值

let x = 1;
let y = 2;
[x,y] = [y,x]

上面的代码交换变量x和变量y的值,这样的写法不仅简洁,易读,语义非常清晰

2、从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能讲他们放在数组或者对象里返回。了解解构赋值,取值这些值非常方便

//返回一个数组
function example(){
    return [1,2,3];
}
let [a,b,c] = example();[a,b,c];   //[1,2,3]
//返回一个对象
function example(){
    return {
        foo:1,
        bar:2
    };
}
let {foo,bar} = example();foo;   //1bar;   //2

3、函数参数的定义

解构赋值可以方便的讲一组参数与变量名对应起来。

//参数是一组有次序的值
function f([x,y,z]){
    console.log(x,y,z);
}
f([1,2,3]);  //1,2,3
//参数是一组无次序的值
function func({x,y,z}){
    console.log(x,y,z);
}
func({z:3,y:2,x:1}); //1,2,3

4、提取JSON数据

解构赋值对提取JSON对象中的数据尤其有用

let jsonData = {
    id:42,
    status:"OK",
    data:[123,456]
} ;
let {id,status,data:number} = jsonData;
console.log(id,status,number);   //42 "OK" (2) [123, 456]

5、函数参数的默认值

、、、

6、遍历Map结构

任何部署了Iterator接口的对象都可以使用for... of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值获取名和键值就非常方便。

var map = new Map();
map.set(‘first‘,‘hello‘);
map.set(‘second‘,‘world‘);

for(let [key,value] of map){
    console.log(key,value);
}

//first hello
//second world


如果只想获取键名,或者只想获取键值,可以这样写。

//获取键名
for(let [key] of map){
    console.log(key);
}

//first
//second

//获取键值
for(let [,value] of map){
    console.log(value);
}//hello//world

7、输入模块的指定方法

加载模块时,往往需要指定输入的方法。解构赋值使得输入语句非常清晰。

const {a,b} = require(‘source-map‘);

原文地址:https://www.cnblogs.com/chengxs/p/9286745.html

时间: 2024-11-09 03:58:52

JS ES6的变量的结构赋值的相关文章

变量的结构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解耦: 1 数组的解耦赋值 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ES6允许写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 这种写法属于'模式匹配',只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [foo, [[bar], baz]] = [1, [[2], 3]

【es6】变量解构赋值

1.数组解构赋值 let [a,b,c]=[1,2,3];//数组解构赋值,注意:左右两边格式需一致 let [a,b]=[1,2,3];//不完全解构,取位置靠前的值 let [a=1,b]=[undefined,2];//可以带默认值,内部解析必须是===undefined时,才会取默认值,注意,null都不能取默认值 2.对象解构赋值 变量必须与属性同名,可以不按顺序(不同于数组) let {foo,bar}={foo:1,bar:2}; let {foo:baz}={foo:1};//b

ES6-变量的结构赋值

比如有一个对象obj={name:'tom',age:11};,当我们需要将这个对象的name和age赋值给另外的变量时候,es5中是var name = obj.name;var age =obj.age;,在es6中针对这种将对象的属性(或者数组的值)赋值给外面的变量的需求,提供了一种更加简便的方式: //1 变量的解构赋值 let obj = {name:'tom',age:11}; //这种对象的结构赋值要求定义的变量名必须和对象的属性名一致,在这里必须是变量名必须是name和age /

深入理解JS中的变量作用域

在JS当中一个变量的作用域(scope)是程序中定义这个变量的区域.变量分为两类:全局(global)的和局部的.其中全局变量的作用域是全局性的,即在JavaScript代码中,它处处都有定义.而在函数之内声明的变量,就只在函数体内部有定义.它们是局部变量,作用域是局部性的.函数的参数也是局部变量,它们只在函数体内部有定义. 我们可以借助JavaScript的作用域链(scope chain)更好地了解变量的作用域.每个JavaScript执行环境都有一个和它关联在一起的作用域链.这个作用域链是

js中的变量提升

在js中 变量声明与赋值被认为是两个不同的操作,引擎首先会对前者进行优先编译,这部分工作就是找到所有的声明(例如函数声明function b(注:非函数表达式),变量声明var a),既然是优先执行,那么在一些代码结构中,后声明的function,var 变量就会提前解释: 例如 var a=3:引擎会认为这是两个操作  var a(声明); a=3(赋值),简而言之就是 先有蛋 后有鸡, 理解了这一点 这就很好解释如下的代码结构及其输出 a=2;var a; //定义声明提升console.l

day46homework常量字符串拼接结构赋值扩展运算符for-of循环map函数默认值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01定义常量.html</title> <!--常量--> <script> //常量:1.一旦定义 不能更改 const PI = 3.14;  // console.log(PI); // PI = 3.1415; error 

JS中的变量和输入输出

一.使用JS的三种方式 1.在HTML标签中,直接内嵌JS(并不提倡使用) <button onclick="alert('点你咋地')">点我</button> >>> 不符合w3c关于内容与行为分离的要求 2.在HTML页面中使用<script></script>包裹JS代码 <script type="text/javascript"> //JS代码 </script>

es6学习笔记2-解构赋值

解构赋值基本概论就按照一定的模式通过数组或者对象对一组变量进行赋值的过程. 1.通过数组对变量进行赋值: /*通过这种方式赋值要注意左右两边的结构模式要一样,在赋值的时候,根据位置进行赋值对应模式.*/ //普通赋值方式 var a = 1; var b = 2; var c = 3; //解构赋值方式 var [a,b,c] = [1,2,3]; // 针对其他比较特殊的模式赋值方式,如果变量解构不成功就赋值undefined var [a,[[b],c]] = [1,[[2],3]] //

js基础篇——变量

a.变量类型 变量类型 构造函数 举例 类型检测typeof 字符串 function String() var t = "chua"; var m = new String("chua"); "string" 数字 function Number() var t = 12; var m = new Number(12); "number" 布尔 function Boolean() var t = false; var m