资讯专栏INFORMATION COLUMN

es6特性介绍(中)

xuweijian / 537人阅读

摘要:声明变量功能和类似,却去掉了很多身上的坏毛病块状作用域如果在浏览器环境执行的时候不会往全局变量上面绑定,防止全局变量的污染直接结果相同作用域中不允许重复声明相同变量执行结果抛出语法错误经典的例子输出,一不小心就污染了全局环境使用,就不会有这

声明变量 let

功能和var类似,却去掉了很多var身上的坏毛病

块状作用域

</>复制代码

  1. {
  2. var a = "123";
  3. }
  4. {
  5. let b = "456"
  6. }
  7. // 如果在浏览器环境执行的时候
  8. console.log(a);// "123"
  9. console.log(b);// b is not defined

不会往全局变量上面绑定,防止全局变量的污染

</>复制代码

  1. var a = "123";
  2. let b = "456";
  3. // 直接结果
  4. console.log(window.a);// "123"
  5. console.log(window.b);// undefined;

相同作用域中不允许重复声明相同变量

</>复制代码

  1. let a = "123";
  2. let a = "456";
  3. // 执行结果
  4. console.log(a);// 抛出语法错误:SyntaxError: Identifier "me" has already been declared

经典的例子

</>复制代码

  1. for(var i=1;i<10;i++){
  2. }
  3. console.log(i); // 输出10,一不小心就污染了全局环境
  4. // 使用let,就不会有这个问题
  5. for(let j=1;j<10;j++){
  6. }
  7. console.log(j); // 抛出引用异常:ReferenceError: j is not defined

声明常量 const

es6之前并没有很好的办法进行常量的声明,常量:这是一个只读的变量,es6中给出了const这个特性,专门用来处理这类问题

</>复制代码

  1. const a = "123";
  2. a = "456"; // 抛出异常 SyntaxError: "a" is read-only

需要注意下,常量的对象,其中的属性是可以被改变的

</>复制代码

  1. const obj = {
  2. name:"hello"
  3. }
  4. obj.name = "hello 2"; // 这个地方是合法的
for...of

es6提供的一个新的迭代器,功能类似for...in,只是前者返回的是value,而后者返回的是脚标

</>复制代码

  1. let data = ["a","b","c"];
  2. for(let i in data){
  3. console.log(i);// 输出 0,1,2
  4. }
  5. for(let j of data){
  6. console.log(j);// 输出 a,b,c
  7. }
代理 Proxies

这是es6提供的一个强大的特性,可以通过非侵入的方式,修改对象的默认行为

</>复制代码

  1. var obj = {
  2. name:"dog"
  3. };
  4. var handler = {
  5. get:function(target,key){
  6. return target[key].replace("dog","cat");
  7. }
  8. };
  9. // 设置代理
  10. var proxy = new Proxy(obj,handler);
  11. console.log(proxy.name);

可以进行代理的属性还有很多:

</>复制代码

  1. var handler = {
  2. get:...,
  3. set:...,
  4. has:...,
  5. deleteProperty:...,
  6. apply:...,
  7. construct:...,
  8. getOwnPropertyDescriptor:...,
  9. defineProperty:...,
  10. getPrototypeOf:...,
  11. setPrototypeOf:...,
  12. enumerate:...,
  13. ownKeys:...,
  14. preventExtensions:...,
  15. isExtensible:...
  16. }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112952.html

相关文章

  • ES6语法特性 - ES6 - ECMAScript特性 - Javascript核心

    摘要:前三个是为了解决变量声明定义的问题,而最后一个则影响最大。下文只介绍前三个特性。这是因为的的不支持块级作用域,变量仅仅被限制到函数作用域内。 原文: http://pij.robinqu.me/JavaScript_Core/ECMAScript/es6/es6_syntax_features.html 源代码: https://github.com/RobinQu/P...

    Joyven 评论0 收藏0
  • ES6语法特性 - ES6 - ECMAScript特性 - Javascript核心

    摘要:前三个是为了解决变量声明定义的问题,而最后一个则影响最大。下文只介绍前三个特性。这是因为的的不支持块级作用域,变量仅仅被限制到函数作用域内。 原文: http://pij.robinqu.me/JavaScript_Core/ECMAScript/es6/es6_syntax_features.html 源代码: https://github.com/RobinQu/P...

    StonePanda 评论0 收藏0
  • ES6语法特性 - ES6 - ECMAScript特性 - Javascript核心

    摘要:前三个是为了解决变量声明定义的问题,而最后一个则影响最大。下文只介绍前三个特性。这是因为的的不支持块级作用域,变量仅仅被限制到函数作用域内。 原文: http://pij.robinqu.me/JavaScript_Core/ECMAScript/es6/es6_syntax_features.html 源代码: https://github.com/RobinQu/P...

    jas0n 评论0 收藏0
  • ES6 走马观花(ECMAScript2015 新特性

    摘要:字面上是生成器的意思,在里是迭代器生成器,用于生成一个迭代器对象。当执行的时候,并不执行函数体,而是返回一个迭代器。迭代器具有方法,每次调用方法,函数就执行到语句的地方。也有观点极力反对,认为隐藏了本身原型链的语言特性,使其更难理解。 本文为 ES6 系列的第一篇。旨在给新同学一些指引,带大家走近 ES6 新特性。简要介绍: 什么是 ES6 它有哪些明星特性 它可以运行在哪些环境 ...

    wangzy2019 评论0 收藏0
  • 你需要了解的ES6的新特性(前沿技术)

    摘要:年月,的创造者公司,决定将提交给国际标准化组织,希望这种语言能够成为国际标准。这表示外层代码块不受内层代码块的影响。也可以运用于函数及其他文中就简单介绍这么多,想更加了解新特性的可以自寻查看一下阮一峰的一本入门 ES6新特性 最近在项目中遇到了很多ES6的语法,遇到了不少坑坑洼洼,因此,在这里就简单介绍一下ES6中的一些新特性 如果想真正的了解ES6和ES5有什么不同,这里推荐看一下...

    Nino 评论0 收藏0
  • 【Web全栈课程三】ES6特性介绍(下)

    摘要:示例运行函数弹出弹出函数接收参数,返回值。其中,返回一个对象,是的返回值,代表函数是否执行完成。 ES6特性介绍(下) ES6新的标准,新的语法特征:1、变量/赋值2、函数3、数组/json4、字符串5、面向对象6、Promise7、generator8、ES7:async/await 《【Web全栈课程二】ES6特性介绍(上)》见:https://segmentfault.com/a...

    wangshijun 评论0 收藏0

发表评论

0条评论

xuweijian

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<