有趣的JavaScript（2）

迈不过友情╰ 2023-10-03 09:22 1阅读 0赞

**目录**

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)

--------------------