ES6详细知识点汇总

﹏ヽ暗。殇╰゛Y 2022-12-21 13:57 365阅读 0赞

目录

  • ES6最常用知识清单
    • 1.let关键字
    • 2.const关键字
    • 3.解构赋值
    • 4.模板字符串
    • 5.简化对象写法
    • 6.箭头函数
    • 7.rest参数
    • 8.扩展运算符
    • 9.Symbol数据类型
      • 9.1Symbol的内置属性
    • 10.迭代器(iterator)
    • 11.生成器函数
      1. Promise基本用法
      • 12.1 Promise读取文件
      • 12.2 Promise封装AJAX
      • 12.3 Promise的then方法
      • 12.3 Promise的catch方法
      1. Set与Map
    • 14.class的相关知识
      • 14.1使用ES6来实现类的继承
    • 15.有关数值的扩展
    • 16.有关对象方法的扩展

ES6最常用知识清单

1.let关键字

let关键字可以用来声明变量，其用let声明的变量具有以下特点：
1.不允许重复声明
2.let声明的变量具有块级作用域
3.let声明的变量不具有变量提升
4.let声明的变量不影响作用域链

2.const关键字

const关键字用来声明 常量(不可以修改的量)，其用const声明的常量具有以下特点
1.一定要赋初始值
2.一般常量使用大写声明
3.常量的值不可以修改
4.const声明的常量也具有块级作用域
5.对于数组和对象的元素修改，不算作对常量的修改，不会报错
6.不允许重复声明

应用场景，声明对象类型使用const，非对象类型声明选择let

3.解构赋值

允许按照一定的模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
频繁使用对象方法、数组元素，就可以使用解构赋值形式。

  1. <script> // 1.数组解构 const RNG = ["香锅",'小虎','明']; let [MLXG,XH,MING] = RNG; console.log(MLXG); console.log(XH); console.log(MING); // 2.对象解构 const people = { name:"张三", age:19, sex:"男", paixi:function () { console.log("我要拍戏"); } } let { name,age,sex,paixi} = people; console.log(name); console.log(age); console.log(sex); paixi(); </script>

4.模板字符串

在ES6中，可以使用 ·· 来引住字符串，模板字符串的特点
1.字符串中可以出现换行符
2.可以使用模板字符串直接对变量进行拼接 在 ·· 中使用 ${变量名} 来完成拼接
当遇到字符串与变量拼接的情况使用模板字符串

  1. <script> let str = `我是字符串`; let str1 = `我是一个 换行的字符串`; console.log(str); console.log(str1); let name = `小米`; let me = `${ name}是我最喜欢的手机`; console.log(me); </script>

5.简化对象写法

在ES6中，允许在大括号里边，直接写入变量和函数，作为对象的属性和方法。

  1. <script> let name = `小明`; let eat = function () { console.log("我会干饭"); } const you = { name, eat, play(){ console.log("我只会玩游戏"); } }; console.log(you); </script>

6.箭头函数

在ES6中，可以使用箭头来定义函数。使用箭头函数需要注意以下事项
1.如果形参只有一个，小括号可以省略不写
2.函数体如果只有一条语句，或括号可以省略，函数的返回值为该条语句的执行结果
3.箭头函数this指向声明时所在作用域下this的值
4.箭头函数不能作为构造函数实例化
5.不能使用arguments变量 （arguments变量用来保存实参）

箭头函数不会更改this的指向，适合用来指定回调函数；
箭头函数适合于与this无关的问题，定时器，数组的方法回调
箭头函数不适合与this有关的问题，事件的回调，对象的方法

  1. <script> // 声明函数 function = () => {} let fn = (a,b) => { return a + b ; } let result = fn(3,5); console.log(result); /* 箭头函数与普通函数的区别 */ // 箭头函数 // 1.this是静态的，this始终指向函数声明时所在作用域下的this的值 function getName() { console.log(this.name); } let getName2 = ()=>{ console.log(this.name); } // 设置window对象的name属性 window.name = "信院"; const school = { name:"农大" } // 直接调用 getName();//信院 getName2();//信院 // call 方法调用 getName.call(school);//农大 getName2.call(school); //信院 // 2.箭头函数不能作为构造实例化对象 let Person = (name,age)=>{ this.name = name; this.age = age; } // let me = new Person("席书明",30); // console.log(me);//Person is not a constructor // 3.不能使用arguments变量 arguments 变量用来保存实参 let fun = ()=>{ console.log(arguments); } // fun(1,2,3); // arguments is not defined let fun1 = function () { console.log(arguments); } fun1(1,2,3);//Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] // 4.关于箭头函数的简写 // 1.省略小括号（当形参有且只有一个时可以省略） let add = n =>{ return n + n; } console.log(add(9));//18 // 2.省略大括号（当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值） let pow = n => n*n; console.log(pow(8)); //64 </script>

