变量的解构赋值、数组的扩展和对象的扩展

最新推荐文章于 2023-10-17 13:43:46 发布

Sk8？？？

最新推荐文章于 2023-10-17 13:43:46 发布

阅读量103

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/mrslonly/article/details/102581041

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

变量的解构赋值

<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
</body>
<script>
{
        /*let a=1;
        let b=2;
        let a= 1,b=2;*/
        /*let [a,b,c]=[1,2,3];
        console.log(a, b, c);
        let [foo,[[bar],baz]]=[1,[[2],4]]
        console.log(foo, bar, baz);*/
        // ... 扩展运算符 数组  只能放在最后
        let [a,b,...c]=[1,2,3,4,5,6];
        console.log(a, b, c);
    }
    </script>

数组的扩展

<script>
    /*
    * 数组的扩展
    * */
    //扩展运算符  ：...它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
    {
        let a=[1,2,3];
        console.log(...a);
    }
    //替代函数apply方法
    {
        /*function f(x,y,z){

        }
        var agrs=[1,2,3];
        f.apply(null,agrs);*/


        function f(x,y,z){

        }
        let agrs=[1,2,3];
        f(...agrs)
    }
    //dom元素集合分开
    console.log(...document.querySelectorAll(".btn"));
    {
        let a=[1,2,3];
        let b=[4,5,6];
        console.log(a.concat(b));
        console.log(Array.prototype.push.apply(a, b));
        console.log(a);
        console.log(Array.prototype.push);
        //push 的返回值为length
        console.log(a.push(...b));
        console.log(a);
    }
    //数组的复制
    {
        let a=[1,2,3,4];
        let b=a;
        b[0]=2;
        console.log(a);
        a1= [...a];
        console.log(a);
        [...a2]=a;
        console.log(a2);
    }
    //合并数组
    {
        let a=[1,2];
        let b=[3,4];
        let c=[4,5];
        console.log(a.concat(b, c));
        console.log([...a,...b,...c]);
    }
    //将字符串转化为数组
    {
        let h="avasfsaff";
        console.log([...h]);
    }
    //Array.from 将类数组转化为数组
    {
        let obj={
            0:1,
            1:2,
            2:3,
            length:3
        };
        console.log(Array.from(obj));
        console.log(Array.from(document.querySelectorAll(".btn")));
        console.log(document.querySelectorAll(".btn"));
    }
    //Array.of 将值转化为数组
    console.log(Array.of(1, 2, 3, 'a'));
    //find() 找到符合条件的 返回第一个值
    {
        let a=[1,2,3,4,3,2,4,5];
        console.log(a.find(function (n) {
            return n > 2;
        }));
        console.log(a.find(n=>n>4));
    }
    //findIndex 找到符合条件的 返回第一个索引
    {
        let a=[1,2,3,2,4,5,3,5,6,4,5];
        console.log(a.findIndex((val)=>{return val>3}));
    }
    //fill 用值填充数组 也可以多个参数 填充的位置
    {
        let a=[1,2,3,4,6];
        a.fill("a",4,7);
        console.log(a);
    }
    </script>

对象的扩展

<script>
    {
        /*
        * es6 对象的扩展
        * 对象属性和值的简写
        * 方法也可以简写
        * */
       /* let  foo="你好";
        let obj={
            foo,
            hello:function(){

            },
            info(){

    },
        };
    console.log(obj);*/

    //扩展getter（获取值） setter （设置器） 访问器
    //get set

    /*    let obj={
     _num:0
     }
     Object.defineProperty(obj,"_num",{
            get:function(){
                //返回值
                console.log("我在返回值");
                return this._num;
            },
            set:function(val){
                console.log("设置值");
                try{
                    if(val){
                        this._num=val;
                    }else{
                        throw  new Error("val is no value");
                    }
                }
                catch(err){
                    console.log(err);
                }
            }
        })
        obj._num=2;*/

        //get set 访问器是给对象封装属性的
        let obj={
            get names(){
                console.log("返回值");
                return this.name;
            },
            set names(val){
                console.log("设置值");
                try{
                    if(val){
                        this.name=val;
                    }
                    else{
                        throw new Error("val is no value");
                    }
                }
                catch(err){
                    console.log(err);
                }
            }
        }
        obj.names="张三";
        console.log(obj);
    }
    </script>

Sk8？？？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
变量的解构赋值、数组的扩展和对象的扩展

变量的解构赋值<body><button class="btn">按钮</button><button class="btn">按钮</button><button class="btn">按钮</button></body><script>{ /*let a=...
复制链接

扫一扫