HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

Javascript 6里的4个新语法

2016-8-26 10:55| 发布者: Hyukoh| 查看: 1113| 评论: 0|原作者: WebHek|来自: 推酷

摘要: JS 的 ES6版本已经被各大浏览器广泛支持,很多前端框架也已经使用 ES6,并且还有 Babel 可以做兼容处理,所以ES6已经进入了应用阶段 如果您对 ES6 还不太熟悉,下面4个简单的基础用法可以帮助您快速了解ES6 ...

  JS 的 ES6版本已经被各大浏览器广泛支持,很多前端框架也已经使用 ES6,并且还有 Babel 可以做兼容处理,所以ES6已经进入了应用阶段

  如果您对 ES6 还不太熟悉,下面4个简单的基础用法可以帮助您快速了解ES6


  1.使用 let 和 const 声明变量


  在传统的 ES5 代码中,变量的声明有两个主要问题

  (1)缺少块儿作用域的支持

  (2)不能声明常量

  ES6中,这两个问题被解决了,增加了两个新的关键字: let 和 const

  块儿作用域使用 let

 var a = 1;
  if (true) {
  var b = 2;
  }
  console.log(a); // 1
  console.log(b); // 2

  ES5 中 if 块儿内声明的变量 b 可以在块儿外访问

// in ES6

  let a = 1;

  if (true) {

  let b = 2;

  }

  console.log(a); // 1

  console.log(b); // ReferenceError: b is not defined

  ES6 中 if 块儿内使用 let 声明的变量 b 不能在块儿外访问

  下面这段代码是常见的一个比较迷惑人的情况

var a = [];

for (var i=0; i< 5; i++) {

    a.push(function() {

        console.log(i);

    });

}

a.forEach(function(value) {

    value();

});

  运行结果是:5, 5, 5, 5, 5

  使用 let 声明循环中的变量 i

var b = [];

  for ( let i=0; i< 5; i++) {

  b.push(function() {

  console.log(i);

  });

  }

  b.forEach(function(value) {

  value();

  });

  运行结果是:0, 1, 2, 3, 4

定义常量使用 const

  // in ES5

  var MY_CONSTANT = true;

  MY_CONSTANT = false;

  ES5 中不能定义常量,值可以被改,只能靠我们自己来保证

// in ES6

  const MY_CONSTANT = true;

  MY_CONSTANT = false; // Uncaught TypeError: Assignment to constant variable

  ES6 中使用 const 声明的常量是不可以被改的


  2.模板字符串


  下面这种字符串与变量的拼接方式是比较常见的

  var url = ‘http://www.’ + domain + ‘.com/’ + path + ‘?’ + queryParams;

  ES6 提供了简洁的用法

  let url = `http://www.${domain}.com/${path}?${queryParams}`;

  3.新的 Set 和 Map 对象


  ES5 中我们经常使用数组来存储动态数据,例如

var collection = [];

  collection.push(1, 2, 1);

  console.log(collection); // [ 1, 2, 1]

  其中包含了重复数据,如果不想有重复数据,需要使用代码判断

function addToCollection(collection, value) {

  if (collection.indexOf(value) < 0) {

  collection.push(value)

  }

  }

  ES6 提供了 Set 对象,处理这个情况就方便多了

 let collection = new Set();

  collection.add(1);

  collection.add(2);

  collection.add(1);

  console.log(collection); // Set {1, 2}

  Set 还可以方便的遍历集合,和处理集合中的数据

  ES5 中通常使用 object 来存储键值对数据,例如

 var collection = {};

  collection.a = ‘abc’;

  collection.b = ‘xyz’;

  ES6 有了 Map,就可以这样使用

 let collection = new Map();

  collection.set(‘a’, ‘abc’);

  collection.set(‘b’, ‘xyz’);

  遍历也很简单

 collection.forEach(function(value, key) {

  console.log(key + ":" + value);

  });

  console.log(collection.size);


  4.函数参数


  ES6 中函数的参数有两个新特性

  默认值

function doSomething(someObject) {

  console.log(someObject);

  }

  这里有可能会出现运行时错误,需要验证参数

function doSomething(someObject) {

  if (someObject === undefined) {

  someObject = {};

  }

  console.log(someObject);

  }

  这类的验证代码非常普遍,ES6 中可以给参数设置默认值,就简单了很多

 function doSomething(someObject = {}) {

  console.log(someObject);

  }

  对象解构

  我们常会把一个包含键值对的对象做为参数传给某个函数,然后在函数内获取对象的各个属性

 function doSomething(someObject) {

  var one = someObject.propOne;

  console.log(one);

  var two = someObject.propTwo;

  console.log(two);

  var three = someObject.propThree;

  console.log(three);

  }

  ES6 可以让我们直接在参数中解构对象参数

 function doSomething({ propOne, propTwo, propThree }) {

  console.log(propOne);

  console.log(propTwo);

  console.log(propThree);

  }


原文作者:WebHek
更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-18 05:16

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部