UDN-企业互联网技术人气社区

板块导航

浏览  : 1505
回复  : 0

[干货] 使用ES6新特性开发微信小程序(1)

[复制链接]
舞操的头像 楼主
发表于 2017-1-6 20:55:02 | 显示全部楼层 |阅读模式
  ECMAScript 6(简称ES6)是JavaScript语言的最新标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

  微信小程序支持绝大部分ES6的新增特性。

  Constants(常量)

  ES6新增了const关键字,用来声明常量,一旦声明,常量的值就不能改变了。

  1.   const PI = 3.141593;

  2.   console.log(PI);

  3.   PI = 3; // 报错: Uncaught TypeError: Assignment to constant variable.

  4.   const PI = 3.1; // 报错: Uncaught SyntaxError: Identifier 'PI' has already been declared
复制代码


  const只在声明所在的块级作用域内有效。

  Scoping(作用域)

  ES6新增了let关键字,用来声明变量,但声明的作用只在代码块内有效。

  1.   {

  2.   let a = 10;

  3.   var b = 1;

  4.   }

  5.   console.log(a); // 报错: Uncaught ReferenceError: a is not defined

  6.   console.log(b); // 输出: 1
复制代码


  上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。

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

  2.   console.log(i);

  3.   }

  4.   console.log(i) // 报错: ReferenceError: i is not defined
复制代码


  上面代码的计数器i,只在for循环体内有效。

  let为JavaScript新增了块级作用域。

  1.   function test() {

  2.   let x = 1;

  3.   let y = 2;

  4.   {

  5.   let x = 10;

  6.   let y = 20;

  7.   }

  8.   console.log(x, y);

  9.   }

  10.   test();// 输出: 1 2
复制代码


  上面的函数有两个代码块,都声明了变量x, y,运行后输出1 2。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n,最后输出的值就是10 20。

  Arrow Functions(箭头函数)

  箭头函数是ES6在语法上提供的一个很好的特性,其特点有:

  语法更为简洁了。

  文法上的固定this对象。

  一个参数

  1.   let square = (x) => x * x;

  2.   console.log('5 * 5 = ', square(5)); // 输出: 5 * 5 = 25
复制代码


  多个参数

  1.   let add = (x, y) => x + y;

  2.   console.log('2 + 3 = ', add(2, 3)); // 输出: 2 + 3 = 5
复制代码


 
  1.  let total = () => square(add(5, 3));

  2.   console.log( '(5 + 3)*(5 + 3) = ', total()); // 输出: (5 + 3)*(5 + 3) = 64
复制代码


  数组遍历

  
  1. var array = [1, 2, 3];

  2.   array.forEach(v => console.log(v)); // 输出: 1 2 3
复制代码


 
  1.  var bob = {

  2.   _name: "Bob",

  3.   _friends: ['Tom', 'Jerry'],

  4.   printFriends() {

  5.   this._friends.forEach(f =>

  6.   console.log(this._name + " knows " + f));

  7.   }

  8.   }

  9.   bob.printFriends(); // 输出: Bob knows Tom Bob knows Jerry
复制代码


  Extended Parameter Handling(参数的扩展)

  允许为函数的参数设置默认值,即直接写在参数定义的后面。

  1.   function logName(name = 'Unknown') {

  2.   console.log('Name: ', name);

  3.   }

  4.   logName(); // 输出:Unknown

  5.   logName('JavaScript'); // 输出:JavaScript
复制代码


  Rest不定参数(用"...."表示)是在函数中使用命名参数同时接收不定数量的未命名参数。

  1.   function add(...numArray) {

  2.   let sum = 0;

  3.   for (let num of numArray) {

  4.   sum += num;

  5.   }

  6.   return sum;

  7.   }

  8.   console.log(add(1, 2, 3)); // 输出:6

  9.   console.log(add(1, 2, 3, 4, 5)); // 输出:15
复制代码


  Spread操作符和Rest不定参数一样,都使用 "..." 表示,Spread操作符允许我们将数组中的参数一个一个传入函数中。

  1.   function add(x, y, z) {

  2.   return x + y + z;

  3.   }

  4.   console.log(add(...[1, 2, 3])); // 输出:6

  5.   console.log(add(...[3, 4, 5])); // 输出:12
复制代码


  其他

  完整代码:https://github.com/guyoung/GyWxappCases/tree/master/ES6

原文作者:guyoung 来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部