常用的js方法

蓦然阑珊
95 阅读5分钟

Math对象

Math.max(1,2,3) 获取一组数据的最大值
arr.map(item=>item.id)  数组映射,将数组的某一项组成一个数组

classNames

// 合并类名用
yarn add classnames  // 下包

import classNames from 'classnames'   //引入
<div className={classNames('like', item.attitude === 1 && 'liked')}></div> // 使用

moment

目标： 通过moment对时间进行格式化

步骤：

  1. 安装moment：yarn add moment
  2. 使用moment进行格式化

核心代码：

formatTime(time) {
  return moment(time).format('YYYY-MM-DD HH:mm:ss')
}
​
<span className="time">{this.formatTime(item.time)}</span>

lodash

推荐使用 lodash 工具库来实现排序功能

步骤：

  1. 安装：yarn add lodash
  2. 单独导入 orderBy 函数
  3. 调用 orderBy 实现排序
// 完整导入：导入所有的工具函数
import _ from 'lodash'

// 使用：
_.sortBy(...)   排序方法
         
// 按需导入：用到哪个工具函数就导入哪个
import sortBy from 'lodash/sortBy'
sortBy(...)

RESTFul API

目标：能够知道什么是 RESTFul API

内容：

RESTFul API （或 REST API）是一套流行的接口设计风格，参考 RESTFul API 设计指南

使用 RESTFul API 时，常用请求方式有以下几种：

  • GET（查询）：从服务器获取资源
  • POST（新建）：在服务器新建一个资源
  • DELETE（删除）：从服务器删除资源
  • PUT（更新）：在服务器更新资源（注意：需要提供接口所需的完整数据）
  • PATCH（更新）：在服务器更新资源（只需要提供接口中要修改过的数据）

约定：请求方式是动词，接口地址使用名词

示例：

  • GET /zoos：获取所有动物园
  • POST /zoos：新建一个动物园
  • GET /zoos/ID：获取某个动物园的信息
  • DELETE /zoos/ID：删除某个动物园
  • PUT /zoos/ID：更新某个动物园的信息（提供该动物园的全部信息）
  • PATCH /zoos/ID：更新某个动物园的信息（提供该动物园的部分信息）
// PUT 和 PATCH 请求的区别演示：
​
比如，动物园数据包含：{ name, address, animals }，假设要修改 name 属性，此时：
使用 patch 请求：只需要传入 { name } 即可
使用 put 请求：需要传入完成数据 { name, address, animals }

json-server 提供接口数据

目标：能够使用 json-server 提供接口数据

内容：

步骤：

  1. 准备文件data.json
{
  "tabs": [
    {
        "id": 1,
        "name": "热度",
        "type": "hot"
      },
      {
        "id": 2,
        "name": "时间",
        "type": "time"
      }
  ],
  "list": [
    {
      "id": 1,
      "author":"89 18k",
      "comment":"瓜子 啤酒",
      "time":"2021-11-24T03:13:40.644Z",
      "attitude":0
    }
  ]
}
  1. 使用 json-server 启动接口
# 使用 npx 命令调用 json-server
# 指定用于提供数据的 json 文件
# --port 用于修改端口号
# --watch 表示监听 json 文件的变化，当变化时，可以不重启终端命令的前提下读取到 json 文件中的最新的内容
npx json-server ./data.json --port 8888 --watch
​
# 接口地址为：
http://localhost:8888/tabs
http://localhost:8888/list
  1. 使用接口
axios.get('http://localhost:8888/tabs')

数组对象解构赋值

const arr = ['aaa', 'bbb']

const [a, b] = arr
// a => arr[0]
// b => arr[1]

// 解构出来的名称，可以是任意变量名
const [state, setState] = arr

const obj= {name:'ls',age:3}
const {name:myName,age} =obj
console.log(myName,age) // ls,3

import

导入文件
import {a as b} from  './a.js'   // a 重命名为 b 
import * as a from './s.js'  // 将该文件所有变量包装成一个对象.

export

export const a ='1'或const a = '1' export {a}   // 可以有多个
按需导出      ----> import {a}  from './a.js'   
export default  a 默认导出  -----> import  a from a.js  // 只能有一个

数组的every方法

const bool=list.every(item => item.goods_state)
// 数组每一项的goods_state都为true,返回true,否则false

数组的filter方法

const newArr=list.every(item => item.goods_state)
// 数组某项的goods_state为true,返回该项,否则不返回

数组的map方法

let data = [1,2,3,4,5];
let newData2 = data.map(item => item *item);
// 数组的映射.

数组的reduce方法

// 第一个参数是一个回调函数
// 回调函数的参数
// 第一个: 表示上一次的值
// 第二个: 表示数组中的每一项
// 第三个: 表述索引
// 回调函数的返回值: 上一次的累加的结果,注意回调函数一定要有返回值!
const arr = [1,3,5,8] 
const res = res.reduce((prevCount, item, index) => {
  return ptevCount + item
},0 )
console.log('数组中所有元素的和',res)

扩展运算符

...arr, ...object
// 可以展开数组和对象,可以和解构赋值配合

箭头函数

const fn =() => ({a:'b'})
//箭头函数返回对象要加小括号.

剩余参数

剩余参数允许我们将不定数量的参数表示为一个数组
function fn(...res) {
console.log(res) 
}
fn(1,2   // res为[1,2]
fn(1,2,3)//res为[1,2,3]
// 对象形式的剩余参数
function fn1({a,...res}){
console.log(res) // res 为{b:'2',c:'3'}
}
fn({a:'1',b:'2',c:'3'})

可选链操作符

  • MDN 可选链操作符
  • 可选链操作符（?.）：允许读取位于对象链深处的属性的值，而不必明确验证链中的每个引用是否有效
const o = {
  cat: {
    name: 'tom',
    sayHi() {
      console.log('where is jerry')
    }
  }
}
​
// 原来：
console.log(o.dog && o.dog.name)
// 使用可选链操作符：
console.log(o.dog?.name)
​
// 原来：
o.dog && o.dog.sayHi()
// 使用可选链操作符：
o.dog?.sayHi()

补充2：空值合并运算符

运算符：??

作用：判断左侧的操作数是否为 null 或者 undefined ，如果是返回其右侧操作数，否则返回左侧操作数。

const a = null
​
// 空值运算符会判断左侧的 a 是不是 null 或 undefined，如果是 就返回右侧的 '默认值'，否则，返回左侧的值
const result = a ?? '默认值'       // ==> '默认值'
const result = false ?? '默认值' // ==> false
​
// 逻辑或 ||
const result = false || '默认值' // ==> '默认值'

3,try...catch处理错误

try...catch 的作用：

  • MDN try...catch 的说明
  • 作用：捕获代码中的错误、异常
  • 使用场景：当某一段代码可能会出现错误时，就可以使用 try...catch 来处理

Promise.reject()或Promise.resolve()

是promise提供的一个快捷方法,可以直接得到一个失败或成功的Promise对象
http.interceptors.response.use(undefined, err => {
return Promise.reject(err)
})
}
等同于  
http.interceptors.response.use(undefined, err => {
return new Promise((resolve,reject)=>{
reject(err)
})
}
// 直接有成功或失败的数据对象,可以使用快捷方法
// 需要经过逻辑判断等处理,才能知道是否发生错误,需要创建一个promise对象.
avatar
文章
阅读
粉丝