快速入门JS

ES6

解构赋值

// 数组解构
let [a, b, c] = [1, 2, 3];
console.log(a, b, c)

// 对象解构
let {e, f, g:newg} = {e:1,f:2,g:3};
console.log(e, f, g,newg)

// 函数参数的解构
function move({x = 0, y} = {}) {
  return [x, y];
}
console.log(move())
console.log(move({x:1,y:2}))
console.log(move({y:2}))

解构与拓展运算符

let {e, ...z} = {e:1,f:2,g:3};
console.log(e, z)

合并数据

const obj1={a:1,b:2,c:3}
const obj2={a:2,d:4,c:5}
const newobj={...obj1,...obj2}
console.log(newobj)

模块的导入导出

如何在一个文件中使用另一个文件中定义的方法或变量？

导出

文件 util.js：

const data={a:1,b:2}
function fun1(){
	console.log('fun1')
}
// 单独导出
export {
	data,fun1
}
// 默认导出
export default fun1

引入

文件 main.js:

// 单独引入
import {data,fun1} from './util.js'
// 默认引入
import fun1 from './util.js'

// 就可以在这个文件中使用上面引入的方法、数据了
fun1()
console.log(data)

模板字符串

当一个字符串是由多个变量组合而成的，我们可以使用模板字符创进行拼接

const name = 'jack';
const age = '23'
const str=`${name} - ${age}`
console.log(str)

箭头函数

函数的两种定义方法：

1.函数声明

function fun1(){
    console.log('fun1')
}

2.箭头函数

const fun2=()=>{
    cosnole.log('fun2')
}

注意

函数声明的函数具有完整的函数作用域，

• 作为对象的方法调用。函数作用域为调用对象。
• 作为普通函数调用。函数作用域为Windows。

箭头函数声明的作用域来自其上一级作用域（也就是比函数声明作用域高一层）

主要体现在 this 的使用上，下面 fun1 的作用域为对象 obj1，而 fun2 是箭头函数，那么其作用域为对象 obj1 的作用域（这里obj1是在Windows中定义的，那它的作用域就是Windows）。

举个🌰：

function fun1(){
    console.log(this,'fun1')
}
const fun2=()=>{
    console.log(this,'fun2')
}
const a=456
const obj1={
    a:123,
    fun1:fun1,
    fun2:fun2
}
obj1.fun1()
obj1.fun2()

Promise

异步任务

通过 Promise，可以在 js 中实现异步任务

一个基础的 Promise：

通过 Promise 构造器，构造一个 Promise，

其参数是一个回调函数，

这个回调函数中的代码会被立即执行

而这个回调函数中带有两个参数（这两个参数都是函数，是Promise的执行重点）

let promise = new Promise(function(resolve, reject) {
  // executor（生产者代码），promise中的代码会被立即调用
});

• 第一个参数 resolve

  执行 resolve 后表示 promise 执行成功，并返回 resolve 中的参数

  let promise = new Promise(function(resolve, reject) {
    resolve('123')
  });
  

• 第二个参数 reject

  执行 reject 后表示 promise 执行失败并抛出异常。其返回的异常为 reject 中参数

  let promise = new Promise(function(resolve, reject) {
    reject('失败了')
  });
  

如何在 promise 执行成功或失败后进行操作？

.then

在 promise 后跟一个 .then 方法，.then 中包裹的函数会在 promise 执行成功后执行，其参数为 promise 中 resolve 出来的数据

promise.then((value)=>{
 console.log(value)
})

.catch

在 promise 后跟一个 .catch 方法，.catch 中包裹的函数会在 promise 执行失败后执行，其参数为 promise 中 reject 出来的异常

promise.catch((err)=>{
 console.log(err)
})

// 注意，也可以在 .then 后再跟 .catch,当 .then 未生效时会将 promise 的执行结果传递给下一个处理程序,也就是 .catch
promise.then((value)=>{
 	console.log(value)
}).catch((err)=>{
    console.log(err)
})

.finally

在 promise 后跟一个 .finally 方法,.finally 中包裹的函数无论 promise 的处理结果如何最终都会执行

promise.then((value)=>{
 	console.log(value)
}).catch((err)=>{
    console.log(err)
}).finally(()=>{
    console.log('promise已经执行完了')
})

处理多个 Promise

有多个异步进程又该如何处理？

Promise.all

