ES6 的学习之路

·  阅读 133
ES6 的学习之路

各位学习es6的小可爱们,在学习ES6之前,强烈建议先学习es5,精读学习任一类的es5文档,至少1-3遍。说明:本学习之路主要是针对自己学习复习的,比较杂糅。大家可以按照自己的喜好整理。

ES6如何学

  • 快速统揽,然后使用
  • 边使用边加深印象
  • ES6教程、MDN

新版变量声明let const作用域

// a = 1;// 含义不明-不要用
// function fn() {
//     if(true) {
//        console.log(a); 
//     } else {
//     var a = 1;
//     console.log(2);
//     }
// }
// fn()
// {var a}
// console.log(a)
// var a = 1 
// 上面两种是es3的,下面两种是es6
// let a = 1
// const a = 1
复制代码
// 1.其实let的作用域很简单,就是只看花括号,花括号外面就报错
// 2.let的作用域在最近的{}之间
// 3.如果你在let之前使用a,那么报错
// 4.如果你重复let a,那么报错

// const 
// 1,2,,3同上
// 4只有一次赋值机会,而且必须在声明的时候立马赋值

// {let a= 2}
// console.log(a)
{
    let a = 1;
    {
        console.log(a);// 不定义就使用,报错;Temp Dead Zone临时性死区
        let a = 2; // 所谓暂时死区,就是不能在初始化之前,使用变量。
   
    {let a = 3;}
    }

}

其实我想实现每次点击一次,打印出对应的i;但是结果差强人意,但是let完美的解决了【或者es5的立即执行函数也可以】
// var liTags = document.querySelectorAll('li');
// for(let i=0;i<liTags.length;i++) {
//    liTags[i].onclick = function() {
//        console.log(i);
//   }
// }
// 插一嘴,es5中的立即函数的写法就是为了实现let块级作用域的概念的。
复制代码

新版函数: 箭头函数

es3
// 具名函数
function xxx(p1,p2){
    console.log(1)
    return 2;
}
// function是匿名函数 - =是赋值 - let xxx是声明
let xxx = funtion(p1,p2){
   console.log(1);
   return 2;
} 
 
复制代码
es6
// 箭头函数
let xxx = (p1,p2)=>{
    console.log(1);
    return 2;
}
let xxx = p1 => { // 如果只有一个参数,则可以不加括号
    
}
let xxx = (p1,p2) => p1+p2 // 如果函数体只有一句,可省略花括号
let xxx = p1 => p1+2 // 圆括号和花括号一起简化
复制代码
为什么要出现箭头函数,它主要解决了什么
它的出现是为了解决this这个关键字。【重点:this是call的第一个参数】
es3支持this,es6也支持this。但是用箭头函数弱化了this的用法
--------------------------------------------------------------------
function f(p1,p2){
    // let p1 = arguments[0];
    //let p2 = arguments[1];
    console.log(p1);
}
f('abc')
p1的值是由f(这个玩意儿决定的)
p2的值是由f(不是这个,这个玩意儿决定的)
arguments = [不是这个,这个玩意儿决定的]
---------------------------------------------------------------------
let object = {
    name: 'obj'
    hi: function(/*this,*/p1,p2){
        console.log(this.name)
    }
}
object.hi(/*object, */1,2)  
object.hi.call(object, 1,2)
p1的值是由object.hi(这个玩意儿决定的)
p2的值是由object.hi(不是这个,这个玩意儿决定的)
this的值是由 这个玩意.决定的hi()
this的值是由object.hi.call(这个, 1,2)
复制代码
以前的函数有this,this是call的第一个参数;es6的箭头函数没有this[跟变量a是一样一样的,外面是啥里面就是啥],【注:函数的所有参数都应该放到函数列表里面:类比pathon】
&箭头函数的this就类同于普通变量,a咋用,this就咋用

有时间可关注coffeeScript,es6的很多语法都是跟它抄的。
: if(response & reponse.data) {balabal...} <==> reponse?data?.user

