JavaScript

YXT 1/15/2024 JavaScript

# JavaScript(自用)

# Array方法

# push()

push() (opens new window) 方法在数组末尾添加一个或多个元素，并返回数组操作后的 length。

const myArray = ["1", "2"];
myArray.push("3"); // myArray 现在是 ["1", "2", "3"]

1
2

# pop()

pop() (opens new window) 方法从数组移出最后一个元素，并返回该元素。

const myArray = ["1", "2", "3"];
const last = myArray.pop();
// myArray 现在是 ["1", "2"]，last 为 "3"

1
2
3

# shift()

shift() (opens new window) 方法从数组移出第一个元素，并返回该元素。

const myArray = ["1", "2", "3"];
const first = myArray.shift();
// myArray 现在是 ["2", "3"]，first 为 "1"

1
2
3

# unshift()

unshift() (opens new window) 方法在数组开头添加一个或多个元素，并返回数组的新长度。

const myArray = ["1", "2", "3"];
myArray.unshift("4", "5");
// myArray 变成了 ["4", "5", "1", "2", "3"]

1
2
3

# slice()

slice() (opens new window) 方法从数组提取一个片段，并作为一个新数组返回。

let myArray = ["a", "b", "c", "d", "e"];
myArray = myArray.slice(1, 4); // [ "b", "c", "d"]
// 从索引 1 开始，提取所有的元素，直到索引 3 为止

1
2
3

# sort()

sort() (opens new window) 方法对数组的元素进行适当的排序，并返回对数组的引用。

const myArray = ["Wind", "Rain", "Fire"];
myArray.sort();
// 对数组排序，myArray = ["Fire", "Rain", "Wind"]

1
2
3

sort() 也可以接受回调函数来决定如何比较数组元素。使用两个参数调用回调函数，它们是来自数组的两个值。该函数比较这两个值并返回正数、负数或零，表示这两个值的顺序。例如，以下命令将根据字符串的最后一个字母对数组进行排序：

const sortFn = (a, b) => {
  if (a[a.length - 1] < b[b.length - 1]) {
    return -1; // 负数 => a < b，a 在 b 之前
  } else if (a[a.length - 1] > b[b.length - 1]) {
    return 1; // 正数 => a > b，a 在 b 之后
  }
  return 0; // 0 => a = b，a 和 b 保持原来的顺序
};
myArray.sort(sortFn);
// 对数组排序，myArray = ["Wind","Fire","Rain"]

1
2
3
4
5
6
7
8
9
10

# map()

map() (opens new window) 方法返回由每个数组元素上执行 callback 的返回值所组成的新数组。

const a1 = ["a", "b", "c"];
const a2 = a1.map((item) => item.toUpperCase());
console.log(a2); // ['A', 'B', 'C']

1
2
3

# filter()

filter() (opens new window) 方法返回一个新数组，其中包含 callback 返回 true 的元素。

const a1 = ["a", 10, "b", 20, "c", 30];
const a2 = a1.filter((item) => typeof item === "number");
console.log(a2); // [10, 20, 30]

1
2
3

# reduce()

reduce() 方法对数组中的每个值执行 callback(accumulator, currentValue, currentIndex, Array)，目的是将列表中的元素减少到单个值。reduce 函数返回 callback 函数返回的最终值。

如果指定了 initialValue，则调用 callback，并将 initialValue 作为第一个参数值，将数组中第一个元素的值作为第二个参数值。
如果没有指定 initialValue，那么 callback 的前两个参数值将是数组的第一个和第二个元素。之后的每一次调用，第一个参数的值将是前一个调用中返回的 callback，第二个参数的值将是数组中的下一个值。如果 callback 需要访问正在处理的元素的索引，或者访问整个数组，它们可以作为可选参数。

const a = [10, 20, 30];
const total = a.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0,
);
console.log(total); // 60

1
2
3
4
5
6

# Set与Map

# Map的基本使用与遍历

const map = new Map();
map.set("aaa", "aaa");
map.set("bbb", "bbb");
console.log(map.size);
//遍历
for(const [key, value] of map){
	console.log(`${key} goes ${value}`);
	//ES6写法
}

1
2
3
4
5
6
7
8
9

# Set的基本操作

Set 对象是一组唯一值的集合，可以按照添加顺序来遍历。Set 中的值只能出现一次；它在集合 Set 中是唯一的。

const mySet = new Set();
mySet.add(1);
mySet.add("some text");
mySet.add("foo");

mySet.has(1); // true
mySet.delete("foo");
mySet.size; // 2

for (const item of mySet) {
  console.log(item);
}
// 1
// "some text"

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 数组和 Set 之间的转换

