创新互联百度小程序教程：esnext

esnext
- let & const
- 箭头函数
- 更简洁的对象字面量（enhanced object literal）
- 模板字符串（template string）
- 解构赋值（Destructuring）
- Default + Rest + Spread

esnext

SJS 支持部分 ES6 语法。

let & const

代码示例

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
  
  
  // demo.sjs  
  
  function foo(){  
  
   let str = 'hello sjs';  
  
   if (true) {  
  
   let count = 2;  
  
   }  
  
   // hello sjs  
  
   console.log(str);  
  
   // 引用错误：count 未定义   
  
   console.log(count);   
  
  }

箭头函数

代码示例

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
  
  
  // demo.sjs  
  
  const arr = [1, 2, 3];  
  
  const double = x => x * 2;  
  
  // output: [2, 4, 6]  
  
  console.log(arr.map(double));   
  
    
  
  var obj = {  
  
   birth: 1970,  
  
   getAge() {  
  
   const b = this.birth;  
  
   const fn = () => new Date().getFullYear() - this.birth;  
  
   return fn();  
  
   }  
  
  };  
  
  obj.getAge();

更简洁的对象字面量（enhanced object literal）

代码示例

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
  
  
  var num = 1;  
  
  var obj = {  
  
   // 对象属性  
  
   num,   
  
   // 对象方法  
  
   printNum() {   
  
   console.log(num);  
  
   }  
  
  };  
  
  // 1  
  
  obj.printNum();

注：不支持super关键字，不能在对象方法中使用super

模板字符串（template string）

 
 
 
  
  
  const NAME = 'sjs';  
  
  // hello sjs  
  
  const msg = `hello ${NAME}`;

解构赋值（Destructuring）

代码示例

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
  
  
  // array 解构赋值  
  
  var [a, ,b] = [1, 2, 3];  
  
  // true  
  
  a === 1;   
  
  // true  
  
  b === 3;   
  
    
  
  // 对象解构赋值  
  
  let { foo , bar } = { foo: 'aaa', bar: 'bbb' };  
  
  // foo = 'aaa'  
  
  // bar = 'bbb'  
  
    
  
  // 函数参数解构赋值  
  
  // 1.参数是一组有次序的值  
  
  function f1([x, y, z]) {  
  
   // 1  
  
   console.log(x);  
  
   // 2   
  
   console.log(y);   
  
   // 3  
  
   console.log(z);   
  
  }  
  
  f1([1, 2, 3]);  
  
    
  
  // 2.参数是一组无次序的值  
  
  function f2({x, y, z}) {  
  
   // 1  
  
   console.log(x);   
  
   // 2  
  
   console.log(y);   
  
   // 3  
  
   console.log(z);   
  
  }  
  
  f2({z: 3, y: 2, x: 1});  
  
    
  
  // 解构赋值默认值  
  
  var [a = 1] = [];  
  
  // true  
  
  a === 1;   
  
    
  
  // 函数参数：解构赋值 + 默认值  
  
  function r({a, b, c = 3, d = 4}) {  
  
   return a + b + c + d;  
  
  }  
  
  // true  
  
  r({a: 1, b: 2}) === 10;

Default + Rest + Spread

代码示例

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
  
  
  // 1. Default  
  
  function f1(x, y = 2) {  
  
   // 如果不给y传值，或者传值为undefied，则y的值为12  
  
   return x + y;  
  
  }  
  
  // true  
  
  f1(1) === 3;   
  
    
  
  // 2. Rest  
  
  function f2(x, ...arr) {  
  
   return x * arr.length;  
  
  }  
  
  // true  
  
  f2(3, 'hello', 'sjs') === 6;   
  
    
  
  // 3. Spread  
  
  function f3(x, y, z) {  
  
   return x + y + z;  
  
  }  
  
  // 数组解构  
  
  f3(...[1,2,3]) == 6;   
  
    
  
  // 4. Rest + Spread  
  
  // 数组解构赋值, b = [2, 3]  
  
  const [a, ...b] = [1, 2, 3];   
  
  // 对象解构赋值, other = {d: 2, e: 3}  
  
  const {c, ...other} = {c: 1, d: 2, e: 3};   
  
  // 对象解构 f = {d: 2, e: 3}  
  
  const f = {...other};

当前标题：创新互联百度小程序教程：esnext
文章来源：http://www.shufengxianlan.com/qtweb/news29/323279.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容