小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
  • 什么是闭包?js闭包的2个最大用途以及注意事项

    什么是闭包?js闭包的2个最大用途以及注意事项

    各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。简单的说,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因……
    94人已经看过了
您的位置:首页 > 前端开发 > Javascript > 原生JS

ES6解构--数组解构,对象的解构,函数参数自动解构说明

分类: 原生JS9个赞

解构:自动解析数组或对象中的值,并赋值给指定的变量。


在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量。


根据类型的划分解构可以分为1.数组解构2.对象解构3.函数参数解构



数组解构  

将数组中的值取出来并一一赋值给不同的变量,我们来看下ES5的写法和ES6的区别

    //ES5
    var arr = [3,4,5];
    var a = arr[0];
    var b = arr[1];
    var c = arr[2];

    //ES6
    var [a, b, c] = arr;
    var [a, b, c] = [3,4,5];
    console.log(a, b, c);

ES6的写法明显简单粗暴,节省代码量

另外,变量的声明甚至可以跳过部分值,但是解构的变量 需要使用,占位

    var arr = [3,4,5,6,7];
    var [a,b,c,,e] = arr;
    console.log(a, b, c, e);  //3 4 5 7


对象的解构


对象解构  将对象中的属性值取出,并一一赋值给和属性名相同的变量

//ES5写法:
    var obj = {
        "age":30,
        "sex":"男",
        "say":function(){
            return "hello";
        }
    };
    var age = obj.age;
    var sex = obj.sex;
//ES6写法:
var {age,sex,say} = obj;

跳过某些值 直接不写解构变量

注意:变量名 必须和对象的成员名对应

var {age,say} = obj;
console.log(age, say);
console.log( say() );



函数参数自动解构

(1)函数参数使用解构数组或解构对象形式


1.函数形参,使用解构数组形式,调用函数时需要传递数组实参

function f1([x,y,z]){
    console.log(x,y,z);
}
var arr = [1,2,3];
f1(arr);

//相当于
/*
function f1(a){
    var [x,y,z] = a;
    console.log(x,y,z);
}
var arr = [1,2,3];
f1(arr);
*/



2.函数形参,使用解构对象形式,调用函数时需要传递对象实参

function f2({nickname,age,sex}){
    //变量名与对象成员名一致
    console.log(nickname,age,sex);
}
var obj = {"nickname":"zhangsan", "age":40, "sex":"男"};
f2(obj);

//相当于
/*
function f1(a){
    var {nickname, age, sex} = a;
    console.log(nickname,age,sex);
}
var obj = {"nickname":"zhangsan", "age":40, "sex":"男"};
f2(obj);
*/



(2)默认值与解构数组


函数参数使用解构数组 并设置默认值


1.函数参数使用解构数组,调用函数不传参数会报错

function fn([x, y, z]){
    console.log(x, y, z);
}
fn(); //会报错
</script>


2.函数参数使用解构数组,对整个数组设置默认值为空数组

function f1([x, y, z] = []){
    console.log(x, y, z);
}
f1(); //不报错  x y z 都是 undefined


3.函数参数使用解构数组,对整个数组设置默认值,数组中每个变量对应一个默认值

function f2([x, y, z] = [1,2,3]){
    console.log(x, y, z);
}
f2(); //不报错  x=1 y=2 z=3
f2([4,5,6]); // x=4 y=5 z=6


4.函数参数使用解构数组,对整个数组设置默认值为空数组, 在解构数组中对每个变量设置一个默认值

function f3([x=1, y=2, z=3]=[]){
    console.log(x, y, z);
}
f3(); //不报错  x=1 y=2 z=3
f3([4,5,6]); // x=4 y=5 z=6


小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> ES6解构--数组解构,对象的解构,函数参数自动解构说明