js 常用函数

push 数组添加元素/数组追加元素

    pushFunc () {
      let arr = []
      arr.push('nnn')
      arr.push('mmm')
      arr.push('nnn')
      console.log(arr)
      return arr
    }
    

方法可向数组的末尾添加一个或多个元素，并返回新的长度。

(3) ["nnn", "mmm", "nnn"]

arr.pop() 数组末尾删除元素 / 截取数组最后一个元素

arr.pop() // 无需传参

改变原数组————删除数组得最后一个元素，并将最后一个元素按照元素本身得格式进行返回

返回值：被删除得元素本身

let arr = [1, 2, 3, 4, 5, 6]
let arr1 = arr.pop()
console.log(arr) // [1, 2, 3, 4, 5]
console.log(arr1) // 6

arr.shift() 删除数组得首项 / 截取数组得首项元素

arr.shift() // 无需传参

改变原数组————删除数组得第一个元素,并将第一个元素按照元素本身得格式进行返回

返回值：被删除得元素本身

    let arr = [1, 2, 3, 4, 5, 6, 7]
    let arr1 = arr.shift()
    console.log(arr) // [2, 3, 4, 5, 6, 7]
    console.log(arr1) // 1

arr.unshift() 在数组得开始位置依次添加元素

arr.unshift(元素1,元素2,元素3,元素4,...)

改变元素组————在元素得起始位置加入一个/多个新元素，并返回新数组得元素个数

返回值：新数组得元素个数

    let arr = [1, 2, 3, 4, 5, 6]
    let arr1 = arr.unshift('张三')
    console.log(arr) // ["张三", 1, 2, 3, 4, 5, 6]
    console.log(arr1) // 7

    let arr2 = arr.unshift('李四', '王五', '马六')
    console.log(arr) // ["李四", "王五", "马六", "张三", 1, 2, 3, 4, 5, 6]
    console.log(arr2) // 10

reduce 数组元素累加/数组元素求和

    arrReduce () {
      let arr = [1, 2, 3, 4, 5] // 纯数字相加
      console.log(arr.reduce((total, num) => { return total + num }))

      let arr1 = [1, 2, '', 3, 5] // 有字符串前面相加后面相连
      console.log(arr1.reduce((total, num) => { return total + num }))

      let arr2 = [1, 2, null, 3] //有null值求和，null跳过
      console.log(arr2.reduce((total, num) => { return total + num }))

      let arr3 = ['sd', 'ds', 1]
      console.log(arr3.reduce((total, num) => { return total + num }))

      let arr4 = ['sd', 'g']
      console.log(arr4.reduce((total, num) => { return total + num }))

      let arr5 = ['sd', '1', '2', 3]
      console.log(arr5.reduce((total, num) => { return total + num }))

      let arr6 = ['1', '2', '3'] // 数字字符串相连  （注：不相加）
      console.log(arr6.reduce((total, num) => { return total + num }))
    }

打印结果
15
335
6
sdds1
sdg
sd123
123

join 数组转为字符串

arr.join(参数)

与arr.split正好相反

// 数组连接为字符串
arrayToString () {
   let arr = ['张丽英', '是个', '娱乐圈', '大明星']
   return arr.join('')
}

str.split() 切割字符串为数组

语法
str.split(切分标识)

let str = '12,34,56,76,12'
console.log(str.split(',')) // ["12", "34", "56", "76", "12"]

Object.assign() 对象的合并

Object.assign(目标对象,源对象,源对象,源对象....) 

将一个或多格源对象合并到一个目标对象中

其中目标对象放在第一个上，源对象放在后面

当对象中具有重复的健名时，最终按照最后一次出现的为准

该方法是浅拷贝，如果元素最后一次出现的对象发生变化了以后，会修改目标对象中的值

如果想让该拷贝变为深拷贝，则使用JSON.parse(JSON.stringfy(目标对象))  进行转换 —— 前提是目标对象必须是可以进行JSON处理的

 assignFunc () {
   let obj1 = {
     name: '小李',
     age: 32,
     school: '楼兰中学'
   }
   const obj2 = {
     name: '小花',
     address: '中国'
   }
   const obj3 = {
     name: '小陈',
     sex: '男'
   }
   return Object.assign(obj3, obj2, obj1)

返回值
{ address: "中国"
  age: 32
  name: "小李"
  school: "楼兰中学"
  sex: "男"
}

该方法是浅拷贝，如果元素最后一次出现的对象发生变化了以后，会修改目标对象中的值

如果想让该拷贝变为深拷贝，则使用JSON.parse(JSON.stringfy(目标对象))  进行转换 —— 前提是目标对象必须是可以进行JSON处理的

assignFunc (obj1, obj2, obj3) {
  return Object.assign(obj3, obj2, obj1)
}

const obj1 = {
   name: '小李',
   age: 32,
   school: '楼兰中学'
 }
 const obj2 = {
   name: '小花',
   address: '中国'
 }
 const obj3 = {
   name: '小陈',
   sex: '男'
 }
 let obj = assignFunc(obj1, obj2, obj3)
 console.log(obj)

 obj3.sex = '女'
 obj2.name = '小风'
 console.log(obj) // sex会改成 '女'   name不会发生改变  浅拷贝
 
 obj = JSON.parse(JSON.stringify(obj))

 obj3.sex = '未知'
 console.log(obj) // sex不会再发生改变 深拷贝

indexOf() 查询指定字符串在某字符串中出现的位置/查询元素在数组内的指定位置

规则：
str.indexOf(指定字符,开始检索位置)
arr.indexOf(指定元素值,开始检索位置)

情况1：正常返回指定字符串在指定字符串中第一出现的位置（相当于索引，从0开始）

情况2：如果不存在指定字符串，则返回 -1

情况3： 汉字视作占用一个位置

情况4： 当设置开始检索位置的时候，从检索位置开始进行检索，并且只检索后面的位置
情况4.1		开始检索位置的初始数值为0
情况4.2     返回的位置值依旧是字符串在整体字符串中的位置
情况4.3     如果在指定位置之后的字符串中无法查找到指定字符串，则返回 -1

情况5  可以查询数组中某元素第一次出现的位置

情况6  当查询数组中元素的时候，检索的是严格模式

    let str = 'scdsbjvb张力然'
    console.log(str.indexOf('l'))  // -1  情况2
    console.log(str.indexOf('然')) // 10  情况3
    console.log(str.indexOf('d')) // 2  情况1
    console.log(str.indexOf('b', 5)) // 7  情况4 / 情况4.2
    console.log(str.indexOf('d', 5)) // -1  情况4.1
    console.log(str.indexOf('b', 4)) // 4  情况4.1
    console.log(str.indexOf('c', 5)) // -1 情况4.3

    let arr = ['张', '1', 1, 2, 'wumian']
    let i = arr.indexOf(1)  // 情况5
    console.log(i) // 2
    let m = arr.indexOf('2') // 情况6
    console.log(m)  // -1

splice(） 删除数组中指定位置的元素 / 数组中某个位置插入元素 / 数组中元素的替换

arr.aplice(开始位置索引,删除数量)

使用1：删除后，返回的是删除的数据

使用2： 可以指定删除位置后的可删除数量

使用3：删除数组中的指定元素

使用4：在数组中的某个位置插入元素 splice(开始位置,0,插入的元素)

使用5：可以向数组中某个位置插入多个元素 splice(开始位置,0,插入元素1,插入元素2,插入元素3,插入元素4...)

使用6：可以替换数组中某个位置/某段位置的元素，并将被替换的元素以数组的形式返回  splice(开始位置,替换的长度,新元素)

使用7：可以用多个元素替换数组中某段位置的元素，并将被替换的元素以数组的形式返回 splice(开始位置,替换的长度,新元素1,新元素2,新元素3....)

let arr1 = ['李', 3, 6, 5, 6, 78, 9]
console.log(arr1.splice(2, 4)) // [6, 5, 6, 78]  // 使用1 使用2
console.log(arr1) // ["李", 3, 9]

let arr2 = [1, 4, 7, 9, '张']
console.log(arr2.splice(3, 1)) // [9] // 使用1
console.log(arr2) // [1, 4, 7, "张"] // 使用1

let arr3 = [5, 8, 9, 3, '发']
console.log(arr3.splice(8, 2)) // []
console.log(arr3) // [5, 8, 9, 3, "发"]

let arr = ['张', '1', 1, 2, 'wumian']   // 使用3
let i = arr.indexOf(1)
if (i !== -1) {
  arr.splice(i, 1)
}
console.log(arr) // ["张", "1", 2, "wumian"]

let arr = [1, 2, 3, 4]
let arrOne = arr.splice(1, 0, 4) // 使用4
console.log(arr) // [1, 4, 2, 3, 4] 
console.log(arrOne) // []

let arrFoure = arr.splice(1, 0, 8, 9, 12, 43) // 使用5
console.log(arr) // [1, 8, 9, 12, 43, 4, 2, 3, 4]
console.log(arrFoure) // []

let arrTwo = arr.splice(1, 1, 6) // 使用6
console.log(arr) // [1, 6, 9, 12, 43, 4, 2, 3, 4]
console.log(arrTwo) // [8]

let arrThree = arr.splice(1, 3, 6) // 使用6
console.log(arr) // [1, 6, 43, 4, 2, 3, 4]
console.log(arrThree) // [6, 9, 12]

let arrFive = arr.splice(1, 2, 69, 67, 98) // 使用7
console.log(arr) // [1, 69, 67, 98, 4, 2, 3, 4]
console.log(arrFive) // [6, 43]

数组去重 Array.from([…new Set(arr)])

公式
let arrNew = Array.from([...new Set(原始3数组)])

注：去重的时候为严格去重，区分类型

    let arr = [1, 1, 1, 1, 1, 1, 2, 3, 3, 45, 6, '4', '3', '6', 4, 6, 3]
    let arrNew = Array.from([...new Set(arr)])
    console.log(arrNew) // [1, 2, 3, 45, 6, "4", "3", "6", 4]

substring() 字符串截取

str.substring(开始截取的位置,截取的最终位置)

    let str = '张飞三老爷的大哥是刘备大老爷，他们的老二叫做关羽。'

    let i = str.indexOf('哥')

    if (i !== -1) {
      let beforeStr = str.substring(0, i + 1) // 截取字符前

      let afterStr = str.substring(i) // 截取字符后

      console.log(beforeStr) // 张飞三老爷的大哥
      console.log(afterStr) // 哥是刘备大老爷，他们的老二叫做关羽。
    }

.map().get() 类数组转化为正常数组

map()会将类数组进行遍历和替换，然后get()方法会讲数组转化为正常数组

<!DOCTYPE html>
<html>

<head>
  <script src='./jquery-3.4.1.min.js'></script>
  <meta charset="utf-8" />
</head>

<body>
  <li>张三丰</li>
  <li>李明成</li>
  <li>方世玉</li>
  <li>王三炮</li>
  <li>赵友臣</li>
  <li>孙明玉</li>
  <li>吴三狗</li>
  <li>萧路严</li>


  <button class="btn">点击</button>

</body>

<script>

  $(function() {

    $("button.btn").click(function(){

      let arr = $("li").map(function(){ return $(this).text()}).get()
      console.log(arr)

    })

  })
</script>

</html>

arr.map() 数组遍历

规则：
arr.map(function(value,index,array){return 表达式}) 

作用： 对数组进行遍历并对其中的值进行操作处理，并返回新数组
value: 值
index:索引
array:数组本身

let arr = [1, 2, 3, 4]

let arrNew = arr.map(function (value, index,array) {
  console.log(value)
  console.log(index)
  console.log(array)
  return value * 4
})
console.log(arrNew) // [4,8,12,16]

arr.filter() 数组过滤

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

    let arr = [1, 2, 3, 4, 5, 6, 7]
    let newArr = arr.filter((item, index) => item > 5)
    console.log(newArr) // [6,7]

arr.reduce() 用于对数组中的数据进行处理，并返回累计操作的值

array.reduce(function(total, currentValue, currentIndex, arr), init)

total:初始值，或者计算结束后的返回值

currentVal:当前元素

currentIndex: 当前元素的索引

arr: 当前元素所属的数组对象

init: 传入的初始值

用于对数组中的数据进行处理，并返回累计操作的值

    let arr = [1, 2, 3, 4, 5, 6]
    let result = arr.reduce((prev, val, i, a) => {
      console.log(prev) // 0/1/3/6/10/15
      console.log(val) // 1/2/3/4/5/6
      console.log(i) // 0/1/2/3/4/5
      console.log(a) // [1, 2, 3, 4, 5, 6]
      return prev + val
    }, 0)
    console.log(result) // 21

for of / for in 数组和对象循环遍历

for of语法：
for (let val of 数组) {}   

注：
for of 不能遍历对象
for of 遍历后取的是对象的值	

for in 语法
for (let i in 对象/数组) {}

注：
for in 可遍历数组和对象
for in 遍历后取得是对象的下标/键名

    let arr = [6, 22, 31, 41, 543, 65, 77, 88]
    for (let i in arr) {
      console.log(i)
      let a = typeof (i)
      console.log(a)
    }

    for (let val of arr) {
      console.log(val)
    }

    let obj = {name: '张', age: 12, address: '青海'}

    for (let i in obj) {
      console.log(i)
    }

    // 错误写法，let of 不可以遍历对象
    // for (let val of obj) {
    //   console.log(val)
    // }

    let arrObj = [
      {name: '张', age: 42, sex: '男'},
      {name: '李', age: 12, sex: '男'},
      {name: '王', age: 22, sex: '男'},
      {name: '孙', age: 12, sex: '女'},
      {name: '夏', age: 32, sex: '女'}
    ]

    for (let i in arrObj) {
      console.log(i)
    }

    for (let val of arrObj) {
      console.log(val)
    }

Object.values() 对象的键值转为数组 / Object.keys() 对象的键名转为数组 / Object.entries() 对象的键名键值一同转为数组

Object.values()  遍历键值


Object.keys() 遍历键名


Object.entries() 遍历键值对

    let obj = {
      name: '张',
      age: 12,
      address: '楼兰'
    }

    // 取对象中的值转化为数组
    let arrayValue = Object.values(obj)
    console.log(arrayValue) // ["张", 12, "楼兰"]

    // 取对象中的键名转化为数组
    let arrayKey = Object.keys(obj)
    console.log(arrayKey) // ["name", "age", "address"]

    // 将对象中的键值对儿转为数组
    let arrayObj = Object.entries(obj)
    console.log(arrayObj)

sort() reverse() 数组排序

使用1：正常情况下是按照首位进行排序 arr.sort() 首位增序

使用2：当排序数组中是数字的时候，也会是按照首位进行排序 arr.sort()  首位增序

使用3： 当想要按照数字的大小进行排序的时候，需要使用 
		arr.sort((a,b)=>a-b) 大小增序
		arr.sort((a,b)=>b-a) 大小降序

使用4：当按照数组中的首位进行降序排序的时候，使用reverse ， 即arr.reverse() 首位降序
	

    let arr = [2, 54, 21, 3, 54, 124, 7]
    arr.sort((a, b) => b - a) // 使用3
    console.log(arr) // [124, 54, 54, 21, 7, 3, 2]

    arr.sort() // 使用2
    console.log(arr) // [124, 2, 21, 3, 54, 54, 7]

    arr.sort((a, b) => a - b) // 使用3
    console.log(arr) // [2, 3, 7, 21, 54, 54, 124]

    let arr1 = ['a', 'd', 'b', 'e', 'c']
    arr1.sort() // 使用1
    console.log(arr1) // ["a", "b", "c", "d", "e"]
    arr1.reverse() // 使用4
    console.log(arr1)  // ["e", "d", "c", "b", "a"]

toFixed 四舍五入截取小数点后 n 位

num.tofixed(截取位数) 

四舍五入截取

必须是数字/浮点数才可以

返回值是字符串

    let num = 12312.1233242
    let num2 = num.toFixed(2)
    console.log(num) // 12312.1233242
    console.log(num2) // '12312.12'

    let num1 = 123.6764
    let num3 = num1.toFixed(2)
    console.log(num1) // 123.6764
    console.log(num3) // '123.68'

/**
 * 数字/浮点数保留n位小数点
 * @param {*} val 值
 * @param {*} num 位数
 */
export const numToFixed = (val = 0, num = 2) => {
  val = Number(val)
  val = isNaN(val) ? 0 : val
  return val.toFixed(num)
}