有趣的JavaScript（2）
作者：互联网
目录
1. Array.flat()扁平化方法
flat()本质就是归纳、合并的操作，它会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中元素合并为一个新数组
//flat()方法最基本的作用就是数组降维
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]
2.扩展运算符的应用
2.1 将数组元素迭代为函数参数使用
myFunc (a, b, c) {
console.log(a, b, c)
}
let arr = [0, 1, 2]
myFunc(...arr)
// 输出1 2 3
…arr返回的是数组的各个元素而不是数组本身，只有[…arr]才是一个数组，所以对方法传参可以在括号内用…arr扩展运算符
2.2 替代push()、concat()等方法构造字面量数组
let arr1 = [1, 2, 3]
let arr2 = [...arr1,4]
// 相当于push()操作，arr2为[1, 2, 3, 4]
let arr3 = [...arr1, ...arr2]
// 相当于concat()操作，arr3为[1, 2, 3, 1, 2, 3, 4]字面量数组就是一眼就能看出明确数值大小的常数数组
3. 一元加号+布尔类型的类型转换
console.log(+true) // 输出1+true，一元加号会把布尔类型转换为数字类型，此时true会被转换为1，false被转换为0
4.监视窗口大小变化方法
window.addEventListener('resize', () => {
this.$nextTick(() => {
// 操作
})
}, false)
5.监视某个对象(div)的html内容变化
document.getElementById('oman').addEventListener('DOMSubtreeModified', () => {
// 操作
}, false)
6.滚动条问题
如果height控制不好就容易出现滚动条，不能随便上来就是height100%，最好用calc( 100% - 10px )精确把控
7. 纯函数
一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有什么副作用，这种函数被叫做纯函数。纯函数不会对外部产生影响，不会产生外部可观察的变化
例如：
function sum(a,b){
return a+b;
}
该函数总是返回相同的结果，不会出现改变了函数外部变量的情况8.数组赋值取值
手动设置的超过数组长度的元素时，JS会创建空插槽补上中间空缺的元素，其值为
undefined。输出整个数组时，这些空插槽表现为空，但不是null
const arr = [1,2]
arr[5]= 3
console.log(arr); //[1, 2, empty × 3, 3]
console.log(arr[4]); //undefined
9.按enter键/回车键查询或触发事件
给页面绑定键盘按键事件
onkeyup
document.onkeyup = (e) => {
if (e.code === 'Enter') {
...
}
}
注意页面销毁时需要销毁这个事件
destroyed () {
document.onkeyup = undefined // 关闭Enter登录按键事件
}
标签：flat,arr,...,JavaScript,arr3,arr2,数组,有趣 来源： https://blog.csdn.net/wanghaoyingand/article/details/118279003