JavaScript知识系列（6）每天10个小知识点（二）

56.JS实现字符串的增、删、查、改、过滤的功能，请列出多种方法

以下是 JavaScript 中实现字符串的增、删、查、改、过滤功能的多种方法：

1. 字符串增加（追加）字符：

// 使用字符串拼接
const str1 = "Hello";
const newStr1 = str1 + " World";
// 使用字符串连接方法 concat()
const str2 = "Hello";
const newStr2 = str2.concat(" World");
// 使用模板字符串
const str3 = "Hello";
const newStr3 = `${str3} World`;

2. 字符串删除字符：

// 使用字符串的 slice() 方法
const str = "Hello, World!";
const newStr = str.slice(0, 5) + str.slice(7);
// 使用字符串的 replace() 方法
const str = "Hello, World!";
const newStr = str.replace(", ", "");
// 使用正则表达式替换
const str = "Hello, World!";
const newStr = str.replace(/, /g, "");
// 使用字符串的 substring() 方法
const str = "Hello, World!";
const newStr = str.substring(0, 5) + str.substring(7);

3. 字符串查找字符：

// 使用字符串的 indexOf() 方法
const str = "Hello, World!";
const index = str.indexOf("W");
// 使用字符串的 includes() 方法
const str = "Hello, World!";
const isFound = str.includes("W");
// 使用正则表达式匹配
const str = "Hello, World!";
const pattern = /W/;
const isFound = pattern.test(str);

4. 字符串修改字符：

// 使用字符串的 replace() 方法
const str = "Hello, World!";
const newStr = str.replace("World", "Universe");
// 使用正则表达式替换
const str = "Hello, World!";
const newStr = str.replace(/World/g, "Universe");
// 使用字符串的 substring() 方法
const str = "Hello, World!";
const newStr = str.substring(0, 7) + "Universe" + str.substring(14);

5. 字符串过滤字符：

// 使用字符串的 split() 方法和 join() 方法
const str = "Hello, World!";
const newStr = str.split(" ").filter(word => word !== "World").join(" ");
// 使用正则表达式替换
const str = "Hello, World!";
const newStr = str.replace(/World/g, "");
// 使用字符串的 substring() 方法
const str = "Hello, World!";
const newStr = str.substring(0, 7) + str.substring(14);

这些是一些常见的方法，用于实现字符串的增、删、查、改、过滤功能。具体选择哪种方法取决于你的需求和代码的复杂性。需要注意的是，JavaScript 中的字符串是不可变的，因此这些方法都会返回新的字符串，而不会修改原始字符串。

以下是 JavaScript 中实现字符串过滤和去重功能的多种方法：

字符串的过滤：

1. 使用正则表达式过滤非指定字符：

const str = 'Hello,123World!';
const pattern = /[^A-Za-z\\s]/g;
const filteredStr = str.replace(pattern, ''); // 过滤非字母和空格字符

1. 使用循环和条件判断过滤字符：

const str = 'Hello,123World!';
let filteredStr = '';
for (const char of str) {
  if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z') || char === ' ') {
    filteredStr += char;
  }
}

1. 使用 filter() 方法和正则表达式：

const str = 'Hello,123World!';
const pattern = /[^A-Za-z\\s]/g;
const charArray = str.split('');
const filteredArray = charArray.filter(char => !char.match(pattern));
const filteredStr = filteredArray.join('');

字符串的去重：

1. 使用 Set 数据结构（ES6）：

const str = 'Hello, World!';
const uniqueChars = [...new Set(str)].join(''); // 去重字符串中的字符

1. 使用对象属性去重：

const str = 'Hello, World!';
const uniqueStr = '';
const charCount = {};
for (const char of str) {
  if (!charCount[char]) {
    uniqueStr += char;
    charCount[char] = true;
  }
}

1. 使用 filter() 方法和 indexOf() 去重：

const str = 'Hello, World!';
const charArray = str.split('');
const uniqueArray = charArray.filter((char, index, self) => self.indexOf(char) === index);
const uniqueStr = uniqueArray.join('');

这些方法都可以用来实现字符串的过滤和去重功能，具体选择哪种方法取决于你的代码和项目的需求。根据需求选择合适的方法，以满足你的字符串处理需求。

57.JS中new操作符具体做了什么

在 JavaScript 中，new 操作符用于创建一个新对象，并将构造函数（constructor）与该对象关联，然后返回这个新对象。它具体做了以下几件事情：

1. 创建一个新的空对象：new 操作符首先创建一个新的空对象，这个对象将成为构造函数的实例。
2. 关联构造函数：将这个新对象的原型属性（__proto__）关联到构造函数的原型对象（prototype）。这样，新对象就可以访问构造函数原型上的属性和方法。
3. 执行构造函数：将构造函数作为一个普通函数调用，同时将新对象作为函数内部的 this 对象。这允许构造函数初始化新对象的属性。
4. 返回新对象：如果构造函数没有明确返回一个对象，则 new 操作符会返回新创建的对象。如果构造函数显式返回一个对象，那么返回的就是这个对象，而不是新创建的对象。

