添加元素到数组的方式以及监听事件杂谈

「爱情、让人受尽委屈。」 2022-09-14 08:43 106阅读 0赞

# 序 #

国庆闲来无事，写篇前端的技术杂谈，希望对大家有所帮助，主要会讲：

*  void(0)的意义
 *  添加元素到数组的六种方法
 *  监听事件

## void(0) ##

void(0)是比较常见的表达式,但它是什么作用呢？  
我们先看到void，在Javascript中void是一个操作符，该操作符可以传递任何表达式，但是返回值为undefined。由于无论在括号里输入什么，返回的都是undefined，所以我们常用0进行替代。  
常用的,我们再a标签中输入href="javascript:void(0);"阻止页面的跳转

## 添加元素到数组的六种方法 ##

1.  array.push()
2.  array.splice()
3.  array.unshift()
4.  array.concat()
5.  array.length
6.  扩展运算符

**array.push()**  
js数组中的push()方法可以直接将数字加在数组末尾

let array = [1,2,3];
    array.push(4);
    console.log(array); //[1,2,3,4]

**array.splice()**  
js数组中的splice方法**在原数组中进行删改**，它有三个参数array.splice(index,number,item1,…,itemX),第一个参数index表示从第几个参数开始进行删改，第二个参数number表示要删除几个参数，当number为0时就可以实现增加的效果，第三个参数item表示要增加的元素

let array = [1,2,3];
    array.splice(3,0,[4,5,6]);
    console.log(array); //[1,2,3,4,5,6]

**array.unshift()**  
js数组中的unshift方法在原数组中从数组开头添加元素

let array = [1,2,3];
    array.unshift(4);
    console.log(array); //[4,1,2,3]

**array.concat()**  
js数组中的concat方法相当于数组的拼接，concat() 方法不会更改现有数组。它总是返回一个新数组。可以使用任意数量的数组参数

let array = [1,2,3];
    let newArr = array.concat(5,[6,7],8);
    console.log(newArr); //[1,2,3,5,6,7,8]

**arr.length**  
length 属性提供了一种在不使用 push() 方法的情况下将新元素附加到数组的简便

let array = [1,2,3];
    array[array.length] = 4; //相当于array[3] = 4;
    console.log(array); //[1,2,3,4];

**扩展运算符**

const arr1 = [1,2,3,4];
    const arr2 = [5,6,7];
    const arr3 = [...arr1,...arr2];
    console.log(arr3); //[1,2,3,4,5,6,7]

## 监听事件 ##

我们想要监听事件，首先需要获取到需要监听事件的标签，获取dom上的标签有以下几种形式：

1.  getElementsByClassName() ：使用指定的calss属性值返回相关元素的集合(节点列表)
2.  getElementsByTagName() : 返回带有指定标签名(例如input，div等）对象的集合。
3.  const container = querySelector(’"\#container");  
    container.children  
    返回标签下所有对应的子标签
4.  const white = document.querySelector(".white");  
    获取标签下方紧邻的节点  
    white.nextElementSibling  
    获取标签上方紧邻的节点  
    white.preElementSibling

**监听事件方法:**  
addEventListener(eventName, listener)  
eventName: string,事件名,当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。  
listener: function，事件监听函数,指定要事件触发时执行的函数。

[事件大全][Link 1]

[Link 1]: https://www.runoob.com/jsref/dom-obj-event.html