前端编程艺术（4）---JavaScript进阶(vue前置知识)

1.变量和常量

2.模版字符串

3.对象

4.解构赋值

1.数组的解构

2.对象的解构

5.箭头函数

6.数组和对象的方法

7.扩展运算符

8.Web存储

9.Promise

10.Async+Await

11.模块化

1.变量和常量

JavaScript 中的变量和常量是用于存储数据的标识符。变量可以被重新赋值，而常量的值一旦被设置就不能被更改。

变量用var或let关键字声明，let是块级作用域在{}之内可见，之外不可见：

javascript">function test() {let x = 5;console.log(x); // 输出 5
}console.log(x); // 报错，x is not defined

使用var声明的变量可以在声明之前使用，类型是undefined，而let声明的变量不可以：

javascript">console.log(x); // 报错，x is not defined
let x = 5;

常量用const声明，一旦被赋值，值不会再改变：

javascript">const PI = 3.14159;

但const声明数组和对象时，可以进行对数组和对象进行修改：

javascript"> const arr=[1,2,3];arr.push(4);
console.log(arr);arr.shift()
console.log(arr)const obj={name:'vue3',age:9
}
obj.birth=2015;console.log(obj);
obj.age=10;

2.模版字符串

模版字符串用反引号``表示：

javascript">let name=`Jack`;
let msg=`Hello world`;

其中的字符串可以随意换行：

