【vue】前置知识学习

代码获取

知识小结

1. 常量和变量

let 定义变量
const 定义常量

2. 模板字符串

普通字符串是使用 “” 和 ‘’ 定义的

模板字符串是使用 `` 定义的

模板字符串的好处

可以换行
可以插入变量
可以插入表达式

3. 对象

取值

.点取值

[]方括号取值

// 对象定义
const obj = {
    name: '张三',
    age: 18,
};

// 对象取值
console.log(obj.name); // 点语法
console.log(obj['name']); // 方括号语法
let key = 'name'
console.log(obj[key]); // 方括号语法, 此时只能使用方括号语法

简写

// 简写
let name = '张三';
let age = 18;
const obj2 = {
    name,
    age,
};
console.log(obj2);

// 对象方法
const obj3 = {
    name: '张三',
    age: 18,
    // 不简写
    fn: function say() {
        console.log('hello');
    },
    // 简写
    say() {
        console.log('hello');
    }
};

4. 解构赋值

数组解构

const arr = [1, 2, 3, 4, 5];
// 数组取值
let a = arr[0];
let b = arr[1];
let c = arr[2];
// 解构赋值
let [d, e, f] = arr;
// 部分结构
let [g, , h] = arr; // 1, 3
let [,i,j] = arr;  // 2, 3
console.log(i,j);
let [k, ...l] = arr; // 1, [2, 3, 4, 5]
console.log(k,l);

对象解构

// 对象解构
const obj = {
    name: '张三',
    age: 18,
};

let {name, age} = obj;

5. 箭头函数

 // (参数...) => {函数体}
() => {}

6. 数组中的重要方法

添加

// 1. 添加
// push() 末尾添加
// unshift() 头部添加
// splice() 指定位置添加
arr.push(6);
console.log("push() 后的数组: ", arr);

arr.unshift(0);
console.log("unshift() 后的数组: ", arr); 
arr.splice(3, 0, 3.5); // 在 index 为 3 的位置, 先删除 0 个元素, 再添加 3.5
console.log("splice() 后的数组: ", arr);

删除

// 2. 删除
// pop() 末尾删除
// shift() 头部删除
// splice() 指定位置删除 
arr.pop();
console.log("pop() 后的数组: ", arr);
arr.shift();
console.log("shift() 后的数组: ", arr);
arr.splice(3, 1); // 在 index 为 3 的位置, 删除 1 个元素
console.log("splice() 后的数组: ", arr);

包含

// includes() 判断数组中是否包含某个元素
console.log(arr.includes(3.5)); // true
console.log(arr.includes(3.6)); // false

遍历

// 4. 遍历
// forEach() 遍历数组
// 有三个参数: item, index, arr, Item 是当前遍历的元素, index 是当前遍历的索引, arr 是当前遍历的数组
arr.forEach((item, index) => {
    console.log(`\nindex: ${index}, item: ${item}`);
});

过滤

// 5. 过滤
// filter() 过滤数组
// 有三个参数: item, index, arr, Item 是当前遍历的元素, index 是当前遍历的索引, arr 是当前遍历的数组
let newArr = arr.filter((item, index) => {
    return item > 3;
});
console.log("filter() 后的数组: ", newArr);

映射

// 6. 映射
// map() 映射数组, 返回一个新数组
// 有三个参数: item, index, arr, Item 是当前遍历的元素, index 是当前遍历的索引, arr 是当前遍历的数组
let mapArr = arr.map((item, index) => {
    return item * 2;
});
console.log("map() 后的数组: ", mapArr);
let objArr = arr.map((item,index) => [{index, item}]);
console.log("map() 后的数组对象: ", objArr);

检测

// 7. 检测
// every() 检测数组中的每个元素是否都符合条件
// 例如: 检测元素是否都是奇数
let isOdd = arr.every((item, index) => {
    /* 
      1、如果返回true, 说明当前元素满⾜条件, 则继续检测下⼀次;
        若都满⾜条件, 则最终返回true
      2、如果返回false, 说明当前元素不满⾜条件;
         ⽴即停⽌检测, 最终返回false 
    */
    return item % 2 === 1;
});

汇总

// 8. 汇总
// reduce() 汇总数组, 使用场景: 求和, 求积, 求最大值, 求最小值
// 有四个参数: pre, item, index, arr, pre 是上一次的返回值, item 是当前遍历的元素, index 是当前遍历的索引, arr 是当前遍历的数组
let sum = arr.reduce((pre, item, index) => {
    return pre + item;
}, 0);
console.log("reduce() 求知: ", sum);

// 使用js中的最小值定义
let min = arr.reduce((pre, item, index) => {
    return pre < item ? pre : item;
}, Number.MAX_VALUE);
let max = arr.reduce((pre, item, index) => {
    return pre > item ? pre : item;
}, Number.MIN_VALUE);
console.log("reduce() 求最小值: ", min);
console.log("reduce() 求最大值: ", max);

7. 对象中的重要方法

Object.keys() // 获得对象中的所有 key 值, 用于后续许多的数组复杂操作

8. 扩展运算符

运算符: ...

拷贝问题

const arr1 = [11, 22, 33]
// 复制数组
const arr2 = arr1 // 引用赋值, 浅拷贝
arr2.push(44)
console.log(arr1)// 受影响了
// 深拷贝
const arr3 = [...arr1] // 展开运算符, 深拷贝
// 复制对象
const obj1 = {name: '张三', age: 18}
const obj2 = obj1 // 引用赋值, 浅拷贝
obj2.name = '李四'
console.log(obj1) // 受影响了
// 深拷贝
const obj3 = {...obj1} // 展开运算符, 深拷贝
console.log(obj3);