可以使用 Array.from (opens new window) 或展开语法来完成集合到数组的转换。同样，Set 的构造函数接受数组作为参数，可以完成从 Array 到 Set 的转换。

[!info] 说明 展开语法就是使用 ... 对名称进行修饰，直接放入数组中，是ES6新引入的语法。例：
const set = new Set();
set.add("aaa");
set.add("bbb");
set.add("ccc");
const toArray = [...set];
1
2
3
4
5

# Promise

Promise 是一个对象，它代表了一个异步操作的最终完成或者失败。

doSomething()
  .then((result) => doSomethingElse(result))
  .then((newResult) => doThirdThing(newResult))
  .then((finalResult) => {
    console.log(`得到最终结果：${finalResult}`);
  })
  .catch(failureCallback);

1
2
3
4
5
6
7

可以给 promise 加上 resolve() 和 reject() 表示成功或者失败。

doSomething() 
.then((result){
	  doSomethingElse(result);
	  resolve();
}) 
.catch(e => console.log(e));

1
2
3
4
5
6

[!warning] 注意 () => x 是() => { return x; } 的简写。

# Async 和 await()

async 函数是使用async关键字声明的函数。async 函数是 AsyncFunction (opens new window) 构造函数的实例，并且其中允许使用 await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise (opens new window) 的异步行为，而无需刻意地链式调用 promise。

async funtion aaa(){
	setTimeOut(() => {
		console.log(111);
	},1000);
}
await aaa();

1
2
3
4
5
6

# JavaScript 的 DOM 操作

# 获取元素

使用 document.querySelector() 函数获取需要的元素。

document.querySelector(".name");

里面放的是CSS的选择器。

使用 document.querySelectorAll() 函数获取所有需要的元素。该方法会返回一个Node数组，通过对数组的操作访问每一个对象。

document.getElementsByTagName() document.getElementsByClassName() document.getElementsByName() 都是返回一个数组。

# 获取元素内容

textContent属性返回当前节点和它的所有后代节点的文本内容。

// HTML 代码为
// <div id="divA">This is <span>some</span> text</div>
document.getElementById('divA').textContent
// This is some text

1
2
3
4

textContent属性自动忽略当前节点内部的 HTML 标签，返回所有文本内容。

# 父子结点的选择与操作

# 返回第一个元素

firstChild 属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回 null 。

# 返回所有子元素

childNodes 属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点。

1. var div = document.getElementById('div1');
2. var children = div.childNodes;
3.
4. for (var i = 0; i < children.length; i++) {
5. // ...
6. }

1
2
3
4
5
6

# 创建元素

appendChild()方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。

 var p = document.createElement('p');
 document.body.appendChild(p);

1
2

# 在开头插入HTML 元素

如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

# 删除 HTML 元素

removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

divA.parentNode.removeChild(divA);

# 替换 HTML 元素

我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。

# Document操作

# parentNode属性

parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。

1. if (node.parentNode) {
2.   node.parentNode.removeChild(node);
3. }

1
2
3

上面代码中，通过node.parentNode属性将node节点从文档里面移除。

# 添加事件监听器

document.addEventListener()方法用于处理 document 节点的事件。它们都继承自EventTarget 接口

# 属性操作

元素节点提供六个方法，用来操作属性。

getAttribute()
getAttributeNames()
setAttribute()
hasAttribute()
hasAttributes()
removeAttribute()

# 设置一个元素的属性

Element.setAttribute() 用来设置一个元素的属性。

1. `var b = document.querySelector('button');`
2. `b.setAttribute('name', 'myButton');`
3. `b.setAttribute('disabled', true);`

1
2
3

# 删除一个元素的某一个属性

Element.removeAttribute()用来删除一个元素的某一个属性。

# CSS 操作

直接设置就行，没什么

const button = document.querySelector("button");
button.style.color = 'red';

1
2

# 改变HTML内容

document.getElementById(id).innerHTML=新的 HTML

# 对class进行操作

className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。

classList 属性返回一个类似数组的对象，当前元素节点的每个 class 就是这个对象的一个成员。

_classList_对象有下列方法。

add()：增加一个 class。
remove()：移除一个 class。
contains()：检查当前元素是否包含某个 class。
toggle()：将某个 class 移入或移出当前元素。
item()：返回指定索引位置的 class。
toString()：将 class 的列表转为字符串。

const button = document.querySelector("button");
button.classList.add("enable");
// 没有就加入，有就删除，
button.classList.toggle("enable");

1
2
3
4

# JavaScript杂项内容

# JavaScript小数保留

JavaScript对于小数使用 toFixed()函数进行精度控制。

示例代码:

let num = 0.11111122;
console.log(num.toFixed(2));
===============================
Run
0.11

1
2
3
4
5

