×

用户注册

已有账号? 登录
javascript

cloud-cola

2020-11-02 09:26

ES6学习之路 292

【转发】https://note.youdao.com/ynoteshare1/index.html?id=7b8156bdeab808bbb2d23358b9ad17b6&type=note

一、声明变量

1、var
1)、允许重复声明变量、导致数据被覆盖
2)、变量提升、怪异的数据访问、闭包问题
3)、全局变量挂载到全局对象、全局对象成员污染问题
2、let
1)、对象不会挂载到全局作用域
2)、当前作用域下不允许重复声明
3)、使用let不会有变量提升、因此、不能在定义let变量之前使用它
3、const
1)、开发中的很多变量、都是不会更改、也不应该改变
2)、后续的很多框架、或者是第三方JS库都要求数据不可变、所以说使用常量可以一定程度上保证这一点
3)、const和let完全相同、仅在用于变量的声明、必须在声明是赋值、而且不可以重新赋值、因此被称为常量(不会变化)
4)、在实际开发中、应该尽量使用const来声明变量、以保证变量的值不会随意篡改
5)、常量不可变:是指内存空间不可变、并不保证内存空间中的地址指向的其他空间不可变
6)、特殊常量命名:常量的名称全部使用大写、多个单词之间用下划线分割
7)、普通常量命名:使用和之前一样的命名即可
8)、循环变量中不能使用常量(const)

二、字符编码

1、ES6为字符串提供了一个方法:text.codePointAt() 根据字符串原码的位置得到其码点、获取第一个码元text.charCodeAt(0)
2、正则表达式添加了一个flag:u、如果添加了该配置、则匹配时使用码点匹配、而不是使用码元:/^.$/u.test(text)
3、ES6给字符串新增的API(均为字符串原型链上的方法):
1)、includes(查找的值,从什么位置开始查找):判断字符串中是否包含指定的子字符串
2)、startsWith:判断字符串中是否已指定的字符串开始
3)、endsWith:判断字符串中是否已指定的字符串结尾
4)、repeat:将字符串重复指定的次数、然后返回一个新字符串
4、正则中的粘连标记:y(匹配时、完全按照正则对象中的lastIndex位置开始匹配、并且匹配位置必须在lastIndex位置、即最开始的位置)
5、模板字符串:`文字内容` 、字符串拼接:${JS表达式}、可以嵌套书写、忽略转义符:const test = String.raw`abc\nbcd`
6、在模板字符串书写之前、可以加上标记:标记名`模板字符串` 、标记是一个函数、参数为:参数1为被插值分割的字符串数组、后续参数为所有的插值
function safe(parst) {
const values = Array.prototype.slice.apply(arguments).slice(1);
let str = '';
for(let i = 0; i < values.length; i ++){
const v = values[i].replace(/>/g,'>').replace(/
str += parst[i] + v;
if(i === values.length - 1){
str += parst[i + 1];
}
}
return str;
}


三、函数

1、只要给函数加上参数默认值、该函数会自动变严格模式下的规则:arguments和形参脱离
2、形参和ES6中的let或const声明一样、具有作用域、并且根据参数的声明顺序、存在暂时性死区
3、参数默认值:在书写形参时、直接给形参赋值、赋的值即为默认值、这样一来、当函数调用的时候没有给对应的参数赋值(给它的值是undefined)、则会自动使用默认值
4、ES6中的剩余参数专门用于收集末尾的所有参数、将其放置到一个形参数组中
语法:function sum(...形参名){}
5、展开运算符:使用功能方式 (...要展开的东西) 注意【...放在函数形参里可以收集剩余参数、放在其他地方为展开运算符、可以展开对象和数组】
1)、可以展开数组
2)、可以展开对象
6、明确函数的双重用途:ES6提供了一个特殊的API、可以使用该API在函数内部判断该函数是否使用了new来调用
1)、new.target:该表达式得到的是、如果没有使用new来调用、则返回undefined、如果使用new调用函数、则得到的是new关键字后面的函数本身
7、箭头函数
1)、通过对象调用函数、this指向对象;直接调用函数、this指向window;通过new调用函数、this指向新创建的对象;通过apply、call、bind调用函数、this指向指定的数据;如果是DOM事件函数、他this指向事件原对象
2)、使用语法:
1)、箭头函数是一个函数表达式
2)、理论上、任何使用函数表达式的场景都可以使用箭头函数
3)、完整语法:(参数1,参数2,...) => {} 如果参数只有一个、可以省略小括号: 参数 => {}
4)、箭头函数函数体中的this、取决于箭头函数定义的位置的this指向、而于如何调用无关
5)、如果箭头函数只有一条返回语句、可以省略大括号和return关键字 参数 => 返回值
6)、箭头函数中没有自己的this、arguments、new.target、如果使用了则是使用的是函数外层的this、arguments、new.target
7)、箭头函数没有原型

四、对象

1、对象字面量语法
1)、成员速写:对象成员的名称来自一个变量、并且和变量名称相同、可以进行简写
2)、方法速写:对象字面量初始化时、可以省略冒号和function关键字
3)、计算属性名:
2、Object新增API
1)、Object.is:用于判断两个对象(数据)是否相等、和基本上和严格相等(===)是一致的、除了(NaN和NaN、+0和-0)
2)、Object.assign:用于混合对象、const obj = Object.assign(obj1,obj2) 后面覆盖前面的、并且第一个参数会被更改 (最好的办法是用展开运算符)
3)、Object.getOwnPropertyNames:ES6规定了该方法返回数组的排序方法(数字按照升序、其他按照书写顺序)
4)、Object.setPrototypeOf:该函数用于设置某个对象的隐式原型、比如:Object。setPrototypeOf(obj1,obj2)、相当于obj1.__proto__=obj2 把obj1的原型设置为obj2
3、面向对象:一种编程思想、更具体的语言
4、类:构造函数的语法糖
1)、属性和原型方法定义分离、降低了可读性
2)、原型成员可以被枚举
3)、默认情况下、构造函数任然可以被当做函数使用
4)、类声明不会提升、与let和const一样、存在暂时性死区
5)、类中的所有代码均在严格模式下执行
6)、类的所有方法都是不可枚举的
7)、类的所有方法都无法被当做构造函数使用
8)、类的构造器必须通过new关键字来调用
5、类的继承
1、extends:继承、用于类的定义、super:直接当做函数调用、表示父类构造函数
2、注意:ES6要求、如果定义了constructor、并且该类是子类、则必须在constructor的第一行手动调用super函数、这样才会形成继承关系

五、解构

1、对象解构
1)、使用ES6的某种语法规则、将一个对象或者数组的某个属性提取到某个变量中
2)、解构不会对被解构的对象造成任何影响
3)、解构中使用默认值{同名变量=默认值}、非同名属性解构{属性名:变量名}
2、数组解构
1)、const [n1, n2, , n4] = number; //解构第一项、第二项、第四项
2)、const [n1, ...num] = number; //解构剩余参数放进num数组中
3、参数解构
1)、如果没有传递参数、全部使用默认值、可以给属性加上一个空对象

六、符号

1、普通符号
1)、通过Symbol(符号描述)函数创建符号、符号没有字面量、typeof返回的值是symbol、两个符号永远不会相同、主要用于给对象设置私有属性
2)、Object.getOwnPropertySymbols(obj) 得到一个符号属性的数组
3)、符号可以通过String(syb)转换为字符串
2、共享符号
1)、根据符号名称(描述)能够得到同一个符号
2)、创建共享符号Symbol.for(符号名/符号描述)
3、知名符号

七、异步处理

1、JS引擎永远执行的是执行栈的顶部
2、浏览器宿主环境中包含的5个线程
1)、JS引擎:负责执行执行栈最顶部的代码
2)、GUI线程:负责渲染页面
3)、事件监听线程:负责监听各种事件
4)、计时线程:负责计时
5)、网络线程:负责网络通信
3、异步函数一定会被放到事件队列里、一定要等执行队列清空之后才执行事件队列里的内容、同步的则不会进入事件队列里、直接在执行栈挨着执行、(微队列:MutationObserver、Promise)、(宏队列:macroTask、计时器结束的回调、事件回调、http回调等绝大部分异步函数会进入宏队列)、微队列的执行高于宏队列
4、Promise并没有消除回调、只是让代码回调变得可控制、前一步的后续处理结果进行进一步的处理
5、async 和 await 是ES2016(ES7)新增的两个关键字、它们借鉴了ES6中生成器在实际开发中的应用、目的是简化Promise api的使用、并非是代替Promise
1)、async 用于修饰函数(无论是函数表达式还是函数字面量)、放在函数最开始的位置、被修饰的函数返回的结果一定是Promise对象
2)、await 关键字必须出现在async函数中、await用在某个表达式之前、如果表达式是一个Promise、则得到的是thenable中的状态数据

八、Fetch Api

1、Fetch的特点
1)、并非取代AJAX、而是对AJAX传统的API进行优化
2)、精细的功能分割:头部信息、请求信息、相应信息等均分布到不同的对象、更利于处理各种复杂的AJAX场景
3)、使用Fetch Api 更利于异步代码的书写
4)、Fetch Api并非ES6新增的内容、而是属于HTML5新增的Web Api
5)、需要掌握网络通讯的知识
2、XHLHttpRequest的问题
1)、所有的功能全部集中在同一个对象上、容易书写出混乱不易维护的代码
2)、采用传统的事件驱动模式、无法适配新的Promise Api
3、参数
1)、必选:请求地址(字符串)、选填:请求配置(对象)
a、method:字符串、请求方式、默认为GET
b、headers:对象、请求头
c、body:请求的主体、必须配置请求头中的Content-Type
d、mode:字符串、请求模式【cache:配置缓存模式:cors(默认值)配置为该值、会在请求头中加入origin和referer】
e、credentials:如何携带凭据(cookie)【omit(默认值)不携带cookie、same-origin请求同源地址是携带cookie、include任何请求地址都携带cookie】
4、返回值(返回一个Promise对象)
1)、当收到服务器返回结果后、Promise进入resolved状态、状态数据为Pesponse对象
2)、当网发生错误(或其他无法完成交互信息的错误时)时、Promise进入rejected状态、状态数据为错误信息
3)、Pesponse对象
a、ok:boolean、当响应码在200~299之间是为true、否则为false
b、status:number、相应状态码
c、text():用于处理文本格式的Ajax响应、它从相应中获取文本流、将其读完、然后返回一个别解决为string对象的Promise
d、blob():用于处理二进制文件格式(比如图片或电子表格)的Ajax响应、它读取文件的原始数据、一旦读取完整个文件、就返回一个被解决为blob对象的Promise
e、json():用于处理JSON格式的Ajax响应、它讲JSON数据流转换为一个被解决为JavaScript对象的Promise
f、redirect():可以用于重定向到另一个URL、它会创建一个新的Promise、以解决来自重定向的URL响应

cloud-colacloud-cola

2020-11-02 09:27
加油!