-----------------------------------------------------------------------
异类,箭头函数在vue中又做了妥协
this === window:new Vue({
    data(){},
    methods:{
        onClick(){ //就是function,此处就是老的写法,不过做了简化
            let f = ()=>{
                console.log(this);
            }
        },
    }
})
复制代码

三个点运算 & 新版字符串

1.函数与对象的语法糖

1.1函数的默认参数

function sum(a,b){
    b = b || 0
    c = c || 0
    d = d || 0
    return a+b
}
sum(11)
-----------------------------------------------------------------------
function sum(a=0,b=0){
    return a+b
}
sum(1)

复制代码

1.2 剩余参数

es5
function sum(){
    let result = 0;
    for(let i=0;i<arguments.length;i++){
        result += arguments[i];
    }
    return result
    console.log(arguments)
}
sum(1,2,3,4,5,6,7,8)
---------------------------------------------------------------------
function sum(message){
    let result = 0;
    for(let i=0;i<arguments.length;i++){
        result += arguments[i];
    }
    return message + result
    console.log(arguments)
}
sum("结果是:",1,2,3,4,5,6,7,8)
------------------------------------------------------------------
es6
function sum(message,...numbers){ // 方法:优
    let result = 0;
    // for(let i=0;i<numbers.length;i++){
    //    result += numbers[i];
    //}
    // numbers是真正的数组
    result = numbers.reduce((p,v) =>p+v,0)
    return message + result
}
sum("结果是:",1,2,3,4,5,6,7,8)
-------------------------------------------------------------------
function sum(message) {
   方式一 let args = Array.prototype.slice.call(arguments)// es5提供给伪数组变成真数组的方法
   方式二 let args = Array.from(arguments)//es6提供给伪数组变成真数组的方式
   方式三 let args = [...arguments]// es6提供给伪数组变成真数组的方式
    ...

    return message + result
}
sum('结果是',1,2,3,4,5,6,7,8)
复制代码

1.3 展开操作

let array1 = [1,2,3,4,5,6]
// array1是array2的后三项
let [a,b,c,...array2] = array1;
console.log(array2)
let [,,,...array3] = array1;
let [...array4] = array1
//在array1前面加上0
let array5 = [0,...array1]
//等价于es5中
let array6 = [0].concat(array).concat([7])
复制代码

1.4 解构赋值

// 交换两个数的值
let a=1;
let b=2;
// temp = a
// a= b
// b = temp
1.[a,b]=[b,a];
console.log(a,b)
----------------------------------------------------------------------
2. [a,b,...rest] = [10,20,30,40,50]
----------------------------------------------------------------------
3.let {name,age} = frank
// 第一种写法是程序员写了七八年的写法
// var frank = {name:'frank',age:18,gender:'male'}
// var name = frank.name
// var age = frank.age
// var gender = frank.gender

// 第二种写法【解开这个东西的结构,然后进行赋值操作】
var {name,age,gender} = frank; // = {name:'frank',age:18,gender:'male'}

var [a=4,b=6] = [1] // 左边可设置默认值,右边如果没有值,就使用默认值

var {name:xingming} = frank

var frank = {
    name:'JACK',age:18,gender:'male',child:{
        name:'jerry',age:1,gender:'male'
    }
}
// 取child的name,age,gender,把age作为两个变量声明,name,gender的重命名一下,如果没有取到值,就给一个默认值tom
var {child:{name:xingming='Tom',age,gender:gender}} = frank 
----------------------------------------------------------------------
4 对象的拷贝
let objA = {name: {
    x:'a'
}}
//let objB = Object.assign({},objA) // 浅拷贝
let objB = {...objA} // 浅拷贝
// 对象的合并

var objA = {p1:1,p2:2}
var objC = {p1:1111,p2:333}
// var objB = Object.assign({}, objA,objC)
let objB = {...objA,...objC}

