ES6 13个新特性总结

1. let const

let 表示申明变量。const 表示申明常量。

  • 常量定义了就不能改了。对象除外，因为对象指向的地址没变。
  • const在申明是必须被赋值。
  • 两者都为块级作用域。

块级作用域与函数作用域。任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。函数作用域就好理解了，定义在函数中的参数和变量在函数外部是不可见的。

const a = 1
a = 0 //报错

2. 模块字符串``

可以使用反引号``来进行字符拼接。${}

3. 解构

可以使用{}来对数组和对象进行解构。

4. 函数的参数默认值

函数传参可以有默认值

// ES6；
function printText(text = 'default') {
    console.log(text);
}

5. Spread / Rest 操作符 ...

Spread / Rest 操作符指的是 ...，具体是 Spread 还是 Rest 需要看上下文语境。

  • 当被用于迭代器中时，它是一个 Spread 操作符：迭代器 (Iterator)是按照一定的顺序对一个或多个容 器 中的元素行进遍历的一种机制
function foo(x,y,z) {
  console.log(x,y,z);
}

let arr = [1,2,3];
foo(...arr); // 1 2 3
  • 当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符：
function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

6. 箭头函数

  • 不需要 function 关键字来创建函数
  • 省略 return 关键字
  • this始终指向函数申明时所在作用域下的this值
//es5
var fun = function() {

}
//es6
var fn = () => {

}

7. for of

  • for of遍历的是键值对中的值
  • for in遍历的是键值对中的键

8. class类

ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

class Student {
  constructor() {
    console.log("I'm a student.");
  }

  study() {
    console.log('study!');
  }

  static read() {
    console.log("Reading Now.");
  }
}

console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

9. 导入导出

  • 导入improt
  • 导出export default

10. promise

Promise 用于更优雅地处理异步请求。

  <script>
    new Promise((resolve,reject) => {
      setTimeout(function() {
        resolve('成功了！')
      },1000)
      // reject("失败了，wuwu")
    }).then(data => {
      console.log(data)
    }).catch(err => {
      console.log(err)
    })
  </script>

11. async/await

比promise更好的解决了回调地狱。

async function() {
  awiat fn()
}

12. Symbol

新的基本类型

13. Set集合

存储任何类型的唯一值，即集合中所保存的元素是不重复的。类数组结构。

arr = [1,2,3,1]
let arrNew = new Set(arr)
arrNew = [1,2,3]

类数组不是数组，要转化为数组Array.form(arrNew)这样arrNew才是数组了

赞 (0)

