我的es6学习笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我的es6学习笔记相关的知识,希望对你有一定的参考价值。

前两个月看了一套es6的教程,现在将当时我做的笔记分享出来,与大家一起分享,我的不足之初也希望大家可以指出来。虽然简单学过一遍,但是我项目中用到的也就const,let,解构赋值,默认参数,箭头函数,promiss,模板字符串差不多这几个吧,其他的还不是很了解。现在再拿出来结合阮一峰老师的书再重新的学习一遍。

ES6

  • npm install babel-cli -g

  • npm install babel-cli babel-preset-es2015 --save-dev

  • babel es6.js -w -o es5.js

es6项目构建

  • 基础架构

  • 任务自动化(gulp,减少人工操作,提高效率)

    • 文件合并,项目依赖

  • 编译工具(babel(es6->es5),webpack(模块化,项目依赖))

  • 代码实现

基础架构

  • 业务逻辑:页面交互

  • 自动构建

    • 编译 1.编译到es5/3,为了IE8要到es3

    • 辅助

      1. 自动刷新:js修改->自动编译->刷新浏览器

      2. 文件合并

      3. 资源压缩: js ,css,图片转base64编码

  • 服务接口

    • 数据

    • 接口

任务自动化gulp

  • 什么是任务自动化

  • 什么是gulp:通过流方式操作文件,快,用来解决自动化构建工具,增强构建流程,背后是nodejs,提供多种插件,通过不同task组合去完成更加复杂的东西。

  • glup作用

  • 了解如何使用gulp完成任务自动化:看文档,API,插件

编译工具

  • babel(javascript编译器),webpack解决模块化

  • babel核心用法

  • 了解webpack及webpack-stream作用,后者是webpack对于gulp的支持

代码实现

  • 创建es6前端工程

  • 完成目录结构,自动构建。服务器搭建

实践

  • 三个板块,前端代码,css,js模板,服务器,前端编译,服务器定时刷新

  1. npm install express -g //安装最新版

  2. npm install -g express-generator

  • npm package.json

  • .babelrc babel

es6语法

let:

  • 块儿级作用域

  • 严格模式

  • es6强制严格模式

  • 变量未声明不能引用,变量不可以重复声明

const

  • 声明必须赋值,不可以更改

  • 对象存储的是指针,值可以变

解构赋值

  1. 解构赋值

  2. 解构赋值分类

    • 数组解构赋值(重点)

      • [a,b]=[1,2],两边都是数组

      • [a,b,c=3]=[1,2] 解构没有成功配对为undfine默认值

      • [a,b,...rest]=[1,2,3,4,5,6] reset为数组

      • ({a,b}={a:1,b:2})

    • 对象解构赋值(重点)

          {
          let o={p:43,q:true}
          let {p,q}=0 //p=43 ,q=true
          }
      
      • 默认值

    • 字符串解构赋值

    • 布尔值解构赋值

    • 函数参数解构赋值

    • 数值解构赋值

  3. 应用场景

  • 变量的交换

    {
        let a=1;
        let b=2;
        [a,b]=[b,a];
    }
    
    {
        function f(){
            return [1,2]
        }
        let a,b
        [a,b]=f();
    }
    
    {
        function f(){
            return [1,2,3]
        }
        let a,b
        [a,,b]=f(); //a=1,b=4
    }
    
    {
        function f(){
            return [1,2,3]
        }
        let a,b
        [a,...b]=f(); //a=1,b=4
    }
    

块儿作用域隔离变量

  • 对象解构赋值

    {
        let metaData={
        title:‘abc‘,
        test:[{
            title:‘test‘,
            desc:‘description‘
            }]
        }
        let {title:esTitle,test:[{title:cnTitle}]}=metaData //abc test
    
        }
    