//总:首先考虑三个点,其次object.assign,最后就是for循环
----------------------------------------------------------------
更多语法看mdn解构赋值
上面全部是解构的例子,那有没有合构呢?请看对象属性加强
5.对象属性加强
1.var x = 1
var y = 3
var obj = {
    "x":x,
    "y":y
}
// es6看见了,key和val是一样的,那可以简写成
var obj = {x, y}
var obj = {x:1,y:2}
var {x, y} = obj
var [x,y] = [1,2] // 右边是[x:1,y:2]
2. var key = 'x'
var value = 'y'
var obj = {}
obj[key] = value // 对的
// {"x":"y"}
var obj = {
    [key] : value  // es6自动给他加上中括号;如若不加会当成字符串处理,而不是变量key
}
3.函数属性可以省略function
var obj = {
    sayHi(name='jack'){}// 推荐
    sayHi:function(name){}
}

复制代码

2、新版字符串

插值(字符串中插入变量) var string = ${name}是一个${person}

迭代器与生成器

1、字面量增强

1,[1,34,45],'hhhh'这种通俗易懂的,不需要进行转化的,能看懂的,就是字面量。
复制代码

2、Symbol和迭代器

2.1 Symbol定义的是独一无二的,俗称'身体的印记',独一份的

2.2 迭代器

  遍历,即一个一个的访问,一般是有限的。
  迭代跟遍历很相似。【迭代即升级:zhihu V1.0-> zhihu V2.0-> zhihu V3.0】,一般是无限的...
  ```
    // function 发布器() {
    //     return {
    //         next:undefined
    //     }
    // }
    // 发布器()

    function 发布器() {
        var _value = 0
        return {
            next:function() {
                _value += 1
                return  {
                    value: _value
                }
            }
        }
    }
    a = 发布器()
    a.next()
    a.next()
    a.next()
    -----------------------------------------------------------------------------
    function 发布器() {
    var _value = 0
    var max = 10
    return {
        next:function() {
              _value += 1
            if(_value === max){
               return {value:_value,done:true}
            } else {

                 return  {
                    value: _value,
                    done: false
                }
            }

    }
    
    
  ```
复制代码

3、生成器 & for of

1、生成器是迭代器生成的语法糖[在函数前面加上一个✳号,在值的前面加上yield]
```
    上面的代码用es6里面的写法是:
    function *发布器() {
        var version = 0
        while(true) {
            version += 1
            yield version //  这几行代码只执行一遍 原因是yield:他会吼出来
        }
    }
    a.next()
```
2for of是迭代器访问的语法糖
数组可以迭代,对象不能迭代【可以自定义迭代器,引入Symbol[iterator],参考mdn】【数组和对象的原型不一样】
```
    
```
复制代码

4、总结

学习要趁早,定一个三年前端小目标【基础学扎实】,定一个五年前端中目标【懂原理,再学一门技术】,定一个10年大目标【达到什么样的】

新版对象

1、如何创建对象

    1var a = new Object() // es5的写法
    2var b = Object.create(null) // es6真正的生成一个空对象
    3var c = Object.create(object.prototype) // 1和3是等价的,因为有原型
    4var d = {} // 跟1是一样的,都是es5的写法
复制代码

2、属性修饰符

Object.defineProperty() Object.getProperties() Object.create()

ES6模块

1、模块化

一个豆腐切成两个块,类比:一个代码分成两个块

  • 模块(豆腐块)
  • 依赖:(用到了)简称:男生依赖于富婆,即男生用富婆的钱和地位,哈哈哈
  • 导出:(给别人用)

如何导出有名字的模块{name};如何导出没有名字的模块(default);如何导出换个名字的模块(name as name1);全部导出用*详见MDN的import

2、Babel wabpack parcel

浏览器不支持import,export module,js程序员就造了babel wabpack的升级就是parcel 插播:目前不会命令行的程序员就要嗝屁儿了。

新版的类

1、原型

原型 === 共有属性

2、类

类:拥有相同属性的对象 构造函数:用来创建某个类的对象的函数 自有:对象自身的属性 共有:对象原型里面的属性

