大一菜鸟JavaScript学习之路（七）ES6-8 下

小鱼默默学习
134 阅读4分钟

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

扩展运算符

...

  1. const name=[a,b,c];
  2. hanshu(...name);【《-会把数组里面的元素分成参数序列】
  3. 可以用于把数组合并[...shuzu1,...shuzu2];
  4. 还可以把伪数组抓换成数组[...weishuzu];

symbol的介绍与创建

  • symbol是一种新的原始数据类型，类似于字符串。

    • symbol的值是唯一的
    • 值不能与其他数据进行运算
    • 所定义的对象属性不能用for...in循环遍历，但可以使用Reflect.ownKeys来获取所有键名

  • 对对象添加symbol类型的属性

game['symbol()']

可以很安全的添加方法，不会覆盖同名

  • symbol内置值

迭代器，生成器

  • 迭代器

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

    • ES6创造了一种新的遍历命令for...of循环

    • 工作原理

      • 创建一个指针对象，指向当前数据结构的起始位置
      • 第一次调用的next方法，指针自动指向当前数据结构的第一个成员
      • 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
      • 每调用next方法返回一个包含value和done属性的对象

for...of输出键值；for...in输出键名

keys，values，entries ES6 提供三个新的方法 —— entries()，keys()，values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

  • 生成器

  • next方法传参，是作为上一个yield语句的返回结果

Promise

  • 介绍与使用

then方法有2个参数，第一个为resolve，正常处理结果，第二个为reject，处理异常的错误

  • 封装读取文件

    • //1.引入fs模块
const fs =require('fs');
//2.调用方法读取文件
//3使用promise封装
const p = new Promise(function(resolve,reject){
    fs.readFile("./文件",(err,data)=>{
        //'如果判断失败
        if(err) reject(err);
        //如果成功
        resolve(data); 
    });
});
//4.then方法
p.then(function(value){
   console.log(value.toString());
},function(reason){
   console.log("读取失败！！");
});

resolve则调取then第一个回调函数，失败reject则调取第二个

  • promise封装 ajax 请求

    • //接口地址xxx
//1.创建对象
const xhr =new XMLHttpRequest();
//2.初始化
xhr.open("GET","xxx");
//3.发送
xhr.send();
//4.绑定事件，处理响应结果
xhr.onreadystatechang =function () {
   if(xhr.readyState===4){
      //判断响应状态码200-299
      if(xhr.status>=200&&xhr.status<300){
         //表示成功
         resolve(xhr.response);
      }else{
         //如果失败
         reject(xhr.status);
      }
   }
}
p.then(function(value){
   console.log(value;
},function(reason){
   console.log(reason);
});

  • promise.prototype.then方法

    • //链式调用
p.then(value=>{

}).then(value=>{

}));

实践 阻止回调地狱的现象

集合(Set)、Map介绍与API

  1. set

    2. //声明一个set
let s=new Set();
let s2=new Set(['a','b','c']);
    3. 交集
    4. let result=[...new Set(arr)].filter(item=>new Set(arr2).has(item));
    5. 并集
    6. let union=[...new Set([...arr,...arr2])];
    7. 差集
    8. let diff =[...new Set(arr)].filter(item=>!(new Set(arr2).has(item)));

  2. map

    2. //创建一个空map
let m=new Map();
    3. 添加set；
    4. m.set('name','lzy');
m.set('work',function(){});
    5. 删除delete；
    6. m.delete('name');
    7. 个数size;
    8. console.log(m.size);
    9. 获取get.
    10. console.log(m.get('work'));
    11. 遍历
    12. /*for(let v of m){
  console.log(v);
}*/
for(const v of m){
  console.log(v);

当存在两个类似的结构时，可以思考下，两者的区别，以及两者的应用场景

比如这两者都是去重的作用，set适用于存储不重复的值，

map则更适用于存不重复的对象

  • class

  • class静态成员

    • function Phone(){}
Phone.name='手机'；
Phone.change=function(){}
Phone.prototype.size='5.5inch';
let nokia=new Phone();
console.log(nokia.name);//undefined
console.log(nokia.size);//5.5inch

    • name、change是属于函数属性、方法的，不属于实例对象

  • 继承

    • 父函数
    • 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);//Phone.call(this,brand,price)
    this.color=color;
    this.size=size;
  }
  photo(){
    console.log("拍照");
  }
  playGame(){
    console.log("玩游戏");
  }
}
const xiaomi =new SmartPhone('小米'，799,'黑色'，'4.7inch')；

  • 子类对父类方法重写

    • 在子类里重写父类的方法
    • ×不能用super（）调用父类

数值、对象方法扩展

  1. Number.EPSILON

    1. EPSILON属性值接近于2.2204460492503130808472633361816E-16
    2. 用法
    3. //例如：两个数比大小，如果数都比EPSILON小，那会判断他们一样
function equal(a,b){
  if(Math.abs(a-b)<Number.EPSILON){
    return true;
  }else{
    return false;
  }
}
console.log(0.1+0.2===0.3);//false
console.log(equal(0.1+0.2,0.3));//true

  2. 进制

    1. 0b二进制
    2. 0o八进制
    3. 0d十进制
    4. 0x十六进制

  3. is.Finite()判断是否为无限数

  4. isNaN()判断是否为NAN (false)

  5. parseInt()字符串转化为整数

  6. parseFloat()转化为浮点数

  7. isinteger()判断是否为整数

  8. trunc()将小数部分抹掉

  9. sign()判断正负零

  10. is(,) 两个值是否完全相等 相当于===

  11. assign(before,behind) 相同的，后者会覆盖前者，不同的不会

模块化

  • export的方式

    • export const a = 1 //export后面是一个表达式

export function b(){} //export后面是一个函数声明语句

export default {c: 1} //export default 默认暴露

export {a} from './module.js'

  • import的方式

    • import a from './module.js'//只针对默认暴露

import {a} from './module.js'

import deflt, {a} from './module.js'

import * as a from './module.js'

Babel模块化转化

引入 npm 包 //@。@

ES7新属性

  1. includes 检查数组里是否有该元素/字符串里是否有子字符串
  2. x**n 相当于x的n次方

  • ES8

  1. async

    2. 返回结果不是promise对象，那么都是成功的promise；
    3. 返回的时promise对象，就与返回的promise对象一样成功或失败抛出错误，返回失败的promise对象

  2. await

    2. //创建promise对象
const p=new Promise((resolve,reject)=>{
   //失败
   reject("失败啦！");
})
//await要放在async函数中
async function main(){
  try{
    let result=await p;
    console.log(result);
  }catch(e){
    console.log(e);
  }
}

ES8对象方法扩展

  • getOwnPropertyDescriptors(...) 获取对象属性特性的描述的对象

  • ↓可设置获取对象
const obj =Object.create(null,{
  name:{
    //设置值
    value:'尚硅谷',
    //属性特性
    writable:true,//可写性
    configurable:true,
    enumerable:true
  }
});
avatar
文章
阅读
粉丝