JavaScript6 let 新语法优势介绍

最近看国外的前端代码时，发现ES6的新特性已经相当普及，尤其是 let，应用非常普遍

虽然 let 的用法与 var 相同，但不管是语法语义上，还是性能上，都提升了很多，下面就从这两方面对比一下

语法>>

for ( var i=0; i<2; i++){
console.log( 'outer i: ' + i);
for ( var i=0; i<2; i++){
console.log( 'inner i: ' +i);
}
}

这是一个常见的嵌套循环，都定义了变量 i 来计数，执行结果如下：

outer i: 0
inner i: 0
inner i: 1

可以看到，外层循环被打断了，因为 i 的值被内层循环修改了，通常的解决方法是内层循环中使用其他的变量，但有可能一不小心就出错了

现在把 var 换成 let

for ( let i=0; i<2; i++){
console.log( 'outer i: ' + i);
for ( let i=0; i<2; i++){
console.log( 'inner i: ' +i);
}
}

输出结果为：

outer i: 0
inner i: 0
inner i: 1outer i: 1
inner i: 0
inner i: 1

很正常，内外层没有任何影响，因为 let 使变量的作用域只在自己所在块儿之内

示例2

console.log(a);
var a = 'hi' ;

输出结果为 undefined，执行 log(a) 是在声明变量之前，为什么没有报错？因为这两行代码实际的效果是：

var a;console.log(a);
a = 'hi';

在解析JS代码时，会把变量的声明提示到开始位置，这个方式也比较让人迷惑

改用 let 后，就没有这个问题了，会直接报错

console.log(a); // Uncaught ReferenceError: a is not definedlet
a = 'hi' ;

性能做一个简单的测试

var start = + new Date();
for ( var i = 0;i<1000000;i++){
var num = 123;
var str = 'abc' ;
var obj = {key: 'value' };
var arr = [ 'bill' , 'dell' ];
}
var end = + new Date();
console.log(end - start);

在Firefox下的执行结果平均为 53ms

改为 let

'use strict'
var start = + new Date();
for ( var i = 0;i<1000000;i++){
let num = 123;
let str = 'abc' ;
let obj = {key: 'value' };
let arr = [ 'bill' , 'dell' ];
}
var end = + new Date();
console.log(end - start);

结果平均为 5ms ，提速很明显