下面是一个示例，说明 new 操作符的工作原理：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const person1 = new Person("Alice", 30);
console.log(person1.name); // 输出 "Alice"
console.log(person1.age);  // 输出 30

在这个示例中，new Person("Alice", 30) 创建了一个 Person 构造函数的实例，并将构造函数中的属性赋值给了 person1 对象。person1 现在就是一个 Person 对象的实例。

58.var、let、const的概念、作用、原理、特性、优点、缺点、区别、使用场景

在 JavaScript 中，var、let 和 const 都用于声明变量，但它们之间有一些重要的区别：

1. 作用域（Scope）：

• var：具有函数作用域（function scope），在函数内部声明的变量在整个函数范围内可见。
• let 和 const：具有块级作用域（block scope），在块（如 { ... }）内部声明的变量只在该块范围内可见。

2. 变量提升（Hoisting）：

• var：变量声明会提升到其所在函数或全局作用域的顶部，但初始化（赋值）不会提升。这意味着你可以在声明之前访问 var 变量，但它的值会是 undefined。
• let 和 const：变量声明不会被提升，如果在声明之前访问 let 或 const 变量，会引发暂时性死区（Temporal Dead Zone，简称 TDZ）错误。

3. 重复声明：

• var：允许在同一作用域内重复声明同一个变量，后面的声明会覆盖前面的。
• let 和 const：不允许在同一作用域内重复声明同一个变量，否则会引发语法错误。

4. 初始化：

• var：声明时如果不初始化，变量会被赋予 undefined 值。
• let 和 const：声明时如果不初始化，变量不会被赋予初始值，而是保持未定义状态。

5. 全局对象属性：

• var：使用 var 声明的全局变量会成为全局对象（如 window）的属性。
• let 和 const：在全局作用域中使用 let 和 const 声明的变量不会成为全局对象的属性。

6. 可变性：

• var：var 声明的变量可以随时被重新赋值。
• let：let 声明的变量可以被重新赋值，但不允许重新声明。
• const：const 声明的变量是常量，一旦赋值就不能再次赋值，也不允许重新声明。

7. 适用场景：

• var：在 ES6 之前主要用于声明全局变量或具有特定需求的变量。
• let：推荐用于大多数变量声明，尤其是在块级作用域内。
• const：用于声明常量，不会被重新赋值的变量，也可用于块级作用域内的变量。

总之，let 和 const 是 ES6 引入的新变量声明方式，它们更安全、可预测，具有块级作用域，推荐在现代 JavaScript 中使用它们，尤其是在替代 var 的情况下。选择 let 还是 const 取决于变量是否需要重新赋值。

var、let 和 const 是 JavaScript 中用于声明变量的关键字，它们具有不同的特性和适用场景。

概念和作用：

1. var：var 是早期 JavaScript 中声明变量的方式，具有函数作用域（function scope）。它的作用是声明一个变量，并可赋予变量初始值。var 声明的变量在整个函数内部可见。
2. let：let 是 ES6（ECMAScript 2015）引入的声明变量的方式，具有块级作用域（block scope）。它的作用是声明一个变量，并可赋予变量初始值。let 声明的变量只在当前块（包括函数块、循环块等）内可见。
3. const：const 也是 ES6 引入的声明变量的方式，同样具有块级作用域。它的作用是声明一个常量，并必须在声明时赋予初始值，之后不可再次赋值。const 声明的常量只在当前块内可见。

原理和特性：

• var：具有变量提升（hoisting）特性，变量声明会被提升到当前作用域的顶部，但初始化（赋值）不会提升。var 声明的变量可以重复声明，而且在全局作用域下会成为全局对象的属性。
• let 和 const：不具备变量提升特性，存在暂时性死区（Temporal Dead Zone，简称 TDZ），必须在声明后才能访问。不允许重复声明相同的变量。不会成为全局对象的属性。

优点和缺点：

• var：

• 优点：兼容性好，在 ES5 及以下环境中使用。
• 缺点：存在变量提升和全局污染问题，作用域容易混淆。

• let：

• 优点：避免了变量提升，更安全，更符合预期的块级作用域。
• 缺点：在一些旧的浏览器中可能不支持。

• const：

• 优点：常量声明，值不可变，增强代码的可读性和可维护性。
• 缺点：必须在声明时赋予初始值，不可重新赋值，不能用于循环中的计数器等。

区别和使用场景：

• var 适用于早期 JavaScript 环境，但不建议在现代代码中使用，因为它容易引发问题。
• let 是通用的变量声明方式，适用于大多数情况，特别是在需要块级作用域的场景。
• const 适用于常量的声明，值不可变的情况，提高代码的可读性和安全性。常用于声明不需要重新赋值的变量。

总之，推荐在现代 JavaScript 项目中使用 let 和 const，避免使用 var，以提高代码的可维护性和可读性。选择 let 还是 const 取决于变量是否需要重新赋值。

59.localStorage、sessionStorage、cookie的概念、作用、原理、特性、优点、缺点、区别、使用场景

localStorage、sessionStorage 和 cookie 都是用于在浏览器端存储数据的机制，但它们有不同的特性和适用场景。

