首页 > 其他分享 >【ES6】变量的解构赋值

【ES6】变量的解构赋值

时间:2023-01-16 20:35:52浏览次数:38  
标签:ES6 console log 解构 var id 赋值


【ES6】变量的解构赋值

  • ​​一、什么叫解构赋值?​​
  • ​​二、解构赋值有哪些分类?写法?​​
  • ​​1)对数组的解构赋值​​
  • ​​2)对对象的解构赋值​​
  • ​​3)对字符串的解构赋值​​
  • ​​4)对数值和布尔值的解构赋值​​
  • ​​5)对函数参数的解构赋值​​
  • ​​三、解构赋值的应用​​
  • ​​查看更多ES6教学文章:​​
  • ​​参考文献​​

ES6,全称为ECMAScript6。ES6与js的关系是:前者是后者的规格,后者是前者的实现。换句话说,ES是js的国际化版本,js是ES的子集。


一、什么叫解构赋值?

        ES6允许按照一定的模式,从数组或者对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
        而解构赋值的写法大多采用模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值。


大家不要怕,下面我们用通俗易懂的方式来说:先看例子

//普通赋值
var a=1;
var b=2;
var c=3;
//ES6的解构赋值
var [a,b,c]=[1,2,3];
//输出都是:
console.log(a);//1
console.log(b);//2
console.log(c);//3

        模式匹配就是说,等号两边的格式要相同,它才可以赋值。
        解构的意思是,对数组或者json格式的变量里面的内容进行分解,然后再赋值。类似于提取里面的值。

二、解构赋值有哪些分类?写法?

【1】对​​数组​​​的解构赋值
【2】对​​​对象​​​的解构赋值
【3】对​​​字符串​​​的解构赋值
【4】对​​​数值和布尔值​​​的解构赋值
【5】对​​​函数参数​​的解构赋值

下面一一讲解每个类型的用法和写法:


1)对数组的解构赋值

/******************标准写法格式******************/
var [a,b,c]=[1,2,3];
//输出:
console.log(a);//1
console.log(b);//2
console.log(c);//3
/******************嵌套数组写法格式******************/
var [a,[b,c]]=[1,[2,3]];
//输出:
console.log(a);//1
console.log(b);//2
console.log(c);//3
/******************含定义数组写法格式******************/
var [a,...b]=[1,2,3,4];
//输出:
console.log(a);//1
console.log(b);//[2,3,4]
/******************不完全解构写法格式******************/
var [x,y]=[1,2,3];
//输出:
console.log(x);//1
console.log(y);//2

let [a,[b],d]=[1,[2,3],4];
//输出:
console.log(a);//1
console.log(b);//2
console.log(d);//4
/******************解构失败写法示例******************/
var [x]=[];
//输出:
console.log(x);//undefined

var [a,b]=[1];
//输出:
console.log(a);//1
console.log(b);//undefined

​【注】:上例中x、b解构失败,即x、b在模式匹配中未匹配到值,所以它们的值为undefined。​

2)对对象的解构赋值

​【注】:在对象解构赋值中,左边式中的变量的顺序不需要按照右边属性的排列顺序。​​ 标准写法:

let {id:a,val:b}={id:"ko33",val:2};
//输出:
console.log(a);//"ko33"
console.log(b);//2
//解释:这里是对变量a、b赋值。
//首先,左右两边先按照模式匹配来取指,然后左边取得的值分别赋给a、b

简单写法:

let {id,val}={id:"ko33",val:2};
//输出:
console.log(id);//"ko33"
console.log(val);//2

下面的例子中,id是模式,a才是变量:

var {id:a}={id:"ko33",val:2};
//输出:
console.log(a);//"ko33"
console.log(id);//SyntaxError:Duplicate delaration "id"

下面的例子中,同一变量不能被let定义两次,var可以(参考let的用法):

//错误
let id;
let {id}={id:"ko33"};
//正确
var id;
var {id}={id:"ko33"};
//正确
var id;
({id}={id:"ko33"});
//正确
var a;
var {id:a}={id:"ko33"};

​还可以将js已定义的对象中的属性提取出来:​

let {log,sin,cos}=Math;
//Math是js自带的对象

3)对字符串的解构赋值

这里字符串被转化成为了对象。

