易思espcms企业网站管理系统,北京壹零零壹网站建设,做网站的要多少钱,网站建设公司佛山这里写目录标题 1.字符串支持1.codePointAt——根据字符串码元的位置得到其码点2.includes——判断字符串中是否包含指定的子字符串3.startsWith——判断字符串中是否以指定的字符串开始4.endsWith——判断字符串中是否以指定的字符串结尾5.repeat——将字符串重复指定的次数然后返回一个新字符串6.模板字符串 2.函数2-1. 参数默认值使用[扩展]对arguments的影响[扩展]留意暂时性死区 2-6. 箭头函数使用语法注意细节应用场景 3.对象Object3-1. Object的新增API1. Object.is2. Object.assign3. Object.getOwnPropertyNames 的枚举顺序4. Object.setPrototypeOf 3-2. 类构造函数的语法糖传统的构造函数的问题类的特点 3-3. 类的其他书写方式1. 可计算的成员名2. getter和setter3. 静态成员4. 字段初始化器ES75. 类表达式6. [扩展]装饰器ES7(Decorator) 3-4. 类的继承 4.async和await消除回调asyncawait Promise的基本概念链式调用规则Promise的静态方法 5.Fetch ApiFetch Api 概述基本使用参数返回值Headers 对象文件上传 6 新增的数组API静态方法实例方法 1.字符串支持
1.codePointAt——根据字符串码元的位置得到其码点
2.includes——判断字符串中是否包含指定的子字符串
3.startsWith——判断字符串中是否以指定的字符串开始
4.endsWith——判断字符串中是否以指定的字符串结尾
5.repeat——将字符串重复指定的次数然后返回一个新字符串
6.模板字符串
ES6之前处理字符串繁琐的两个方面 多行字符串字符串拼接 在ES6中提供了模板字符串的书写可以非常方便的换行和拼接要做的仅仅是将字符串的开始或结尾改为 符号
如果要在字符串中拼接js表达式只需要在模板字符串中使用${JS表达式}
2.函数
2-1. 参数默认值
使用
在书写形参时直接给形参赋值附的值即为默认值
这样一来当调用函数时如果没有给对应的参数赋值给它的值是undefined则会自动使用默认值。
[扩展]对arguments的影响
只要给函数加上参数默认值该函数会自动变量严格模式下的规则arguments和形参脱离
[扩展]留意暂时性死区
形参和ES6中的let或const声明一样具有作用域并且根据参数的声明顺序存在暂时性死区。
2-6. 箭头函数
回顾this指向 通过对象调用函数this指向对象直接调用函数this指向全局对象如果通过new调用函数this指向新创建的对象如果通过apply、call、bind调用函数this指向指定的数据如果是DOM事件函数this指向事件源 使用语法
箭头函数是一个函数表达式理论上任何使用函数表达式的场景都可以使用箭头函数
完整语法
(参数1, 参数2, ...){//函数体
}如果参数只有一个可以省略小括号
参数 {}如果箭头函数只有一条返回语句可以省略大括号和return关键字
参数 返回值注意细节
箭头函数中不存在this、arguments、new.target如果使用了则使用的是函数外层的对应的this、arguments、new.target箭头函数没有原型箭头函数不能作用构造函数使用
应用场景 临时性使用的函数并不会可以调用它比如事件处理函数异步处理函数其他临时性的函数为了绑定外层this的函数在不影响其他代码的情况下保持代码的简洁最常见的数组方法中的回调函数 3.对象Object
3-1. Object的新增API
1. Object.is
用于判断两个数据是否相等基本上跟严格相等是一致的除了以下两点
NaN和NaN相等0和-0不相等
2. Object.assign
用于混合对象
3. Object.getOwnPropertyNames 的枚举顺序
Object.getOwnPropertyNames方法之前就存在只不过官方没有明确要求对属性的顺序如何排序如何排序完全由浏览器厂商决定。
ES6规定了该方法返回的数组的排序方式如下
先排数字并按照升序排序再排其他按照书写顺序排序
4. Object.setPrototypeOf
该函数用于设置某个对象的隐式原型
比如 Object.setPrototypeOf(obj1, obj2) 相当于 obj1.__proto__ obj2
3-2. 类构造函数的语法糖
传统的构造函数的问题 属性和原型方法定义分离降低了可读性原型成员可以被枚举默认情况下构造函数仍然可以被当作普通函数使用 类的特点 类声明不会被提升与 let 和 const 一样存在暂时性死区类中的所有代码均在严格模式下执行类的所有方法都是不可枚举的类的所有方法都无法被当作构造函数使用类的构造器必须使用 new 来调用 3-3. 类的其他书写方式
1. 可计算的成员名
2. getter和setter
Object.defineProperty 可定义某个对象成员属性的读取和设置
使用getter和setter控制的属性不在原型上
3. 静态成员
构造函数本身的成员
使用static关键字定义的成员即静态成员
4. 字段初始化器ES7 注意 1). 使用static的字段初始化器添加的是静态成员 2). 没有使用static的字段初始化器添加的成员位于对象上 3). 箭头函数在字段初始化器位置上指向当前对象 5. 类表达式
6. [扩展]装饰器ES7(Decorator)
横切关注点
装饰器的本质是一个函数
3-4. 类的继承
如果两个类A和B如果可以描述为B 是 A则A和B形成继承关系
如果B是A则 B继承自AA派生BB是A的子类A是B的父类 如果A是B的父类则B会自动拥有A中的所有实例成员。
新的关键字 extends继承用于类的定义super 直接当作函数调用表示父类构造函数如果当作对象使用则表示父类的原型 注意ES6要求如果定义了constructor并且该类是子类则必须在constructor的第一行手动调用父类的构造函数
如果子类不写constructor则会有默认的构造器该构造器需要的参数和父类一致并且自动调用父类构造器 【冷知识】 用JS制作抽象类 抽象类一般是父类不能通过该类创建对象 正常情况下this的指向this始终指向具体的类的对象
4.async和await 消除回调
有了Promise异步任务就有了一种统一的处理方式
有了统一的处理方式ES官方就可以对其进一步优化
ES7推出了两个关键字async和await用于更加优雅的表达Promise
async
async关键字用于修饰函数被它修饰的函数一定返回Promise
async function method1(){return 1; // 该函数的返回值是Promise完成后的数据
}method1(); // Promise { 1 }async function method2(){return Promise.resolve(1); // 若返回的是Promise则method得到的Promise状态和其一致
}method2(); // Promise { 1 }async function method3(){throw new Error(1); // 若执行过程报错则任务是rejected
}method3(); // Promise { rejected Error(1) }await
await关键字表示等待某个Promise完成它必须用于async函数中
async function method(){const n await Promise.resolve(1);console.log(n); // 1
}// 上面的函数等同于
function method(){return new Promise((resolve, reject){Promise.resolve(1).then(n{console.log(n);resolve(1)})})
}await也可以等待其他数据
async function method(){const n await 1; // 等同于 await Promise.resolve(1)
}如果需要针对失败的任务进行处理可以使用try-catch语法
async function method(){try{const n await Promise.reject(123); // 这句代码将抛出异常console.log(成功, n)}catch(err){console.log(失败, err)}
}method(); // 输出 失败 123Promise的基本概念
链式调用规则 then方法必定会返回一个新的Promise 可理解为后续处理也是一个任务 新任务的状态取决于后续处理 若没有相关的后续处理新任务的状态和前任务一致数据为前任务的数据若有后续处理但还未执行新任务挂起。若后续处理执行了则根据后续处理的情况确定新任务的状态 - 后续处理执行无错新任务的状态为完成数据为后续处理的返回值 - 后续处理执行有错新任务的状态为失败数据为异常对象 - 后续执行后返回的是一个任务对象新任务的状态和数据与该任务对象一致 Promise的静态方法
方法名含义Promise.resolve(data)直接返回一个完成状态的任务Promise.reject(reason)直接返回一个拒绝状态的任务Promise.all(任务数组)返回一个任务任务数组全部成功则成功任何一个失败则失败Promise.any(任务数组)返回一个任务任务数组任一成功则成功任务全部失败则失败Promise.allSettled(任务数组)返回一个任务任务数组全部已决则成功该任务不会失败Promise.race(任务数组)返回一个任务任务数组任一已决则已决状态和其一致
5.Fetch Api
Fetch Api 概述
XMLHttpRequest的问题 所有的功能全部集中在同一个对象上容易书写出混乱不易维护的代码采用传统的事件驱动模式无法适配新的 Promise Api Fetch Api 的特点 并非取代 AJAX而是对 AJAX 传统 API 的改进精细的功能分割头部信息、请求信息、响应信息等均分布到不同的对象更利于处理各种复杂的 AJAX 场景使用 Promise Api更利于异步代码的书写Fetch Api 并非 ES6 的内容属于 HTML5 新增的 Web Api需要掌握网络通信的知识 基本使用 请求测试地址http://study.yuanjin.tech/api/local 使用 fetch 函数即可立即向服务器发送网络请求
参数
该函数有两个参数 必填字符串请求地址选填对象请求配置 请求配置对象 method字符串请求方法默认值 GETheaders对象请求头信息body: 请求体的内容必须匹配请求头中的 Content-Typemode字符串请求模式 cors默认值配置为该值会在请求头中加入 origin 和 refererno-cors配置为该值不会在请求头中加入 origin 和 referer跨域的时候可能会出现问题same-origin指示请求必须在同一个域中发生如果请求其他域则会报错 credentials: 如何携带凭据cookie omit默认值不携带 cookiesame-origin请求同源地址时携带 cookieinclude请求任何地址都携带 cookie cache配置缓存模式 default: 表示 fetch 请求之前将检查下 http 的缓存.no-store: 表示 fetch 请求将完全忽略 http 缓存的存在. 这意味着请求之前将不再检查下 http 的缓存, 拿到响应后, 它也不会更新 http 缓存.no-cache: 如果存在缓存, 那么 fetch 将发送一个条件查询 request 和一个正常的 request, 拿到响应后, 它会更新 http 缓存.reload: 表示 fetch 请求之前将忽略 http 缓存的存在, 但是请求拿到响应后, 它将主动更新 http 缓存.force-cache: 表示 fetch 请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 除非没有任何缓存, 那么它将发送一个正常的 request.only-if-cached: 表示 fetch 请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 如果没有缓存, 它将抛出网络错误(该设置只在 mode 为”same-origin”时有效). 返回值
fetch 函数返回一个 Promise 对象
当收到服务器的返回结果后Promise 进入 resolved 状态状态数据为 Response 对象当网络发生错误或其他导致无法完成交互的错误时Promise 进入 rejected 状态状态数据为错误信息
Response 对象 okboolean当响应消息码在 200~299 之间时为 true其他为 falsestatusnumber响应的状态码text()用于处理文本格式的 Ajax 响应。它从响应中获取文本流将其读完然后返回一个被解决为 string 对象的 Promise。blob()用于处理二进制文件格式比如图片或者电子表格的 Ajax 响应。它读取文件的原始数据一旦读取完整个文件就返回一个被解决为 blob 对象的 Promise。json()用于处理 JSON 格式的 Ajax 的响应。它将 JSON 数据流转换为一个被解决为 JavaScript 对象的 promise。redirect()可以用于重定向到另一个 URL。它会创建一个新的 Promise以解决来自重定向的 URL 的响应。 Headers 对象
在Request和Response对象内部会将传递的请求头对象转换为Headers
Headers对象中的方法 has(key)检查请求头中是否存在指定的key值get(key): 得到请求头中对应的key值set(key, value)修改对应的键值对append(key, value)添加对应的键值对keys(): 得到所有的请求头键的集合values(): 得到所有的请求头中的值的集合entries(): 得到所有请求头中的键值对的集合 文件上传
流程 客户端将文件数据发送给服务器服务器保存上传的文件数据到服务器端服务器响应给客户端一个文件访问地址 测试地址http://study.yuanjin.tech/api/upload 键的名称表单域名称imagefile 请求方法POST 请求的表单格式multipart/form-data 请求体中必须包含一个键值对键的名称是服务器要求的名称值是文件数据 HTML5 中JS 仍然无法随意的获取文件数据但是可以获取到 input 元素中被用户选中的文件数据 可以利用 HTML5 提供的 FormData 构造函数来创建请求体 6 新增的数组API
静态方法 Array.of(…args): 使用指定的数组项创建一个新数组Array.from(arg): 通过给定的类数组 或 可迭代对象 创建一个新的数组。 实例方法 find(callback): 用于查找满足条件的第一个元素findIndex(callback)用于查找满足条件的第一个元素的下标fill(data)用指定的数据填充满数组所有的内容copyWithin(target, start?, end?): 在数组内部完成复制includes(data)判断数组中是否包含某个值使用Object.is匹配
