ES6入门之变量的解构赋值(二)

前言

在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解，上一章中我们主要学习了三大部分的内容，let命令的使用，块级作用域，const命令的使用，那么从本篇博客将进一步深入了解ES6中的相关语法，毕竟未来ES6是主流。

本章目标

  • 　学会数组的解构赋值
  • 　学会对象的解构赋值
  • 　学会字符串的解构赋值
  • 　学会数值和布尔值的解构赋值
  • 　学会函数参数的解构赋值
  • 学会解构赋值的用途

本人对解构赋值的理解：模式匹配，匹配成功获取值，匹配不成功则为undefined，好比开心消消乐一样(我没有玩过，但是听过一点点)，开心消消乐中只要有相同的就会消失，然后加分，而模式匹配呢？匹配成功加分，匹配不成功则失败。

数组的解构赋值

数组的解构赋值十分简单，只要等号左右两边模式匹配成功，则获取值，否则为undefined，在讲解数组解构赋值之前，我们先来看下我们以前定义变量的格式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            let a=1;
            let b=2;
            let c=3;
            //或者
            let a=3,
                b=4,
                c=5;
            //ES6的模式
            let [a,b,c]=[4,5,6];//左右两边相等，a=4,b=5,c=6
        </script>
    </body>
</html>

在这里我们已经使用了数组的解构赋值，即let [a,b,c]=[4,5,6]左右两边进行模式匹配，可得a=4,b=5,c=6

(1)不完全解构

