1. 声明变量由var变成let。let实际上为JavaScript新增了块级作用域。let与var相比具有的特性有
  1. 1、不允许重复声明一个变量
  1. var a=5;
  2. var a=7;
  3. let b=6;
  4. let b=8;//Uncaught SyntaxError: Identifier 'a' has already been declared重复声明变量报错,而var重复声明的变量不会报错
  1. 2、不存在变量提升,也就是预解析过程。只有变量声明后才可以调用,在该变量声明前使用会报错
  1. console.log(a);//undefined var存在变量提升过程
  2. var a = 6;
  3. console.log(b);//ReferenceError: b is not defined不存在变量提升过程
  4. let b = 8;
  1.  
  1. 3let声明的变量具有作用域,只在代码块内有作用域。只在块级作用域内有效。
  1. for(let i=0;i<6;i++){
  2. console.log(i);
  3. }
  4. console.log(i);//ReferenceError: i is not defined i只在for循环有效
  5. //var声明的在全局内有效
  6. for(var j=0;j<6;j++){
  7. console.log(j);
  8. }
  9. console.log(j);//6
  1.  
  1. 4、暂时性死区:只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,在代码块内,使用let命令声明变量之前,该变量都是不可用的。
  1. var tmp = 123;
  2.  
  3. if (true) {
  4. tmp = 'abc'; // ReferenceError
  5. let tmp;
  6. }

利用let的块级作用域这一特性,可以用于for循环的计数,添加索引值以及立即执行的匿名函数不再需要了。

  1. //a[i]为DOM元素按钮的集合,点击按钮添加事件
  2. for (let i = 0; i < 10; i++) {
  3. a[i].onclick = function () {
  4. console.log(i);
  5. };
  6. }

2.块级作用域:主要还是通过let来实现。{}表示代码块。只在代码块内有效

  1. {
  2. let a=4
  3. }
  4. console.log(a);//报错

3、使用const定义一个只读的常量。一旦定义不可修改。且一旦定义必须初始化。

  1. const a=5;
  2. a=10;//报错 TypeError: Assignment to constant variable.
    const c;//报错 SyntaxError: Missing initializer in const declaration

若为引用类型,因为变量名不指向数据,只指向数据所在地址,所以const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,例如

  1. //若为数组
  2. const arr = [1, 2, 3];
  3. arr.push(4);
  4. console.log(arr); //[1,2,3,4]
    arr=[1,2,3,4];//报错
  5. //若常量为对象
  6. const obj = {name: '123'};
  7. obj.name = "hxc";
  8. console.log(obj);//{name:'hxc'
    obj = {name:'345'};//报错

因此在定义对象或数组常量时要格外注意。const的其他特性与let一样,只在代码块内有效,不存在变量提升,暂时性死区。

4.解构赋值:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。ES5之前对变量复制是指定值复制例如

  1. var a = 1;
  2. var b = 2;
  3. var c = 3;

而es6允许解构赋值,例如

  1. var [a,b,c] = [1,2,3];
    console.log(a,b,c); //1,2,3
    var [c,d,e,f] = [1,[2],3];
    console.log(c,d,e,f); //1,[2],3,undefined

数组的解构赋值是按照对应顺序结构,且允许数组嵌套,如果解构不成功则为undefined。

对象也可以解构赋值,根据对象的属性解构赋值,变量必须与对象的属性名相同。未解构到的返回undefined;与数组相同允许嵌套。

  1. var obj = {
  2. name: 'hxc',
  3. age: 18
  4. }
  5. var {name, age}=obj;
  6.  
  7. console.log({name, age});
    var {birth} = obj; //undefined

Ecmascript 6新特性的更多相关文章

  1. ECMAScript 6新特性简介

    目录 简介 ECMAScript和JavaScript的关系 let和const 解构赋值 数组的扩展 函数的扩展 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言 ...

  2. ECMAScript 2021 新特性

    ECMAScript 2021 新特性 refs https://codeburst.io/exciting-features-of-javascript-es2021-es12-1de8adf655 ...

  3. ECMAScript 6新特性(1)数组篇

    数组现有的方法: .concat():连接两个或更多的数组,并返回结果. .join():把数组的所有元素放入一个字符串.元素通过指定的分隔符进行分隔. .pop():删除并返回数组的最后一个元素 . ...

  4. ECMAScript 6 | 新特性

    新特性概览 参考文章: http://www.cnblogs.com/Wayou/p/es6_new_features.html ——————————————————————————————————— ...

  5. ECMAScript 6新特性介绍

    箭头函数 箭头函数使用=>语法来简化函数.在语句结构上和C#.Java 8 和 CoffeeScript相似,支持表达式和函数体. . =>`操作符左边为输入的參数.而右边则是进行的操作以 ...

  6. ECMAScript 6新特性简记

    ECMAScript 6.0是JavaScript语言的2015年6月的发布版. 一.let和const命令 let:用来声明变量,用法类似于var,但是只在let命令所在的代码块内有效. var a ...

  7. ECMAScript 6 新特性-set。const

    一.let命令是es6新增的特性,作用与var命令类似,声明变量,不同之处在于声明的变量的作用域为块级作用域.引入let后带来了很多新的特性. 1作用域,es5之前之后函数作用域和全局作用域,let的 ...

  8. ECMAScript 5 新特性

    Strict模式 开启strict: 在文件头部,或者在一个function头部内,添加‘use strict’或者“use strict”. Strict模式的限制,以及违反时出现的异常: 新定制了 ...

  9. ECMAScript 6新特性之Proxy

    ECMAScript 6中新增了一个全局构造函数:Proxy.该构造函数能够接收两个參数:一个目标对象.一个处理对象. 代码演示样例: var target = {}; var handler = { ...

随机推荐

  1. [LeetCode] The Skyline Problem 天际线问题

    A city's skyline is the outer contour of the silhouette formed by all the buildings in that city whe ...

  2. [LeetCode] Find Peak Element 求数组的局部峰值

    A peak element is an element that is greater than its neighbors. Given an input array where num[i] ≠ ...

  3. Java正则表达式入门——转自RUNOOB.COM

    Java 正则表达式 正则表达式定义了字符串的模式. 正则表达式可以用来搜索.编辑或处理文本. 正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别. Java正则表达式和Perl的是最为相似 ...

  4. Backbone.js应用基础

    前言: Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery:其主要组件有模型,视图,集合,路由:与后台的交 ...

  5. iOS开发--OC调用JS篇

    OC调用JS篇 其中相对应的html部分如下: <html> <header> <meta http-equiv="Content-Type" con ...

  6. javascript-style-guide

    /* 1.类型types 原始值:存取直接作用于它自身 string number boolean null undefined var foo=1; var bar=foo; bar=9; cons ...

  7. iOS之UITableView组头组尾视图/标题悬停

    最近笔者在公司的iOS开发中,有一个iOS开发同事跑来问了两个问题:1.给UITableView设置了组头和组尾视图,但是一直显示不出来?2.UITableView的section的header和fo ...

  8. mongodb安装启动遇到的问题

    好不容易下载到了mongodb,配置的时候遇到了不少问题. 下载的是解压包,不是官网的,有一个bin目录,解压到一个自己想要的目录,如d:\mongo,首先把bin复制进来,然后创建data目录,da ...

  9. vuex(1.0版本写法)

    Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/  2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...

  10. 【hihocoder#1413】Rikka with String 后缀自动机 + 差分

    搞了一上午+接近一下午这个题,然后被屠了个稀烂,默默仰慕一晚上学会SAM的以及半天4道SAM的hxy大爷. 题目链接:http://hihocoder.com/problemset/problem/1 ...