前端面试题（第四弹）——js函数

箭头函数

箭头函数 “=>” 是ES6新增的特性，很大程度上，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。
有几点区别：箭头函数不能使用arguments、super和 new.target，也不能作构造函数。此外，箭头函数也没有prototype属性。
箭头函数内部没有this指向，如果写this他会向上寻找父级this，直到window。

let arrowFun = (a,b) => {
    return a + b 
}
function  fun(a,b) {
    return a + b
}
console.log(arrowFun(2,3))   // 5
console.log(fun(2,3))       // 5

//箭头函数只有一个参数的时候，可以省略参数的括号
let arrowFun2 = a => {
    return a + 2
}
console.log(arrowFun2(5))   // 7

//箭头函数非常适合嵌入函数的场景,非常简便
let arr = [1,2,3]
arr.map(i =>  i + 1 )

扩展参数

let arr = [1,2,3,4]
function add () {
	let sum = 0
	for (let i =0 ; i<arguments.length; i++) {
		sum += arguments[i]
    }
    return sum
}
add(...arr)

收集参数

function getSum (...values) {
	return values.reduce((x,y) => x + y, 0)
}
console.log(getSum(1,2,3))   //6

//这里介绍一下reduce
/**
*	total 必需。初始值, 或者计算结束后的返回值
*	currentValue 必需。当前元素
*	currentIndex 可选。当前元素的索引
*	arr 可选。当前元素所属的数组对象
*	initialValue 可选。传递给函数的初始值
**/
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

const array = [1,2,3,4,5,6,7,8]
const result = array.reduce((a,b) => {
	a += b
	return a
},0)
// 这里result 返回数值 36

const array = [1,2,3,4,5,6,7,8]
const result = array.reduce((a,b) => {
	a = `${a}${b}`
	return a
},'')
// 这里result 返回字符串 12345678

const array = [
	{key: 'name', value: 'wsf'},
	{key: 'age', value: '18'},
	{key: 'sex',value: 'man'}
]
const result = array.reduce((a,b) => {
	a[b.key] = b.value
	return a
},{})
// 这里result 返回对象 {age: "18",name: "wsf",sex: "man"}

const array = [
	{key: 'name', value: 'wsf'},
	{key: 'age', value: '18'},
	{key: 'sex',value: 'man'}
]
const result = array.reduce((a,b) => {
	a.push(b.key)
	return a
},[])
// 这里result 返回对象 ["name", "age", "sex"]

递归

// 函数通过名称自己调用自己
// 这里写一个array 的扁平化方法
let arr = [1,[2,3,[4]]];
let newArr = []
function flat(arr) { 
	for (let key in arr) {
		if(Array.isArray( arr[key] )) {
	     	flat(arr[key])
		}else{        
			newArr.push(arr[key])
  		}
    }
        return newArr
} 

堆栈内存

闭包 ：防抖与节流

// 闭包简单点来说就是：一个函数 内部存在声明的变量 返回一个内部函数，这个内部函数使用了这个外部函数的变量
function outerFun () {
	let a = 1
	let b = 1
	return function () {
	  return a + b
	}
}   

//	下面看幾個閉包的作用：防抖与节流

    //防抖:fun防抖执行的函数。delay 延迟时间
    //防抖的作用 当事件频繁触发 只执行最后一次
    //防抖经常应用在input
    function debounce(fun, delay) {
        let t = null;
        return function () {
            if (t !== null) {
                clearTimeout(t);
            }
            // 这里的函数this是指向input ，使用call方法，将run方法的this由window改为input
            t = setTimeout(() => { fun.call(this) }, delay);
        }
    } 
    
    function run() {
        console.log(this.value)
    }
    var inputer = document.querySelector("input")
    inputer.oninput = debounce(run, 500)


    // 节流：控制高频事件执行的次数，每多少秒执行一次
    // 节流经常应用在拖拽、scroll
    function throttle(fn, delay) {
        let flag = true
        return function () {
            if (flag) {
                setTimeout(() => {
                    fn()
                    flag = true
                }, delay)
            }
            flag = false;
        }
    }

    window.onscroll = throttle(function(){console.log("hello world")},1000)
</script>

异步函数Promise

es6新的规范能够正常使用，“期约”概念实际在198？几年就被提出来了。
在使用时，是使用创建实例的方式，拿下面例子来说传入一个箭头函数，函数有两个参数
前面的是resolve，后面的是reject。
resolve和reject分别可以传递一个参数，供then、catch使用

正常项目中，会在axios中进行接口调用的封装，把返回的结果传入resolve中，后面我们在使用的时候，就可以直接调then

let getTea = new Promise((resolve,reject) => {
	setTimeout(() => {
    	let flag = true
    	if(flag) {
			resolve("喝到奶茶");
		}else{
			reject("没喝到奶茶");
		}
    },1000)
})

let getHotpot = new Promise((resolve,reject) => {
	setTimeout(() => {
    	let flag = true
    	if(flag) {
			resolve("吃到火锅"); 
		}else{
			reject("miss");
		}
    },1000)
})
getTea.then((data) => console.log(data))   //喝到奶茶  此处的data是resolve 内传递的参数

getTea.then((data) => {
	console.log(data)
	return getHotpot
}).then((data) => {
	console.log(data)
}).catch((err) => {
	console.log(err)
}).finally(() => {
	console.log("一定会执行")
})

async && await

链接上面的getTea和getHotpot

async function fun() {
	let dataTea = await getTea;
	let dataHotpot = await getHotpot;
	console.log(dataTea)
	console.log(dataHotpot)
}
    //喝到奶茶
    // 吃到火锅

axios

npm 引入 CDN引入

<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios.get("/data/tea.txt").then((res) => {
		console.log(res.data)
		return axios.post("/data/hotPot.txt",{username:"w",password:123456})
	}).then((res) => {
		console.log(res.data)
	})

	// 发送 POST 请求 也可以这样写
	axios({
	  method: 'post',
	  url: '/user/12345',
	  data: {
	    firstName: 'Fred',
 	   lastName: 'Flintstone'
	  }
	});
</script>

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

ajax封装网络请求

//ajax  封装网络请求
function axios(method,url) {
	return new Promise((resolve,reject) => {
		let xhr = new XMLHttpRequest();
		xhr.onreadstatechange = function () {        //xhr.onreadstatechange 是绑定的方法 会自动执行
			if(xhr.readyState === 4) {             // xhr.readState 是发送请求的几个阶段 0 xhr.open()之前是0之后是1成功是4
				if(xhr.status === 200) {           // 响应头状态码 200 获取数据正常
					resolve(xhr.responseText)
				} else {
					reject("获取数据失败")   // 这里是状态码为其他值时，正常封装应该更具体
				}
			}
		}
		xhr.open(method,url)
		xhr.send()
	})	
}