360SDN.COM

首页/ES6/列表

一起学习一下ES6的一些新特性

来源:  2018-03-27 21:07:23    评论:0点击:

北京-小明 Java资源社区

  ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标砖,已经在2015年6月正式发布了,它的目标,是使得JavaScript语言可以用来编写负责的大型应用程序 ,成为企业级开发语言。
     ES6里面出了很多的新特性和新语法,nodejs和reactjs里面很多都是引用的esmascript6的语法,因此熟悉esmascript的语法是十分重要的,下面我们一起来简单了解吧。
1  let和const定义变量

        ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

        const声明一个只读的常量。一旦声明,常量的值就不能改变。

        ES6存在{}这样的块级别作用域,在作用域内申明的let变量不可以在其他作用域类获取到。

{
var a ="haha";
let  b="hehe";
}
console.log(a);//haha
console.log(b);//ReferenceError: a is not defined.
const c=100;
c=200;//Uncaught TypeError: Assignment to constant variable


2 变量的解构赋值  

        ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。以前,为变量赋值,只能直接指定值。

let a = 1;let b = 2;let c = 3;

        ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

3 字符串的扩展-模板字符串  

      传统的 JavaScript 语言,输出模板通常是这样写的。

$('#result').append(
 'There are <b>' + basket.count + '</b> ' +
 'items in your basket, ' +
 '<em>' + basket.onSale +
 '</em> are on sale!');

   上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。模板字符串的换行就会直接显示换行。

$('#result').append(`
 There are <b>${basket.count}</b> items   in your basket, <em>${basket.onSale}</em>
 are on sale!`);

    这样使得模板的输出字符串的拼接变得更加简单。
4  箭头函数  

       ES6 允许使用“箭头”(=>)定义函数。

var f = v => v;

      上面的箭头函数等同于:

var f = function(v) {
 return v;};

     如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

var f = () => 5;// 等同于
var f = function () { return 5 };
sum = (num1, num2) => num1 + num2;// 等同于
var sum = function(num1, num2) {
   return num1 + num2;
};

      函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。用箭头函数可以避免对象内部this指向改变的问题,既简化了书写,同时解决了头疼的this指向问题。
5 Set数据结构

     ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。可以自动去除重复的数据

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
 console.log(i);
}// 2 3 5 4

6  Map数据结构  

      ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。


const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content');
m.get(o) // "content"
m.has(o); // true
m.delete(o) // true
m.has(o) // false

    ES6新增的很多新的特性,今天就介绍到这里了,有兴趣的小伙伴们可以百度看看更多的特性。


版权归本公众号所有
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权