7.rest参数

rest参数用来获取函数的实参，用来代替arguments。arguments返回的是对象，而reset返回的是数组。

  1. <script> function fn(...args) { console.log(args); } fn(1,2,3,4); // rest参数必须放到最后 function fun(a,b,...args) { console.log(a); console.log(b); console.log(args); } fun(1,2,5,6,7,8); </script>

8.扩展运算符

扩展运算符就是三个点 … 可以将数组转换为逗号分割的参数序列

  1. <body>
  2.     <div></div>
  3.     <div></div>
  4.     <div></div>
  6.     <script> const arr = ["小明","野马","泰迪"]; function fun() { console.log(arguments); } fun(...arr); //相当于 fun("小明","野马","泰迪") // 扩展运算符的应用 // 1.数组的合并 const oneArr = ["我","是","一"]; const twoArr = ["二","是","我"]; const connect = [...oneArr,...twoArr]; console.log(connect); // 2.数组的克隆 const rapStar = ["黄勇","小白","李佳隆"]; const rapStar2 = [...rapStar]; console.log(rapStar2); // 3.将伪数组转换为真数组 const divs = document.querySelectorAll('div'); const arrDivs = [...divs]; console.log(arrDivs); </script>
  7. </body>

9.Symbol数据类型

Symbol是ES6引入的一种新的原始数据类型，表示独一无二的值，是一种类似于字符串的数据类型。Symbol具有以下特点
1.Symbol的值是唯一的，用来解决命名冲突的问题
2.Symbol值不能与其他数据进行计算
3.Symbol定义的对象属性不能使用 for…in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名

  1. <script> // 创建Symbol let s = Symbol(); console.log(s,typeof s); let s1 = Symbol("信院"); let s2 = Symbol("信院"); console.log(s1===s2); //false // 使用Symbol.for 创建 let s3 = Symbol.for("例子"); let s4 = Symbol.for("例子"); console.log(s3===s4); //true </script>

9.1Symbol的内置属性

11个内置的Symbol值

  1. Symbol.hasInstance 当用其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法
  2. Symbol.isConcatSpreadable 对象的Symbol.isConcatSpreadable属性等同于是一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开
  3. Symbol.species 创建衍生对象时，会使用该属性
  4. Symbol.match 当执行str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值
  5. Symbol.replace 当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。
  6. Symbol.search 当该对象被 str.search (myObject)方法调用时，会返回该方法的返回值。
  7. Symbol.split 当该对象被 str.split(myObject)方法调用时，会返回该方法的返回值。
  8. Symbol.iterator 对象进行 for…of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
  9. Symbol.toPrimitive 该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值
  10. Symbol. toStringTag 在该对象上面调用 toString 方法时，返回该方法的返回值

  11. Symbol. unscopables 该对象指定了使用 with 关键字时，哪些属性会被 with环境排除。

10.迭代器(iterator)

迭代器是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署iterator接口，就可以完成遍历操作。

ES6创建了一种新的遍历命令，for…of 循环，Iterator接口主要提供给for…of消费。

原始具有iterator接口的数据（可用for of 遍历），有array、Arguments、Set、Map、String、TypedArray、NodeList。

工作原理：
1.创建一个指针对象，指向当前数据结构的起始位置
2.第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3.接下来不断调用next方法，指针一直往后移动，直到指针指向最后一个成员
4.可以每次调用next方法返回一个包含value和done属性的对象（done表达的是度的完成时，遍历完true，未遍历完为false）
需要自定义遍历数据的时候，用到迭代器

  1. <script> // 声明一个数组 let arr = ["小乔","吕布","关羽","张飞"]; // 使用for...of来遍历数组 // for...in 循环保存的是键名，for...of 循环保存的是键值 for(const key in arr){ console.log(key); } for (const value of arr) { console.log(value); } let iterator = arr[Symbol.iterator](); // 调用对象的next方法 console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); </script>

使用迭代器自定义遍历数据

  1. <script> // 声明对象 const school = { name:"信院", student:[ "大一", "大二", "大三", "大四" ], [Symbol.iterator](){ let index = 0; let _this = this; return { next:function(){ if(index < _this.student.length){ const result = { value:_this.student[index],done:false }; index++; return result; }else{ return { value:undefined,done:true} } } } } } // 遍历这个对象 for(let value of school){ console.log(value); } </script>