解构除了完全解构之外，还具备不完全解构的特性,即左边的模式只匹配一部分等号右边的数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            let [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
        </script>
    </body>
</html>

(2)特殊值

如果等号右边不是数组，那么将会报错

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;

(3)默认值

数组的解构允许有默认值，如果一个数组的成员为null,默认值就不会生效，因为null不严格等于undefined

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            let [foo=true]=[];
            console.log(foo);//true
            let [x,y=‘b‘]=[‘a‘];
            let [z,w=‘b‘]=[‘a‘,undefined];
            console.log(x);//a
            console.log(y);//b
            console.log(z);//a
            console.log(w);//b
            let [a=1]=[undefined];
            let [b=2]=[null];
            console.log(a);//1
            console.log(b);//null
        </script>
    </body>
</html>

对象的解构赋值

关于对象的解构赋值我总结了如下三点

  • 数组的元素是按次序排列的，变量的取值有它的位置决定，而对象的属性是没有次序的，变量必须和属性同名，才能取到正确的值
  • 如果解构失败，变量的值等于undefined
  • 对象解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者，而不是前者

示例1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>对象的解构赋值</title>
    </head>
    <body>
        <script type="text/javascript">
            //按顺序排列
//            let {foo,bar}={foo:‘foo‘,bar:‘bar‘};
//            console.log(foo);//foo
//            console.log(bar);;//bar
            //不按顺序排列
//            let {bar,foo}={foo:‘foo‘,bar:‘bar‘};
//            console.log(bar);//bar
//            console.log(foo);;//foo
            //解构不成功，值为undefined
            let {baz}={foo:‘foo‘,bar:‘bar‘};
            console.log(baz);//undefined
        </script>
    </body>
</html>

在这个案例中，我们有按顺序的解构，没有顺序的解构，以及解构不成功的情况

示例二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>对象的解构赋值</title>
    </head>
    <body>
        <script type="text/javascript">
            let {foo:baz}={foo:‘aaa‘,bar:‘bbb‘}
            console.log(baz);//aaa
            let obj={first:‘hello‘,last:‘world‘};
            let {first:a,last:b}=obj;
            console.log(a);//hello
            console.log(b);//world
        </script>
    </body>
</html>

从而可以看出：对象解构赋值的原理是先找到同名属性，然后再赋给对应变量，真正被赋值的是后者而不是前者

字符串的解构赋值

字符串的结构赋值十分简单，和之前的解构赋值一样也是模式匹配，注意：字符串中有length属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字符串解构赋值</title>
    </head>
    <body>
        <script type="text/javascript">
            const [a,b,c,d,e]=‘hello‘;
            console.log(a);;//h
            console.log(b);//e
            console.log(c);//l
            console.log(d);//l
            console.log(e);//o
            let {length:len}=‘hello‘;
            console.log(len);//5
        </script>
    </body>
</html>

数值和布尔值的解构赋值

解构赋值原理：只要等号右边的值不是数组或对象，就先将其转为对象，但是也有特殊情况，如：undefined和null无法转为对象，所以对它们进行解构赋值都会报错。这一点非常重要

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数值和布尔值的解构赋值</title>
    </head>
    <body>
        <script type="text/javascript">
//            let {toString:s}=123;
//            console.log(s===Number.prototype.toString);
//            let {toString:b}=true;
//            console.log(b===Boolean.prototype.toString);
            let {prototype:x}=undefined;
            let {prop:y}=null;
            console.log(x);//报错
            console.log(y);//报错
        </script>
    </body>
</html>

函数参数的解构赋值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>函数参数解构赋值</title>
    </head>
    <body>
        <script type="text/javascript">
            function add([x,y]){
                return x+y;
            }
            console.log(add([1,3]));//4
            [[1,2],[3,4]].map(([a,b])=>{
                console.log(a+b);//4,7
            })
            //使用默认值
            function move({x=0,y=0}){
                return [x,y]
            }
            move({x:3,y:10});//[3,8]
            move({x:3})//[3,0]
            move({})//[0,0]
            move();//[0,0]
            function bar({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]
        </script>
    </body>
</html>

在move方法中函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值，而函数bar的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果

解构赋值的实际用途

(1)交换变量的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(1)交换变量的值
            let x=1;
            let y=2;
            [x,y]=[y,x];
            console.log(x);//2
            console.log(y);//1
        </script>
    </body>
</html>

在这里，我们可以看到x和y的值进行了交换，x的值从1变成的2，而y的值从2变成了1

(2)从函数返回多个值

我们知道javascript中中使用return只能返回一个值，如果需要返回多个值的话就需要将数据放在数组或对象中，然后return回去，但是有了解构赋值，你想要取出这些值就非常方便，我们看下下面的示例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(2)从函数返回多个值
            //返回一个数组
            function bar(){
                return[1,2,3]
            }
            let[a,b,c]=bar();
            console.log(a);//1
            console.log(b);//2
            console.log(c);//3
            //返回一个对象
            function baz(){
                return{
                    x:1,
                    y:2,
                }
            }
            let {x,y}=baz();
            console.log(x);//1
            console.log(y);//2
        </script>
    </body>
</html>

在这里我们返回一个数组之后使用a,b,c进行解构赋值，匹配a=1,b=2,c=3,而返回对象之后我们使用对象来接收，注意：返回对象的键名一定要和需要解构的键名一致，否则取到的值为undefined

(3)函数参数定义

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(3)函数参数定义
            //参数是一组有次序的值
            function foo([x,y,z]){
                console.log(x);//1
                console.log(y);//2
                console.log(z);//3
            }
            foo([1,2,3]);
            //参数是一组无序的值
            function bar({x,y,z}){
                console.log(x);//10
                console.log(y);//20
                console.log(z);//1
            }
            bar({z:1,x:10,y:20})
        </script>
    </body>
</html>

(4)提取JSON数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(4)提取JSON数据
            let stu={
                name:‘一只流浪的kk‘,
                age:18,
                sex:‘male‘
            }
            let {name:name,age:age,sex:sex}=stu;
            console.log(name,age,sex);//一只流浪的kk,18,male
        </script>
    </body>
</html>

使用解构赋值可以很方便的提取JSON中的数据

(5)函数参数默认值

这种方法我们见过很多，再封装ajax的时候经常用到或者是扩张jquery插件的时候，我们都会添加默认值

            //(5)函数参数默认值
            ;
            (function(method) {
                method(window, window.document, jQuery);
            }(function(win, doc, $) {
                ＄.fn.SuperPlus = function(options) {
                    //默认参数
                    var setting={
                        length:3,
                        color:"blue"
                    };
                    //使用用户的参数覆盖默认参数
                    $.extend(setting,options);

                    return $.each(this, function(index, obj) {
                        $("<span/>").html("+").css("cursor", "pointer").css("color",setting.color).click(function() {
                            $(obj).width($(obj).width() + setting.length);
                        }).insertAfter(obj);
                    });

                }
            }));

在这里我们就是指定了默认值，我们对外开发我们可以让用户进行修改的一些参数，当用户没有传递的时候，我们就使用默认值

(6)遍历Map结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(6)遍历Map结构
            const map=new Map();
            map.set(‘first‘,‘hello‘);
            map.set(‘last‘,‘world‘);
            for(let [key,value] of map){
                console.log(‘键是：‘+key,‘值是:‘+value);//键：first,last,值：hello,world
            }
            //或者
            for(let [key,value] of map.entries()){
                console.log(‘键是：‘+key,‘值是:‘+value);//键：first,last,值：hello,world
            }
            //如果只想遍历key
            for(let [key,] of map){
                console.log(key);//first,last
            }
            //如果只想遍历value
            for(let [,value] of map){
                console.log(value);//hello,world
            }
        </script>
    </body>
</html>

这里涉及到map的相关知识，关于ES6新增的数据结构，查看博客https://www.cnblogs.com/jjgw/p/11561169.html

(7)输入模块的指定方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解构赋值的用途</title>
    </head>
    <body>
        <script type="text/javascript">
            //(7)输入模块的指定方法
            const{add,sub}=require(‘count‘);
        </script>
    </body>
</html>

这种方法我们之后会用到，关于ES6中模块的加载，例如：AMD,CMD,UMD等等，现阶段只需要了解一下

原文地址：https://www.cnblogs.com/jjgw/p/11717379.html

时间： 2024-10-10 16:36:39

ES6入门之变量的解构赋值(二)的相关文章

ES6学习之变量的解构赋值

前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.->在线ES6转换为ES5工具. 本系列学习随笔参考了阮一峰老师的<ES6标准入门>. 一.解构赋值简述 在学习ES6之前,如果我们要从一个数组将值取出来,我们要如何去做? let arr=[1,2,3]; let a=arr[0]; let b=arr[1]; let c=arr[2]; 是

JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值

1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, b, c] = [1, 2, 3]; 如果解构不成功,对应的变量就会赋值undefined. let [x, y, ...z] = ['a']; x // "a" y // undefined z // [] 另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组.这种情况

ECMAScript 6 入门之变量的解构赋值

1.数组 1. var a=1,b=2,c=3; console.log("a:",a) console.log("b:",b) console.log("c:",c) var[q,w,e]=[4,5,6]; console.log("q:",q) console.log("w:",w) console.log("e:",e) 2. var[q,[w,e]]=[4,[5,6]]; con

《ES6标准入门》10~28Page let和const命令 变量的解构赋值

1.let和const命令 (1)let命令 let命令类似于ES3中的var命令,但是所声明的变量只在let所在的代码块内有效. 1 { 2 let a = 10; 3 var b = 1; 4 } 5 6 console.log(a); //报错 7 console.log(b); //1 let相较var来讲有三个特殊性质,分别是不存在变量提升.暂时性死区和不允许重复声明. 1 //不存在变量提升 2 console.log(a); //报错 3 let a = 1; 4 5 //你无法在

1.《ES6标准入门》(阮一峰)--3.变量的解构赋值

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

《ECMAScript 6 入门- 第二章 变量的解构赋值》 —— 摘抄

1.数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 旧做法: var a = 1; var b = 2; var c = 3; ES6做法: var [a,b,c] = [1,2,3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值.下面是一些使用嵌套数组进行解构的例子. var [foo,[[bar],bad]] =

es6分享——变量的解构赋值

变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法: let [a,b] = [1,2]; 一般用途: 1.交换变量的值 [x,y] = [y,x]; 2.函数返回多个值 function f1() { return [1,2,3]; } var [a,b,c] = f1(); // 返回json对象: function f1() { return

ES6学习笔记(let、const、变量的解构赋值、字符串扩展)

一.let命令 1.let命令所在的代码块内有效,var声明的在全局范围内都有效 2.for循环的计数器,就很合适使用let命令 3.let声明的内部变量i和外部变量i是分离的 4.var命令会发生"变量提升"现象,即变量可以在声明之前使用,值为undefined   let命令不会发生"变量提升"现象,它所声明的变量一定要在声明后使用,否则报错 5.let不允许在相同作用域内,重复声明同一个变量 6.let会导致暂时性死区,在代码块内,使用let命令声明变量之前,

学习es6之(变量的解构赋值)

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