正则

  1. 构造函数的变化

    {
        //es5写法
        let regex=new RegExp(‘xyz‘,‘i‘);
        let regex2=new RegExp(/xyz/i);
        console.log(regex.test(‘xyz123‘),regex2.test(‘xyz123‘))
    
        //es6
        let regex3=new RegExp(/xyz/ig,‘i‘); //第二个修饰符会覆盖前面正则的修饰符
        console.log(regex3.flags); //flags新增属性,用于获取修饰符
    }
    
  2. 正则的方法扩展

  3. u修饰符(Unicode),正则在处理Unicode的特征值

    {
        
        console.log(‘u-1‘,/^\uD83D/.test(‘\uD83D\uDC2A‘));  //把四个字节当成两个字符字母
        console.log(‘u-2‘,/^\uD83D/u.test(‘\uD83D\uDC2A‘));  //把四个自己当成一个字符
        console.log(/\u{61}/.test(‘a‘));   //false
        console.log(/\u{61}/u.test(‘a‘));   //true 加u才可以使{}内编码被识别
        //.只是可以识别小于0xffff的unicle字符,如果编码超过两个字节无法识别
        console.log(‘\u{20BB7}’); 
        let s=‘‘;
        console.log(‘u‘,/^.$/.test(s))  //false.没有直接匹配
        console.log(‘u-2‘,/^.$/u.test(s))  //true
    }
    
    
    • 字符串中有大于两个字节的,一定要加上u修饰符,才可以正确识别,否则无法处理

    • 换行符,回车符,行分隔符,段分隔符,.也不可以识别

  4. y修饰符

    {
        let s=‘bbb_bb_b‘;
        let a1=/b+/g;
        let a2=/b+/y;
        console.log(‘one‘,a1.exec(s),a2.exec(s));
        console.log(‘two‘,a1.exec(s),a2.exec(s));
        //g,y都是全局匹配,g是从上一次匹配的位置继续寻找,不强调必须在匹配的下一个,中间任何位置都可以,y必须是紧跟着的才算。
        console.log(a1.sticky,a2.sticky);//判断是否开启了y修饰符的模式
    }
    
  5. s修饰符(只是题提案,没有真正实现)

    • . z在s修饰符下可以识别 换行符,回车符,行分隔符,段分隔符。 6.总结

  • 构造函数

  • 字符串原来使用的跟正则相关的方法,现在都是隐形调用的正则对象的方法

  • y和g的区别,以及y的点是下一个开始

  • u修饰符的使用情况

  • s修饰符作用

字符串扩展

  1. Unicode表示法

    {
        console.log(‘a‘,`\u0061`);
        console.log(‘s‘,`\u20BB7`); //会当成两个字符前四个和7,用大括号抱起来解决
        console.log(‘s‘,`\u{20BB7}`);
    } 
    {
        let s=
        s.codePointAt(0)  //取码值
        Srtring.fromCharCode("0x20bb7");  //es5不能处理unicode乱码
        String.fromCodePoint("0x20bb7")     //es6 可以
    }
    
  2. 遍历接口

    {
        let s=
        for 循环
        //es6
        for(let code of str){
            console.log(code)
        }
    }
    
  3. 模板字符串

  • 数据和模板拼成带结果的字符串

{
    let name="list";
    let info="hellow word";
    let m=`i am $(name),$(info)`;
}

  1. 新增方法(10种)

    • str.includes("c");

    • str.startsWith("");

    • str.endsWith("");

    • str.repeat(2)

    • ‘1‘.padStart(2,‘0‘) es7:要满足两个长度,不够用零部

    • ‘1‘.padEnd(a,‘0‘)

    //标签模板,过滤字符串,处理多语言转换
    {
        let user={
            name:‘list‘,
            info:‘hello word‘
        };
        console.log(abc`i am $(user.name),$(user.info)`);
        function adb(s,v1,v2){
            console.log(s,v1,v2)
            return s+v1+v2;
        }
    }
    
    • String.rawHi\n$(1+2)) //raw: 对所有//进行转意,使用频率不高

  • 注意:有几个方法是es7提案,需要安装补丁库,npm install babel-polyfill --save-dev

数值扩展

  1. 新增方法

    • 二进制以0b开头,b小写大写均可

    • 八进制用0o开头;

    • Number.isFinite(15) //判断数是否有尽

    • Number.isNaN:判断是不是数

    • Number.isInteger(25) //25.0是整数,不是数返回false

    • Number.MAX_SAFE_INTEGER

    • Number.MIN_SAFE_INTEGER

    • Number.isSafeInteger(10)

    • Math.trunc(4.1) //取整数,知取整数部分

    • Math.sign(5) //返回+-1/0 判断是不是正数,尝试转换,NaN

    • Math.cbrt(-1) //返回立方根

    • 三角函数,对数

  2. 方法调整