promise

1、回调与回调地狱

调函数:在一个函数名后面加上括号

function fn() {
}
fn()
function fn2(){
    fn() // 调函数
} // 回调

回调:把一个函数A传给另外一个函数B调用,那么A就是回调函数
缺点:1、回调地狱
      2、不知道怎么使用Node、Jquery只能强行背下来【传递参数方式不一样】
复制代码
回调地狱:回调里面套回调套回调套回调套回调套回调逃回调
function 获取用户信息(fn){fn('sds')}
获取用户信息(function(用户信息){
 保存用户信息(用户信息,function(){
    获取另外一个用户的信息(function(另外一个用户的信息){
    保存用户信息(另外一个用户的信息)
   })
  })
 })
 解决回调地狱的方式:1、给每一个回调函数起名称,也就是解开回调地狱的方式,缺点,变量可能访问不到
                    2、Promise
复制代码

2、Promise的用法

    function 获取用户信息(){
        return new Promise(function(resolve, reject){
            console.log('第一次获取用户信息')
            resolve('姓名zz')
        })
    }
    function 打印用户信息(用户信息){
        return new Promise(function(resolve, reject){
            console.log('用户信息')
            resolve('')
        })
    }
    function 获取另一个用户信息(){
        return new Promise(function(resolve, reject){
            console.log('第二次获取用户信息')
            resolve('姓名zz')
        })
    }
    
    获取用户信息()
        .catch(function(){})//
        .finally(function(){})//
        .then(打印用户信息)
        .then(获取另外一个用户信息)
        .then(打印用户信息)
    注:等多个promise都执行完了之后,在统一交给一个函数执行,用promise.all
    promise.race跟all相反,只要任何一个成功了,我就调用
    这样写,也有回调的意思在,就有了async await。注意:一般async await是跟try catch一起来用的
    try {
      let 用户信息 = await 获取用户信息('gg')
    } catch(error/*错误理由*/){
        console.log('error')
    }
复制代码

image.png image.png

ES6新增的数据类型【2-8】

Symbol:基本类型,不是对象,window.symbol;返回的值是唯一的;可以作为对象的key;symbol做为对象的隐藏属性
set类型(集合)
Map类型(映射)
WeakMap类型:弱引用,弱引用不属于GC回收的范围,自动消失,是虚无的东西;key只能是对象
WeakSet类型:弱引用,弱引用不属于GC回收的范围,自动消失,是虚无的东西;没有entries方法,无法列出所有的值
TypedArray
复制代码

Symbol('xxx') !== Symbol('xxx')

ES6新增的API

Object.assign:把一个对象的属性复制到另外的属性上面,是一个浅拷贝

a={
    name:'frank',
    age: 18
}
b= {b:1,c:2}
object.assign(a,b)
复制代码

Array.from: 把伪数组变成数组 a= Array.from(a)

a = Array.prototype.slice.call(a, 0) // es5
创建一个长度为n的数组
Array.from({length:5}) //es6
Array.apply(null, {length:5}) // es5 
new Array(5) // 不能实现,没有下标
复制代码

find:找到满足条件的一个就停下来

finIndex: 不找哪个对象,找到对象的位置

filter: 过滤出满足条件的所有对象

includes: 判断一个字符串是否包含另外一个字符串,返回true或false。跟他相似的有indexof,search,substr...,match正则

Proxy和Reflect

1、reflect: 反射

reflect.get(target,name,receiver)
reflect.set
reflect:都有对应的方法代替
复制代码

2、代理 proxy

async & await

复习:promise

a.它会通过一个隐式的promise的返回其结果,b.但是如果你的代码使用了异步函数,,它的语法和用法会更像是标准的同步函数(try catch)

Promise.all([猜大小('大'),猜大小('大')])
.then((x) => {console.log(x)},(y)=>{console.log(y)})

async function test() {
    try {
    let n = await Promise.all([猜大小('大'), 猜大小('大')])
    } catch (error){
    }
}
test()
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改