ES6常用语法

发表于 | 分类于

ES6 - ECMAScript 6.0

箭头函数

  • ES6箭头函数
  • 注意 1：函数体内的this对象，就是定义时所在的对象（一般是外层函数中的this）
  • 注意 2：无法使用arguments，没有arguments对象
  • 注意 3：不能当作构造函数，不能使用new创建对象
  • 注意：不要在Vue的选项属性或回调上使用箭头函数
    • 比如：created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 语法： */
var fn = arg => arg

// 上面的箭头函数等同于：
var fn = function (arg) {
  return arg
}

var fn = () => {
  console.log('随机内容')
}
// 等同于：
var fn = function () {
  console.log('随机内容')
}

rest参数

  • ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了
  • 说明：rest 参数的类型是：数组
  • 注意：rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function add(...values) {
  var sum = 0
  values.forEach(function(val) {
    sum += val
  })
  return sum
}

add(2, 5, 3) // 10


// 报错
function f(a, ...b, c) {
  // ...
}

解构赋值

  • ES6解构
  • ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 对象解构
var { foo, bar } = { foo: "aaa", bar: "bbb" }
foo // "aaa"
bar // "bbb"

// 数组解构
var [a, b, c] = [1, 2, 3]

// 函数参数的解构赋值
function foo({x, y}) {
  console.log(x, y)
}

foo({x: 1, y: 2}) // 1 2

对象简化语法

  • 对象中的属性和方法，都可以使用简化语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 属性的简化语法： */
var foo = 'bar'
var baz = {foo}

// 等同于
var baz = {foo: foo}


/* 方法的简化语法： */
var o = {
  method() {
    return "Hello!"
  }
}
// 等同于
var o = {
  method: function() {
    return "Hello!"
  }
}

属性名表达式

  • ES6 允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内。
1
2
3
4
5
6
7
8
9
10
var propKey = 'foo'
var methodKey = 'bar'

var obj = {
  [propKey]: true,
  ['a' + 'bc']: 123,
  [methodKey]() {
    return 'hi'
  }
}

变量声明- let、const

let

  • ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

  • let特点：

    • 1 块级作用域（ES6）
    • 2 先声明再使用
    • 3 不允许重复声明
1
2
3
4
5
6
7
/* 基本使用 */
let num = 2

{
  let num = 9
}
console.log(num)

const

  • const声明一个只读的常量。一旦声明，常量的值就不能改变。
  • const的作用域与let命令相同：只在声明所在的块级作用域内有效
1
2
3
4
5
6
7
8
9
const PI = 3.1415
console.log(PI) // 3.1415

// 修改 常量的值 会报错
PI = 3 // TypeError: Assignment to constant variable.

// 可以修改对象中属性的值
const user = { name: 'rose' }
user.name = 'jack'

ES6语法 - class关键字

  • ES6以前，JS是没有class概念的，而是通过构造函数+原型的方式来实现的
  • 注意：ES6中的class仅仅是一个语法糖，并不是真正的类，与Java等服务端语言中的类是有区别的
  • ES6 - 文档
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Person {
  constructor() {
    // 实例属性
    this.name = 'jack'
  }

  // 实例方法
  say() {}

  // 静态方法
  static coding() {}
}
// 静态属性
Person.age = 0

console.log(Person.age)
  • 类继承：
    • 1 如果子类提供了 constructor，那么，必须要调用super()
    • 2 子类添加属性，必须在 super() 调用后面
1
2
3
4
5
6
7
8
9
10
// 类继承：
class Chinese extends Person {
  constructor(name, gender, weight) {
    super(name, gender)

    this.weight = weight
  }
}

const ch = new Chinese('小明', '男', 130)

静态属性和实例属性

  • 静态属性：直接通过类名访问
  • 实例属性：通过实例对象访问

ES6模块化 - import和export

  • import：导入模块

  • export：导出模块

  • 注意1：export default 每个模块只能使用一次

  • 注意2：export 每个模块可以使用多次
  • 注意3：一个模块可以导出多个内容，export default 和 export 可以一起使用
1
2
3
4
5
6
7
8
// main.js
// 导入 default 内容，可自定义导入名称
// import num from './a.js'
import num1 from './a.js'

// a.js
const num = 123
export default num
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// main.js
// 导入 export内容
// 注意：导入非default模块内容（str、fn），必须与 导出名称 相同，或者通过 as 修改
// 注意：必须使用花括号
import { str, fn } from './b'

// 加载并修改变量名
// import { str as str1, fn } from './b'
// 整体加载
// import * as bModule from './b'

// b.js
export const str = 'abc'
export function fn() {}
1
2
3
4
5
6
7
8
// main.js
import { str, fn } from './b'

// b.js
const str = 'abc'
function fn() {}
// 一次性导出
export { str, fn }
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多