ES6

本文件已定稿，最后修改时间 20240723 01:56

一、ES6语法

let和const
1. let：声明变量
  1. let声明的变量只能在代码块内有效
  2. 不可以重复声明同一个变量
  3. 不存在变量提升
  【面试题】let 和 var 的区别
  1. var声明变量可能不具有作用域，let声明变量有作用域
  2. var可以声明同一个变量（覆盖），let不可以
  3. var有变量提升，let没有
2. const：常量
  1. const声明的变量只能在代码块内有效
  2. 不可以重复声明同一个变量
  3. 不存在变量提升
  【面试题】let 和 var 的区别
  1. var声明变量可能不具有作用域，const声明变量有作用域
  2. var可以声明同一个变量（覆盖），const不可以
  3. var有变量提升，const没有

数组和对象解构赋值

数组的解构赋值

let a = 10;
let b = 20;
let c = 30;
// 等同于
let [a,b,c] = [10,20,30];
//
let [num1,num2,num3] = [20,30];
let [str1,str2,str3=100] = [20,30];

如果没有匹配则是underfined，右侧的优先级比默认值大

对象的解构赋值
let {a,b} = {a:123,b:456}
key要和变量名一样

字符串和函数参数解构赋值

字符串的解构赋值
let [a,b,c] = 'hello';
// h e l

函数参数的解构赋值

function fun([a,b]){
    return a+b;
}
fun([10,20]);

字符串扩展
1. include()：和indexOf区别不大
  
  includes() 返回值是布尔类型 true|false
  
  indexOf() -1 || 下标
2. startsWith()：
  
  返回布尔值
  
  表示参数字符串是否在原字符串的头部
3. endsWith():
  
  返回布尔值
  
  表示参数字符串是否在原字符串的尾部
4. repeat
  
  重复几次：str.repeat(3)
5. padStart()、padEnd()
  
  补全：str.padStart(2,'0')：返回的字符串一共两位，不够在前面补0
6. trimStart()、trimEnd()
  
  trim()：去除前后空格
  
  trimStart()：去除前空格
  
  trimEnd()：去除后空格
7. replaceAll()：
  str.replace(/a/g,'?')
  // 等价于
  str.replace('a','?')
箭头函数
let fun = ([num1,num2])=>{
return num1+num2;
}
// 等价于
let fun = function(){
// 函数体
}
如果是一个参数：
let fun = v=>{
// 函数体
}
如果不加{}，默认有return
let fun = v=>v;
箭头函数和普通函数的区别：
1. 箭头函数不能new
2. 箭头函数内部没有arguments对象
3. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，一般来说，箭头函数的this都基本指向于window对象

函数的扩展

函数参数的默认值

let fun = (参数={})=>{}
let fun = function(参数={}){}

…操作符

如果不是一个组合，可以合并

如果是一个组合，可以拆分

// 合并数组、
let arr1 = ['a','b','c'];
let arr2 = [1,2,3,];
arr1.concat(arr2);
// 等价于
[...arr1,...arr2]

数组的扩展
1. Array.from()
  
  用于将两类对象转为真正的数组
2. Array.of()
  
  用于将一组值，转换为数组
3. find() 和 findIndex()
  
  find() 查找（找到第一个），找到返回该成员，没有找到返回underfined
  
  findIndex() 查找（找到第一个），找到返回该下标，没有找到返回-1
4. includes() 类似于indexOf
  
  找到返回true，没有找到返回false
5. flat()：扁平化数组

对象的扩展

简单写法

let obj = {
    run(){
        
    }
}

let str = 'foo';
let obj = {
    str   // str:str
}

for…of语法可以遍历对象|数组

let obj = {
    a:1,
    b:2,
    c:3
}
let arr = ['a','b','c','d'];
for(let k of Object.keys(obj)){
    console.log(k);
}
for(let v of Object.values(obj)){
    console.log(v);
}
for(let [key,val] of Object.entries(onj)){
    console.log(key,val);
}

对象的新增方法
1. Object.is()：判断是否相等
  
  主要是解决ES5之前的：==、===的问题
2. Object.assign()【重要】
  
  合并对象
  let obj1 = {
  a:1
  }
  let obj2 = {
  b:2
  }
  Object.assign(obj1,obj2);
  console.log(obj1,obj2); // 将obj2的值赋值给obj1
  注：
  - Object.assign() 是浅拷贝，不是深拷贝

Class

class基本格式

