zoukankan      html  css  js  c++  java
  • ES6-个人学习笔记二--解构赋值

    第二期,解构赋值如果能够熟练应用确实是个十分方便的功能,但是过分的依赖和嵌套只会让代码理解和维护起来十分困难,是个体现高逼格的表达式呢~

    1,解构赋值的基础

    //定义:es6运行按照一定模式,从数组或对象中提取值,并对变量进行赋值,如
        var [a,b,c] = [1,2,3];
        //一些其他方式
        let [ , , a1] = [1,2,3];
        //a1:3
        let [a2,...b2] = [1,2,3,4];
        //a2:1,b2:[2,3,4]
        let [a3,b3,...c3] = [1];
        //a3:1 b3:undefined c3:[]
        let [a4,[b4],c4] = [1,[2,3],4];
        //a4:1 b4:2 c4:4
        function* fibs(){
            var a=0;
            var b=1;
            while (true){
                yield a;
                [a,b] = [b,a+b];
            }
        }
        var [a5,b5,c5,d5,e5,f5] = fibs();
        //f5:5(这个是为什么暂时还不懂,以后在解读,官方解释:fibs是一个Generator函数,原生具有iterator接口,解构赋值时会依次从接口获取值)
        //默认值与惰性求值
        //在解构赋值时可以指定默认值
        var [a6,b6 = 3] = [1];
        //a6:1,b6:3 注意:只有在值严格等于(===)undefined时才会使用默认值,null是不行的
        //如果默认值是一个表达式,则该表达式是惰性求值的,如
        function f(){
            console.log("lvyi")
        }
        let [a7=f()]=[1];
        //不会执行f表达式,只在需要时执行内部指令
        //ps:默认值是可以引用解构赋值中的其他变量的,但是该变量必须先有赋值
        //对象也是可以解构赋值的,原理和数组差不多,但是需要指定模式和变量,并且对象和数组可以嵌套赋值,深入研究比较绕

    2,其他形式的解构赋值

    //对象解构赋值
        var {p:x} = {p:1};
        //p是模式,x才是需要赋值的变量,虽然模式可以省如({x}={1}),但复杂的解构中最好不要省如
        var node={
            loc : {
                start:{
                    line:1
                }
            }
        };
        //loc和start都是模式,line才是变量
    
        //字符串的解构赋值
        const [a1,b2,c3,d4,e5] = 'hello';
        let {length : len} = 'hello';
        //len :5 因为字符串是可以转为数组的,而字符串又有length这个同名的属性,因此这两个赋值都是成功的
    
        //数值和布尔值的解构
        let {toString : s} =123;
        let {toString : s1} = true;
        //解构的规则是只要右边的值不是对象就先转为对象在赋值,因此这个两个都有toString这个属性,那么S就可以取到值
        //但是undefined和null是没有的,因此如果右边是这两个会报错
    
        //函数参数的解构赋值
        function kk([x=0,y=0]){
            return x+y
        }
        kk([1,2]);
        //3,0为默认值
        //看看下面的值是多少?
        console.log([[1,2],[3,4]].map(([d,e]) => d+e));

    3,解构赋值的应用

     //变换变量的值
        [x,y]=[y,x];
        //获取无序的参数或一组参数的值,(最主要方便的用途,以后再也不用遍历json去拿数据了)
        var returnData={
            id:42,
            status : 'ok',
            data: [521,214]
        };
        let {id,status,data:number} = returnData;
        //简单明了
        //为函数参数设定默认值,上一节有提到,挺好理解的,不用再函数内部写一堆var了
  • 相关阅读:
    element-ui 多张图上传
    js json生取key,value 值
    iview DatePicker 回显验证报错
    iview的Select控制value为数字类型时表单验证无法通过
    iview 自定义树形
    tree 树形递归修改 key
    根据月份选择 生成这个月的每一天
    微信小程序超出隐藏省略号和自动换行
    uni-app picker select 取想要的值
    element-ui 表格fixed 样式修改
  • 原文地址:https://www.cnblogs.com/weblv/p/5946665.html
Copyright © 2011-2022 走看看