ES6
块级作用域、字符串、函数
- let和const
- 定义变量是用块级作用域let替代var
- const定义不可修改的变量
- 作用域和{}
- 字符串扩展
name = 'viivLgr'
course = 'React开发App'
console.log('hello' + name + ', course is '+ course)
console.log(`hello${name},course is ${course}`) // 模板字符串
console.log(`
sdasd
`) // 可以有换行符和空格
- 函数的用法
- 参数默认值
const hello = (name = 'viivLgr') => {
console.log(`hello ${name} !`)
}
hello() // 没传值的情况下用默认值 hello viivLgr !
hello('seek') // 传值的情况下替换默认值 hello seek !
- 箭头函数
function hello(name){
console.log(`hello ${name} !`)
}
const hello1 = (name) => {
console.log(`hello ${name} !`)
}
hello('viivLgr') // hello viivLgr !
hello1('viivLgr') // hello viivLgr !
setTimeout(()=>{
console.log('xxx')
}, 1000) // 1000毫秒 = 1秒后 输出 xxx
好处：简写代码、保持this作用域
const double = x => x*2 // 只有一行返回值的时候可以简写
console.log(double(5)) // 10
- 展开运算符
function hello(name1, name2){
console.log(name1, name2)
}
arr = ['viivLgr', 'seek']
hello.apply(null, arr) // 原来的方式 viivLgr seek
hello(...arr) // 展开运算符 viivLgr seek
对象扩展、解构
- Object.keys、values、entries
const obj = {name: 'viivLgr', course: 'React开发App'}
console.log(Object.keys(obj)) // [ 'name', 'course' ]
console.log(Object.values(obj)) // [ 'viivLgr', 'React开发App' ]
console.log(Object.entries(obj)) // [ [ 'name', 'viivLgr' ], [ 'course', 'React开发App' ] ] 把压成数组
- 对象方法的简写、计算属性
const name = 'viiv'
const obj = {}
obj[name] = 'hello viiv'
console.log(obj) // { viiv: 'hello viiv' }
const obj1 = {
name,
[name]: 'hello',
hello: function(){},
hello1(){}
}
console.log(obj1) // { name: 'viiv', viiv: 'hello', hello: [Function: hello], hello1: [Function: hello1] }
- 展开运算符扩展对象属性（不是ES6标准、但是babel也支持）
const obj = {name: 'viiv', course: 'React'}
const obj1 = {type: 'IT',name: 'seek'}
console.log({...obj, ...obj1, date: 2018}) // { name: 'seek', course: 'React', type: 'IT', date: 2018 }
- 解构赋值
const arr = ['hello', 'viiv']
let arg1 = arr[0]
let arg2 = arr[1]
console.log(arg1, arg2) // hello viiv
let [arg3, arg4] = arr
console.log(arg3, arg4) // hello viiv
const obj = {name: 'viiv', course: 'React'}
const {name, course} = obj
console.log(name, '|', course) // viiv | React
类、模块化
- 提供class的语法糖
- 是prototype的语法糖
- Extends继承
- Constructor构造函数
class MyApp {
constructor(){
this.name = 'viiv'
}
sayHello(){
console.log(`hello ${this.name} !`)
}
}
const app = new MyApp()
app.sayHello() // hello viiv !
- ES6中新出现的数据结构
- Set：集合，元素不可重合
- Map：对象的扩展，key可以是任意的值
- Symbol：生成一个不重复的变量
- 模块化
ES6中自带了模块化机制，告别seajs和require.js
- Import, import {}
- Export, Export default
- Node现在还不支持，还需要require来加载文件
浏览器现在还不支持import写法，需要安装babel来转成ES5
npm install --save-dev babel-cli babel-preset-env
在webstrom里通过配置 Preferences --> Tools --> File Watchers --> Babel：添加项目安装babel路径即可自动转成ES5语法并存在dist目录文件下
// module1.js
export const name = 'viiv'
// import.js ES6语法
import {name} from './module1'
console.log(name) // viiv
// import.js ES5语法
'use strict';
var _module = require('./module1');
console.log(_module.name);
其他
- 对象扩展符、函数绑定
需要安装Babel-plugin-transform-object-rest-spread插件、支持扩展符号 - 装饰器
- Async await
- Promise
- 迭代器和生成器
- 代理proxy
常见代码片段
// 遍历数组
[1, 2, 3].forEach(function(value, index){
console.log(value)
}) // 1 2 3
// 映射新数组
[1, 2, 4].map(v=>v*2) // [ 2, 4, 8 ]
// 所有元素是否通过测试
[1, 2, 3, 4].every(v => v > 3) // false
// 是否有元素通过测试
[1, 2, 3, 4].some(v => v > 3) // true
// 过滤数组
[1, 2, 3, 4, 5].filter(v=>v>3) // [ 4, 5 ]
// 查找符合条件的元素
arr = [{name: 'viiv', age: 18}, {name: 'seek', age: 20}]
console.log(arr.filter(v=>v.age>18)) // [ { name: 'seek', age: 20 } ]
// 查找索引
[1, 2, 3].indexOf(2) // 1
// 连接数组
arr1 = [1, 2, 3]
arr2 = [4, 5, 6]
[...arr1, ...arr2] // [ 1, 2, 3, 4, 5, 6 ]
// 数组去重
arr3 = [1, 2, 3, 4, 3, 2, 1]
[...new Set(arr3)] // [ 1, 2, 3, 4 ]
// 获取对象的key
Object.keys({name: 'viiv', age: 18}) // [ 'name', 'age' ]
// 获取对象里数据的数量
Object.keys({name: 'viiv', age: 18}).length // 2
// 获取对象的value
Object.values({name: 'viiv',age: 10}) // ["viiv", 10]
// 将对象遍历成数组
Object.entries({name: 'viiv',age: 10}) // [Array(2), Array(2)]
// extend功能
obj = {name: 'viiv', age: 18}
newobj = {...obj, job: 'IT', age: 20} // {name: "viiv", age: 20, job: "IT"}
// 获取列表的投和尾