变量声明- let、const

let

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

    • 1 块级作用域(ES6)
    • 2 先声明再使用
    • 3 不允许重复声明
/* 基本使用 */ let num = 2 { let num = 9 } console.log(num)

const

  • const声明一个只读的常量。一旦声明,常量的值就不能改变。
  • const的作用域与let命令相同:只在声明所在的块级作用域内有效
const PI = 3.1415 console.log(PI) // 3.1415 // 修改 常量的值 会报错 PI = 3 // TypeError: Assignment to constant variable. // 可以修改对象中属性的值 const user = { name: 'rose' } user.name = 'jack'

字符串模板

  • 说明:代替原始的字符串拼接
const num = 1 // ${} 中可以使用JS表达式 let dv = `<div>${num}</div>`

箭头函数

  • ES6箭头函数
  • 注意 1:函数体内的this对象,就是定义时所在的对象(一般是外层函数中的this)
  • 注意 2:无法使用arguments,没有arguments对象
  • 注意 3:不能当作构造函数,不能使用new创建对象
  • 注意:不要在Vue的选项属性或回调上使用箭头函数

    • 比如:created: () => console.log(this.a)vm.$watch('a', newValue => this.myMethod())
/* 语法: */ 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 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错
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)。
// 对象解构 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

对象简化语法

  • 对象中的属性和方法,都可以使用简化语法
/* 属性的简化语法: */ var foo = 'bar' var baz = {foo} // 等同于 var baz = {foo: foo} /* 方法的简化语法: */ var o = { method() { return "Hello!" } } // 等同于 var o = { method: function() { return "Hello!" } }

属性名表达式

  • ES6 允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内。
var propKey = 'foo' var methodKey = 'bar' var obj = { [propKey]: true, ['a' + 'bc']: 123, [methodKey]() { return 'hi' } }

class关键字

  • ES6以前,JS是没有class概念的,而是通过构造函数+原型的方式来实现的
  • 注意:ES6中的class仅仅是一个语法糖,并不是真正的类,与Java等服务端语言中的类是有区别的
  • ES6 - 文档
class Person { constructor() { // 实例属性 this.name = 'jack' } // 实例方法 say() {} // 静态方法 static coding() {} } // 静态属性 Person.age = 0 console.log(Person.age)
  • 类继承:

    • 1 如果子类提供了 constructor,那么,必须要调用super()
    • 2 子类添加属性,必须在 super() 调用后面
// 类继承: 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 defaultexport 可以一起使用
// main.js // 导入 default 内容,可自定义导入名称 // import num from './a.js' import num1 from './a.js' // a.js const num = 123 export default num // 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() {} // main.js import { str, fn } from './b' // b.js const str = 'abc' function fn() {} // 一次性导出 export { str, fn }

数组扩展运算符

  • 扩展运算符(spread)是三个点(…)。作用:将一个数组转为用逗号分隔的参数序列
var arr = ['a', 'b', 'c'] console.log(...arr) // 上面这句代码相当于: console.log(arr[0], arr[1], arr[2]);

对象扩展运算符

  • 注意:该语法不是真正的ES规范,需要使用stage-2解析
var obj = {name: 'jack', age: 19} var o = {...obj, gender: 'male'} // o => {name: 'jack', age: 19, gender: 'male'}

Promise 异步编程

  • ES6 - Promise
  • Promise是一种对尚未返回的数据的一种承诺
  • promise:承诺、保证

介绍

Promise 是异步编程的一种解决方案,比传统的解决方案`回调函数和事件`更合理和更强大 Promise 将异步操作以同步操作(链式编程)的流程表达出来,避免了层层嵌套的回调函数(回调地狱的问题)
  • 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
  • Promise对象代表一个异步操作,有三种状态:pending(进行中)fulfilled(已成功)rejected(已失败)

    • 状态改变 1:pending -> fufilled
    • 状态改变 2:pending -> rejected
    • 一旦状态改变,就不会再变

基本使用

// Promise 是一个构造函数 // 通过 new 创建Promise的实例对象 var promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */) { resolve(value) } else { reject(error) } })

then 和 catch

  • then(): 用于指定异步操作成功时的回调函数
  • catch():用于指定发生错误时的回调函数
  • 说明:then()方法可以有多个,按照先后顺序执行,通过回调函数返回值传递数据给下一个then
let promise = new Promise(function(resolve, reject) { console.log('1 Promise'); // 异步操作 setTimeout(resolve, 1000, 'done'); }); promise.then(function() { console.log('3 resolved.'); }); console.log('2 Hi!');
  • 异步读取图片示例:
const loadImageAsync = function(url) { return new Promise(function(resolve, reject) { const image = new Image() image.src = url // 图片加载成功 image.onload = function() { resolve(image) } // 图片加载失败 image.onerror = function() { reject(new Error('Could not load image at ' + url)) } }) } // 推荐方式: loadImageAsync('url') // 成功处理 .then(function(value) {}) // 错误处理 .catch(function(err) {}) // 其他方式: loadImageAsync('url') .then(function(value) { // 成功,value 获取到 图片对象(image) }, function(error) { // 失败,error 获取到 错误信息 });

all 和 race

// 所有请求发送成功: const p = Promise.all([ axios('http://vue.studyit.io/api/getlunbo'), axios('http://vue.studyit.io/api/getnewslist') ]) p.then(function (res) { // res 是 all() 方法中所有异步操作的结果 console.log('两个异步请求完成:', res); }) // 哪个请求先发送成功: const p = Promise.race([ axios('http://vue.studyit.io/api/getlunbo'), axios('http://vue.studyit.io/api/getnewslist') ]) p.then(function (res) { // res 是 race() 方法中先完成的异步操作的结果: console.log('一个异步请求完成:', res); })