JS日常开发中常用的方法

小鱼儿 2022-05-16 05:59 268阅读 0赞

原文地址：[https://blog.csdn.net/dongsdh/article/details/81670534][https_blog.csdn.net_dongsdh_article_details_81670534]

在前端开发过程中，找后台同学拿数据这一part是必不可少的。但是后台给的数据全都是你该渲染在页面的吗？后台给的数据格式一定是你想要的吗？如果你在实际开发中也曾像我一样为提交的数据，或者拿到的数据烦恼过，那么希望这篇简单总结能帮上忙，哪怕是那么一丢丢儿

哈哈哈测试一下你能一口气读出下列数组的方法吗？1，2，3，Go·····

filter()  
find()  
findIndex()  
forEach()  
indexOf()  
join()  
keys()  
lastIndexOf()  
map()  
reduce()  
reverse()  
slice()  
some()  
sort()  
includes()  
values() \*  
copyWithin() \*  
entries() \*  
fill() \*  
reduceRight() \*

emmm... 可能有20个？ 标注\*的方法表示我至今还未在项目中使用过它们，算是低频的了。

我们可以将数组的方法分为**变异方法**和**非变异方法**。  
变异方法，顾名思义，调用这些方法会让原始数组变异。说白了原始数组会被改变。

那么变异的方法都有哪些呢？

push()  
pop()  
shift()  
unshift()  
splice()  
sort()  
reverse()

应该就这些了吧

接下来我们挑选几个方法介绍介绍。

## 一、forEach ##

forEach和for语句很像，都是可以遍历、循环一个数组。forEach它接收一个回调函数，这个函数接收三个参数。第一个参数是遍历数组的内容，第二个参数是遍历数组的索引也就是位置，第三个是数组本身(第三个参数很鸡肋，一般没什么用)

*  接口返回所有关于金钱的数值的单位都是分，渲染在页面上的单位是元。

const arr = [
    
    { name: 'zhangsan1', money: 1000 },
    
    { name: 'zhangsan2', money: 3200 },
    
    { name: 'zhangsan3', money: 4200 },
    
    ]
    
    arr.forEach((item, index) => {
    
    item.money /= 100
    
    })
    
    console.log(arr)

这个方法，相信聪明的你看就会懂用法和for语句简直是一毛一样。细心的你不知道有没有这样的疑惑，最终输出的arr其实是我们用const声明的。不是说const定义的都是常量不能修改吗？  
const 定义的引用类型比如对象、数组。const 声明会阻止对于变量绑定与变量自身值的修改，这意味着 const 声明并不会阻止对变量成员的修改。这句话是不是很绕？直接看代码

const people = {
    
    name: 'cc',
    
    age: 18
    
    }
    
    people.age = 20
    
    console.log(people) // { name: 'cc', age: 20 }
    
    // 但是如果直接这样子
    
    peopel = { name: 'cc', age: 20 } // 分分钟抛出错误

切记：const 阻止的是对于变量绑定的修改，而不阻止对成员值的修改。

## 二、map ##

map的用法和forEach极其相似。最大的区别是map 会将原数组映射出一个新数组。这个新数组由map的回调函数return。

*  在一个对象数组中的拿到属性值们。比如一个对象数组里面有age，name，adress等等。我们只想拿到age的集合。

const arr = [
    
    { name: 'aa', age: 18, address: '北京' },
    
    { name: 'bb', age: 20, address: '上海' },
    
    { name: 'cc', age: 21, address: '天津' },
    
    ]
    
    const mapArr = arr.map((val, index) => {
    
    return val.age
    
    })
    
    console.log(arr) //还是和原来的一毛一样
    
    console.log(mapArr) //映射出一个新的数组，通过return返回

*  往一个对象数组中的插入一个索引或者成员属性

const arr = [
    
    { name: 'aa' },
    
    { name: 'bb' },
    
    { name: 'cc' },
    
    ]
    
    const mapArr = arr.map((val, index) => {
    
    return { ...val, index, flag: true }
    
    })
    
    console.log(mapArr)
    
    // 具体问题具体分析。。。比如你要将年龄小于20岁的人名修改一下
    
    const arr = [
    
    { name: 'aa', age: 18 },
    
    { name: 'bb', age: 19 },
    
    { name: 'cc', age: 22 },
    
    ]
    
    const mapArr = arr.map((val, index) => {
    
    if (val.age < 20) {
    
    return { ...val, name: `${val.name}-young` }
    
    }
    
    return val
    
    
    })
    
    console.log(mapArr)

## 三、filter ##

filter 顾名思义“过滤”嘛。filter也是接收一个函数。这个函数接收也是接收三个参数。第一个参数是遍历数组的内容，第二个参数是遍历数组的索引也就是位置，第三个是数组本身。

filter的回调函数必须返回布尔值，也就是true or false。true表示该内容通过filter大大的考核，false表示‘sorry，你被抛弃了’

这边的布尔值并不是全等类型的true or false。比如 undefined, 0, ''等都默认为false

*  筛选出90后的'老人们'（纯属自黑）

const arr = [
    
    { name: 'aa', birth: 1992 },
    
    { name: 'bb', birth: 1993 },
    
    { name: 'cc', birth: 2000 },
    
    ]
    
    const filterArr = arr.filter(val => {
    
    return val.birth >= 1990 && val.birth < 2000
    
    })
    
    console.log(filterArr) //考核成功的成员s

## 四、some ##

some  
somebody?something? some表示只要有一项满足就可以。有时候和朋友一起开黑打dota的时候，有时候朋友会互损“你能抢到一个人头就算你赢了”。就是这个意思。

some的回调函数必须返回布尔值。只要有1️项满足条件。some就返回true。往往我们就可以到这个布尔值做很多判断。

*  今晚开黑打王者农药有人拿五杀，宵夜我请客

const arr = [
    
    { name: 'aa', kill: 'Double Kill' },
    
    { name: 'bb', kill: 'Quadra Kill' },
    
    { name: 'cc', kill: 'Penta Kill' },
    
    ]
    
    const someFlag = arr.some(val => val.kill === 'Penta Kill')
    
    
    if (someFlag) {
    
    console.log('我请客')
    
    } else {
    
    console.log('很遗憾，没有一个人拿到五杀')
    
    }

## 五、every ##

说了some 怎么能不说说好基友every。every表示必须每每每一项满足就可以返回true。换句话说只要有一个不满足的就返回false

const arr = [
    
    { name: 'aa', age: 18 },
    
    { name: 'bb', age: 20 },
    
    { name: 'cc', age: 15 },
    
    ]
    
    const everyFlag = arr.every(val => val.age >= 18)
    
    
    if (everyFlag) {
    
    console.log('全部成年')
    
    } else {
    
    console.log('还有未成年人')
    
    }

## 六、indexOf && lastIndexOf ##

indexOf 从左到右检索数组/字符串是否存在某个值，如果存在返回当前存在值**第一次第一次第一次**出现的所在位置，否则返回 -1。。它有个好朋友lastIndexOf 是用右边向左检索

const arr = [1, 4, 3, 4, 6]
    
    console.log(arr.indexOf(7)) // -1
    
    console.log(arr.indexOf(4)) // 1

## 七、find && findIndex ##

find() 方法会返回匹配的值  
findIndex() 方法则会返回匹配位置的索引  
find() 与 findIndex() 方法均会在回调函数第一次返回 true 时停止查找

let numbers = [25, 30, 35, 40, 45];
    
    
    console.log(numbers.find(n => n > 33)); // 35
    
    console.log(numbers.findIndex(n => n > 33)); // 2

## 八、sort ##

利用sort简单实现随机排列数组

const arr = [1, 2, 3, 4, 6, 7]
    
    arr.sort(function() {
    
    return Math.random() - 0.5
    
    })

## 九、你能想到的所有数组去重的方法... ##

1.  [js写一个for循环][js_for]
2.  hash
3.  [filter][]  
    这里提供一种新方法，炒鸡简单。

const arr = [1, 2, 2, 1, '1', '2']
    
    
    const setArr = [...new Set(arr)]
    
    
    console.log(setArr)

# 接下来说说Object在项目中常用的一些方法。 #

## 一、Object.assign() ##

ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为\{\}

const obj = Object.assign({}, objA, objB)

## 二、Object.keys() ##

Object.keys() 返回所有属性的字符串数组。

var arr = ["a", "b", "c"]
    
    console.log(Object.keys(arr)) // ['0', '1', '2']
    
    
    var people = { name: 'cc', age: 22, gender: 'man' }
    
    console.log(Object.keys(people)) //['name', 'age', 'gender']

## 三、... ##

后台返回一个对象类似这样 \{ aa: 1, bb: 2, cc: 3, dd: 4 \} \}但实际上我们不要dd这个值。你除了用delete这么暴力的方法外你还可以用ES6

