日常开发中常用的方法
在前端开发过程中，找后台同学拿数据这一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
})
九、你能想到的所有数组去重的方法...
- js写一个for循环
- hash
- 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