const [a,b,c,d]="eggs";
//输出:
console.log(a);//"e"
console.log(b);//"g"
console.log(c);//"g"
console.log(d);//"s"

这里字符串被转化成了对象,js的字符串对象含有属性length。

let {length:len}="eggs";
//输出:
console.log(len);//4

4)对数值和布尔值的解构赋值

let {toString:s}=123;

let {toString:s}=true;

5)对函数参数的解构赋值

【注】:先解释一下默认值问题
默认值的标准形式:
​​​var [x=1,y=x]=[1,2];​​​ 输出是​​x=1;y=2​解释: 首先,看左边的式子,x的默认值为1,y的默认值为x。只有当x、y在右边对应的模式为undefined的时候,才会取默认值。
取指流程: 先看x对应的右边的模式为1,所以x=1,左边的默认值不去管它,再看y对应的右边的模式为2,所以y=2,左边y的默认值不去管它。

函数参数的解构赋值分为3种:
(1)普通类型:

function add([x,y]){
return x+y;
}

add([1,2]);//3

(2)指定函数变量的默认值类型:

function move({ x = 0 , y = 0 }= {} ){
return [x,y];
}

move({x:3,y:8});// [3,8]
move({x:3});// [3,0]
move({});// [0,0]
move();// [0,0]

(3)指定函数形参的默认值类型:

function move({x,y}= {x:0 , y:0} ){
return [x,y];
}

move({x:3,y:8});// [3,8]
move({x:3});// [3,undefined]
move({});// [undefined,undefined]
move();// [0,0]

三、解构赋值的应用

【1】

标签:ES6,console,log,解构,var,id,赋值
From: https://blog.51cto.com/u_15942590/6010772

相关文章

  • 【ES6】字符串的拓展
    【ES6】字符串的拓展​​一、为什么ES6要进行字符拓展?​​​​二、ASCLL码、Unicode编码、UTF-8编码的异同​​​​三、ES6新增的字符串接口​​​​1)codePointAt()​​​​......
  • 【ES6】 let与const详解
    【ES6】let与const详解ES6,全称为ECMAScript6。ES6与js的关系是:前者是后者的规格,后者是前者的实现。换句话说,ES是js的国际化版本,js是ES的子集。1.letlet命令和var命令是差......
  • 【ES6】数值的拓展
    【ES6】数值的拓展​​二、Number.isFinite(),Number.isNaN()​​​​三、Number.parseInt(),Number.parseFloat()​​​​四、Number.isInteger​​​​五、Number.EPSILON​......
  • 【ES6】数组的拓展
    【ES6】数组的拓展​​一、Array.from()方法​​​​二、Array.of()方法​​​​三、数组的copyWithin()方法​​​​四、数组的find()和findIndex()方法​​​​五、数组的......
  • 02-Tcl输出、赋值与替换
    2Tcl输出、赋值与替换2.1putsTcl的输出命令是puts,将字符串标准输出channelled。语法中两个问号之间的参数为可选参数。#例1putshello#输出hello#例2puts-......
  • 【ES6】ES6编程规范 编程风格
    【ES6】ES6编程规范编程风格​​一、定义变量的规范​​​​二、字符串​​​​三、对象​​​​四、数组​​​​五、函数​​​​查看更多ES6教学文章:​​​​参考文献​......
  • 【ES6】Module模块详解
    【ES6】Module模块详解​​一、Module的由来​​​​二、严格模式​​​​三、export命令​​​​四、import命令​​​​查看更多ES6教学文章:​​​​参考文献​​引言:由于......
  • 【ES6】JS类的用法class
    【ES6】JS类的用法class​​一、概述​​​​二、构造函数constructor​​​​三、静态方法与静态变量​​​​查看更多ES6教学文章:​​​​参考文献​​引言:由于JS之前一直......
  • 【ES6】异步操作和async函数
    【ES6】异步操作和async函数​​一、基本概念​​​​二、回调函数​​​​三、Promise​​​​四、async函数​​​​查看更多ES6教学文章:​​​​参考文献​​引言:ES6新增......
  • 【ES6】Generator函数详解
    【ES6】Generator函数详解​​一、Generator函数简介​​​​基本概念​​​​函数写法​​​​yield关键字介绍​​​​二、next方法的参数​​​​三、for...of循环​​​......