标签： javascript

var定义变量面临的问题

  • 可以重复定义
  • 无法限制变量不可修改
  • 无块级作用域

ES6变量定义升级

  • 新增let定义变量
  • 新增const定义常量

let特性

  • 有块级作用域
  • 不可重复定义

const特性

  • 有块级作用域
  • 不可重复定义
  • 不可修改

解决的痛点

example1 :

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <input type="button" value="1">

  <input type="button" value="2">

  <input type="button" value="3">

  <script>

    /*

    *如下代码如果想做到点击每个按钮弹出当前按钮的索引，

    *用var的话要么就是通过自定义属性，或者用一个自执行函数创造一个作用域

    *但是你把var i=0换成let i=0就能很好的实现你所想要的

    */

    var btnList = document.getElementsByTagName('input');

    var len = btnList.length;

    for(var i=0;i<len;i++){//(var let =0;i<len;i++)

      btnList[i].onclick = function(){

        alert(i);

      }

    }

  </script>

</body>

</html>

测试地址

example2:

    /*

    *在做复杂项目的时候经常会因为重复定义变量导致莫名BUG，

    *但是当你如果把如下代码var换成let来定义，你将会发现控制台会丢给你一个大大的变量

    *已定义的错SyntaxError: Identifier 'a' has already been declared

    */

    var a = 1;

    var a = 2;

    alert(a);

测试地址

example3

    /*

    *当前想固定一个变量为不可变值时，以前是无法实现的

    *但是现在通过const定义的常量如果你再去修改会在控制台报一大错

    */

    const PI = 3.1415926;

    PI = 'aaa';

    alert(PI);

测试地址

粗看ES6之变量的更多相关文章

  1. 粗看ES6之JSON

    标签: es6 ES6新增JSON特性不是特别多,只是针对JSON某些情况下的写法上有一些优化: 当key值和value值对应变量名相同时 json对像中的方法书写 示例代码如下: <!DOCT ...

  2. 粗看ES6之字符串

    标签: javascript es6 字符串新增特性 新增二个方法 - startsWith/endsWith 字符串模板 - 反单引号的应用 startsWith 判断字符串以是否以某某开头,返回一 ...

  3. 粗看ES6之面向对象写法

    标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...

  4. 粗看ES6之数组

    标签: javascript es6 数组新增方法 map(可以理解为是映射,以一定规则修改数组每一项并返回全新数组) reduce(可以理解为是汇总,一堆出来一个) filter(可以理解为过滤,筛 ...

  5. 粗看ES6之解构赋值

    标签: javascript es6 什么是解构赋值? 示例如下: <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. 粗看ES6之函数

    标签: es6 javascript 箭头函数 ES6为了书写方便引入了函数的全新简写方式-箭头函数 <!DOCTYPE html> <html> <head> & ...

  7. es6系列-变量声明

    es6系列所有文章都是阅读阮一峰老师的<ES6标准入门>(第2版)所做的读书笔记.方便日后查阅相关基础知识. git地址: https://github.com/rainnaZR/es6- ...

  8. ECMAScript 6 入门——ES6 声明变量的六种方法

    ES6 声明变量的六种方法 ES5 只有两种声明变量的方法:var命令和function命令.ES6 除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和cla ...

  9. 新手必看ES6基础

    ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来说明这两 ...

随机推荐

  1. zabbix的配置

    一.网络自动发现: 1.zabbix的网络自动发现是一个非常强大的功能,该功能可以完成以下工作. a.快速发现并添加主机. b.简单的管理. c.随着环境的改变而快速搭建监控系统. 2.网络发现基于以 ...

  2. [hdu3549]Flow Problem(最大流模板题)

    解题关键:使用的挑战程序设计竞赛上的模板,第一道网络流题目,效率比较低,且用不习惯的vector来建图. 看到网上其他人说此题有重边,需要注意下,此问题只在邻接矩阵建图时会出问题,邻接表不会存在的,也 ...

  3. Unity堆内存优化

    unity中减少堆内存分配以减少垃圾回收处理:只有局部变量且为值类值的变量是从stack栈中分配内存,其它所有情况都是从heap堆中分配内在.* 缓存获取到的数据.* 频繁被调用的函数中尽量少的分配空 ...

  4. 为JFileChooser设定扩展名过滤

    --------------------siwuxie095                             工程名:TestFileChooser 包名:com.siwuxie095.fil ...

  5. C++中的对象的赋值和复制

    对象的赋值 如果对一个类定义了两个或多个对象,则这些同类的对象之间可以互相赋值,或者说,一个对象的值可以赋给另一个同类的对象.这里所指的对象的值是指对象中所有数据成员的值. 对象之间的赋值也是通过赋值 ...

  6. sell02 展现层编写

    # API ###商品列表 ``` GET /sell/buyer/product/list ``` 参数 ``` 无 ``` 返回 ``` { "code": 0, " ...

  7. ASP.NET WebForm中JavaScript修改了页面上Label的值，如何在后台代码中获取

    在用ASP.NET WebForm开发一个项目时,遇到如下的一个情况 页面上有一个Textbox控件,还有2个Label 控件. 当Textbox控件中的值更改时,两个Label控件上的值做相应的更改 ...

  8. php小块代码

    //页面本身网址 "http://".$_SERVER["HTTP_HOST"].preg_replace("/[^\/]+$/",&quo ...

  9. HDU 5245 Joyful (期望)

    题意:进行K次染色,每次染色会随机选取一个以(x1,y1),(x2,y2)为一组对角的子矩阵进行染色,求K次染色后染色面积的期望值(四舍五入). 析:我们可以先求出每个格子的期望,然后再加起来即可.我 ...

  10. 在Android中使用FlatBuffers（上篇）

    本文来自网易云社区. 总览 先来看一下 FlatBuffers 项目已经为我们提供了什么,而我们在将 FlatBuffers 用到我们的项目中时又需要做什么的整体流程.如下图: 在使用 FlatBuf ...