study
/
es6
/
11th.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>解构赋值</title>
    <script>

        /**
         * 解构赋值 : 从数组和对象中提取值，对变量对象赋值
         * 数组解构：按照顺序赋值
         * 对象解构：按照属性名称赋值
        */

        window.onload = function(){

            //数组解构,等同于下面分开赋值
            let[x,y,z] = [1,2,3];
            //let y=2;
            //let x=1;
            //let z=3;

            //如果变量值为:undefinded才会取默认值
            let[a,,c] = [1,2,3]; //a=1,c=3  一一对应的
            let[x1,y1,z1] = [1,,3]// x1=1,y1=undefinded,z1=3
            let[a1,b1=6,c1] = [1,2,3]//默认值为6，赋值为2,最后值为2
            let[l,m,n=6] = [1,2,,]//n未赋值，默认为6，最后值为6
            let[l1,m1,n1] = [1,[7,8,9],3];//m1为数组 = [7,8,9]
            let[l2,m2,n3] = [1,{'name':'hanley','age':20},3]//m2为对象

            //函数对象,若其后有值[变量有值]，不会执行函数求值，当值为空或undefinded才会执行函数求值
            let[aa=f()] = [1];//aa=1
            let[aa2=f()] = [];//aa2=8
            function f(){return 8;}

            //对象解构
            var obj = {
                name:'Hanley',
                age:20,
                msg:'success'
            };

            var {name,msg,age} = obj;
            var{x,y} = {x:'100',y:'200'};


            //x,y是匹配模式，变量名字实际是a,b
            //x是匹配后面名称为x的属性，如果取值的话，实际变量是a
            var{x:a,y:b} = {y:'aaa',x:'bbb'};

            //简写模式，完整的写法是 var{x:x=1},1st x是匹配后面的x，2nd x才是变量的真实名字;
            var{x=1} = {y:'aaa',x:'bbb'};

            //x是匹配后面名称为y的值，对应的值为 'aaa',默认值为1
            var {x:y=1} = {y:'aaa',x:'bbb'};

            //已经声明变量的解构，需要加()
            let x;
            ({x}={x:1})


            var obj3={
                name:'Hanley',
                fridends:['a','b','c'],
                members:{x:'abc',y:'xyz'}
            }
            var{name,fridends:f,members:m} = obj3;
            f[1];// b
            m.x;// abc


            //字符串解构
            let[a,b,c]=  'string'; // a=s,b=t,c=r

            //函数解构-数组参数
            function fun([x=20,y=30]){ //使用解构 方式，为函数设置默认值
                return x+y;
            }
            fun([2,3]);

             //函数解构-对象参数
            function numm({x=0,y=0}){
                console.log(x,y);
            };
            numm({x:2,y:5})

            //这个有点难，不是很理解？
            [[1,2],[3,4]].map(([a,b]) =>{return a+b});//3,7

            var mystr = "hello world";
            //substring(start,end);//开始位置，结束位置
            //substr(start,end);//开始位置，截取长度
            //indexOf();//判断字符串是否存在  -1表示不存在
            mystr.includes('k') // 判断字符串是否存在，返回true/false
            str.startsWith('hello',3);//是否头部，第二个参数表示搜索的位置
            str.endWith("world")//是否结尾

            var s2 = 's';
            s2.padStart(4,'xs');//前面补全
            s2.padEnd(4,'xy');//后面补全

            //ES5:如果y有值，取y值，若y为undefined,y = '10';
            function fn2(x,y){
                y = y||'10';
            }

            //ES6 写法 y默认值为'10'
            function fn2(x,y='10'){
            }


        }
    </script>
</head>
<body>

</body>
</html>