javascript 数组的常用方法、dom操作、js数据结构处理

数组的常用方法

JavaScript 中的数组是一种可以容纳多个元素的数据结构。为了方便操作数组，JavaScript 内置了许多与数组相关的方法，这些方法主要包括以下几个方面：

增加或删除元素

• push: 向数组的末尾添加一个或多个元素，并返回新数组的长度。
• pop: 从数组的末尾删除一个元素，并返回该元素的值。
• unshift: 向数组的开头添加一个或多个元素，并返回新数组的长度。
• shift: 从数组的开头删除一个元素，并返回该元素的值。
• splice: 在指定位置添加、删除或替换元素。

arr.splice(startIndex, deleteCount, item1, item2, ...)
// 其中，startIndex 表示要操作的起始位置，deleteCount 表示要删除的个数，item1、item2 等表示要添加的元素。

数组合并和拆分

• concat: 将两个或多个数组合并成一个新数组，原数组不会被修改。
• join: 将数组中的所有元素连接成一个新字符串。
• slice: 返回一个新的数组对象，即从原数组中截取一部分元素作为新数组返回，不会修改原数组。

arr.slice(startIndex, endIndex)
// 其中，startIndex 表示起始位置（包含在内），endIndex 表示结束位置（不包含在内）。

数组筛选和变形

• filter: 返回一个新数组，该数组中的元素是原数组中满足条件的元素。
• map: 返回一个新数组，该数组中的元素是原数组中每个元素经过处理后的结果。
• reduce: 对数组中的所有元素执行指定操作，最终返回一个结果。

arr.reduce((accumulator, currentValue, currentIndex, array) => {
  // ...
}, initialValue)
// 其中，accumulator 表示累加器的初始值，currentValue 表示当前元素的值，currentIndex 表示当前元素的索引，array 表示原数组，initialValue 表示累加器的起始值（可选参数）。

数组排序和查找

• sort: 对数组进行排序，默认按照字符串的 Unicode 编码顺序进行排序。
• reverse: 反转数组的顺序。
• indexOf: 返回数组中指定元素的第一个索引，如果未找到则返回 -1。
• lastIndexOf: 返回数组中指定元素的最后一个索引，如果未找到则返回 -1。

还有其他方法，这里只列举了一些常用方法，可以根据实际需要选择使用。

原生dom操作

在 JavaScript 中，可以使用原生的 DOM API 操作 HTML 文档中的元素。以下是常见的原生 DOM 操作：

获取元素

• document.getElementById(id)：根据元素的 ID 获取该元素。
• document.getElementsByClassName(className)：根据元素的类名获取所有匹配元素的一个 NodeList 对象。
• document.getElementsByTagName(tagName)：根据标签名获取所有匹配元素的一个 NodeList 对象。
• document.querySelector(selector)：根据 CSS 选择器获取匹配的第一个元素。
• document.querySelectorAll(selector)：根据 CSS 选择器获取所有匹配元素的一个 NodeList 对象。

操作元素属性

• element.getAttribute(name)：获取指定元素的指定属性值。
• element.setAttribute(name, value)：设置指定元素的指定属性为指定的值。
• element.removeAttribute(name)：删除指定元素的指定属性。
• element.classList：获取元素的类名列表，可用于添加、删除或切换类名。

操作元素内容

• element.innerHTML：获取或设置元素内的 HTML 内容。
• element.innerText：获取或设置元素内的文本内容。
• element.textContent：获取或设置元素内的纯文本内容。

操控元素样式

• element.style.property：获取或设置元素的某个样式属性。
• element.className：获取或设置元素的类名，可用于添加、删除或切换类名。

操作元素事件

• element.addEventListener(event, function)：为元素添加事件监听器。
• element.removeEventListener(event, function)：从元素移除事件监听器。

创建或删除元素

• document.createElement(tagName)：创建指定标签名的元素节点。
• element.appendChild(node)：将指定节点添加为当前节点的最后一个子节点。
• element.insertBefore(node, referenceNode)：在当前节点的子节点列表中，将指定节点插入到指定参考节点之前。
• element.removeChild(node)：将指定节点从当前节点的子节点列表中删除。

以上是一些常见的原生 DOM 操作，可以根据具体的需求选择使用哪些方法。需要注意的是，在操作 DOM 时应当尽可能避免直接操作 innerHTML，以防止 XSS 攻击。建议使用其他 API 进行操作。

js数据结构处理

JavaScript 中常用的数据结构包括数组、对象、栈、队列、链表、二叉树等。以下是一些常见的数据结构及其处理方法：

数组(Array)

• push()：在数组的末尾添加一个或多个元素。
• pop()：删除并返回数组的最后一个元素。
• unshift()：在数组的开头添加一个或多个元素。
• shift()：删除并返回数组的第一个元素。
• splice()：在指定位置删除、插入或替换元素。
• slice()：截取数组的一部分作为新数组返回。

对象(Object)

• 属性访问器：使用.或[]来访问和修改对象的属性值。
• for…in 循环：遍历对象的可枚举属性。
• Object.keys(obj) / Object.values(obj)：返回对象的所有键或所有值。
• Object.assign(target, source1, source2, …)：将一个或多个对象的属性拷贝到目标对象中。

栈(Stack)

• push()：将元素压入栈。
• pop()：从栈顶弹出并返回元素。
• peek()：查看栈顶元素。

队列(Queue)

• enqueue()：将元素加入队列。
• dequeue()：从队列头部移除并返回元素。
• peek()：查看队列头部元素。

链表(Linked List)

• 添加节点：创建一个节点对象，设置节点值，然后将该节点连接到链表中。
• 删除节点：找到需要删除的节点，将该节点的前一个节点的 next 属性指向该节点的 next 属性。

二叉树(Binary Tree)

• 深度优先搜索(DFS)：使用递归或栈实现。
• 广度优先搜索(BFS)：使用队列实现。

以上是一些常见的数据结构及其处理方法，可以根据需要选择合适的数据结构以及相应的处理方法。

ES6常用语法

ES6(ES2015)是 ECMAScript 的第六个版本，带来了许多新的语言特性和改进。以下是一些 ES6 中比较常用的语法和功能：

let 和 const

• let：用于定义块级作用域变量。
• const：用于定义块级作用域常量。

解构赋值

• 数组解构赋值：将数组中的元素赋值给多个变量。
• 对象解构赋值：将对象中的属性赋值给同名变量。

箭头函数

• 简化函数定义：使用箭头函数可以省略 function 关键字和大括号。
• 改变 this 指向：箭头函数中的 this 始终指向其外层作用域的 this。

模板字符串

• 可以在字符串中插入变量。
• 可以使用多行字符串。

扩展运算符

• 可以在字符串中插入变量。
• 可以使用多行字符串。

扩展运算符

• 可以将数组或对象展开为独立的元素。
• 可以将多个参数合并为一个数组。
• 可以复制一个数组或对象。

Promise

• 用于异步编程，解决回调地狱问题。
• 可以链式调用，更加便于处理异步任务。

类和继承

• 使用 class 关键字定义类。
• 使用 extends 关键字实现继承。

模块化

• 使用 import 和 export 关键字进行模块化导入和导出。

以上是一些 ES6 中比较常用的语法和功能，可以根据具体的需求选择使用哪些特性。ES6 中还有许多其他的新特性，如迭代器、生成器、Set 和 Map 数据结构等，在实际开发中也很有用。