ES5,6,7笔记(持续更新中~~~)

重要版本

 - es5 : 09年发布
 - es6 : 15年发布, ECMA2015
 - es7 : 16年发布, ECMA2016 (微变)

ES5部分新增内容

严格模式
    - use strict声明
    - 必须用var定义变量
    - 禁止自定义函数this指向window
    - eval创建自己的作用域,避免函数不安全
    - 对象不允许有重名的属性

JSON对象
    - JSON.stringify(obj/arr) //对象(数组)变字符
    - JSON.parse(json)        //字符变对象(数组)

Object扩展

Object常用的两个静态方法:
    - Object.create(prototype,[descriptors])
        - 以对象为原型对象创建新对象,并扩展可以描述的属性
            - value: 指定值
            - writable: false //是否可修改
            - configurable: false //是否可删
            - enumerable: false //是否可列举
    - Object.defineProperties(Object,descriptors)
        - 指定对象扩展多个属性
            - get //获取这个属性时惰性建立属性值
            - set //修改这个属性时触发的函数(外部修改无效)
对象本身的两个方法:
    - get propertyName(){} //获取propertyName时惰性建立属性值
    - set propertyName(data){} //修改时触发的函数(外部修改无效)

Array扩展

Array.prototype.indexOf(value)
Array.prototype.lastIndexOf(value)
Array.prototype.forEach(function(item,index){}) //同步遍历,arguments伪数组不可以用
Array.prototype.map(function(item,index){})
Array.prototype.filter(function(item,index){})

Function扩展

    -bind //改变返回
    -call apply//改变执行(js)

ES6部分新增内容

let和const

- let
        - 块级作用域有效
        - 不可重复定义
        - 不会变量提升
        - 特别地,循环定义时let仅第一次有效,不同于var为全局变量
    - const
        - 定义常量
        - 其余同let

 解构赋值

    - 对象或数组

模板字符串

    - `${}`

对象简写方法

    - 变量key value同名
    - 函数func(){}

箭头函数

    - 官方:箭头函数无自己的this(所以按照闭包原理:this不是在调用的时候决定的,而是在定义的时候所处的对象就是this)
    - 沿作用域链,有外层函数就是外层函数的this,无直到最外层则为window

 三点扩展运算符

    - 函数可变参数
        - 只可放在最后
    - 扩展运算符
        - 展开数组元素

形参的默认值

    - 定义函数时可以给函数参数设定形参默认值

Promise

    - Promise是一个构造函数,可以生成promise实例对象
    - 解决异步操作的回调地狱问题(实际未解决)
    - promise实例对象的三个状态
        - 初始化状态pending
        - 操作成功状态fullfilled
        - 操作失败状态rejected
    - 创建实例对象
        let promise = new Promise((resolve, reject)=>{
            // pending状态下:放置异步操作代码与构造函数外同步执行
           // fullfilled状态下:操作成功调用resolve(valueSuccess)函数传值
           // rejected状态下:操作失败调用reject(valueErr)函数传值
        })
        promise.then((valueSuccess)=>{}, (valueErr)=>{})//响应成功或失败进而执行代码,二者只有先调用的会有作用

 Symbol

Symbol是es6新增的一个原始数据类型(String,Number,Boolean,Null,Undefined,Object)
    -Symbol产生的值是唯一的,可做key,只可以obj[symbol]形式
    -Symbol值不可以和其他类型进行计算
    -遍历时(for in,for of)不会遍历出Symbol的属性
    -传参做标识 let symbol = Symbol('标识')

Interator(迭代器)

作用:
    - iterator是一种接口机制,提供一个统一的访问接口(在Symbol.interator属性上部署接口)
    - 是数据结构可以按照某种次序排列
    -将iterator接口部署到数据类型(数组,字符串,arguments伪数组,set容器,map容器)上,可以使用新命令for of(对象不可以哦)
    -三点运算符,解构赋值,其实默认调用interator接口
原理:
    - 创建一个遍历器对象(指针对象),指向数据结构的起始位置
    - 第一次调用next()方法,指针指向成员,依次向下
        - next()方法返回{value:当前成员的值,done:布尔值}
        - 遍历结束value值为undefined,done为true
            let myInterator = (arr) => {
                let temp = 0
                return {
                    next() {
                        return temp < arr.length ? {value: arr[temp++], done: false} : {value: undefined, done: true}
                        }
                    }
                }
            }
        }
        -部署原理
        let data = {
        [Symbol.interator]: myInterator函数原理(arr改成this原对象data)
        }

 Generator(生成器)

概念 
　　 - 解决异步编程方法之一(也未实际解决)
　　 - 惰性求值(可以暂停),yield暂停,next启动
用法原理
    - 代码演示
function* Generator() {
    yield 'first'
    let two = yield 'second' //two等于 哈哈 next传入的参数给上一次的返回结果
    return 'four'
}
let myGenerator = Generator() //生成一个Interator指针对象,代码不执行
console.log(myGenerator.next())
console.log(myGenerator.next())
console.log(myGenerator.next('哈哈'))
console.log(myGenerator.next())

// { value: 'first', done: false }
// { value: 'second', done: false }
// { value: 'four', done: true }
// { value: undefined, done: true }