const obj = { aa: 1, bb: 2, cc: 3, dd: 4 }
    
    const { dd, ...restObj } = obj
    
    console.log(restObj) // { aa: 1, bb: 2, cc: 3 }

## 四、把一个数组里的值作为对象的属性并且赋值为1 ##

const arr = ['aa', 'bb', 'cc']
    
    const obj = {}
    
    arr.forEach(val => {
    
    obj[val] = 1
    
    })
    
    console.log(obj)

这边提示一下，这样是可以实现往对象obj插入一个成员属性，但是使用vue的同学需要注意一下。因为vue的数据都是被observe 监听住的，直接像obj.aa = 1这样的数据就不会是响应的。你应该通过Vue.set()去设置。这个坑你们踩过吗？

这是我在日常开发中用到的一些方法，写一点点儿小小的总结吧

作者：陈嘻嘻啊  
链接：https://www.jianshu.com/p/5e34fea361ec  
來源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[https_blog.csdn.net_dongsdh_article_details_81670534]: https://blog.csdn.net/dongsdh/article/details/81670534
[js_for]: https://link.jianshu.com/?t=https%3A%2F%2Fmy.oschina.net%2FBearCatYN%2Fblog%2F476516
[filter]: https://link.jianshu.com/?t=https%3A%2F%2Fwww.zhihu.com%2Fquestion%2F29558082