相关推荐

  • ES6新特性二：Iterator(遍历器)和for-of循环详解

    本文实例讲述了ES6新特性之Iterator(遍历器)和for-of循环.分享给大家供大家参考,具体如下: 1. 遍历数组 for-of工作原理:迭代器有一个next方法,for循环会不断调用这个iterator.next方法来获取下一个值,直到返回值中的 done属性为true的时候结束循环. ① 在ES6之前 var arr = [1,2,3,4,5,6]; arr.name = 'a'; for (var index = 0; index < arr.length; index++) {

  • 简单谈谈ES6的六个小特性

    前言 本文主要针对ES6做一个简要介绍,也许你还不知道ES6是什么, 实际上, 它是一种新的JavaScript规范.在这个大家都很忙碌的时代,如果你想对ES6有一个快速的了解,那么请继续往下读,去了解当今最流行的编程语言JavaScript最新一代的六大特性. 过去一年ES6带来了十足的进步,下面是6个我最喜欢的JS新增特性. 一.Object[key] 有时候不能在对象变量声明时设置所有的key/value,所以得再声明之后添加key/value. let myKey = 'key3'; l

  • JavaScript中的Reflect对象详解(ES6新特性)

    Reflect介绍: Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的, ff比较早就支持Proxy和Reflect了,要让node支持Reflect可以安装harmony-reflect ; Reflect不是构造函数, 要使用的时候直接通过Reflect.method()调用, Reflect有的方法和Proxy差不多, 而且多数Reflect方法原生的Object已经重新实现了. 什么要使用Reflect

  • JavaScript ES6的新特性使用新方法定义Class

    ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. ES6中定义类的方式, 就是ES3和ES5中定义类的语法糖,虽然也有些区别,但是整体定义类的方式更加简洁,类的继承更加方便, 如果想对ES6中的继承更加

  • ES6新特性七：数组的扩充详解

    本文实例讲述了ES6新特性之数组的扩充.分享给大家供大家参考,具体如下: 1. Array.from() 1) Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map,他们都部署了iterator接口,字符串也是). let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5的写法 var arr

  • 让微信小程序支持ES6中Promise特性的方法详解

    让微信小程序支持ES6中Promise特性的方法详解

    遇到的问题 微信开发者工具更新版本后, 移除了开发者工具对 ES6 中 Promise 特性原生的支持, 理由是因为实体机器是不支持 Promise 的, 所以我们需要引入第三方的 Promise 库 微信更新日志 解决方案 下载第三方库 在这里我引入的是 Bluebird 库, 可以到Bluebird官网 下载需要的文件,也可以通过本地下载 Bluebrid 提供了两种已经构建好的完整的 Promise 库文件, 未经压缩的 bluebird.js 和已压缩的 bluebird.min.js

  • es6新特性之 class 基本用法解析

    javaScript 语言中,生成实例对象的传统方法是通过构造函数,与传统的面向对象语言(比如 C++ 和 Java)差异很大,ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. es6 class 与es5的面向对象的区别: 1. 写法不同,使用关键字class 2.当new一个实例,默认有一个constructor方法,且默认返回实例对象(this),也可以返回另一对象 3.类的所有方法都在prototype属性上,但是不

  • ES6中非常实用的新特性介绍

    ECMAScript 6离我们越来越近了,作为它最重要的方言,Javascript也即将迎来语法上的重大变革,InfoQ特开设"深入浅出ES6"专栏,来看一下ES6将给我们带来哪些新内容. 写在前面 ES6 已经提交给 Ecma 大会审查了,也就是说,我们将迎来一大波 javascript 的最新标准,还有一些语法糖.ES6 中有很多值得我们关注的东西,下面是我发现的一些我们最常用的一些新特性,进行记录一下. 1. for-of循环 这个东西用来循环数组很爽,原因呢,是因为它弥补了目前

  • ES6新特性之模块Module用法详解

    本文实例讲述了ES6新特性之模块Module用法.分享给大家供大家参考,具体如下: 一.Module简介 ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能. 在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种.前者用

  • 深入浅出ES6新特性之函数默认参数和箭头函数

    深入浅出ES6新特性之函数默认参数和箭头函数

    1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值: 这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 => 符号来定义. 箭头函数相当于匿名函数,所以采用函数表达式的写法

  • ES6(ECMAScript 6)新特性之模板字符串用法分析

    本文实例讲述了ES6(ECMAScript 6)新特性之模板字符串用法.分享给大家供大家参考,具体如下: ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致.在最简单的情况下,它们与普通字符串的表现一致: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 但我们不能说:"原来只是被反撇号括起

  • ES6新特性之Symbol类型用法分析

    本文实例讲述了ES6新特性之Symbol类型用法.分享给大家供大家参考,具体如下: Symbol类型 1. 为了避免属性名的冲突,ES6新增了Symbol类型.Symbol可以产生一个独一无二的值. let s1 = Symbol('a'); let s2 = Symbol('a'); console.log(s1); //Symbol(a) console.log(typeof s1); //symbol console.log(s1 == s2); //false 2.Symbol用于属性名

  • ES6新特性之字符串的扩展实例分析

    本文实例讲述了ES6新特性之字符串的扩展.分享给大家供大家参考,具体如下: 一.ES5字符串函数 concat: 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf: 返回字符串中一个子串第一处出现的索引(从左到右搜索).如果没有匹配项,返回 -1 . charAt: 返回指定位置的字符. lastIndexOf: 返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 . match: 检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 nul

  • ES6新特性之类(Class)和继承(Extends)相关概念与用法分析

    本文实例讲述了ES6新特性之类(Class)和继承(Extends)相关概念与用法.分享给大家供大家参考,具体如下: 一.类(Class) 1.基本语法 JavaScript语言的传统方法是通过构造函数,定义并生成新对象.下面是一个例子 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'

  • ES6新特性之变量和字符串用法示例

    本文实例讲述了ES6新特性之变量和字符串用法.分享给大家供大家参考,具体如下: 一.变量 1. LET 我们都习惯用var 来声明变量,现在还可以用let来声明变量,两者的主要区别是作用域:var声明的变量作用域为包围它的函数,而let声明的变量作用域仅在它所在的块中.(在ES5中是没有块的概念的). if(true){ let a=1; } console.log(a);//undifined 这样使代码更加干净,减少滞留的变量,再如我们经常用的数组遍历: for(let i=0;i<list

  • ES6新特性：使用export和import实现模块化详解

    ES6新特性：使用export和import实现模块化详解

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了几个链接: 现在ES6自带了模块化, 也是JS第一次支持module, 在很久以后 ,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块: 现代浏览器对模块(module)支持程度不同, 目前都是

  • ES6新特性六：promise对象实例详解

    本文实例讲述了ES6新特性之promise对象.分享给大家供大家参考,具体如下: 1. promise 介绍 它是一个对象,也就是说与其他JavaScript对象的用法,没有什么两样:其次,它起到代理作用(proxy),充当异步操作与回调函数之间的中介.它使得异步操作具备同步操作的接口,使得程序具备正常的同步运行的流程,回调函数不必再一层层嵌套. 它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程.这个Promises对象有一个then方法,允许

  • ES6新特性八：async函数用法实例详解

    本文实例讲述了ES6新特性之async函数用法.分享给大家供大家参考,具体如下: 1. async 函数是什么? node.js 版本7及之后版本才支持该函数. 可以简单的理解为他是Generator 函数的语法糖,即Generator 函数调用next() 返回的结果. ① Generator 函数需要next() 或执行器进行执行,而async 函数只需和普通函数一样执行. ② async和await,比起星号和yield,语义更清楚了.async表示函数里有异步操作,await表示紧跟在后

随机推荐