11.生成器函数

生成器函数是ES6提供的一种异步编程解决方案，函数书写如下：

  1. function * gen(){}

1.*的位置没有限制
2.生成器函数返回的结果是迭代器对象，调用迭代器对象的next方法可以得到yield语句后的值
3.yield相当于函数的暂停标记，也可以默认为是函数的分隔符，每调用一次next方法，执行一段代码
4.next方法可以传递实参，作为yield语句的返回值

  1. <script> /* 生成器其实就是一个特殊的函数， 用来进行异步编程 纯回调函数 node ajax fs mongodb 函数中间可以加 yield 语句 做 函数代码 的分割符 生成器函数中 的 输出语句以及yield语句之后的内容 必须依赖迭代器的 next() 方法来执行 */ // 生成器函数的声明 function * gen () { console.log(111); yield "我是第一块分割符" console.log(222); yield "我是第二块分割符" console.log(333); yield "我是第三块分割符" console.log(444); } let iterator = gen(); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log("\n"); // 遍历 for(let value of gen()){ console.log(value); } </script>

生成器函数的参数传递

  1. <script> function* gen(args) { console.log(args) let one = yield 111; console.log(one); let two = yield 222; console.log(two); let three = yield 333; console.log(three); } // 执行获取迭代器对象 let iterator = gen("AAA"); console.log(iterator.next()); // 在next方法中传递参数 console.log(iterator.next("BBB")); console.log(iterator.next("CCC")); console.log(iterator.next("DDD")); </script>

12. Promise基本用法

Promise用于解决异步编程的方案，语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或者失败的结果。
1.Promise构造函数：Promise(){}
2.Promise.prototype.then方法
3.Promise.prototype.catch方法

通过调用 resolve 、reject 这两个函数来改变实例化对象的状态，从而执行Promise对象中的方法 ，若成功，执行对应的value函数，失败则执行对应的reason函数。

  1. <script> // 实例化Promise对象 const p = new Promise(function (resolve,reject) { setTimeout(function () { // 成功 let success = "接收用户数据库成功"; resolve(success); /* // 失败 let fail = "接收用户数据库失败"; reject(fail); */ },1000); }); // 调用promise对象的then方法 p.then(function (value) { console.log(value); },function (reason) { console.log(reason); }) </script>

12.1 Promise读取文件

  1. // 1.引入 fs 模块
  2. const fs = require("fs");
  4. /* // 2.调用方法读取文件 fs.readFile("./01-let变量声明以及声明特性.html",(err,data) => { // 如果失败，则抛出错误 if(err){ throw err; } // 没有出错，输出内容 console.log(data.toString()); }); */
  6. // 3.使用 Promise 封装
  7. const p = new Promise(function (resolve,reject) {   
  8.     fs.readFile("./01-let变量声明以及声明特性.html",(err,data) => { 
  9.         // 判断如果失败
  10.         if(err){ 
  11.             reject(err);
  12.         }
  13.         // 如果成功
  14.         resolve(data);
  15.     });
  16. });
  18. // 执行then方法
  19. p.then(function (value) {   
  20.     console.log(value.toString());
  21. },function (reason) {   
  22.     console.log("读取失败！")
  23. })

12.2 Promise封装AJAX

  1. <script> // 接口地址：https://api.apiopen.top/getJoke // 使用Promise封装 const p = new Promise((resolve, reject) => { // 1.创建对象 const xhr = new XMLHttpRequest(); // 2.初始化 xhr.open("get", "https://api.apiopen.top/getJoke"); // 3.发送 xhr.send(); // 4.绑定事件，处理响应结果 xhr.onreadystatechange = function () { // 判断 if (xhr.readyState === 4) { // 判断响应状态码 200 - 299 if (xhr.status >= 200 && xhr.status < 300) { // 表示成功 resolve(xhr.response); } else { // 如果失败 reject(xhr.status); } } } }); // 调用then方法 p.then(function (value) { console.log(value); },function (reason) { console.log(reason); }); </script>

12.3 Promise的then方法

  1. <script> // 创建 Promise 对象 const p = new Promise((resolve, reject) => { setTimeout(() => { resolve("用户数据"); }, 1000) }) // 调用 then 方法 // then方法的返回结果是 Promise 对象，对象状态由回调函数的执行结果决定 // 1.如果回调函数中返回的结果是 非promise类型的属性，状态为成功，返回值为对象的成功值 // const result = p.then(value => { // console.log(value); // 1.非Promise类型对象 // return "成功了！"; // 2.是Promise对象 /* return new Promise((resolve,reject)=>{ // resolve("ok"); reject("error"); }) */ // 3.抛出错误 // throw new Error("出错了"); // }, reason => { // console.warn(reason); // }) // 链式调用 p.then(value=>{ }).then(value=>{ }) </script>

