重学JS-006 --- JavaScript算法与数据结构（六）学习字符串和数组的基本方法

箭头函数

箭头函数是一种匿名函数表达式，是一种更简短的函数编写方式。
匿名是指函数没有名字。 箭头函数始终是匿名的。

基本语法如下：

// 无参箭头函数
() => {}

// 包含参数的箭头函数
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};
// 包含参数的箭头函数 简写
const greet = name => {
  console.log(`Hello, ${name}!`);
};

通过将箭头函数的定义赋给变量，可以将其与一个标识符绑定。

const exampleFunction = () => {
  // code goes here
  return "";
}

与常规函数一样，箭头函数可以返回值。

如果箭头函数返回一个简单的表达式，则可以省略 return 关键字和花括号 {}。 这被称为隐式返回。

const multiplyTwoNumbers = (num1, num2) => num1 * num2;

如果你的箭头函数在函数体中有多行代码，那么需要使用 return 关键字和花括号 {}。

数组 array

map()

map() 方法用于遍历数组并返回一个新数组。 当想根据现有数组的值创建新数组时，很有用。
举个例子：

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map((number) => number * 2); // doubledNumbers will be [2, 4, 6]

在上面的例子中，回调函数是 (number) => number * 2，它在 numbers 数组中的每个元素上运行。

注意，map() 方法接受函数作为参数。 这被称为回调函数，它是作为参数传递给另一个函数的函数。

join()

join() 方法用于将数组的所有元素连接成一个字符串。 它采用一个可选参数 separator，用于分隔数组的每个元素。

要将多个方法链接在一起，你可以在 map() 方法的结果上调用 join() 方法。 例如：

array.map().join();

sort()

sort() 方法将数组的元素转换为字符串，并根据 UTF-16 编码中的值对其进行排序。

sort() 方法接受定义排序顺序的比较回调函数。

sort() 方法期望返回一个数字。 如果返回负数，则第一项将排在第二项之前。
“Apples” 小于 “Bananas”，因为按字母表顺序，“A” 位于 “B” 之前，返回负数，如果还大于，返回正数；返回 0， 这意味着没有任何变化，并且顺序保持不变。

JavaScript 中的 sort()方法​​会改变原始数组​​（即“原地排序”）。它会对数组的元素进行排序，并返回排序后的数组，注意，这个返回值其实是原始数组的引用，而不是一个新数组。

find()

find() 方法检索数组中满足提供的回调函数中指定的条件的第一个元素。
如果没有元素满足条件，该方法返回 undefined。

indexOf()

indexOf() 数组方法返回在数组中找到给定元素的第一个索引，如果元素不存在，则返回 -1。

forEach()

forEach 方法用于循环遍历数组并对数组的每个元素执行函数。 例如，假设你有一个数字数组，并且你想要将每个数字记录到控制台。

const numbers = [1, 2, 3, 4, 5];

// Using forEach to iterate through the array
numbers.forEach((number) => {
  console.log(number); // 1, 2, 3, 4, 5
});

textContent 设置节点的文本并允许你设置或检索 HTML 元素的文本内容。

Math

Math.random()

随机化项目数组的一种方法是从 Math.random() 中减去 0.5，这会产生正数或负数的随机值。 这使得比较结果成为正值和负值的混合，从而导致元素的随机排序。

其他扩展

Audio()

了解 Web Audio API 以及如何使用它来播放歌曲。
所有现代浏览器都支持 Web Audio API，它允许在 Web 应用程序中生成和处理音频。

const audio = new Audio();
audio 属性：
audio.src 属性， 这告诉音频元素在哪里可以找到所选歌曲的音频数据。
audio.title 属性，这告诉音频元素要显示什么作为歌曲的标题。
audio.currentTime 的 currentTime 属性

audio 方法：
audio.play() : 播放歌曲，对 audio 变量使用 play() 方法。 play() 是来自网络音频 API 的用于播放 mp3 文件的方法。
audio.pause()：暂停歌曲，对 audio 变量使用 pause() 方法。 pause() 是 Web Audio API 用于暂停音乐文件的方法。

扩展运算符（...）

创建 allSongs 数组的副本而不改变原始数组。 这时 spread 操作符就派上用场了。

扩展运算符（...）允许你将一个数组中的所有元素复制到另一个数组中。 它还可用于将多个数组连接成一个。 在下面的例子中，arr1 和 arr2 都已扩展到 combinedArr：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

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

js 中 null 和 none 和 undefined 的区别

JavaScript 语言中没有 none这个概念。
none很可能是受到了其他编程语言（例如 Python，其空值表示为 None）的影响。

在 JavaScript 中，表示“空”或“无”的两个基本值是 null和 undefined。
它们都表示“没有值”，但在使用场景和含义上有一些重要区别。