以上所述是小编给大家介绍的JavaScript6 let 新语法优势，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JSP+Servlet制作Java Web登录功能的全流程解析

    JSP+Servlet制作Java Web登录功能的全流程解析

    0.新建web项目 首先,在MyEclipse里新建java web项目,项目名为login.此时,项目中包含一个src文件夹和一个WebRoot文件夹,以及Java Web自带的JRE库文件夹和J2EE库文件夹.其中,在WebRoot文件夹下,包含了WEB-INF文件夹和一个index.jsp页面文件. 接下来,新建一个JSP页面,命名为login.jsp. 项目文件的结构如下: 1.设计login.jsp页面 打开login.jsp页面后,修改第一行的代码为pageEncoding="utf

  • jsp+servlet+javabean实现数据分页方法完整实例

    jsp+servlet+javabean实现数据分页方法完整实例

    本文实例讲述了jsp+servlet+javabean实现数据分页方法.分享给大家供大家参考,具体如下: 这里秉着且行且记的心态,记录下学习过程,学得快忘得快,生怕遗忘,以备日后使用. 用到的部分代码是自己在网上查找,并自己修改,加上自己的理解.也不知道算不算原创,只做自己学习记录. 使用相关:PostgreSQL数据库.dom4j.JSP.Servlet 一.首先是工程格局,来个全局视图方便读者与自己查看与使用 思路为: 以config.xml文件记录配置信息,以方便数据库更改,方便移植与重用

  • JSP+Servlet+JavaBean实现登录网页实例详解

    本文实例讲述了JSP+Servlet+JavaBean实现登录网页的方法.分享给大家供大家参考.具体如下: 这里涉及到四个文件: 1. 登录页面:login.html 2. 登录成功欢迎页面:login_success.jsp 3. 登录失败页面:login_failure.jsp 4. Servlet处理文件:LoginServlet.java 其实还涉及到一个文件:web.xml,这个后面再说: 下面分别介绍这几个文件: 1. 登录页面:login.html <!-- 该Login页面是一个

  • JSP使用Servlet作为控制器实现MVC模式实例详解

    本文实例讲述了JSP使用Servlet作为控制器实现MVC模式的方法.分享给大家供大家参考.具体如下: 一.目标: ① 初步理解MVC模式: ② 掌握Servlet的编写: ③ 使用MVC模式完成登录功能. 二.主要内容: ① 分析JSP+JavaBean模式存在的问题,并介绍JSP+JavaBean+Servlet模式,以及和MVC模式的关系: ② 通过简单实例介绍Servlet的编写.配置和运行: ③ 采用Servlet完成登录功能的控制. 1. JSP+JavaBean这种模式存在的问题?

  • JavaScript6 let 新语法优势介绍

    最近看国外的前端代码时,发现ES6的新特性已经相当普及,尤其是 let,应用非常普遍 虽然 let 的用法与 var 相同,但不管是语法语义上,还是性能上,都提升了很多,下面就从这两方面对比一下 语法>> for ( var i=0; i<2; i++){ console.log( 'outer i: ' + i); for ( var i=0; i<2; i++){ console.log( 'inner i: ' +i); } } 这是一个常见的嵌套循环,都定义了变量 i 来计

  • PHP 7的一些引人注目的新特性简单介绍

    1. ?? 运算符(NULL 合并运算符) 把这个放在第一个说是因为我觉得它很有用.用法: $a = $_GET['a'] ?? 1; 它相当于: <?php $a = isset($_GET['a']) ? $_GET['a'] : 1; 我们知道三元运算符是可以这样用的: $a ?: 1 但是这是建立在 $a 已经定义了的前提上.新增的 ?? 运算符可以简化判断. 2. 函数返回值类型声明 官方文档提供的例子(注意 ... 的边长参数语法在 PHP 5.6 以上的版本中才有): <?php

  • PHP 7.4 新语法之箭头函数实例详解

    短闭包,也叫做箭头函数,是一种用 php 编写的短函数.当向函数中传递闭包时,这个功能是非常有用的,比如使用 array_map 或是 array_filter函数时. 这就是它们看起来的样子: // Post 对象的集合 $posts = [/* - */]; $ids = array_map(fn($post) => $post->id, $posts); 而以前,你必须这样写: $ids = array_map(function ($post) { return $post->id

  • 详解JavaScript 新语法之Class 的私有属性与私有方法

    译者按: 为什么偏要用 # 符号? 原文:JavaScript's new #private class fields •译者:Fundebug 本文采用意译,版权归原作者所有 proposal-class-fields与proposal-private-methods定义了 Class 的私有属性以及私有方法,这 2 个提案已经处于 Stage 3,这就意味着它们已经基本确定下来了,等待被加入到新的 ECMAScript 版本中.事实上,最新的 Chrome 已经支持了 Class 私有属性.

  • 浅析PEP570新语法: 只接受位置参数

    最近 PEP 570被接受了,其实要加的这个Positional-Only Parameters原来在内置的C函数上有很多都用到了: In : __builtin__.eval Out: <function eval(source, globals=None, locals=None, /)> In : __builtin__.len Out: <function len(obj, /)> In : __builtin__.divmod Out: <function divm

  • spring5新特性全面介绍

    前方:对于很多开发人员来说,目前大都还在使用spring4的时候,而spring5早已经发布.虽然你可能暂时还没有使用到spring5,但还是需要对其有个大概的了解. Spring 5 于 2017 年 9 月发布了通用版本 (GA),它标志着自 2013 年 12 月以来第一个主要 Spring Framework 版本.它提供了一些人们期待已久的改进,还采用了一种全新的编程范例,以反应式宣言中陈述的反应式原则为基础. 这个版本是很长时间以来最令人兴奋的 Spring Framework 版本

  • 利用C#9.0新语法如何提升if语句美感

    前言 C# 语言一贯秉承简洁优美的宗旨,每次升级都会带来一些语法糖,让我们可以使代码变得更简洁.本文分享两个使用 C# 9.0 提升 if 语句美感的技巧示例. 使用属性模式代替 IsNullOrEmpty 在任何你使用 IsNullOrEmpty 的时候,可以考虑这样替换: string? hello = "hello world"; hello = null; // 旧的方式 if (!string.IsNullOrEmpty(hello)) { Console.WriteLine

  • C#6.0新语法示例详解

    前言 一直用C#开发程序,.NET的功能越来越多,变化也挺大的,从最初的封闭,到现在的开源,功能不断的增加,一直在进步.下面就来给大家详细介绍下C#6.0新语法的相关内容,一起来看看吧 众所周知,c# 6.0 是在visual studio 2015中引入的.在其他的几个版本中同样引入一些特性,比如在c# 3.0中引入了linq,在c# 4.0中引入了动态类型dynamic,在c#5.0中引入async和await等等. 在c# 6.0更多关注了语法的改进,而不是增加新的功能.这些新的语法将有助

  • ECMAscript新特性对象介绍

    目录 1.对象的属性 1.1属性表示法 2.计算属性名 3.Object 的方法 3.1Object.is() 方法 3.2Object.assign()方法 4.super 关键字 5.对象的扩展运算符 1.对象的属性 1.1属性表示法 ECMAScript 2015允许在大括号里面,直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. 示例代码如下所示: let name = '一碗周' let job = '前端攻城狮' // 属性表示法 直接写入变量 let obj1 = {

  • Python生产者与消费者模型中的优势介绍

    目录 multiprocessing-Queue实现 multiprocessing-JoinableQueue实现 生产者消费者模型具体来讲,就是在一个系统中,存在生产者和消费者两种角色,他们通过内存缓冲区进行通信,生产者生产消费者需要的资料,消费者把资料做成产品,从而消耗掉生产的数据.达到供需平衡,不能生产多了浪费,也不能需要消耗资源的时候没有. multiprocessing-Queue实现 from multiprocessing import Process,Queue #多进程组件,

随机推荐