localStorage:

• 概念：localStorage 是 Web Storage API 提供的一种本地存储机制，允许将数据以键值对的形式存储在客户端浏览器中，并且数据在不同会话之间保持永久性。
• 作用： 用于在浏览器端永久性存储数据，直到用户手动删除或清除浏览器缓存。
• 原理： 使用本地数据库存储数据，数据以字符串形式存储，可以通过 JavaScript API 进行读写。
• 特性：

• 存储容量较大（通常为5-10MB）。
• 数据在不同浏览器会话中保持一致。
• 存储的数据类型受限于字符串。
• 通过 JavaScript API 访问，易于使用。

• 优点： 永久性存储，容量较大，易于使用。
• 缺点： 存储的数据类型受限，不能跨域名共享。

sessionStorage:

• 概念：sessionStorage 也是 Web Storage API 提供的本地存储机制，用于在客户端浏览器中以键值对的形式存储数据，但数据仅在当前会话（页面关闭后销毁）中有效。
• 作用： 用于在浏览器端临时性存储数据，仅在当前会话中有效。
• 原理： 与 localStorage 类似，使用本地数据库存储数据。
• 特性：

• 存储容量较大（通常为5-10MB）。
• 数据在当前会话中有效，关闭页面后数据被销毁。
• 存储的数据类型受限于字符串。
• 通过 JavaScript API 访问，易于使用。

• 优点： 临时性存储，容量较大，易于使用。
• 缺点： 存储的数据类型受限，不能跨域名共享。

cookie:

• 概念：cookie 是浏览器提供的一种存储机制，用于在客户端和服务器之间存储小量数据，以便实现用户状态的跟踪和会话管理。
• 作用： 用于存储小量数据，通常用于用户认证、跟踪和存储临时数据。
• 原理：cookie 数据以键值对的形式存储在浏览器中，并在每次 HTTP 请求中通过请求头传递给服务器。
• 特性：

• 存储容量较小（通常为4KB）。
• 可以设置过期时间，可以在不同页面和会话之间共享。
• 存储的数据类型为字符串。
• 通过 JavaScript API 访问，但相对较复杂。

• 优点： 可以跨域名共享，可设置过期时间，用于用户认证和会话管理。
• 缺点： 存储容量较小，数据在每次 HTTP 请求中传递，不适合存储大量数据。

区别和使用场景：

• localStorage 用于永久性存储数据，适合用于持久化存储用户偏好设置、本地缓存等。
• sessionStorage 用于临时性存储数据，仅在当前会话中有效，适合用于临时会话数据、表单数据的保存等。
• cookie 用于存储小量数据，通常用于用户认证、会话管理和跟踪用户行为等，可以跨域名共享。

根据具体需求和数据的性质，选择合适的存储机制来存储数据。

60.JS原生常用dom操作方法

JavaScript 提供了丰富的 DOM（文档对象模型）操作方法，用于与网页文档进行交互。以下是一些常用的原生 DOM 操作方法：

1. 获取元素：

• document.getElementById(id): 通过元素的 id 获取元素对象。
• document.querySelector(selector): 通过 CSS 选择器获取第一个匹配的元素对象。
• document.querySelectorAll(selector): 通过 CSS 选择器获取所有匹配的元素对象。

2. 操作元素属性和内容：

• element.innerHTML: 获取或设置元素的 HTML 内容。
• element.textContent: 获取或设置元素的文本内容。
• element.getAttribute(name): 获取元素的属性值。
• element.setAttribute(name, value): 设置元素的属性值。
• element.classList: 操作元素的类名，如添加、移除、切换类名。
• element.style: 操作元素的样式属性。

3. 创建和修改元素：

• document.createElement(tagName): 创建一个新元素节点。
• element.appendChild(childElement): 将子元素添加到父元素。
• element.removeChild(childElement): 从父元素中移除子元素。
• element.cloneNode(deep): 克隆元素节点，deep 参数决定是否深度克隆子元素。
• element.insertAdjacentHTML(position, text): 在指定位置插入 HTML 代码。

4. 事件操作：

• element.addEventListener(event, callback): 绑定事件处理程序。
• element.removeEventListener(event, callback): 移除事件处理程序。
• element.dispatchEvent(event): 触发自定义事件。

5. 遍历和查询：

• element.parentNode: 获取父元素节点。
• element.childNodes: 获取所有子节点。
• element.children: 获取子元素节点。
• element.nextElementSibling: 获取下一个兄弟元素节点。
• element.previousElementSibling: 获取上一个兄弟元素节点。
• document.querySelector(selector): 通过 CSS 选择器获取元素。

6. 其他常用操作：

• window.alert(message): 弹出警告框。
• window.prompt(message, defaultText): 弹出提示框，用于输入信息。
• window.confirm(message): 弹出确认框，用于确认或取消操作。

以上只是一些常用的原生 DOM 操作方法，JavaScript 还提供了许多其他方法和属性，用于处理更复杂的 DOM 操作。根据具体需求，你可以选择适当的方法来操作网页文档中的元素和内容。