合并数组和对象

// 合并数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]
console.log(arr3)
// 合并对象
const obj1 = {name: '张三'}
const obj2 = {age: 18}
const obj3 = {...obj1, ...obj2}
console.log(obj3)

9. 序列化和反序列化

JSON -> 字符串: stringify

字符串 -> JSON: parse

const JSONobj = {
    "name": "张三",
    "age": 18,
}
console.log(JSONobj);

// JSON对象转字符串 stringify
const JSONstr = JSON.stringify(JSONobj);
console.log(JSONstr);

// 字符串转JSON对象 parse
const JSONobj2 = JSON.parse(JSONstr)
console.log(JSONobj2);

10. Web存储

sessionStorage: 当浏览器关闭时, 数据会被清除
localStorage: 当浏览器关闭时, 数据不会被清除, 只有手动清除才会被清除

存: setItem(key,value)

取: value getItem(key)

删除: removeItem(key)

// 存储数据
sessionStorage.setItem('name', '张三');
localStorage.setItem('age', 18);

// 获取数据
console.log(sessionStorage.getItem('name'));
console.log(localStorage.getItem('age'));

// 删除数据
sessionStorage.removeItem('name');
localStorage.removeItem('age');

**注意: **存储对象的时候需要转序列化, 取的时候反序列化

// 存储对象的时候, 需要先转换为字符串
const obj = {
    name: '张三',
    age: 18,
};
const JSONstr = JSON.stringify(obj);
localStorage.setItem('obj', JSONstr);

// 获取对象的时候, 需要先转换为对象
const JSONobj = localStorage.getItem('obj');
const obj2 = JSON.parse(JSONobj);
console.log(obj2);

// 清空所有数据
sessionStorage.clear();
localStorage.clear();

11. Promise + Aysnc-Await

为什么需要 Promise

为了消除回调地狱

 // 需求: 延迟2秒之后输出1, 完了之后延迟1秒输出2, 完了之后延迟1秒输出3
 setTimeout(() => {
 console.log(1)
 setTimeout(() => {
 console.log(2)
 setTimeout(() => {
 console.log(3)
 }, 1000)
 }, 1000)
 }, 2000)

 // 上述代码存在的问题：回调套回调, 代码的可读性差

Promise 基本使用

// 2. Promise的基本使用
// 2.1 创建一个 Promise 对象
const promise = new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
        resolve('成功');
        // reject('失败');
    }, 2000);
});
// 2.2 调用 resolve() 或 reject() 方法
promise.then((value) => {
    console.log(value);
}).catch((error) => {
    console.log(error);
});

使用 Promise 消除回调地狱

// 3. 使用 promise 消除回调地狱
// 3.1 封装延迟函数
function delay(time,n) { // time 是延迟时间, n 是返回的值
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(n);
        }, time);
    });
}
// 3.2 链式调用消除回调地狱
delay(1000, 1).then((n) => {
    console.log(n);
    return delay(1000, 2);
}).then((n) => {
    console.log(n);
    return delay(1000, 3);
}).then((n) => {
    console.log(n);
});

Async+Await异步终极解决⽅案

Async 声明方法

Await 用于暂停异步函数的执行, 等待 Promise 对象的状态发生改变

// 5. async 和 await 的基本使用
// 5.1 async 函数返回一个 Promise 对象
function delay(time, n) { // time 是延迟时间, n 是返回的值
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(n);
        }, time);
    });
}

async function main() {
    // 1、在Promise实例前添加 await 关键字, 那么await的返回值就是当前 Promise 的 resolve 参数
    // 2、await所在的函数必须被 async 修饰
    // 3、async 函数内, 当前 await 执⾏结束了,代码才会继续往后执⾏(同步的⽅式执⾏）
    console.log(1);
    let n1 = await delay(1000, 1); // 那么await的返回值就是当前 Promise 的 resolve 参数
    console.log(n1);
    let n2 = await delay(1000, 2);
    console.log(n2);
    let n3 = await delay(1000, 3);
    console.log(n3);
}
main();

12. 模块化

1. 概述

模块化是指将⼀个复杂程序划分为⼀系列独⽴、可互操作的模块的过程。每个模块负责特定的功能或任务，并通过定义好的接⼝与其他模块进⾏通信。简单来说, 就是将代码进⾏分解、按功能进⾏管理。模块化的⽬的是提⾼代码的可维护性、可重⽤性、可测试性和可扩展性。开发者能够更容易地处理⼤型JavaScript项⽬。

2. ⽬录结构准备

新建 12-es-module ⽬录
命令⾏进⼊ 12-es-module ⽬录
执⾏ npm init , 初始化得到 package.json ⽂件
给 package.json 添加 “type”: “module”
根⽬录下新建 src/index.js 、作为代码的⼊⼝⽂件
src ⽬录下新建 utils ⽬录

3. 默认导出与导⼊

// 默认导出 
// 定义并默认导出求最⼩值函数
export default function min(a,b) {
    return a < b ? a : b
}
// 注意: 默认导出 export default 在⼀个模块中最多出现1次



// 在 index.js 默认导入
// 默认导入
import min from './utils/min.js'

console.log(min(1,2)) ;

4. 按需导出与导入

// 按需导出
export function add(a, b) {
    return a + b
}

export function sub(a, b) {
    return a - b
}


// 在 index.js 按需导入
// 按需导入
import {add} from './utils/math.js'
console.log(add(1,2)) ;