搜索
博主信息
博文 63
粉丝 8
评论 8
访问量 63721
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
PHP大牛成长之路:ES6+新特性let/const及解构
周Sir-BLOG
原创
964人浏览过

1、ES6新的声明变量关键字let/const

1.1 变量定义 var 关键字回顾

var 是我们接触JavaScript学习的第一个变量定义关键字,使用 var 定义存在以下几点问题:

  • 1、var 存在变量声明提升(不管在哪里声明,均视为作用域顶部声明)

  • 2、var 污染全局(一旦声明,就成为window对象属性)

  • 3、var 可以重复定义,后面覆盖前面(项目中重复定义可能导致严重后果)

  • 4、var在循环中使用的时候,循环体外依然可以使用

  • 5、var在循环绑定事件过程中,变量无法保存,循环会在瞬间执行完

1.2 ES6+ 变量定义 let 关键字

  • 1、let 不存在变量声明提升(必须先声明再使用,否则会报错)

  • 2、let 为块作用域,不会污染全局(只在块作用域中有效)

  • 3、let 不可以重复定义(无论是var,let,还是const)

  • 4、let在循环中使用的时候,循环体外不可使用

  • 5、let为块级作用域,在循环绑定事件过程中let会在这个循环中生效,再次循环时let会重新定义生效

1.3 ES6+ 常量定义 const 关键字

const 用来声明只读变量: 常量(全部大写)

2 解构

  • 2.1.1 :数组解构1

js中的解构,可以很方便的将对象中的属性赋值到某个变量中。(数组按索引排列,可以随便定义变量名)

  1. let arr = ['peter','peter@php.cn',33,'男'];
  2. let [userName,email,age,gender]=arr;
  3. console.log(userName); //输出:peter
  4. console.log(email); //输出:peter@php.cn
  5. console.log(age); //输出:33
  6. console.log(gender); //输出:男
  • 2.1.2 :数组解构2(嵌套数组)
  1. let [userName,[email,age],gender]=['peter',['peter@php.cn',33],'男']
  • 2.1.3 :数组解构3(更新变量)
  1. let arr = ['peter','peter@php.cn',33,'男'];
  2. //更新邮箱地址
  3. let [userName,email,age,gender]=[arr[0],arr[1]='peter@qq.com',arr[2],arr[3]]
  • 2.1.4 :数组解构4(使用默认值)
  1. let arr = ['peter','peter@php.cn',33];
  2. //性别使用默认值:男
  3. let [userName,email,age,gender='男']=arr;
  • 2.2 对象解构1

对象解构,变量名必须与对象属性名称一致

  1. let obj = {userName:"peter", email:"peter@php.cn", age:33, gender:"男"};
  2. let {userName, email, age, gender} = obj;
  3. console.log(userName); //输出:peter
  4. console.log(email); //输出:peter@php.cn
  5. console.log(age); //输出:33
  6. console.log(gender); //输出:男
  • 2.2.2 :对象解构2(嵌套对象)
  1. let user = {
  2. userName: "peter",
  3. email: "peter@php.cn",
  4. other: {
  5. age: 33,
  6. gender: "男",
  7. },
  8. };
  9. //对象的属性名必须与左边解析变量声明模板中的变量同名
  10. let {userName,email,other: { age, gender }} = user;
  11. console.log(userName); //输出:peter
  12. console.log(email); //输出:peter@php.cn
  13. console.log(age); //输出:33
  14. console.log(gender); //输出:男
  • 2.2.3 :对象解构3(更新变量)
  1. let userName = "peter";
  2. let email = "peter@php.cn";
  3. // 立即执行();
  4. ({userName,email} = {userName:'Peter Zhu',email:"peterzhu@php.cn"}) ;
  5. console.log(userName); //输出:Peter Zhu
  6. console.log(email); //输出:peterzhu@php.cn
  • 2.2.4 :对象解构4(使用默认值)

    1. let user = {
    2. userName: "peter",
    3. email: "peter@php.cn",
    4. other: {
    5. age: undefined, //未定义或使用undefined,解构时使用自定义值
    6. gender: "男",
    7. },
    8. };
    9. let {userName,email,other: { age='35' , gender}} = user;
    10. console.log(userName); //输出:peter
    11. console.log(email); //输出:peter@php.cn
    12. console.log(age); //输出:35
    13. console.log(gender); //输出:男
  • 2.2.5 :对象解构5(别名)

    1. let userName = 'peter zhu';
    2. let user = {
    3. userName: "peter",
    4. email: "peter@php.cn",
    5. other: {
    6. age: undefined, //未定义或使用undefined,解构时使用自定义值
    7. gender: "男",
    8. },
    9. };
    10. // userName已经存在变量,使用别名userName:name
    11. let {userName:name,email,other: { age='35' , gender}} = user;
    12. console.log(name); //输出:peter(需要使用别名name访问)
    13. console.log(email); //输出:peter@php.cn
    14. console.log(age); //输出:35
    15. console.log(gender); //输出:男

    总结:

  • 对var/let/const定义变量的区别进行了示例并理解;

  • 解构就是将对象或数组(还可以对函数/字符串等进行解构-未学)解构成单个变量。
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:以后可能不会再用到var
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学