js日常开发中常用的方法

在前端开发过程中，找后台同学拿数据这一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循环
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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。