为了更直观地展示它们的区别，看下表：

🔍 主要差异解读

1. ​​含义与使用场景​​
   • ​​undefined​​ 通常由 ​​JavaScript 引擎自动分配​​，表示一种“意外”或“自然”的空缺。例如：
   • 声明了变量但未赋值。
   • 调用函数时未提供参数。
   • 对象没有指定属性。
   • 函数没有返回值（默认返回 undefined）。
   • ​​null​​ 是一个 ​​主动赋值​​ 的量，表示“​​此处应有一个对象，但目前为空​​”。它常在你明确希望表示一个变量“没有对象值”时使用，例如主动释放一个对象引用。

2. ​​类型与 typeof操作符​​
   • null是 Null类型的唯一值。
   • undefined是 Undefined类型的唯一值。
   • 一个著名的 JavaScript“坑”是：typeof null返回 “object”。这是语言设计早期的遗留错误且无法修正。要准确判断 null，需使用 variable === null。

3. ​​相等性判断（== 与 =）​​
   • 使用​​非严格相等​​ () 比较时，null == undefined返回 true。这是语言规则规定的。
   • 使用​​严格相等​​ (===) 比较时，null === undefined返回 false，因为它们类型不同。

🧭 实践建议

• ​​如何选择？​​
• 多数情况下，如果你需要主动表示一个变量现在没有值（尤其是未来它应该包含对象时），请赋予 null，这能使意图更清晰。
• 对于 undefined，通常理解其产生场景即可，很少需要主动为其赋值。

• ​​如何检测？​​
• 检查是否为 undefined: variable === undefined
• 检查是否为 null: variable === null
• 检查是否为 null或 undefined(判断“假值”):
• variable == null​​(利用规则：null == undefined为 true)​​
• 或使用可选链操作符 (?.) 和空值合并操作符 (??) 等现代语法。
• ​​JSON 序列化​​
• null值会被 JSON.stringify()保留在 JSON 输出中。
• undefined在序列化时会被忽略（如果出现在对象属性中）或转换为 null（如果出现在数组中）。

💡 一句话总结

简单来说，​​undefined是 JavaScript 引擎告诉你“这里还没有值”的方式；而 null是你主动告诉 JavaScript 引擎“这里应该没有值”的方式​​。

aria-label

<button class="playlist-song-delete" aria-label="Delete"></button>

在HTML中，aria-label属性用于为元素提供一种​​无障碍名称​​（accessible name），这对于屏幕阅读器等辅助技术用户理解元素的用途至关重要，特别是在元素本身没有可见文本标签的情况下。

这个按钮可能只包含一个图标（例如垃圾桶图标），而没有显示“Delete”文本。
aria-label=“Delete” 会告知屏幕阅读器用户，​​这个按钮的功能是“删除”​​。当用户使用屏幕阅读器聚焦到这个按钮时，屏幕阅读器会读出类似“Delete button”的内容.

aria-label 最适合用于​​交互元素​​（如按钮、链接、表单控件）或具有特定角色（如地标角色、小部件角色）的元素，当这些元素​​缺乏可见的文本标签​​时

createElement()

createElement() 是一种 DOM 方法，可用于使用 JavaScript 动态创建元素。
要使用 createElement()，需要调用它，然后将标签名称作为字符串传入：

// syntax
document.createElement(tagName)

// example
document.createElement('div')

createTextNode()

createTextNode() 方法用于创建文本节点。 要使用它，你可以调用它并将文本作为字符串传入：

document.createTextNode("your text")

为元素属性赋值

需要为新创建的元素分配 id 和 aria-label 属性。
JavaScript 提供了你需要为此使用的 id 和 ariaLabel 属性。
element.id 将设置 id 属性，而 element.ariaLabel 将设置 aria-label 属性。 它们都以字符串形式接受它们的值。

classList()

add()
remove()

newButton.classList().add("play");
newButton.classList().remove("play");

removeAttribute()

removeAttribute() 方法删除 “aria-current” 属性

newButton.removeAttribute("aria-current");

setAttribute()

setAttribute 来传入 “aria-current” 和 “true” 作为第一个和第二个参数。

newButton.setAttribute("aria-current", "true");

appendChild()

appendChild() 允许添加一个节点或元素作为另一个元素的子元素。

删除元素 remove()

通过调用 resetButton 变量上的 remove() 方法从播放列表中删除重置按钮。

resetButton.remove();

监听器：ended

设置一个事件监听器来检测当前播放的歌曲何时结束。 “ended” 事件监听器适合这种情况。 当媒体播放结束时会触发此事件。

newButton.addEventListener("ended", next);

可选链接（?.）

可选链接（?.）有助于防止在访问可能为空或未定义的嵌套属性时出现错误。

renderSongs(userData?.songs);