# 闭包

JavaScript 允许使用内部函数，内部函数可以访问外部函数中的所有局部变量、参数和声明的其他内部函数。当其中一个内部函数在外部函数以外被调用时，就会形成闭包。

示例代码：

function fun1() {
    var num = 999;
    numAdd = function () {
        num += 1;
    };
    function fun2() {
        alert(num);
    }
    return fun2;
}
var result = fun1();  //注意！这里返回的是一个函数，fun1()返回了一个函数fun2()
result(); // ====> 999 (这里调用的实际上是fun2)
numAdd();
result(); // ====> 1000

1
2
3
4
5
6
7
8
9
10
11
12
13
14

[!info] 解释在这段代码中，result 实际上就是闭包 fun2 函数。它一共运行了两次，第一次的值是 999，第二次的值是 1000。

# 返回值是函数的情况

当返回值是一个函数的时候，这个函数也可以返回值（当然可以也是函数），这意味着此函数调用时要跟多个函数。

示例代码：

function test(){
	return{
		a: () => {
			return "function A";
		},
		b: () => {
			return "function B";
		}
	}
}

console.log(test().a())  // ====> "function A"
console.log(test().b())  // ====> "function B"

1
2
3
4
5
6
7
8
9
10
11
12
13

# options的多选问题

HTML 的 select 属性可以通过 JavaScript 直接访问。

HTML:

<select multiple id="select">
	<option value="A">A</option>
	<option value="B">A</option>
	<option value="C">A</option>
</select>

1
2
3
4
5

JavaScript：

	const select = document.querySelector("#select").value;

# 拖拽事件

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。首先，为了使元素可拖动，把draggable 属性设置为 true 拖动什么 - ondragstart 放到何处 - ondragover ondragover 事件规定在何处放置被拖动的数据。

进行放置 - ondrop，当放置被拖数据时，会发生 drop 事件

当我们需要对一个元素进行拖拽时，有以下步骤：

给此元素定义 draggable 属性为 true。

```

[!info] 解释

当用户开始拖拽时，会触发 dragstart 事件。

用户在拖拽途中，会触发 dragOver 事件。一般不需对这个函数进行操作。

当用户放开鼠标，拖放操作就会结束。如果在有效的放置目标元素（即取消了 dragenter (opens new window) 或 dragover (opens new window) 的元素）上放开鼠标，放置会成功实现，drop (opens new window) 事件在目标元素上被触发。否则，拖拽会被取消，不会触发 drop (opens new window) 事件。

JavaScript

let draggedPiece = null;

function drag(event){
	draggedPiece = this;
    event.dataTransfer.setData('text/plain', null);
}

function dragOver(event) {
	//阻止默认操作执行
    event.preventDefault();
}

function drop(event) {
    if (draggedPiece !== this) {

    }
    // 重置正在拖动的元素
    draggedPiece = null;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# DataTransfer

DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。

常用方法

操作	实现
DataTransfer.getData()	检索给定类型的数据，如果该类型的数据不存在或 data transfer 不包含数据，则返回空字符串。
DataTransfer.setData()	设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。

getData() 方法接收一个参数，取回数据的类型。这个方法会返回拖拽操作开始时调用 setData() 方法设置的字符串值。如果不存在传入类型的数据，则会返回空字符串。自然，你应该知道哪种类型的数据可用，因为之前你应该已经在 dragover 事件中检查过数据类型了。

在一个网页中，如果你想接收一个放置，不想让浏览器的默认处理程序处理放置数据，你应该调用事件的 preventDefault() (opens new window) 方法。例如，当拖拽一个链接到网页时，Firefox 会打开这个链接。而你可以通过取消事件来阻止这样的行为。

Pinia

卖鱼の猫

JavaScript

JavaScript

# JavaScript(自用)

# Array方法

# push()

# pop()

# shift()

# unshift()

# slice()

# sort()

# map()

# filter()

# reduce()

# Set与Map

# Map的基本使用与遍历

# Set的基本操作

# 数组和 Set 之间的转换

# Promise

# Async 和 await()

# JavaScript 的 DOM 操作

# 获取元素

# 获取元素内容

# 父子结点的选择与操作

# 返回第一个元素

# 返回所有子元素

# 创建元素

# 在开头插入HTML 元素

# 删除 HTML 元素

# 替换 HTML 元素

# Document操作

# parentNode属性

# 添加事件监听器

# 属性操作

# 设置一个元素的属性

# 删除一个元素的某一个属性

# CSS 操作

# 改变HTML内容

# 对class进行操作

# JavaScript杂项内容

# JavaScript小数保留

# 闭包

# 返回值是函数的情况

# options的多选问题

# 拖拽事件

# DataTransfer