ES6入门:最常用的9大特性

2018年3月8日21:27:13 发表评论 36

ES6是JavaScript的语言的标准,所以学习它是必然的,在我印象中,我是在学习Vue的时候有想了解ES6和欲望的。

ES6的特性有很多,对于我个人来说,秉着二八原则,只学一些常用的,用最短的时间提高写JS的效率,下面我们一起来看看常用的ES6的新特性吧。

ES6入门:最常用的9大特性

1、const和let

constlet是ES6中对变量的声明方式,在之前的JavaScript中,只有一个var变量声明方式,用var声明的变量始终会在函数的最顶部,会发生“变量提升”现象。

let

例如下面这个例子,猜猜最后输出的是?

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

出乎意料的是10,因为上面的变量i是通过var命令声明的,全局只有一个变量i,循环体内赋给数组a的函数内容的console.log(i)是全局的i,所以导致运行输出的是最后一轮i的值。

如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

let表示的是变量、const表示的是常量,两者都是块级作用域,什么是块级作用域:

在{}大括号内的代码就可以看作是块级作用域

const

const只能被定义一次,再次赋值就会报错,就如下面代码这样:

const name = 'lux'
name = 'joe' //再次赋值此时会报错

2、模板字符串

我们在以往使用js做大量字符串拼接时,经常会出现这样情况:

var s = 'js'+'html'+'css'+'vue'+'react'+'jquery';
// 再或者这样的
var msg = "Hi \
niaho\
my name is ES6 ${s}"

上面这些都能用ES6中的模板字符串``来简化,变量用${}来界定

var s = `js html css vue react jquery`
var msg = `Hi 
niaho
my name is ES6`

3、函数

函数默认参数

在ES5中,我们是这样给函数定义参数默认值的:

function action(num) {
  num = num || 200
  //当传入num时,num为传入的值
  //当没传入参数时,num即有了默认值200
  return num
}

而在ES6中,我们是这样定义函数的默认参数的:

// 在定义函数时便初始化了这个参数
function action(num = 200) {
    console.log(num)
}
action() //200
action(300) //300

箭头函数

在ES6中,我最喜欢的就是箭头函数,它有三个特点:

  1. 不需要通过function关键词来创建
  2. 可以省略掉return 关键词
  3. 继承当前上下文的this关键词
//例如:
[32,320,1,5].map( x => x + 1 )

//等同于:
[32,320,1,5].map((function(x){
    return x + 1
}).bind(this))

在使用箭头函数时,要注意:如果只有一个参数时,是可以省略括号的,当大于一个参数的时候就得这样使用:

var people = (name, age) => {
  const fullName = 'h' + name
  return fullName
} 
//如果缺少()或者{}就会报错

4、拓展的对象功能

在ES5中,我们都是以键值对形式书写的,例如:

 function people(name, age) {
  return {
      name: name,
      age: age
  };
}

在ES6中我们可以这样简写:

function people(name, age) {
    return {
        name,
        age
    };
}

ES5是这样给对象添加方法的:

var people = {
    name: 'lux',
    getName: function() {
        console.log(this.name)
    }
}

ES6可以省略方法的function和冒号:

const people = {
    name: 'lux',
    getName () {
        console.log(this.name)
    }
}

5、更方便的数据访问--解构

ES6中新增了解构,将一个数据结构分解为更小的部分,ES5提取对象信息如下:

var people = {
    name: 'lux',
    age: 20
}
var name = people.name
var age = people.age
console.log(name + ' --- ' + age)

这样一个个获取太不geek了,在ES6中我们可以直接这样获取数据:

//对象
const people = {
    name: 'lux',
    age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'

6、Spread Operator 展开运算符

在ES6当中,有三个点...的玩法,就是Spread Operator,看看它的用途:

//合并数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]

//合并对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

//组合新Object,有重复,则右边覆盖左边
const first = {
    a: 1,
    b: 2,
    c: 6,
}
const second = {
    c: 3,
    d: 4
}
const total = { ...first, ...second }
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

也可以用来筛选:

//数组
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//对象
const user = {
    username: 'lux',
    gender: 'female',
    age: 19,
    address: 'peking'
}
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

7、import 和 export

import和export分别是导入和导出模块

//全部导入
import people from './example'

//有一种特殊情况,即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from './example'

// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

关于导入的时候有无大括号的区别:

  1. 当用export default people导出时,就用 import people 导入(不带大括号)
  2. 一个文件里,有且只能有一个export default。但可以有多个export。
  3. 当用export name 时,就用import { name }导入(记得带上大括号)
  4. 当一个文件里,既有一个export default people, 又有多个export name 或者 export age时,导入就用 import people, { name, age }
  5. 当一个文件里出现n多个 export 导出很多模块,导入时除了一个一个导入,也可以用import * as example

8、Promise

使用Promise用同步的方式去写异步的代码,可以大大的提高代码的可读性,提高程序的可扩展性。

发送异步请求:

fetch('/api/todos')
  .then(res => res.json())
  .then(data => ({ data }))
  .catch(err => ({ err }));

更多有关Promise,可以查看廖老师的教程

9、Generators

Generators是生成器,是一个能返回迭代器的函数。它的声明比普通函数function多加个星号*,函数体内是使用yield关键字。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号,机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了,直到下一个人再次唤起才会继续吐票。

同样,当你调用一个generator时,它将返回一个迭代器对象。它有next方法,next方法有done和value两个属性。

value是你获得的值,done用来表明你的generator是否已经停止提供值。以去取票的例子,每个排队号就是value,打印票的纸是否用完就是done。

// 生成器
function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}

// 生成器能像正规函数那样被调用,但会返回一个迭代器
let iterator = createIterator();

console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

那么问题来了,咱们也不能手动一直调用next()方法,你需要一个能够调用生成器并启动迭代器的方法。就像这样子的

function run(taskDef) { //taskDef即一个生成器函数

// 创建迭代器,让它在别处可用
let task = taskDef();

// 启动任务
let result = task.next();

// 递归使用函数来保持对 next() 的调用
function step() {

    // 如果还有更多要做的
    if (!result.done) {
        result = task.next();
        step();
    }
}

// 开始处理过程
step();

}

上面只说到了ES6的九大常用特性,其实还有很多,但是上面的是我们日常使用最多的,你可以在阮一峰ECMAScript 6 入门里面查看更多关于ES6的特性。

注:考虑到浏览器兼容问题,你写的ES6代码要通过babel在线转换工具来将ES6转换为让所有浏览器都能支持的JavaScript代码。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: