美文网首页
es6特性整理

es6特性整理

作者: YomonAh | 来源:发表于2017-03-08 22:36 被阅读0次

es6相较之前es5,增加了许多新的特性,提高了javascript体验,我在es6学习和使用的过程中进行了纪录。

  1. 箭头函数
    箭头函数简化了函数的书写方法,变的非常简洁,还能解决this指向问题。示例如下:
//es5写法:
var item = data.map( function ( item, i ){
      return item;
    })
//使用箭头函数
var item = data.map( (item,i) => {
      return item
    })
  1. let 和 const
    用于量的定义,let定义的量限定块级作用域,超出该作用域就无法读取到,并且同作用域内let声明的变量不能重复;而const用于定义常量,无法改变它的值,示例如下:
for( let i=0;i<5;i++) {} console.log(i)  //i is not defined 
const DURATION = 3*1000; 
DURATION = 6*1000;  //Assignment to constant variable.

  1. es6引入了class关键字,它其实说js原型模式的包装,有了类的概念后,js的对象创建、继承、实例化、构造函数等就变得更加直观易懂。示例如下:
//首先定义一个类
class Fruit {
    constructor( name ){
        this.name = name;
   }
   getName(){
       console.log(this.name)
   }
}
//创建子类继承上面的类
class Banana extends Fruit{
   constructor(name){
      super(name);
   }
   testFunc(){
      console.log('who is my father');
   }
}
//测试
var fruit =  new Fruit('fruit');
var banana = new Banana('banana');
fruit.getName();  //fruit
banana.getName(); // banana
banana.testFunc();  // who is my father
  1. 模板字符串
    模板字符串相比起传统字符串与变量混合写法要简洁易懂的多,它使用反引号`来创建字符串,而里面的变量可以用${变量}来表示,示例如下:
//es5写法
var dom = '<div>hello,'+username+'</div>';
//es6语法
var dom = `<div>hello, ${username}</div>`;
  1. for...of 循环
    for...of循环是es6新引进的循环功能,它每次循环提供的是不同索引的值,示例如下:
var arr = [12,13,14,15,23];
for (i of arr){
   console.log(i);  //依次输出:12, 13, 14, 15, 23
}
  1. 默认参数
    es6中定义函数时可以给参数设置默认值,示例如下:
//es5写法
function getName(name){
  var myName = name || 'rose';
  console.log('my name is'+myName);
}
//es6
function getName(name='rose'){
  console.log(`my name is ${name}`);
}
  1. 拓展运算符
    扩展运算符是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。示例如下:
// es5的写法
function count(x, y, z) {
  console.log(x,y,z);
}
var arr = [0, 1, 2];
f.apply(null, arr);
// es6的写法
function count(x, y, z) {
  console.log(x,y,z);
}
var arr = [0, 1, 2];
count(...arr);
  1. 对象字面量
    es6可以在对象字面量里定义原型,可以不用function关键字来定义方法,也可以直接调用父类方法,示例如下:
var meat = {
  cook(){
    console.log('cook meat');
  }
};
var human = {
  _proto_:meat,  //指定该对象原型为meat,继承了meat
  fruit(){
    console.log('I like fruit');
  }
};
meat.cook(); // cook meat
human.cook(); // cook meat
  1. Promise对象
    Promise是异步编程的一种解决方案,创建了Promise对象就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易,示例如下:
var promise = new Promise((resolve, reject)=>{
  if(/*if success*/){
    resolve('it completed');
  }else{
    reject(Error('it failed));
  }
});
//绑定处理程序
promise.then(function(result){
  console.log(result); // 程序成功后会运行此处:it completed
},function(err){
  console.log(err);  //程序失败会运行此处:it failed
}

es6 的新特性/语法远不止上述总结的这些,具体中文文档请参考:http://es6.ruanyifeng.com/

相关文章

  • es6特性整理

    es6相较之前es5,增加了许多新的特性,提高了javascript体验,我在es6学习和使用的过程中进行了纪录。...

  • ES6特性整理

    1、新增了 let 和 const 命令let命令 声明变量,它的用法类似于var,但是所声明的变量,只在let命...

  • ES6新特性整理

    一、生成器(实现了迭代器): 1、声明方式:*。例如:function *foo(){}。 2、功能:交互式运行...

  • ES6新特性整理

    let和const命令 var:声明变量,更多的是全局作用域,存在变量提升 let:声明变量,存在于块级作用域,不...

  • ES6新特性整理

    欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 由于没写目录...

  • [ES6-新一代的javascript]

    8个ES6中的新特性 compat-table ES6新特性概览

  • ES6核心特性

    摘要: 聊JS离不开ES6啊 原文:ES6核心特性 作者:ljianshu 前言 ES6 虽提供了许多新特性,但我...

  • ES6教程 从入门快速掌握ES6新特性 精讲(四) 一文看懂!

    ES6教程 从入门快速掌握ES6新特性 精讲(四) 一文看懂! 附:【ES6教程】快速掌握ES6新特性(一)[ht...

  • ES6教程 从入门快速掌握ES6新特性 精讲(三) 一文看懂!

    ES6教程 从入门快速掌握ES6新特性 精讲(三) 一文看懂! 附:【ES6教程】快速掌握ES6新特性(一)[ht...

  • es6新特性

    ES6 新特性 ES6 新特性 一ES6简介 二块级作用域绑定1 let声明2 const声明Constant D...

网友评论

      本文标题:es6特性整理

      本文链接:https://www.haomeiwen.com/subject/feyigttx.html