js常用方法

xbzs
139 阅读7分钟

1.防抖、节流

在javaScript中，防抖和节流是非常常见的，主要应用场景是一些高频事件触发时，需要使用到，并且都是用到了闭包。

防抖，是指在一段时间内，只取最后一次结果，常在搜索框进行模糊搜索时，减少对服务器的高频请求，一般都需要使用到

 function fangDou(fn, wait) {
    let timer = null // 计时器
    return function () {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(this)
      }, wait)
    }
  }

节流，是指在一段时间内，只触发一次，常见的使用场景，轮播图

function jieLiu(fn, wait) {
    let flag = true
    return function () {
      if (flag) {
        flag = false
        setTimeout(() => {
          fn.apply(this)
          flag = true
        }, wait)
      }
    }
  }

2.深拷贝

在js中，处理数据是必然的，特别是对象，一切皆对象嘛！数据一般是分为两大类，基础数据类型，包含string、number、Boolean、undefined、null，引用数据类型，Object，处理基础数据类型，可以直接对其赋值及修改是没有任何问题的，但是对于引用数据类型，就会存在问题，这里就不往下延伸了，如果需要把一个对象值赋值给一个变量，并且让这两个变量没有任何联系的话，这个时候就需要用到深拷贝 深拷贝一般常用方法 1.json方法JSON.parse(JSON.stringify(obj)) 2.递归深拷贝

function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') return obj
    if (obj instanceof Date) return obj
    if (obj instanceof RegExp) return obj
    let cloneObj = obj.constructor()
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        cloneObj[key] = deepCopy(obj[key])
      }
    }
    return cloneObj
  }

3.数组方法

1.定义数组的两种方式

1.使用构造函数const arr = new Array() 2.字面量定义 const arr = []

2.数组的方法

1.forEach()
  • forEach()：对数组进行遍历循环，对数组中的每一项都会处理到。这个方法没有返回值。参数都是function类型，默认有传参，接收三个参数，分别为：遍历的数组成员；对应的下标索引，数组本身
  • 语法：arr.forEach((item,index,arr) => {})
const arr = [1,2,3,4,5]
arr.forEach((item,index,arr)=>{
    console.log(`${item}在${arr}第${index}处位置`) 
})
2.map()
  • map()：指“映射”，与forEach一样可以循环数组，不一样的是，map是有返回值,返回代码处理后的一个新数组，长度会和原数组一样
  • 语法：arr.map((item,index,arr) => { return })
const arr = [1,2,3,4,5]
const newArr = arr.map((item)=>{
    return item > 3
})
console.log(newArr) // [false，false，false，true，true]
3.join()
  • join(): 就是把数组转换成字符串，然后给他规定个连接字符，默认的是逗号( ，)
  • 语法：arr.join()
const arr = [1,2,3,4,5]
console.log(arr.join()) // 1,2,3,4,5
console.log(arr.join('-')) // 1-2-3-4-5
console.log(arr) // [1,2,3,4,5] 不会改变原数组
4.concat()
  • concat(): 将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。
  • 语法：arr.concat()
const arr = [1,2,3,4,5]
console.log(arr.concat(4)) //  [1,2,3,4,5,4]
console.log(arr.concat([56,9])) // [1,2,3,4,5,56,9]
console.log(arr) // [1,2,3,4,5] 不会改变原数组
5.push()和pop()
  • push(): 把里面的内容添加到数组末尾，并返回修改后的长度。
  • pop()：移除数组最后一项，减少数组的length,返回移除的那个值。
  • 书写格式：arr.push(" ")，括号里面写内容 (“字符串要加引号”),
  • 书写格式：arr.pop( )
const arr = [1,2,3,4,5]
console.log(arr.push(8))  // 6 - 返回新数组的length
console.log(arr) // [1,2,3,4,5,8] - 会改变原数组

console.log(arr.pop()) // 8 - 返回被删除的那个成员
console.log(arr) // [1,2,3,4,5] - 会改变原数组
6.shift()和unshift()
  • shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
  • unshift:将参数添加到原数组开头，并返回数组的长度 。
  • 书写格式：arr.unshift(" ")，括号里面写内容 (“字符串要加引号”),
  • 书写格式：arr.shift()
const arr = [1,2,3,4,5]
console.log(arr.shift()) // 1 - 返回被删除的成员
console.log(arr) //[2,3,4,5] 会改变原数组

console.log(arr.unshift(8)) // 5 - 返回新数组的length
console.log(arr) // [8,2,3,4,5] 会改变原数组
7.sort()
  • sort(): 将数组里的项从小到大排序,会改变原数组
  • 语法：arr.sort((a,b)=> a-b)
const arr = [1,2,3,4,5]
arr.sort((a,b)=> a-b) // 小到大排序
console.log(arr) //  [1,2,3,4,5]

arr.sort((a,b)=> b-a) // 大到小排序
console.log(arr) // [5,4,3,2,1]
8.splice()

  • splice()：删除、插入和替换。

  • 删除：指定 2 个参数：要删除的第一项的位置和要删除的项数。

  • 书写格式：arr.splice( 1 , 3 )

  • 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。

  • 书写格式：arr.splice( 2,0,4,6 )

const arr = [1,2,3,4,5]
// 删除
console.log(arr.splice(0,2)) // [1,2]--删除，返回删除的成员，以数组形式返回
console.log(arr) // [3,4,5] -- 修改了原数组

