前端代码小技巧之数组操作和Promise和箭头函数（js）

突然想写博客了，那么我应该写点啥呢

本篇开始js吧，想到啥就写啥也当给自己做个总结

1.every和some的使用

在我们的业务逻辑中常常有这样的场景，我们需要在一个给定的数组中判断是否存在某一个数据。
such as
在[1,2,3,4,5]中是否存在3。
曾经的我第一次学会使用forEach，写出了这样的代码

const arr = [1,2,3,4,5]
let hasDate = false
arr.forEach(item => {
	if(item == 3){
		hasDate = true
	}
})

这这这，这是啥呀。但是没错，这就是在下的代码。吾日三省吾身，去看看曾经的代码试着优化它才会让你更进步，更加牛逼plus。ok，让我们试着用some去解决它，什么是some呢，顾名思义，就是一些。

let arr = [1, 2, 3, 4, 5]
let hasDate = arr.some(item => item == 3)

嗯。。。两行代码解决，那么every呢，故名思意，所有。运用场景也就是数组中是否全部是某一个数据，是的话返回true否则false。关于every和some的用法到这就结束了

2.map的使用

什么是map？map是Array原型上的方法，主要用于数组的遍历。那么就有小伙伴会speak，那我用forEach就好了嘛为什么要用map呢。这样又又又说到了forEach，在最开始单反涉及到循环遍历都是forEach，它确实好用，但是forEach相对于map最大的区别就是，forEach无法return。
例如，有一个数组对象,我们需要给每个对象加上索引index

let objectDate = [
	{
		name: "dingdaxia"
	},
	{
		name: "haha"
	}
]

我们使用forEach

let result = objectDate.forEach((item, index) => {
	item.id = index
})
//此时打印result会发现是undefind因为forEach并未返回任何值，但是我们打印objectDate其值发生了变法

我们使用map

let result = objectDate.forEach((item, index) => {
	item.id = index
})
//此时打印result会发现是修改后的数据

那么我直接使用objectDate不就行啦，那我该如何反驳了。如果你用react的话写jsx的时候你就知道为啥不用forEach了

3.filter的使用

filter顾名思义，筛选
同理数组arr为[1,2,3,4,1,6]，需要过滤出数组中的1

arr.filter(item => item==1)

如此就不用借助forEach和push结合进行数据筛选，非常好用

4.for in的使用

听说过for of ，forEach。这个for in是个啥玩意呢。我们常常会有这样一个需求，给定的是个对象而并非数组。我们需要对内容进行遍历，我们就无法使用for of 或者forEach。
such as

const objectDate = {
	name: "dingdaxia",
	love: "gaming",
	code: "good"
}

//我们需要遍历objectDate获取name，love，code

//运用for in
for(let key in objectDate){
	console.log(key)   //name love code
}

5.reduce的使用

reduce是个很有意思的方法，常用于累加器
reduce接收一个函数作为累加器，数组中的每个值（左到右）开始缩减，最终计算为一个值。

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

total: 上一次调用的返回值或者时初始值initialValue
currentValue：单前处理元素
currentIndex：当前元素索引
arr：数组对象也就是需要computer的对象

使用方法

//对数组累加
let arr = [1, 1, 5, 8, 9]

//运用forEach
let result = 0
arr.forEach(item=>{
	result+=item
})

//运用reduce
arr.reduce((prev, cur, curIndex, arr) => prev + cur) //非常好用 返回15

arr.reduce((prev, cur, curIndex, arr) => prev + cur, 10) //非常好用 返回25

5.find，findIndex的使用

find()返回第一个符合条件的值
findIndex() 返回第一个符合条件的值的索引值,没找到返回-1

由此我们可以使用findIndex来判断数组中是否存在某一个值（不为-1即存在）

6.Object.keys()的使用

众所周知for in可以用来对象的迭代获取key值，但是代码却不简洁，那么，如果我们想直接获取一个对象所有的key可以使用Object.keys(object)

such as

const objectData = {
	name: "dingdaxia",
	code: "good?"
}

Object.keys(objectData)  //[ "name", "code" ]

6.箭头函数代替function

当我们写一个函数我们会用到function进行函数声明后给出函数name
such as

function doAdd(){
	//代码逻辑
}

//ES6箭头函数
const doAdd=()=>{
	//代码逻辑
}

箭头函数可解决this指向问题，非常好用

6.Promise的使用

众所周知js是从上往下单线程，那么当我们有一个请求很久的时候会柱塞后面的代码逻辑。那么我们是不是可以把长时间的请求单独拎出来进行异步加载呢，这样就不会柱塞后面代码逻辑，所以有了Promise将同步操作异步化。

Promise三种状态
Pedding --等待
Resolve --成功
Reject --失败
值得注意的是Pedding结果只能有一种状态，成功或失败。

such as

new Promise((resolve, reject) => {
	resolve("dingdaxia")
}).then((res)=>{
	//res为上一个promise return出来的东西，这里为dingdaxia
	
})

由上述代码可知Promise是链式代码，可一直.then进行逻辑处理，并且如果上一个Promise没有resolve结果的话下面的.then就不会执行。由此我们可以解决一些复杂逻辑
such as 这里有个需求，我先通过接口a获得数据然后根据数据调用接口b

new Promise((resolve, reject) => {
	$.ajax({
		type:"Post",
		data:'{name: "dingdaxia"}',
		url:"/api/a",
		success: (res)=>{
			resolve(res)
		}
	})
}).then((res)=>{
	//res为上一个promise return出来的东西
	$.ajax({
		type:"Post",
		data:'{name: "dingdaxia"}',
		url:"/api/b",
		success: (res)=>{
			
		}
	})
})

ps : async和await也能达到同样的效果

先写这么多了，后面会写关于dom的操作。事件处理，以及一些防抖，节流小技巧。可能还会写html相关的flex，grid布局以及rem的使用。css的技巧，各种第三方库的使用