一、数组
es5里面新增的一些循环：
arr.forEarch(), arr.map(), arr.filter(), arr.some(), arr.every()
他们可以接收两个参数 arr.forEarch/map...(循环回调函数, this指向谁)
arr.reduce((pre,cur,index,arr)=>{})
pre:上次返回的结果 cur:当前的数 index：下标 arr：循环的数组
es6里新增的一些循环
1.for...of...
let arr = ['apple', 'banana', 'orange', 'tomato']
for (let val of arr) {
console.log(val) // apple banana orange tomato
}
for (let index of arr.keys()) {
console.log(index) // 0 1 2 3
}
for (let [key, val] of arr.entries()) {
console.log(key, val) // 0 apple 1 banana 2 orange 3 tomato
}
2.arr.find() 查找，找出第一个符合条件的数组成员，如果没有找到返回undefined
3.arr.findIndex() 找的是位置，没有找到返回-1
4.arr.fill() 填充。arr.fill(填充的东西， 开始位置， 结束位置)
5.arr.includes() 返回true或false
let arr = ['apple', 'banana', 'orange', 'tomato']
let b = arr.includes('banana')
console.log(b) // true
二、对象简洁语法以及对象新增
//之前的用法
let name = 'Tom'
let age = 18
let json = {
name: name,
age: age,
show: function () {
return this.name
}
}
//es6的简洁用法
let name = 'Tom'
let age = 18
let json = {
name, //这里简写了 等价于name: name
age,
show () { //注意这里不要用箭头函数
return this.name
}
}
对象新增
1.Object.is() 用来比较两个值是否相等
Object.is('a', 'a') // true
Object.is(NaN, NaN) // true 注意在之前 NaN===NaN是为false的
Object.is(+0, -0) //false
2.Object.assign() 用来合并对象或复制一个对象
Object.assign(目标对象， source1，source2...)
function fn (options) {
let defaults = {
name:'Tom',
age: 18
}
let json = Object.assign({}, defaults, options)
console.log(json) // {name: "Tom", age: 18, addr: "aaa"}
}
fn({addr:'aaa'})
es7引入
Object.keys() ，Object.entries()，Object.values()
let {keys, values, entries} = Object //解构
let json = {
a: 1,
b: 2,
c: 3
}
for (let key of keys(json)) {
console.log(key) // a b c
}
for (let key of values(json)) {
console.log(key) // 1 2 3
}
for (let [key, val] of entries(json)) {
console.log(key, val) // a 1 b 2 c 3
}
对象的扩张运算符‘...’
let {x, y, ...z} = {x: 1, y: 2, a: 3, b: 4}
console.log(x,y) // 1,2
console.log(z) //{a:3, b:4}
let json = {a: 3, b: 4}
let json2 = {
c: 5,
d: 6,
...json
}
console.log(json2) //{c: 5, d: 6, a: 3, b: 4}
三、Promise
作用：解决异步回调问题
传统方式大部分用回调函数，事件
Promise语法：
new Promise (function(resolve, reject) {
//resolve 成功调用
//rejiect 失败调用
})
用法：new Promise().then(res => {}).catch(err=>{})
let a = 1
let promise = new Promise(function(resolve, reject) {
if (a = 10) {
resolve('成功')
} else {
reject('失败')
}
})
promise.then(res => {
console.log(res)
})
Promise.resolve('aa') 将现有的东西转成一个promise对象，resolve状态 成功状态
等价于：
new Promise (resolve => {
resolve('aa')
})
Promise.reject('aa') 将现有的东西转成一个promise对象，reject状态 失败状态
等价于：
new Promise ((resolve, reject)=> {
reject('aa')
})
批量处理Promise
Promise.all([p1, p2, p3]).then() 把promise打包扔到一个数组里面，打包完还是一个promise对象
必须确保所有的promise对象都是resolve状态，都是成功状态
let p1 = new Promise((resolve, reject) => {
resolve('aaa')
})
let p2 = new Promise((resolve, reject) => {
resolve('bbb')
})
let p3 = new Promise((resolve, reject) => {
resolve('ccc')
})
Promise.all([p1, p2, p3]).then(res => {
console.log(res) //['aaa', 'bbb', 'ccc']
})
四、模块化
js不支持模块化。es6统一服务端和客户端模块规范
模块化
a).如何定义模块？ export
b),如何使用？
import
import ‘./modules/1.js’;
import {a, b, c} from ‘./modules/1.js’; //什么时候加{}导出用的export
import a from ‘./modules/1.js’; //导出用的export default不需要加{}
import * from ‘./modules/1.js’;
import a as apple from ‘./modules/1.js’; //as apple取得的别名
import特点：
a、import可以是相对路径也可以是绝对路径
b、import模块只会导入一次，无论你引入多少次
c、import ‘./modules/1.js’; 如果这么用相当于引入文件
d、有提升效果。import会自动提升到顶部首先执行
e、导出去的模块内容，如果里面有定时器更改，外面也会改动
import() 类似node里面的require，可以动态引入，默认import语法不能写到一个if之类里面。返回值是一个Promise对象
优点：
1.按需加载
2.可以写在if中
3.路径也可以动态
import('./modules/1.js').then(res => {
console.log(res.a+res.b)
})
五、类（class）和继承
注意：
1.es6里面class没有提升功能，在es5里用函数模拟可以，默认函数提升
2.es6里面this比之前轻松多了
//之前的写法
function Person() {
this.name = 'aaa'
}
Person.prototype.showName=function(){}
//es6的写法
class Person{
constructor(name, age){ //构造方法（函数）调用new自动执行
this.name=name
this.age=age
}
showName(){
return `名字为：${name}`
}
}
let p1 = new Person('Tom', 18)
console.log(p1.showName)
静态方法：就是类本身上的方法（用类名调用）。在方法前加static
class Person{
constructor(name, age){
}
showName(){
return `哈哈哈`
}
static showAge(){
return `静态方法`
}
}
let p1 = new Person('Tom', 18)
console.log(p1.showName)
console.log(Person.showAge) //调用静态方法直接用类名调
继承
es6中的extends
//父类
class Person{
constructor(name){
this.name = name
}
showName(){
return `名字为：${name}`
}
}
//子类
class Student extends Person{
constructor(name, skill){
super(name)
this.skill= skill
}
showSkill(){
return `技能为：${skill}`
}
}
let stu1 = new Student ('Tom', '逃学')
console.log(stu1.name)
console.log(stu1.showSkill())