javascript">let htmlStr=`<div class="hot-goods-box"><h1>热门商品</h1><p>卖爆了卖爆了卖爆了</p>
</div>`

它还可以在字符串中嵌入表达式${内容}，可以替换用+拼接字符串：

javascript">let name='Bit';
let age=9;
let str=`My name is ${name},I am ${age} years old,I am ${age>=18?'已成年':'未成年'}`;
console.log(str);

3.对象

对象：一个个的个体，具体的。对象=属性+方法，一堆属性和方法的集合。

取值：点/中括号。

简写：当对象的属性名和属性值名字一样的时候，可以只写一个，通常会配合变量使用。

javascript">const obj={name:'vue3',age:9
}
console.log(obj.name);
console.log(obj.age);console.log(obj['name'])     
console.log(obj['age']) let x='name';
let y='age';
console.log(obj[x])
console.log(obj[y])let min=1;
let max=99;const obj1={min:min,max:max
}
console.log(obj1)

4.解构赋值

1.数组的解构

JavaScript中，数组解构（Array Destructuring）是一种使用简洁语法同时将数组中的多个值赋给多个变量的方法。

javascript">const arr=[11,22,33];
// let [a,b,c]=arr;
// console.log(a,b,c);let [,b,c]=arr;
console.log(b,c);let [a,...rest]=arr;
console.log(a,rest);

解构语法使用 [ ] 包裹要解构的变量，并通过逗号分隔。

注意，解构赋值是按顺序赋值的。

2.对象的解构

在JavaScript中，对象解构（Object Destructuring）是一种使用简洁语法同时将对象中的多个属性赋给多个变量的方法。

javascript">const obj={name:'上海第二工业大学',age:9,address:'上海市浦东新区'
}// let name=obj.name;
// let age=obj.age;
// let adress=obj.address;let {name:name,age:age,address:address}={name:'上海第二工业大学',age:9,address:'上海市浦东新区'
}
//let {name,age,address}=obj,简写版;
console.log(name,age,adress);

解构语法使用 { } 包裹要解构的属性名，并通过逗号分隔。

注意，解构赋值是根据属性名进行匹配的，所以 name 会得到对象 obj 中的 name 属性的值，age 得到 age 属性的值，以此类推。

5.箭头函数

箭头函数（Arrow Function）是ECMAScript 6（ES6）中引入的一种更简洁的函数声明方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function fn(){}const fn=function(){}const result=fn()const fn=()=>{}const add=(x,y)=>{return x+y;}const result1=add(1,1);console.log(result1);const log=arg=>{//参数只有一个可以省略小括号console.log(log);}log(666);const add1=(x,y)=>x+y;//函数体只有一个语句，此时自带return功能const state=()=>({//返回对象时，为了简写，要给对象加一对小括号token:'xxx',userInfo:{name:'admin',id:1}})setTime(function(){//可用于回调函数传参console.log(666);},2000)</script>
</body>
</html>

6.数组和对象的方法

数组是JavaScript中最常用的数据结构之一，提供了许多用于操作和处理数组的方法。下面是一些常用的数组方法：

数组的常用方法有如下几种：

添加元素：push()、unshift()

javascript">const arr = [1, 2, 3];arr.push(4); // 添加元素到数组末尾
console.log(arr); // [1, 2, 3, 4]arr.unshift(0); // 添加元素到数组开头
console.log(arr); // [0, 1, 2, 3, 4]

删除元素：pop()、shift()

javascript">const arr = [0, 1, 2, 3, 4];arr.pop(); // 删除数组末尾的元素
console.log(arr); // [0, 1, 2, 3]arr.shift(); // 删除数组开头的元素
console.log(arr); // [1, 2, 3]

包含元素：includes()

javascript">const arr = [1, 2, 3];console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

遍历元素：forEach()

javascript">const arr = [1, 2, 3];arr.forEach(item => {console.log(item);
});

过滤元素：filter()

javascript">const arr = [1, 2, 3, 4, 5];const filteredArr = arr.filter(item => item % 2 === 0);
console.log(filteredArr); // [2, 4]

映射元素：map()

javascript">const arr = [1, 2, 3];const mappedArr = arr.map(item => item * 2);
console.log(mappedArr); // [2, 4, 6]

检测每一个元素：every()

javascript">const arr = [1, 2, 3];const isAllPositive = arr.every(item => item > 0);
console.log(isAllPositive); // true

汇总元素：reduce()

javascript">const arr = [1, 2, 3];const sum = arr.reduce((accumulator, item) => accumulator + item, 0);
console.log(sum); // 6

Object.keys() 是 JavaScript 中的一个内置方法，用于获取一个对象的所有可枚举属性的键名，并返回一个由这些键名组成的数组。

以下是 Object.keys() 方法的使用示例：

javascript">const obj = {name: 'John',age: 30,gender: 'male'
};const keys = Object.keys(obj);console.log(keys); // ['name', 'age', 'gender']

在上面的示例中，我们声明了一个对象 obj，包含了三个属性。然后，通过调用 Object.keys(obj) 方法，我们获取了 obj 对象的所有键名，并将它们存储在 keys 数组中。

需要注意的是，Object.keys() 方法只返回对象的可枚举属性的键名，不包括原型链上的属性或不可枚举的属性。如果需要获取所有属性，包括原型链上的属性，可以使用 for...in 循环。

javascript">for (let key in obj) {console.log(key); // 输出所有键名：name, age, gender
}

7.扩展运算符

扩展运算符（Spread Operator）是ES6引入的一种语法，它可以将一个可迭代对象（如数组、字符串）展开为多个元素，用于函数调用、数组字面量、对象字面量等场景。

函数调用中的扩展运算符：

javascript">function sum(a, b, c) {return a + b + c;
}const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

数组字面量中的扩展运算符：

javascript">const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

对象字面量中的扩展运算符：

javascript">const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { x: 1, y: 2, z: 3 }

字符串中的扩展运算符：

javascript">const str = 'hello';const chars = [...str];
console.log(chars); // ['h', 'e', 'l', 'l', 'o']

扩展运算符还可以用于数组或对象的浅拷贝，如：

javascript">const arr = [1, 2, 3];
const copyArr = [...arr];const obj = { x: 1, y: 2 };
const copyObj = { ...obj };

8.Web存储

Web存储是一种用于在浏览器中存储数据的机制，它允许开发人员在客户端存储和检索数据，以便在不同页面和会话之间进行持久化。

Web存储主要有以下两种方式：

Local Storage（本地存储）：它提供了一种在浏览器中存储数据的简单方式，数据将一直保存在用户的本地存储空间中，直到被显式删除。使用Local Storage，可以存储大容量的数据，并且数据在浏览器关闭后仍然可用。

javascript">// 设置数据
localStorage.setItem('key', 'value');// 获取数据
const value = localStorage.getItem('key');// 删除数据
localStorage.removeItem('key');

2.Session Storage（会话存储）：它与Local Storage类似，但数据仅在当前会话中有效。当用户关闭浏览器标签页或会话结束时，会话存储中的数据将被清除。

javascript">// 设置数据
sessionStorage.setItem('key', 'value');// 获取数据
const value = sessionStorage.getItem('key');// 删除数据
sessionStorage.removeItem('key');

3.Cookies（Cookie）：它是一种通过在浏览器中存储小型文本文件的方式，来跟踪用户和记录信息的机制。Cookies有一些限制，如存储容量较小（4KB）且需要在每个请求中传递给服务器。

javascript">// 设置Cookie
document.cookie = 'name=value';// 获取Cookie
const cookieValue = document.cookie;

9.Promise

Promise是一种用于处理异步操作的JavaScript对象。它是一种用于管理异步代码的设计模式，使得处理异步操作更加简洁和可读性更高。

Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。初始状态是pending，当异步操作完成时，Promise会转为fulfilled状态，表示操作成功，或者转为rejected状态，表示操作失败。

Promise主要有以下方法：

then()：用于处理Promise的成功状态，接受两个参数，分别是成功回调函数和可选的失败回调函数。
```
javascript">promise.then(successCallback, errorCallback);
```
catch()：用于处理Promise的失败状态，接受一个参数，即失败回调函数。
```
javascript">promise.catch(errorCallback);
```
finally()：在Promise无论成功或失败都会执行的回调函数。
```
javascript">promise.finally(callback);
```
Promise.resolve()：将一个值或者另一个Promise对象转为一个已解析（fulfilled）状态的Promise对象。
```
javascript">const resolvedPromise = Promise.resolve(value);
```
Promise.reject()：将一个错误原因转为一个拒绝（rejected）状态的Promise对象。
```
javascript">const rejectedPromise = Promise.reject(reason);
```
Promise.all()：接受一个Promise对象的数组，并返回一个新的Promise对象，该新Promise对象在所有的输入Promise对象都成功解析后才会成功解析。
```
javascript">const allPromises = Promise.all([promise1, promise2, promise3]);
```
Promise.race()：接受一个Promise对象的数组，并返回一个新的Promise对象，该新Promise对象在任何一个输入Promise对象成功解析或拒绝后就会解析或拒绝。
```
javascript">const racePromise = Promise.race([promise1, promise2, promise3]);
```

下面是一个简单的示例，演示如何使用Promise处理异步操作：

javascript">const fetchData = () => {return new Promise((resolve, reject) => {setTimeout(() => {const data = 'Hello, World!';resolve(data);}, 2000);});
};fetchData().then(response => {console.log('Success:', response);}).catch(error => {console.log('Error:', error);});

在这个例子中，fetchData()函数返回一个Promise对象，通过定时器模拟异步操作。然后通过then()方法处理成功状态，并通过catch()方法处理失败状态。

10.Async+Await

Async/Await是一种用于简化和改进异步操作处理的JavaScript语法。它建立在Promise之上，提供了一种更简洁、更易读的编写异步代码的方式。

通过在函数前面添加async关键字，可以将该函数声明为异步函数。异步函数内部可以使用await关键字来等待一个Promise对象的解析结果，并将其赋值给一个变量。await关键字使得异步操作的代码看起来像是同步的，提高了代码的可读性。

下面是一个使用Async/Await的简单示例：

javascript">const fetchData = () => {return new Promise((resolve, reject) => {setTimeout(() => {const data = 'Hello, World!';resolve(data);}, 2000);});
};const fetchDataAsync = async () => {try {const response = await fetchData();console.log('Success:', response);} catch (error) {console.log('Error:', error);}
};fetchDataAsync();

在上面的示例中，fetchDataAsync函数是一个异步函数。它通过await关键字等待fetchData函数返回的Promise对象的解析结果。如果Promise对象被成功解析，结果将被赋值给response变量，然后打印出成功消息。如果Promise对象被拒绝，将会捕获错误并打印出错误消息。

Async/Await使得异步代码可读性更高，且可以使用try/catch语句来处理错误，使得错误处理更加简洁。

需要注意的是，Async/Await只能用于处理返回Promise对象的函数。

11.模块化

模块化是一种组织和管理代码的方法，它将代码分割成不同的模块，每个模块负责特定的功能或任务。模块化的主要目的是提高代码的可维护性、可重用性和可扩展性。

在JavaScript中，有多种实现模块化的方式。下面介绍常用的几种模块化方法：

原始的模块化方法：通过使用全局对象（如window对象）来定义和访问模块，将模块的代码放在不同的script标签中。这种方法简单易懂，但容易导致全局命名冲突，不适合大型项目。
命名空间模式：使用对象来组织模块，并使用对象的属性来表示模块的方法和属性。这种方式可以避免全局命名冲突，但需要手动管理模块之间的依赖关系。
AMD（Asynchronous Module Definition）：异步模块定义是一种异步加载模块的规范，主要用于浏览器环境。通过使用require函数和define函数来定义和加载模块。Require.js是一个实现AMD规范的流行库。
CommonJS：CommonJS是一种用于服务器端的模块化规范，在Node.js中得到广泛应用。使用require函数来加载模块，使用module.exports来导出模块。
ES6模块化：ES6模块化是在ECMAScript 6标准中引入的官方模块化规范。使用import关键字来导入模块，使用export关键字来导出模块。ES6模块化在语法上更加简洁和直观，并且可以静态分析，有利于编译器进行优化。

模块化的好处包括：

代码的可维护性提高，模块之间相互独立，修改一个模块不会影响其他模块；
代码的可重用性提高，可以在不同的项目中复用模块；
开发效率提高，可以并行开发不同的模块；
可测试性提高，可以对各个模块进行单元测试。

总的来说，模块化是一种重要的开发方式，它帮助我们组织和管理代码，提高代码质量和开发效率。不同的项目和环境可能采用不同的模块化方法，根据具体情况选择适合的模块化方式。

导入和导出是模块化中常用的概念，用于在不同模块之间共享和使用代码。

在JavaScript中，我们可以使用不同的语法来进行导入和导出。

导入（Import）：

ES6模块化：使用import关键字来导入模块。例如，import { functionName } from './module';。
CommonJS：使用require函数来导入模块。例如，const functionName = require('./module').functionName;。

导出（Export）：

ES6模块化：使用export关键字来导出模块。例如，export function functionName() { }。
CommonJS：使用module.exports来导出模块。例如，module.exports.functionName = functionName;。

在ES6模块化中，还可以使用export default来导出默认值。例如，export default functionName;。在导入时，可以使用import moduleName from './module';来导入默认值。

需要注意的是，导入和导出的具体语法和规则在不同的模块化规范中有所差异。而且，不同的环境（如浏览器、Node.js等）对于模块化的支持也有所不同。