为对象添加Symbol.interator为遍历器属性可用for of
let obj = {name: 'wang', age: 22}
obj[Symbol.interator] = function* myGenerator(){
　　yield 1
　　yield 2
　　yield 3
}
for(let item of obj){console.log(item)} //分别为1,2,3


用法实例(未真正解决)
　　- 代码

function getNews(url) {
    fetch(url).then(r => r.json()).then(data => {
        //异步获取的数据
　　　　　　getGenerator.next(data)
    })
}
function firstDoSomething(data) {
    //执行的操作
}
function* myGenerator() {//原本的一层层回调操作在这里,类同步执行
    let data = yield getNews('哈哈')
    yield firstDoSomething(data)
    // yield secondDoSomething(data) yield一层层异步获取之后处理函数
}
let getGenerator = myGenerator()
getGenerator.next()

 async(ES7)

async
    - 解决异步回调问题
    - Generator的语法糖
    - async总是返回一个Promise对象,可用其方法(如then)
    - Generator的语法糖,async类似取代*, await类似取代yield
代码
async function first() {
    return new Promise(resolve => {
        //执行异步操作
        let data = {}
        resolve(data) //reject会报错,一般用传resolve('错误信息')来处理
    })
}
async function test() {
    //await普通函数获取是return值
    //await async获取是promise的resolve参数值或reject且报错
    //
    let data = await first()
    console.log(data)
    // await second 回调嵌套层的每个操作,与Generator思想一样
    // await third
}
test()

 class类

class Person extends Father { //extends Father继承
    constructor(name, age, sex) { //通过constructor函数创建实例对象
        super(name, age) //调用父类构造函数,有父必写
        this.sex = sex
    }
    // function fun(){}不允许
    fun() { //方法绑在原型上
        console.log(this.sex)
    }
}
let obj = new Person('wang', 15, 'boy')
obj.fun()

ES6模块化

字符串,数值,数组,对象扩展方法

字符串
    - string.includes(str) //判断是否包含指定的字符串
    - string.startsWith(str) //是否以指定字符串开头
    - string.endsWith(str)
    - string.repeat(count) //字符串变成重复的次数

数值
    - 二进制和八进制表示: 二进制0b, 八进制0o
    - Number.isFinite(Infinity)  //判断是否是有限大的数
    - Number.NaN(num)         //判断是否是NaN
    - Number.isInteger(num)  //判断是否是整数
    - Number.parseInt(str)     //将字符串转化为数值,首含即取(Number首含为NaN)
    - Math.trunc(num)           //去除小数部分

数组
    - Array.from(v) //将伪数组或可遍历对象变成真数组
    - Array.of(v1,v2,v3) //将参数返回成一个数组
    - arr.find(callback)  //callback(item, index)类filter,返回满足条件的第一个值
    - arr.findIndex(callback) //同上,返回第一个索引

对象
    - Object(v1, v2) //判断两个数据是否相等
        - 严格比较(类似===)
        - Object.is(0, -0) 不等 //类表面字符串形式比较
        - Object.is(NaN, NaN) 相等
    - let temp = Object.assign(target, source1, source2, source3) //将source123的属性赋值给target,target与temp完全一样
    - 可以通过obj.__proto__修改对象的隐式原型

 深度克隆(拷贝)

拷贝数据的方法
    - 直接赋值=                             //浅拷贝
    - Object.assign()                      //浅拷贝,一层深度值类型深拷,引用类型浅了
    - Array.prototype.concat()             //浅拷贝,同上
    - Array.prototype.slice()              //浅拷贝,同上
    - JSON.parse(JSON.stringify())         //深拷贝,JSON.stringify不支持函数,Symbol,undefined

 

Object.prototype.toString.call()
    -调用原生的未被重写的toString
    -皆可判断成Number,String,Boolean,Null,Undefined,Array,Function,Object,Symbol字符串
深度克隆代码
    - 克隆自定义的函数其实并不是真正克隆,如自己增加属性的情况也会修改
let a = function (){}
let b = a
b['test'] = 'test'
console.log(a['test']) //test

代码实现
function deepClone(a) {
    let type = Object.prototype.toString.call(a).slice(8, -1)
    if (type === 'Object' || type === 'Array') {
        let result
        if (type === 'Object') {
            result = {}
        } else {
            result = []
        }
        for (let i in a) {
            result[i] = deepClone(a[i])
        }
        return result
    } else {
        return a
    }
}

 Set和Map容器

Set容器
    - 无序不可重复的多个值得集合体
    - new Set(array)
    - add(value)
    - delete(value)
    - has(value)
    - clear()
    -size
Map容器
    - 无序key不可重复的key-value集合体
    - new Map([[key1, value1], [key2, value2]])
    - set(key,value)
    - get(key)
    - delete(key)
    - has(key)
    - clear()
    - size

for of

可遍历
    - 字符串
    - 数组
    - 伪数组
    - Set
    - Map
    - 没有对象

ES7部分新增内容

async

上文讲过

指数(幂)运算符

console.log(5**3) //125

扩展方法

数组
    - Array.prototype.includes(value) //判断数组中是否有value