数组扩展

  • Array.from:把伪数组,集合转换为数组

  • Array.of(3,4,7,9,11):一组数据变量转换为数组类型

    //1.
    let p=document.querySelectorAll(‘p‘);
    let pArr=Array.from(p);
    pArr.forEach(function(item){
        console.log(item.textContent)
    })
    //2.转换同时进行了白遍历
    Array.from([1,3,5],function(item){return item*2})
    
  • copyWithin:频率不高

    [1,2,3,4,5].copyWithin(0,3,4) //替换位置从零开始,读取数据从三开始,
    
  • find\findIndex

    [1,2,3,4].find(function(item){
        return item>3; //找到第一个就停止,返回的是value
    })
    [1,2,3,4].findIndex(function(item){
        return item>3; //找到第一个就停止,返回的是下标
    })
    
  • fill

    [1,‘a‘,undefined,fill(7)]:数组内被替换成7
    [‘a‘,‘b‘,‘c‘].fill(7,1,3):数组,从第一个开始换到第三个
    
    
  • entries\keys\values

    • values需要开启兼容

    for(let index of [‘1‘,‘c‘,‘ks‘].keys()){
        console.log(index) //返回数组下标的集合,values是取值
    }
    for(let [index,value] of [‘1‘,‘c‘,‘ks‘].entries()){
        console.log(index,value) //返回数组下标的集合,values是取值
    }
    
    
  • inludes

    [1,2,NaN].includes(1);
    [1,2,NaN].include(NaN):可以做到
    

