ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

有趣的JavaScript(2)

2021-06-27 21:02:08  阅读:184  来源: 互联网

标签:flat arr ... JavaScript arr3 arr2 数组 有趣


目录

1. Array.flat()扁平化方法

2.扩展运算符的应用

3. 一元加号+布尔类型的类型转换

4.监视窗口大小变化方法  

5.监视某个对象(div)的html内容变化 

6.滚动条问题 

7. 纯函数 

8.数组赋值取值

9.按enter键/回车键查询或触发事件 


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有