正文

我的es6学习笔记

author  author  2022-10-02  510

关键词：

前两个月看了一套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模板，服务器，前端编译，服务器定时刷新

npm install express -g //安装最新版
npm install -g express-generator

npm package.json
.babelrc babel

es6语法

let:

块儿级作用域
严格模式
es6强制严格模式
变量未声明不能引用,变量不可以重复声明

const

声明必须赋值，不可以更改
对象存储的是指针，值可以变

解构赋值

解构赋值
解构赋值分类
- 数组解构赋值（重点)
  - [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
    }
```
  - 默认值
- 字符串解构赋值
- 布尔值解构赋值
- 函数参数解构赋值
- 数值解构赋值
应用场景

变量的交换

{
    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

    }

正则

构造函数的变化

{
    //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新增属性，用于获取修饰符
}

正则的方法扩展

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

{
    
    console.log(‘u-1‘,/^uD83D/.test(‘uD83DuDC2A‘));  //把四个字节当成两个字符字母
    console.log(‘u-2‘,/^uD83D/u.test(‘uD83DuDC2A‘));  //把四个自己当成一个字符
    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修饰符，才可以正确识别，否则无法处理
换行符，回车符，行分隔符，段分隔符，.也不可以识别

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修饰符的模式
}

s修饰符（只是题提案，没有真正实现)
- . z在s修饰符下可以识别换行符，回车符，行分隔符，段分隔符。 6.总结

构造函数
字符串原来使用的跟正则相关的方法，现在都是隐形调用的正则对象的方法
y和g的区别，以及y的点是下一个开始
u修饰符的使用情况
s修饰符作用

字符串扩展

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 可以
}

遍历接口

{
    let s=
    for 循环
    //es6
    for(let code of str){
        console.log(code)
    }
}

模板字符串

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

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

新增方法（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 $(1+2)) //raw: 对所有//进行转意，使用频率不高

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

数值扩展

新增方法
- 二进制以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) //返回立方根
- 三角函数，对数
方法调整

数组扩展

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) //替换位置从零开始，读取数据从三开始，

findfindIndex

[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):数组，从第一个开始换到第三个

entrieskeysvalues

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):可以做到

函数扩展

参数默认值

{
    function test(x,y=‘world){
        console.log(‘默认值‘,x,y)
    }
    test(‘hello‘) //默认值helloworld
}
//注意有默认值的必须在后面

rest函数:不确定输入参数时，将其转化为数组

{
    function test3(...arg){
        for(let v of arg){
            console.log(‘rest‘,v)
        }
    }
    test3(1,2,3,4,‘a‘);
}

扩展运算符:把数组转换成离散值
```
...[1,2,4]
```
箭头函数：定义时，es5是调用时函数名参数(没有的话用() 返回值要注意this的绑定
```
{
    let arrow = v => v*2;
    console.log(arrow(3))
}
```
this绑定：重点补充箭头函数this的指向
尾调用，存在于函数式编程，一点，函数的最后一句是不是函数,提升性能，建议如果在性能优化过程中觉得某一过程是不断嵌套别的函数，或者说依赖于另一个
```
{
    function tail(x){
        console.log(‘tail‘,x);
    }
    function fx(x){
        return  tail(x);
    }
    fx(123);
}
```

对象扩展（指Object)

简洁表示法

{
        //简洁表示法
        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(){
            }
        }
}

属性表达式

let a=‘b‘;
let es5_obj={
    a:‘c‘
}
//es6key可以用表达式,变量
let es6_obj={
    [a]:‘c‘;
}

扩展运算符:es7提案支持不好 let {a,b,...c}={a:‘test‘.b:‘kill‘,c:‘add‘,d:‘ccc‘}
Object新增方法
1. Object.is(‘abc‘,‘abc‘);功能上等同于===
2. Object.assign({a:‘a‘},{b:‘b‘}) //返回生成的一个新的对象，是浅拷贝，只拷贝地址，只拷贝自身的，继承的和不可枚举的不考呗
```
for(let [key,value] of Object.entries(test)){
    
}
```

Symbol数据类型

Symbol概念：提供独一无二的值，声明的值不重复，不相等
```
let a1=Symbal();
let a2=Symbol.for(‘a3‘);
```
Symbol作用 for in let of拿不到，要通过Object.getOwnPropertySymbols()返回数组，或Reflect。ownKeys

数据解构

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){

})

WeakSet:支持的数据类型不一样只可以是对象，是弱引用，添加的对象只是地址引用，不会检测地址是否被回收，没有clear方法 size属性，不可以遍历

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()

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

数据解构2

Map和Array对比
- 增：push/unshift set
- 查 find返回值 has()返回布尔值
- 改 foreach判断存在->修改 set
- 删 findindex->删除 delete
Set与Array对比
- 增 push/ add对象
- 查 find has（) 对象要先保存
- 改 forEach forEach
- 删 forEach forEach->delete item
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‘]
总结：能用map不用数组，要求唯一性set ，放弃object和array

Proxy 和 Reflect

Proxy 和 Reflect的概念
Proxy 和 Reflect的适用场景

数据校验

类

基本语法

class Parent{
    constructor(name=‘imooc‘){
        this.name=name; 
    }
}
let v_parent=new Parent(‘v‘);

类的继承

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

}

静态方法:通过类去调用，而不是类的实例

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

    }
}
Parent.tail();

静态属性

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

getter setter

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

Promise

什么是异步（回调和事件，Promise)
Promise的作用
Promise的基本用法

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

    })
}

Iterator和for of

Iterator接口

{
    let arr=[‘hello‘,‘word‘]
    let map=arr[Symbol.iterator]();
    map.next();
    map.next();
}

Iterator基本用法
for of

Generaror

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

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

next函数的用法

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

yield*的语法

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

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

基本概念

扩展类的功能

基本用法

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

es6学习笔记——模块化

　　最近学习ReactJS经常遇见ES6语法，为了尽快弄懂ReactJS,因此想方设法绕过ES6，但是随着学习的深入，需要查阅的资料越来越多，发现大部分与之相关的框架和学习资料都是采用ES6写的，终究发现这是一个绕不过去的坎啊。ES6是... 查看详情

学习笔记：es6

http://es6.ruanyifeng.com/　　ECMAScript6 以下是ES6排名前十的最佳特性列表（排名不分先后）：DefaultParameters（默认参数）inES6TemplateLiterals（模板文本）inES6Multi-lineStrings（多行字符串）inES6DestructuringAssignment（解构赋值）inES6EnhancedObj 查看详情

es6学习笔记

classPoint{constructor(x,y){this.x=x;this.y=y;}staticclassMethod(){console.log(‘fathorjt:hello‘);}}classColorPointextendsPoint{//mix(Cons1,Cons2)constructor(x,y,color){super(x,y);this.color=color;//正确查看详情

es6学习笔记

环境搭建和简单实践怎么es6还要环境搭建呢？我用的还是javascript吗？然而不是这么一回事。es6在语法上有很多的变化，算是脱胎换骨了，但是因为浏览器还没有完全支持es6的新语法，所以使用es6开发，就应该先将其转化为es5，... 查看详情

es6中promise学习笔记

参考资料：廖雪峰javascript教程-promise 阮一峰ECMAScript6入门-Promise对象 JavaScriptPromise迷你书（中文版）查看详情

es6学习笔记

写好的es6的代码可以通过babel-cli插件转化为es5的代码npminstallbabel-cli-gbabel之前是个专用的es6转化es5的工具，因为es6的代码在浏览器中的没法跑起来，但是现在babel的功能更加强大了，比如react的jsx也是通过babel来转化的，所以现在b... 查看详情

es6学习笔记

一.字符串扩展1.unicode表示的改进 es5支持unicode表示字符，限于u0000--uFFFF之间的字符，超出范围的字符用双字节形式表达console.log("u0061");//"a"console.log("u00611");//"a1"，即u0061+1 es6将码点放进大括号console.log(‘u{00611}‘);//不再是... 查看详情

es6学习笔记1

联系es6的网址：https://babeljs.io/ES6的第一个版本，就这样在2015年6月发布了，正式名称就是《ECMAScript2015标准》（简称ES2015）let命令ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码... 查看详情

javascript学习笔记--es6学习数值的扩展

ES6对于数值类型(Number)进行了一下扩展：1.对于二进制和八进制提供了新的写法ES6对于二进制和八进制的数值提供了新的写法，分别用0b(或者0B)和0o(或者0o)表示。例如：0b111110111===503//true0o767===503//true 由于从ES5开始，严格模式... 查看详情

es6从入门到精通系列学习笔记23篇（完结）

说明ES6从入门到精通系列（全23讲）学习笔记。可以自行搜索B站，有小马哥的视频学习。目录ES6从入门到精通#01：ES6介绍ES6从入门到精通#02：let和const命令ES6从入门到精通#03：模板字符串ES6从入门到精通#04&... 查看详情

es6学习笔记

ES6加强了对Unicode的支持，并且扩展了字符串对象。1、字符的Unicode表示法JavaScript允许采用uxxxx形式表示一个字符，其中“xxxx”表示字符的码点。"u0061"//"a" 但是，这种表示法只限于u0000——uFFFF之间的字符。超出这... 查看详情

es6学习笔记

1.箭头函数箭头函数：input.map(item=>item+1);普通函数：　　input.map(function(item){　　　　returnitem+1;　　})2.babel转码（所有babel工具和模块的使用，都必须先写好.babelrc）　　a.presets字段设定转码规则（官方规则集，按需安装）　　... 查看详情

es6学习笔记二：各种扩展

转载请注明原文地址：http://www.cnblogs.com/ygj0930/p/7242967.html 一：字符串扩展二：正则的扩展三：Number的扩展四：函数扩展五：数组扩展六：对象扩展查看详情

es6学习笔记数组扩展

扩展运算符...1.数组的扩展运算符将一个数组转换成一个逗号分隔的参数序列console.log(...[1,2,3]) //1,2,3[‘a‘,‘b‘,...[1,3]] //a,b,1,32.扩展运算用于函数调用functionpush(a,arr){　　a.push(...arr);}******************************************** 查看详情

es6学习笔记

文章目录介绍ECMAScript6的新特性箭头（Arrow）类（class）类的prototype属性和__proto__属性Moduleexport,import命令整体输入，module指令exportdefault介绍ECMAScript6在接下来的一段时间内将成为ECMAScript的一个标准。这个标准预计在今年的时... 查看详情

es6学习笔记--default,rest

default意思是默认值。大家可以看下面的例子，调用animal()方法时忘记了传参数，传统的做法就是加上这一句type=type||‘cat‘来指定默认值。functionanimal(type){type=type||‘cat‘console.log(type)}animal()//cat而ES6S则可以直接给形参添加默认值... 查看详情

es6学习笔记

1.ES6学习之let、const(1).var、let、const变（常）量声明ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。在ES6中let就诞生了，实际上它为javascript新增了块级作用域。let只在变量声明时，所在的代码块中... 查看详情

es6学习笔记3

1、Set　　{　　　　let s=newSet();　　　　s.add(1).add(2).add(5);　　}　　Set()可以去除重复成员，将只有（===）相等的会去重　　（1）s.size(返回Set实例的成员总数)　　（2）s.add(value)：添加某个值，返回Set结构本身　　（3）s.delet... 查看详情

正文

我的es6学习笔记

ES6

es6项目构建

基础架构

任务自动化gulp

编译工具

代码实现

实践

es6语法

let:

const

解构赋值

正则

字符串扩展

数值扩展

数组扩展

函数扩展

对象扩展（指Object)

Symbol数据 类型

数据解构

数据解构2

Proxy 和 Reflect

类

Promise

Iterator和for of

Generaror

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

es6学习笔记——模块化

学习笔记：es6

es6学习笔记

es6学习笔记

es6中promise学习笔记

es6学习笔记

es6学习笔记

es6学习笔记1

javascript学习笔记--es6学习数值的扩展

es6从入门到精通系列学习笔记23篇（完结）

es6学习笔记

es6学习笔记

es6学习笔记二：各种扩展

es6学习笔记数组扩展

es6学习笔记

es6学习笔记--default,rest

es6学习笔记

es6学习笔记3

Symbol数据类型