等待所有 Promise **执行成功 **后会执行

Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]).then(alert); // 1,2,3 当上面这些 promise 准备好时：每个 promise 都贡献了数组中的一个元素

Promise.allSettled

Promise.allSettled 与Promise类似，但其会等待所有的 promise 都被 执行，无论结果如何，

即使有 Promise 输出错误，也会获取到其他 Promise 的输出。

::: error

其他还有 .race，.any 方法，但一般用不到

:::

可迭代的异步任务

const request=(value)=>{
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log(value)
            resolve(value)
        },1000)
    })
}

const fun1=()=>{
    request(1)
    console.log(2)
}
const fun2=async ()=>{
    await request(1)
    console.log(2)
}

fun1()
fun2()

async 和 await 必须组合起来使用，且 async 会将声明的函数转化为异步任务（Promise）

JS中的常见问题

浮点数溢出

js 中由于进制转化的精度问题进行数字计算时可能会导致浮点数溢出

0.1 + 0.2 // 0.30000000000000004

解决方法：

使用计算工具进行处理

如 js 的 toFixed() 函数，将数据进行四舍五入

(0.1 + 0.2).toFixed()

JS 中的假值

进行条件判断时有六种值会被评定为假值

undefined、null、NaN、0、""、false

console.log(!undefined,!null,!NaN,!0,!"",!false)

双等与全等

双等

console.log(1 == 2) // false
console.log(1 == 1) // true
console.log(1 == '1') // true
console.log(null == undefined) // true

全等

console.log(1 === 2) // false
console.log(1 === 1) // true
console.log(1 === '1') // false
console.log(null === undefined) // false

双等和全等的最大区别是，双等只匹配值是否相等，而全等则会对类型和值都进行匹配

处理异步编程的异常

Promise:

const request=(value)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject(value)
        },1000)
    })
}
request('err').catch(err=>{
    console.log(err)
})

async/await:

const request=(value)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject(value)
        },1000)
    })
}

try{
 	await request('err')
}catch(err){
	console.log(err)
}

前端常用的调试手段

dubugger 断点和 console.log()

console.log(123)
debugger
console.log(456)

利用浏览器缓存数据

localStorage

持久化的储存，内存大小一般为5MB，在不进行手动删除的情况下是一直存在的。

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
localStorage.getItem("lastname");

储存的数据结构：字符串

其会将基本数据结构转化为字符串进行保存，无法保存函数，对象，数组等复杂结构。

因此，复杂的结构需要使用序列化，转化为 json字符串进行保存。

const obj={a:1,b:2}
// 存储
localStorage.setItem("obj", obj); // 储存对象，错误
// 取回
localStorage.getItem("obj");

储存复杂结构

储存时：使用 JSON.stringify() 转成 JSON 字符串

取回时：使用 JSON.parse 将 JSON 字符串解析回来

const obj={a:1,b:2}
// 存储
localStorage.setItem("obj", JSON.stringify(obj)); // 储存对象，错误
// 取回
JSON.parse(localStorage.getItem("obj"));

sessionStorage

和 localStorage 用法一致，区别在于其为当前浏览器临时缓存，当你关闭浏览器时，sessionStorage 储存的数据会被清空

// 存储
sessionStorage.setItem("lastname", "Gates");
// 取回
sessionStorage.getItem("lastname");

JS 中的常用的循环

for循环（遍历对象非常好用）

for...in:遍历键名

const arr=[5,7,1,4]
for(let value in arr){
    console.log(value)
}
// 0,1,2,3
const obj={
    a:1,
    b:2,
    c:3
}
for(let value in obj){
    console.log(value)
}
// a,b,c

for...of:遍历键值

const arr=[5,7,1,4]
for(let value of arr){
    console.log(value)
}
// 5,7,1,4
const obj={
    a:1,
    b:2,
    c:3
}
for(let value of obj){
    console.log(value)
}
// 1,2,3

函数方法循环

forEach

一般用于遍历数组，并处理相应的逻辑

const arr=[4,5,6]
const arr2=[]
arr.forEach((item,index)=>{
    arr2.push(item)
})
console.log(arr2)

map

一般用于遍历数组，更改数组数据，其会返回一个更改后的新数组

const arr=[4,5,6]
const arr2=arr.map((item,index)=>{
    // 返回一个新的值
    const value=item+1
    return value
})
console.log(arr2)