IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    ES6初识

    草依山发表于 2015-07-24 05:37:05
    love 0

    ES6 简述

    就是新一代的Javascript标准,js引擎按照这个标准来实现Javascript这个语言,不需要把它想得太神秘,太高级,对于我们js的工程师而言,熟悉新的特性及语法,在实践过程中,提高工作效率,把项目搞好就行。当然,还有一点就像[我微博]里提到的,如果再不学习,可能过个一两年,等ES6普及开来了,一些库的代码你可能都读不懂了。

    兼容性

    由于今年才定稿,早期某些特性定稿的时候已经有『先进的浏览器』实现了部分特性,浏览器支持还不是太完整,而服务器端更激进一些,很多特性已经支持了,详细的特性支持列表,建议参考

    http://kangax.github.io/compat-table/es6/

    以后会是每年制定一个标准,所以也以年号来定,ES6也叫ES2015

    特性简介

    关于学习的一点感触

    语言只是工具,新特性如果能提高工资效率那必然是好特性,如果不能,然并卵 loadsh和underscore的存在,只能说明语言本身有很多未完善的地方,等到语言真的完善了,它们也就退出历史舞台了。

    似曾相似

    Object.assign

    类似于jQuery的$.extend,但是功能比较弱,只是浅拷贝,用处很多,也可以克隆对象

    let a = {a:1}
    let b = {a:2}
    let c = {c:{d:1}}
    console.log(Object.assign(a, b, c))
    c.c.d = 2
    

    Array.prototype.find

    查找到第一个符合条件的值比遍历更好用

    console.log([1,3,4,2].find(function(v){
      return v > 3
    })) //4
    

    Array.prototype.filter

    查找到所有符合条件的值

    console.log([1,3,4,2].filter(function(v){
      return v > 2
    })) //[3,4]
    

    String.prototype.includes

    String.prototype.startsWith

    String.prototype.endsWith

    三个方法都是indexOf的加强版,其中的查询字符串只不支持正则,如果是正则会抛出错误

    console.log("hello".startsWith("ello", 1)) // true
    console.log("hello".endsWith("hell", 4)  ) // true, 针对前4个字符
    console.log("hello".includes("ell")      ) // true
    console.log("hello".includes("ell", 1)   ) // true
    console.log("hello".includes("ell", 2)   ) // false
    

    字符串模板

    告别手工拼接字符串

    let x = 123
    console.log(`${x}`) //123
    

    ${}内是标准的js语法

    let x = 123
    let y = 234
    console.log(`${(x+y).toString(16)}`) //165
    

    多行字符串

    let name = 'hubo.hb'
    let html = `
      <div id="header">
          ${name}
      </div>
    `
    console.log(html)
    

    标签模板

    一个可以干预模板翻译过程的函数

    function toUpper(s) {
      return s.toString().toUpperCase()
    }
    console.log(toUpper`Go up!`) //'GO UP!'
    

    第一个参数是除了替换的字符串的数组,剩下的参数是所有替换出来的值

    function valuesOnly(stringsArray, ...valuesArray) {
      return valuesArray.join('; ')
    }
    var one = 1
    var two = 2
    console.log(valuesOnly`uno=${one}, dos=${two}, tres=?`) //'1; 2'
    

    let, const

    let is the new var,块级作用域, 区块中存在let和const命令,凡是在声明之前就使用这些命令,就会报错。 不会有变量提升,重复定义会报错

    'use strict';
    
    if (true) {
      let a = 1
      if (a) {
        console.log(a) //ReferenceError: a is not defined
        let a = 2
      }
    }
    

    const定义过的变量不能修改(修改无效),同样不会有变量提升,重复定义会报错

    const a = 1
    a = 2 //TypeError: Assignment to constant variable.
    

    箭头函数

    减少函数输入,this的自动绑定

    var func = () => 'I return 1' //无参数的情况
    console.log(func()) //I return 1
    

    遍历操作常用

    console.log([1,2,3,4].map(v => v*2)) //单参的情况
    
    • 不能当作构造函数
    • 不能改变this
    • 不可以使用arguments对象
    let o = {
      render(){
        setTimeout(()=> this.showIt(), 100)
      },
      showIt(){
        console.log('I show')
      }
    }
    
    o.render()
    

    更方便的对象字面量

    const x = 1
    const y = 2
    
    console.log({x, y}) //{x:1, y:2}
    

    属性表达式

    const x = 1
    const y = 2
    
    console.log({['xy'+ x + y]:`${x + y}`})
    

    rest参数和展开符(...)

    函数定义的时候使用...变量名,必须是最后一个参数,函数体内通过变量获取参数数组

    const fn = (...rest) => rest.join()
    console.log(fn(1, 2))
    

    ...把数组转化为参数序列,也可以

    console.log([...'hello']) //["h", "e", "l", "l", "o"]
    

    解构赋值

    模式匹配批量赋值,数组,字符串,对象均可

    const [a, b] = [1, 2]
    console.log(a) //1
    console.log(b) //2
    
    const [c, d] = [...[1, 2]]
    console.log(c) //1
    console.log(d) //2
    
    const [a, b, ...end] = [1, 2, 3, 4]
    console.log(a, b, end) //1 2 [3,4]
    
    const [h,...ends] = 'hello'
    console.log(h, ends) //h ["e", "l", "l", "o"]
    

    快速提取JSON里的值

    var jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    }
    
    let { id, status, data: [,secondData] } = jsonData;
    
    console.log(id, status, secondData)// 42 OK 5309
    

    参数默认值

    传入的参数为undefined时,使用默认值

    let number = (int = 0) => int;
    console.log(number()) //0
    

    对象参数默认值

    function fetch(url, { body = '', method = 'GET', headers = {} } = {}){
      console.log(method)
    }
    
    fetch('http://jser.me')  //GET
    fetch('http://jser.me', {})  //GET
    fetch('http://jser.me', {method:'POST'})  //POST
    

    参数省略只能从后向前省

    类

    不用讲太多,自己看看使用就行了,事实上也可以使用ES5来模拟

    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '('+this.x+', '+this.y+')';
      }
    }
    

    Promies

    不需要多讲,比较简单,大家多用就行了,用多了会上瘾。

    Map和Set

    两种新引入的数据结构,Map的键可以为任意对象,Map是Object的补充 Set可以理解为成员唯一的数组

    总结

    JS越来越完善,当然也越来越像JAVA。

    参考链接

    • es6兼容性表格
    • 使用ES6的generators来搞同步异步
    • es6-generators-dive
    • async-generators
    • concurrent-generators
    • mozilla Map
    • mozilla WeakMap
    • mozilla Set
    • mozilla WeakSet
    • 使用ES6替换掉Coffeescript
    • 在ES3的环境里使用ES6特性
    • ES6字符串
    • 开始使用ES6

    文章来源: ES6初识
    文章的标签: javascript


沪ICP备19023445号-2号
友情链接