12.3 Promise的catch方法

  1. <script> const p = new Promise((resolve,reject)=>{ setTimeout(()=>{ // 设置p对象的状态为失败，并设置失败的值 reject("出错了"); },1000) }) // p.then(function (value) { },function (reason) { // console.error(reason); // }) p.catch(function (reason) { console.warn(reason); }) </script>

13. Set与Map

Set集合
类似于数组，但是成员的值都是唯一的，集合实现了iterator接口，所以可以使用 扩展运算符 和 for…of… 进行遍历

集合的属性和方法

  1. size 返回集合的元素个数
  2. add() 添加一个新元素，返回当前集合
  3. delete() 删除元素，返回boolean值
  4. has() 检测集合中是否包含某个元素，返回boolean值

  5. clear() 清空集合

Map集合，是键值对集合。但是键的范围不限于字符串，各种类型的值（包括对象）都可以当做键。
Map也实现了Iterator接口，所以可以使用 … 和 for…of 进行遍历。

Map的属性和方法

  1. size 返回Map的元素个数
  2. set() 增加一个新元素，返回当前Map
  3. get() 返回键名对象的键值
  4. has() 检测Map中是否包含某个元素，返回boolean值
  5. clear() 清空集合，返回undefined

  6. delete() 删除集合中的一个元素

14.class的相关知识

使用class类来使用构造函数

  1. class tel{
  2.             // 构造方法，名字不可以修改
  3.             constructor(brand,price){
  4.                 this.brand = brand;
  5.                 this.price = price;
  6.             }
  7.             // 方法必须使用该语法
  8.             call(){
  9.                 console.log("我能打电话");
  10.             }
  11.         }
  13.         // 实例化对象
  14.         let oppo = new tel("oppo","1699");
  15.         console.log(oppo);

14.1使用ES6来实现类的继承

  1. <script> class Phone{ constructor(brand,price){ this.brand = brand; this.price = price; } // 父类的成员属性 call(){ console.log("我可以打电话"); } } // 子类继承父类 class SmartPhone extends Phone{ // 构造方法 constructor(brand,price,color,size){ super(brand,price); this.color = color; this.size = size; } // 子类特有的方法 photo(){ console.log("我可以拍照"); } playGame(){ console.log("我可以玩游戏"); } // 重写父类中的方法 call(){ console.log("我是重写后的方法"); } } // 实例化对象 let xiaomi = new SmartPhone("小米",2000,"black","5.77"); console.log(xiaomi); xiaomi.call(); xiaomi.photo(); xiaomi.playGame(); </script>

15.有关数值的扩展

  1. Number.EPSILON 是 JS 表示的最小精度
  2. 二进制和八进制 十进制和十六进制
  3. Number.isFinite() 检测一个数值是否为有限数
  4. Number.isNaN() 检测一个数值是否为NaN
  5. Number.parseInt() Number.parseFloat() 字符串转整数
  6. Number.isInteger() 判断一个数是否为整数
  7. Math.trunc() 将数字的小数部分抹掉

  8. Math.sign() 判断一个数到底为 正数(返回1) 负数(返回-1) 还是0(返回0)

16.有关对象方法的扩展

  1. Object.is() 判断两个值是否完全相等
  2. Object.assign() 对象的合并(覆盖) 后边的参数会将前面的覆盖,如果前一个参数有后一个参数没有的属性，则不会覆盖

  3. Object.setPrototypeOf()设置原型对象 Object.getPrototypeOf()读取原型对象

发表评论

表情：
评论列表 （有 0 条评论，365人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ES6知识点汇总（全）

    ES6知识点汇总（全） > 近期在整理ES6相关开发文档，针对ES6新的知识点，以问答形式整理一个全面知识和问题汇总。 一、问：ES6是什么，为什么要学习它，不学习E

    红太狼红太狼/ 0 赞/ 177 阅读

    相关 HTML知识点详细汇总

    目录   第一章 HTML基础知识 1、HTML简介 2、HTML的标记组成 3、HTML基本结构 第二章 文字与图像 1、设置文字字体、大小与颜色 2、设置正

    男娘i男娘i/ 0 赞/ 1385 阅读