// 插入
console.log(arr.splice(1,0,4,6)) //  []
console.log(arr) // [3,,4,6,4,5]
9.slice()
  • slice()：截取数组，返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。
  • 语法：arr.slice(1,4)
const arr = [1,2,3,4,5]
console.log(arr.slice(1,4)) // [2,3,4] -- 截取从下标1到4的成员，以数组的形式返回
console.log(arr) // [1,2,3,4,5] - 不改变原数组
10.indexOf()和lastIndexOf()
  • 都是通过下标的形式来寻找数组成员，只是indexOf从头开始，lastIndexOf从尾开始，都接收两个参数，第一个是寻找的成员值，第二个是开始寻找的下标，找到返回下标，没有找到，返回-1
const arr = [1,2,3,4,3]
console.log(arr.indexOf(3)) // 2
console.log(arr.lastIndexOf(3)) // 4

console.log(arr.indexOf(3,5)) // -1
console.log(arr.lastIndexOf(3,1)) // -1
11.filter()
  • filter()：过滤，返回符合条件的成员，以数组格式返回
  • 语法：arr.filter()
const arr = [1,2,3,4,5]
const list = arr.filter(item => item >3)
console.log(list) // [4,5]
12.find()
  • find()：匹配指定成员，匹配到返回第一个满足条件的成员，没有匹配到返回undefined
  • 语法：arr.find()
const arr = [1,2,3,4,5]
const item = arr.find(item => item >3)
console.log(item) // 4
13.findIndex()
  • findIndex()：匹配指定成员，匹配到返回第一个满足条件的成员的下标，没有匹配到返回-1
  • 语法：arr.findIndex()
const arr = [1,2,3,4,5]
const item = arr.findIndex(item => item >3)
console.log(item) // 3
14.every()
  • every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true
  • 语法：arr.every()
const arr = [1,2,3,4,5]
const bool = arr.every(item => item >3)
console.log(bool) // false
const bools = arr.every(item => item > 0)
console.log(bools) // true
15.some()
  • some()：判断数组中是否有一项满足条件，返回true, 只有所有项都不满足条件，才会返回false
  • 语法：arr.some()
const arr = [1,2,3,4,5]
const bool = arr.some(item => item >3)
console.log(bool) // true
const bools = arr.some(item => item < 0)
console.log(bools) // false
16.reduce()
  • reduce()：累加器，该方法接收两个参数，第一个参数是一个回调函数，第二参数是累加器的默认初始值；第一个参数回调函数接受四个参数，第一个是累加的结果，第二个是当前元素成员，第三个是对应的下标，第四个是当前数组，最终返回累加的结果值
  • 语法：arr.reduce((acc,cur,index,arr)=> acc,'')
const arr = [1,2,3,4,5]
const cunt = arr.reduce((acc,cur)=>{
    acc += cur
    return acc
},0)
console.log(cunt) // 15
17.includes()
  • includes(): 数组中是否包含指定的成员，包含返回true，不包含返回false
  • 语法：arr.includes()
const arr = [1,2,3,4,5]
const bool = arr.includes(0)
console.log(bool) // false

4.字符串方法

1.search()

  • search(): 搜索特定值的字符串，并返回匹配的位置;
  • 语法： str.search()
var str = "The full name of China is the People's Republic of China."
console.log(str.search('China')) // 17

2.slice()

  • slice(): 提取字符串的某个部分并在新字符串中返回被提取的部分。 该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。 如果某个参数为负，则从字符串的结尾开始计数。
  • 语法： str.slice()
var str = "Apple, Banana, Mango"
var res = str.slice(7,13)
console.log(res)  // Banana

3.replace()

  • replace():方法不会改变调用它的字符串。对大小写敏感。它返回的是新字符串。
  • 语法： str.replace()
var str = "Apple, Banana, Mango"
var res = str.replace('apple','yyy') 
console.log(res)  // Apple, Banana, Mango 对大小写敏感
console.log(str.replace('Apple','yyy')) // yyy,Banana, Mango

4.toUpperCase()和toLowerCase()

  • toUpperCase():把字符串转换为大写
  • toLowerCase():把字符串转换为小写
  • 语法： str.toUpperCase()/str.toUpperCase()
var str='Apple,App'
console.log(str.toUpperCase()) // APPLE,APP
console.log(str.toLowerCase()) // apple,app

5.concat()

  • concat():连接两个或多个字符串
  • 语法： str.concat(a,b)
var str='Apple,App'
console.log(str.concat('a','b')) // Apple,Appab

6.trim()

  • trim():删除字符串两端的空白符
  • 语法： str.trim()
var str=' Apple , App '
console.log(str) // ' Apple , App '
console.log(str.trim()) // 'Apple , App'

7.split()

  • split():将字符串转换为数组
  • 语法： str.split()
var txt = "a,b,c,d,e";   // 字符串
console.log(txt.split(","))  // 用逗号分隔 ['a', 'b', 'c', 'd', 'e']
console.log(txt.split(" "))  // 用空格分隔 ['a,b,c,d,e']
console.log(txt.split("|"))  // 用竖线分隔 ['a,b,c,d,e']

8.match()

  • match():检索返回一个字符串匹配正则表达式的结果
  • 语法： str.match(regexp)
var txt = "abcdeft";   // 字符串
var reg = /[A-z]/;
console.log(txt.match(reg))
avatar
文章
阅读
粉丝