函数扩展

  1. 参数默认值

    {
        function test(x,y=‘world){
            console.log(‘默认值‘,x,y)
        }
        test(‘hello‘) //默认值helloworld
    }
    //注意有默认值的必须在后面
    
  2. rest函数:不确定输入参数时,将其转化为数组

    {
        function test3(...arg){
            for(let v of arg){
                console.log(‘rest‘,v)
            }
        }
        test3(1,2,3,4,‘a‘);
    }
    
  3. 扩展运算符:把数组转换成离散值

    ...[1,2,4]
    
  4. 箭头函数:定义时,es5是调用时 函数名 参数(没有的话用() 返回值 要注意this的绑定

    {
        let arrow = v => v*2;
        console.log(arrow(3))
    }
    
  5. this绑定:重点补充箭头函数this的指向

  6. 尾调用,存在于函数式编程,一点,函数的最后一句是不是函数,提升性能,建议如果在性能优化过程中觉得某一过程是不断嵌套别的函数,或者说依赖于另一个

    {
        function tail(x){
            console.log(‘tail‘,x);
        }
        function fx(x){
            return  tail(x);
        }
        fx(123);
    }
    

对象扩展(指Object)

  1. 简洁表示法

    {
            //简洁表示法
            let o=1;
            let k=2;
            let es5={o:o,k:k}
            let es6={o,k}
            
            let es5_method={
                hello:function(){
            }
            }
            let es6_method={
                hello(){
                }
            }
    }
    
  2. 属性表达式

    let a=‘b‘;
    let es5_obj={
        a:‘c‘
    }
    //es6key可以用表达式,变量
    let es6_obj={
        [a]:‘c‘;
    }
    
  3. 扩展运算符:es7提案支持不好 let {a,b,...c}={a:‘test‘.b:‘kill‘,c:‘add‘,d:‘ccc‘}

  4. Object新增方法

    1. Object.is(‘abc‘,‘abc‘);功能上等同于===

    2. Object.assign({a:‘a‘},{b:‘b‘}) //返回生成的一个新的对象,是浅拷贝,只拷贝地址,只拷贝自身的,继承的和不可枚举的不考呗

      for(let [key,value] of Object.entries(test)){
          
      }
      

Symbol数据 类型

  1. Symbol概念:提供独一无二的值,声明的值不重复,不相等

    let a1=Symbal();
    let a2=Symbol.for(‘a3‘);
    
  2. Symbol作用 for in let of拿不到,要通过Object.getOwnPropertySymbols()返回数组,或Reflect。ownKeys

数据解构

  1. Set:相对于数组,key不可以重复,主要方法add delete ,clear,has

    let list=new Set();
    list.add(5);
    list.size();
    let  arr=[1,2,3,4,5];
    let lisrt= new Set(arr);
    //添加重复的不会生效,可以用于数组的去重;
    let arr=[1,2,3,4,1,2];
    let new=new Set(arr);
    
    for (let key of list.keys()){
    
    }
    for (let value of list.values.value()){
    
    }
    for (let value of list.values()){
    
    }
    for (let value of list.entries()){
    
    }
    list.forEach(function(item){
    
    })
    
  2. WeakSet:支持的数据类型不一样只可以是对象,是弱引用,添加的对象只是地址引用,不会检测地址是否被回收,没有clear方法 size属性,不可以遍历

  3. Map:相对于Object,key可以不是string

    let map=new Map();
    let arr=[‘123‘];
    map.set(arr,456);
    let map=new Map([[‘a‘,123],[‘b‘:456]]);
    

    size(),get(),delete(),clear()

  4. WeakMap:接受的key必须是对象,没有size,不能clear,不能遍历

数据解构2

  1. Map和Array对比

    • 增:push/unshift set

    • 查 find返回值 has()返回布尔值

    • 改 foreach判断存在->修改 set

    • 删 findindex->删除 delete

  2. Set与Array对比

    • 增 push/ add对象

    • 查 find has() 对象要先保存

    • 改 forEach forEach

    • 删 forEach forEach->delete item

  3. Map,Set,Object 对比

    • 增 map.set(‘t‘,1) set.add({‘t‘:1}) obj[‘t‘]=1

    • 查 map.has(‘t‘) set.has(item) ‘t‘ in obj

    • 改 set(‘t‘,2) item.t=2 obj[‘t‘]=2;

    • 删 map.delete(‘t‘)成本最低 set.delete(item) delete obj[‘t‘]

  4. 总结:能用map不用数组,要求唯一性set ,放弃object和array

Proxy 和 Reflect

  1. Proxy 和 Reflect的概念

  2. Proxy 和 Reflect的适用场景

  • 数据校验

  1. 基本语法

class Parent{
    constructor(name=‘imooc‘){
        this.name=name; 
    }
}
let v_parent=new Parent(‘v‘);
  1. 类的继承

class Child extends Parent{
    construct(name=‘child){
        super(name);  //为空使用父类默认值,必须第一行
        this.type=‘child‘;
    }

}
  1. 静态方法:通过类去调用,而不是类的实例

class Parent{
    constructor(name=‘imooc‘){
        this.name=name; 
    }
    static tell(){

    }
}
Parent.tail();

  1. 静态属性

class Parent{
    constructor(name=‘imooc‘){
        this.name=name; 
    }
    
}
Parent.type="test";
console.log(Parent.type)
  1. getter setter

class Parent{
    constructor(name=‘imooc‘){
        this.name=name; 
    }
    get longName(){
        return this.name;
    }
    set longName(value){
        this.name=value;
    }
}

Promise

  1. 什么是异步(回调和事件,Promise)

  2. Promise的作用

  3. Promise的基本用法

{
    let ajax=function(){
        console.log(‘执行‘);
        return new Primise(function(resolve,reject){
            setTimeout(function(){
                    resolve();
                },1000)
        })
    }
    ajax().then(function(){

    })
}

Iterator和for of

  1. Iterator接口

{
    let arr=[‘hello‘,‘word‘]
    let map=arr[Symbol.iterator]();
    map.next();
    map.next();
}
  1. Iterator基本用法

  2. for of

Generaror

  1. 基本概念:异步编程的一种解决方案,返回的是Iterator接口 调用next()依此执行yield

{
    let obj={};
    obj[Symbol.iterator]=function*(){
        yield 1;
        yield 2;
        yield 3;
    
    }
    for (let value of obj){
        console.log()
    }
}
  1. next函数的用法

{
    let atate=function*(){
        while(1){
            yield ‘A‘;
            yield ‘B‘;
            yield ‘C‘;
        }
    }
    let status=state();
    console.log(status.next())
}
  1. yield*的语法

Decorator(修饰器是一个函数,修改类的行为)

  • 需要额外插件:npm install babel-plugin-transform-decorators-legacy --save-dev .babelrc加入插件

  1. 基本概念

  • 扩展类的功能

  1. 基本用法

{
    let readonly=function(target,name,description){
        description.writable=false;
        return descriptor;
    }
    class Test{
        @readonly
        time(){
        return ‘2018-03-11‘
        }
    }
}

 

以上是关于我的es6学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

es6 学习笔记

学习笔记:python3,代码片段(2017)

es6学习笔记1

学习笔记ES6标准入门

ES6学习 第一章 let 和 const 命令

JavaScript学习笔记 -- ES6学习 let 和const