ES6基础

let&const

let 声明的变量只在 let 命令所在的代码块内有效。 const 声明一个只读的常量，一旦声明，常量的值就不能改变。

let a = 10;
const b = 1;

解构

解构赋值是对赋值运算符的扩展。 他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

数组解构

//--- 数组解构
let [x, y] = [1, 2]
console.log("x:", x, "y:", y)

let [, , c] = [10, 20, 30]
console.log("c:", c)

//扩展运算符
let [A, ...B] = [1, 2, 3, 4, 5, 6]
console.log("A:", A, "B:", B)

let [x2, y2 = 200] = [100] //默认值
console.log("x2:", x2, "y2:", y2)

//两数交换
let x3 = 10
let y3 = 20; //不加分号会报错
[x3, y3] = [y3, x3]
console.log("x3:", x3, "y3:", y3)

对象解构

let person = {
    name: 'wzy',
    gender: 'boy',
    web: 'test.com'
}

let { name } = person
console.log("name:", name)

//重命名
let { name: userName, gender, web } = person
console.log("userName:", userName, "gender:", gender, "web:", web)

//默认值
let { address = "安徽" } = person
console.log("address:", address)

数组

基础操作

//向数组末尾添加一个或多个元素, 并返回修改后数组的长度
let arrLength = arr.push(12, 13)
//向数组开头添加一个或多个元素, 并返回修改后数组的长度
arrLength = arr.unshift(8, 9)
//删除数组中第一个元素, 并返回被删除元素
let delElement = arr.shift()
//删除数组最后一个元素, 并返回被删除元素
delElement = arr.pop()
//删除元素, 并返回包含被删除元素的数组 splice(要删除元素的索引位置, 要删除的元素数量)
//let delArr = arr.splice(2, 1) // 删除第3个元素 [数组的索引是从 0 开始]
let delArr = arr.splice(2, 2) // 删除第3和第4个元素

复制

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
//上面的两种写法，a2都是a1的克隆。

合并

// ES6 的合并数组 (浅拷贝)
[...arr1, ...arr2, ...arr3]

遍历

//使用for...of循环遍历数组
let arr6 = ["邓瑞", "dengruicode.com", 100] //数组可以包含不同的数据类型
for (let item of arr6) {
    console.log("for...of", item)
}

//使用forEach方法来遍历数组
arr6.forEach((value,index) => {
    console.log("forEach", value,"index", index)
})

Map与Set

Map

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

var myMap = new Map();
var keyString = "a string"; 
 
myMap.set(keyString, "和键'a string'关联的值");
 
myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get("a string");   // "和键'a string'关联的值"
                         // 因为 keyString === 'a string'

Map 的迭代

for...of

let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
/* 这个 entries 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。 */
 
// 将会显示两个log。 一个是 "0" 另一个是 "1"
for (var key of myMap.keys()) {
  console.log(key);
}
/* 这个 keys 方法返回一个新的 Iterator 对象， 它按插入顺序包含了 Map 对象中每个元素的键。 */
 
// 将会显示两个log。 一个是 "zero" 另一个是 "one"
for (var value of myMap.values()) {
  console.log(value);
}
/* 这个 values 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的值。 */

forEach

let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");

// 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)

Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

let mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

字符串

• includes()：返回布尔值，判断是否找到参数字符串。
• startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

//字符串扩展
let str="hello.vue";
console.log(str.startsWith("hello"))//true
console.log(str.endsWith(".vue"))//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"))//true

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

函数

默认参数

//默认值
function getPage(page = 1) {
    return page
}

可变长参数

// // ES6:可变长度参数
function add(...a) {
    console.info(a);
}
add(1, 2, 3);

参数解构

let nums={
    a:1,
    b:2
}

function add({a,b}){
    console.info(a+b);
}

add(nums);

箭头函数

let add2 = (a, b) => {
    let c = a + b
    console.info(c)
};

//隐式返回 [在函数体内只有一个表达式的情况下, 可以省略花括号 {} 和 return 关键字]
let plus2 = (a, b) => a + b

对象

let person = {
    name: 'wzy',
    gender: 'boy',
    web: 'test.com'
}

遍历

//使用for...in循环遍历对象 
//for...of 用于遍历可迭代对象[如数组、Set、Map、字符串等]
//for...in 用于遍历对象的可枚举属性
for (let key in person) {
    console.log("for...in", key, person[key])
}

//使用forEach方法遍历对象的属性和值
Object.entries(person).forEach(([key, value]) => {
    console.log("forEach", key, value)
})

类class

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。
静态属性：class 本身的属性，即直接定义在类内部的属性（ Class.propname ），不需要实例化。 ES6 中规定，Class 内部只有静态方法，没有静态属性。

类声明

class Example {
    constructor(a) {
        this.a = a;
    }
}

promise

Promise 表示承诺在未来的某个时刻可能会完成并返回结果。

Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

let promise = new Promise((resolve, reject) => {
    //resolve("邮件发送成功")
    reject("邮件发送失败")
}).then(result => {
    console.log("result:", result)
}).catch(error => {
    console.log("error:", error)
}).finally(() => {
    console.log("异步执行结束")
})

async&await

async/await 使用同步的方式编写异步代码, 避免回调地狱 优势 在处理多个异步操作的情况下, 可以使代码更简洁易读

const getData = async () => {
    try {
    //get请求
    const response = await axios.get('http://127.0.0.1/get')
    console.log("async.get.data:", response.data)
    if (response.data.data.web === "dengruicode.com") {

        //get请求2
        const response2 = await axios.get('http://127.0.0.1/article/get/id/1')
        console.log("async.get2.data:", response2.data)
        if (response2.data.data.name === "邓瑞") {

        //get请求3
        const response3 = await axios.get('http://127.0.0.1/article/get/search/title/入门')
        console.log("async.get3.data:", response3.data)
        }
    }

    } catch (error) {
    console.log("async.get.error:", error)
    } finally {
    console.log("async.get.finally")
    }
}

getData()

模块化开发

在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。 模块功能主要由两个命令构成: ‘export’ 和import’。

• export 命令用于规定模块的对外接口，如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

//将一个对象作为整体导出, 导出的对象包含 title、web、getWeb 三个属性
export default { title, web, getWeb }
export { title, web, getWeb } //将多个变量或函数分别导出

• import 命令导入模块

//从 index.js 文件中导入 title、web、getWeb 变量/函数
import { title as webTitle, web, getWeb } from './index.js'
import * as obj from "./index.js"