有趣的JavaScript(2)

简介: 有趣的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内容变化


1. document.getElementById('oman').addEventListener('DOMSubtreeModified', () => {
2.         // 操作
3.       }, 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') {
   ...
 }
}

注意页面销毁时需要销毁这个事件

1. destroyed () {
2.  document.onkeyup = undefined // 关闭Enter登录按键事件
3. }


相关文章
|
消息中间件 Java Kafka
基于事件驱动的微服务架构设计与实现
基于事件驱动的微服务架构设计与实现
|
存储 前端开发 JavaScript
从零开始写一个Hexo主题
本文将会从零开始编写一个简单的Hexo博客主题,目的是了解一个Hexo博客主题的构成以及如何编写,因此,本示例中的博客页面样式不做过多描绘,样式主要参考 Hexo theme 中的 Noise 主题。
1081 1
从零开始写一个Hexo主题
|
缓存 Java Spring
Cacheable CacheEvict CachePut
Cacheable CacheEvict CachePut
80 0
|
编解码 供应链 数据安全/隐私保护
2023 年如何将您的应用提交到 App Store
您夜以继日地工作来创建您的梦想应用程序。最后,是时候向全世界宣布您的应用程序了。但不知道如何将您的应用提交到 App Store? 为您的商店获取现成的移动应用程序 将应用程序提交到 App Store 可能是一项复杂的任务。但在本指南的帮助下,事情会变得容易得多。这是一份详细指南,可帮助您顺利地将应用程序提交到 App Store。
|
Android开发
RK3399平台开发系列讲解(内核调试篇)2.29、PCIe debug方法
RK3399平台开发系列讲解(内核调试篇)2.29、PCIe debug方法
241 0
RK3399平台开发系列讲解(内核调试篇)2.29、PCIe debug方法
|
机器学习/深度学习 KVM 虚拟化
KVM部署-Centos7.6
KVM部署-Centos7.6
426 0
KVM部署-Centos7.6
|
弹性计算 云计算
ECS使用体验
我的ECS使用体验
|
算法 Python
<LeetCode天梯>Day041 打乱数组 | 初级算法 | Python
<LeetCode天梯>Day041 打乱数组 | 初级算法 | Python
<LeetCode天梯>Day041 打乱数组 | 初级算法 | Python
|
人工智能 自动驾驶 定位技术
自动驾驶要从梦想变成现实,首先要做到的两件事
本周自动驾驶领域成为AI行业的热点,不仅有越来越多的新玩家进入,比如芯片公司推出ADAS系统进军自动驾驶,而且还有更多企业间合作的开展,甚至一些量产车型还给出了时间表。当然,更多企业进入以及合作的达成,并不意味着,自动驾驶技术现在已经成熟。
1516 0