function Person(options){
    this.name = options.name;
}
Person.prototype.run = function(){
    return 'run';
}
var obj = new Person({
    name:'lisi'
});

class Person{
    constructor(name){
        this.name = name;
    }
    run(){
        return 'run'
    }
    foo(){
        return 'foo'
    }
}
let obj = new Person('lisi');
console.log(obj.name, obj.run(), obj.foo())

类继承

class 子类 extends 父类 {
    constructor(){
        super();
        this.属性名 = 值
    }
    方法1(){
        
    }
    方法2(){
        
    }
}

Symbol和Set
1. symbol是一个独一无二的
2. symbol是新的原始数据类型
3. new Set()：
  
  没有重复的值，去重
  let set = new Set([1,2,3,4,3,4,3,4,2,1,9]);
  console.log(set);
  【面试题】：有几种去重方式
  1. ES6的new Set()
  2. filter
  3. 判断逻辑的形式
Module的语法
1. 引入：import
  默认会找 .js、.json
  1. 引入文件全部内容
    
    import './script'
  2. 按需引入
    
    import {a, b, c, fun} from './a'
  3. 自定义名称引入
    // 引入
    import xxx from './a'
    // 抛出
    let a = 10;
    let b = 20;
    export default {
    a,b
    }
2. 抛出：export
  1. export let a = 10
  2. let fun = ()={}
    
    export {fun}
  3. let a = 10;
    
    let b = 20;
    
    export {a, b}

Promise

Promise是异步编程的解决方案

功能：写异步的代码，同步的执行出来
好处：让代码更好的维护或者易读

同步：只有前一个任务执行完毕后，才能执行下一个任务

异步：不进入主线程，进入任务队列，只有任务队列通知主线程，某个异步任务可以执行，该任务才会进入主线程

【面试题】Promise有哪几种状态？

pending（进行中）
fulfilled（已成功）
rejected（已失败）

function foo(){
    return new Promise((res,rej)=>{
        res();
    })
}
foo().then(()=>{
    return new Promise((res,rej)=>{
        console.log(111);
        res();
    })
}).then(()=>{
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            console.log(222);
            res();
        })
    })
}).then(()=>{
    console.log(333);
})

async和await

async函数返回的是Promise

如果单独使用await会报错，await需要在async中

function foo(){
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res('hello');
        })
    })
}
async function fun(){
    /*
    console.log(111);
    foo().then(v=>{
        console.log(v);
        return new Promise((res,rej)=>{
            res();
        })
    }).then(()=>{
        console.log(222);
    })
    */
    
    console.log(111);
    let f = await foo();
    console.log(f);
    console.log(222);
}

fetch和mock

fetch

window对象下就有fetch ——-> 返回的是promise对象

fetch(url,{
    metch:'get|post',
    params:{}  // 给后端传递的参数
}).then(data=>{
    // 后端给前端返回的数据
    data.json()   // 把数据转换成对象的形式|格式
})

fetch(url,{
    method:'post'
}).then(async res=>{
    let data = await res.json();
    console.log(data.data);
})

fetch-mock

如果目前没有接口，前端自己模拟数据

下载fetch-mock

npm install fetch-mock -S
引入模块

import fetchMock from 'fetch-mock'
基本格式

fetchMock.mock(url,函数)

import fetchMock from 'fetch-mock';
fetchMock.mock('/list',(url,params)=>{
    // params前端给后端传递的数据
    return {
        a:1
    }
})

import './fetchMock'
fetch('/list',{
    params:{
        userName:'张三',
        userPwd:'123456'
    }
}).then(async res=>{
    let data = await res.json();
    console.log(data.data);
})

二、ES6项目

领导
1. 创建仓库
2. 创建分支
3. 初始化项目、搭建目录结构
开发者
1. 克隆代码到本地
  
  下载仓库中指定分支的代码
  
  git clone -b 分支名称分支地址
2. 配置本地的user.name && user.email
3. 本地切换到远程分支
  
  git checkout -b 分支名称

一、ES6语法

let和const

数组和对象解构赋值

数组的解构赋值

对象的解构赋值

字符串和函数参数解构赋值

字符串扩展

箭头函数

函数的扩展

函数参数的默认值

数组的扩展

对象的扩展

简单写法

for…of语法可以遍历对象|数组

对象的新增方法

Class

Symbol和Set

Module的语法

引入：import

抛出：export

Promise

async和await

fetch和mock

二、ES6项目

领导

开发者