草依山的Javascript世界

一个Javascript程序猿的学习纪录剩地,不仅仅是JS,还有Linux、Mac、nodeJs、吃、玩!

ES6初识

ES6 简述

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

兼容性

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

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

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

关于学习的一点感触

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

本文自带了babel,在代码区域单击,同时打开开发者工具,可以在控制台里看到输出

或者可以在我弄的这个网页版的repl里运行代码,在控制台里看结果

似曾相似

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

单个参数时可以省略参数括号

var odds = evens.map(v => v + 1)

如果想使用比较复杂的函数体,可以用{}包起来

nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v)
})

如果默认返回一个对象,需要用()把对象包裹起来

var nums = [1, 2, 3, 4]
console.log(nums.map(v => ({v}))) //[ { v: 1 }, { v: 2 }, { v: 3 }, { v: 4 } ]

遍历操作常用

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}`})

同时对象字面量也支持父级调用

var obj = {
  toString() {
    return "d " + super.toString()
  }
}

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

同样可以用在函数参数里

function g({name: x}) {
  console.log(x)
}
g({name: 5}) // 5

可以使用默认值

let [a = 1] = []
console.log(a === 1) // true

参数默认值

传入的参数为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 extends Sharp {
  constructor(x, y) {
    super(x, y)
    this.x = x;
    this.y = y;
  }

  update(x, y) {

  }

  static someMethod(){
     return 'call'
  }

  toString() {
    return '('+this.x+', '+this.y+')';
  }
}

Iterators和for of

迭代对象可以让我们方便的使用for of进行遍历,字符串,数组,Set, Map都可以使用for of进行遍历

var s = '123abc'
for (let n of s) {
  console.log(n) //1 2 3 a b c
}

自定义一个对象的迭代

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1
    return {
      next() {
        [pre, cur] = [cur, pre + cur]
        return { done: false, value: cur }
      }
    }
  }
}

for (var n of fibonacci) {
  if (n > 1000) break
  console.log(n)
}

模块

与nodejs的cmd定义有较大的区别

// lib/math.js
export function sum(x, y) {
  return x + y
}
export const pi = 3.141593

// app.js
import * as math from "lib/math"
alert("2π = " + math.sum(math.pi, math.pi))

默认导出 export default xxx

// lib/mathplusplus.js
export * from "lib/math"
export const e = 2.71828182846
export default function(x) {
    return Math.log(x)
}
// app.js
import ln, {pi, e} from "lib/mathplusplus"
alert("2π = " + ln(e)*pi*2)

Proxy

Proxy我个人理解提供了一个对象行为钩子,我们可以用来做拦截等事情

var target = {}
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`
  }
}

var p = new Proxy(target, handler)
console.log(p.world)

handler里可以用来挂的对象属性:

var handler =
{
  get:...,
  set:...,
  has:...,
  deleteProperty:...,
  apply:...,
  construct:...,
  getOwnPropertyDescriptor:...,
  defineProperty:...,
  getPrototypeOf:...,
  setPrototypeOf:...,
  enumerate:...,
  ownKeys:...,
  preventExtensions:...,
  isExtensible:...
}

Promies

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

Map和Set

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

总结

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

参考链接

文章地址: ES6初识
欢迎关注我的微博与我交流:@草依山
Github上也有一些东西:[Github]
所有文章坚决抵制jb51.net的转载!
标签: javascript 29
2015-07-24

相关文章

2017-02-13 new做了些什么
2016-09-29 [翻译]bash的各种文件载入执行顺序
2016-05-31 phantomjs在linux下截图中文字体问题
2016-04-24 Promise的错误处理
2016-02-23 URL里的+

文章修改纪录

加载中...
Copyright © 2013. Create By 草依山, Fork