React项目知识积累（二）

1.document.querySelectorAll()

document.querySelectorAll() 是 JavaScript 中的一个内置方法，用于选择多个元素并返回一个 NodeList 对象。

const nodeList = document.querySelectorAll(selector);

• selector：一个字符串，用于指定要选择的元素。可以使用与 CSS 选择器相同的语法。

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>


const listItems = document.querySelectorAll('li');
console.log(listItems.length); // 输出：3
console.log(listItems[1].textContent); // 输出：Banana

在上述例子中，document.querySelectorAll('li') 选择了所有 <li> 元素，并将它们存储在一个 NodeList 对象中。可以使用 length 属性获取所选元素的数量，并使用索引获取每个元素的属性和内容。

需要注意的是，querySelectorAll 返回的是一个静态的 NodeList 对象，这意味着如果匹配的元素发生变化，NodeList 不会自动更新。如果需要动态更新匹配的元素列表，请使用 document.getElementsByTagName 或者其他动态查询节点的方法。

2.window.innerHeight

window.innerHeight 是 JavaScript 中的一个内置属性，用于获取浏览器窗口的视口高度。

<div style="height:3000px;"></div>

const height = window.innerHeight;
console.log('Window inner height is:', height, 'pixels');



const element = document.getElementById("screenshot-element");
element.style.height = `${window.innerHeight - 150}px`;

页面中的 <div> 元素设置了一个高度为 3000px。通过 window.innerHeight 可以获取当前浏览器窗口的视口高度，并将其输出到控制台中。

window.innerHeight 返回的值是一个整数，表示可视窗口的高度（不包括浏览器的地址栏、工具栏和滚动条等内容）。如果需要获取整个浏览器窗口的高度，请使用 window.outerHeight 属性。

3.indexOf( )

indexOf() 是 JavaScript 中字符串和数组对象的一个方法，用于查找特定元素第一次出现的位置。

在字符串对象中，indexOf() 方法返回给定字符串在调用方法的字符串中第一次出现的位置。如果未找到该子字符串，则返回 -1。

str.indexOf(searchValue, fromIndex)

• searchValue：要查找的字符串。
• fromIndex (可选)：从此位置开始查找字符串。默认值为 0。

const str = 'Hello, world!';
console.log(str.indexOf('world')); // 输出：7
console.log(str.indexOf('John')); // 输出：-1
console.log(str.indexOf('o', 5)); // 输出：8

在数组对象中，indexOf() 方法返回给定元素在调用方法的数组中第一次出现的位置。如果未找到该元素，则返回 -1。

const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 输出：2
console.log(arr.indexOf(6)); // 输出：-1
console.log(arr.indexOf(4, 2)); // 输出：3

4.size( )

size 属性：对于 Map 和 Set 等集合类型，可以使用 size 属性来获取元素的数量。

import {size} from "lodash";
 

const set = new Set([1, 2, 3, 4, 5]);
console.log(set.size); // 输出：5

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map.size); // 输出：2


const arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 输出：5

const str = 'Hello, world!';
console.log(str.length); // 输出：13

如果 value是一个数组或字符串，则可以使用 length 属性来获取其长度。如果 value是一个集合类型，则可以使用 size 属性来获取其大小。

5.!isNaN()

在JavaScript中，!isNaN() 是一个逻辑非操作符，isNaN() 函数用于检查一个值是否是一个非数字（Not-a-Number）值。如果isNaN()返回true，表示传递的值不是一个数字，如果返回false，则表示传递的值是一个数字。

当你在表达式中使用!操作符时，它会将isNaN()的返回值取反。也就是说，如果isNaN(Number(params))返回true（params 不是一个数字），那么!isNaN(Number(params))将会返回false。如果isNaN(Number(params))返回false（params 是一个数字），那么!isNaN(Number(params))将会返回true。

简单来说，!isNaN(Number(params))的目的是检查params是否可以被转换为一个数字，并且这个数字不是NaN（Not-a-Number）。

• Number(params)：Number() 是 JavaScript 中的一个内置函数，用于将给定的值转换为数字类型。在这里，params 应该是一个变量，它可能是一个字符串或其他类型的值。
• isNaN()：isNaN() 也是 JavaScript 中的一个内置函数，用于检查给定的值是否是 "NaN"（Not-a-Number）。如果给定的值是 "NaN"，则返回 true；否则返回 false。
• !isNaN(Number(params))：! 是逻辑非运算符，用于取反。所以 !isNaN(Number(params)) 表示如果 Number(params) 不是 "NaN"，则返回 true；否则返回 false。

综合起来，这段代码的作用是检查 params 是否可以转换为一个有效的数字。如果 params 可以成功转换为一个数字，则返回 true，否则返回 false。

!isNaN(Number(params))? "是数字" : "不是数字" ;

6.replace( )

.replace() 是 JavaScript 中字符串对象的一个方法，用于替换字符串中的一部分内容

string.replace(searchValue, replaceValue)

• string 是要进行替换操作的原始字符串。
• searchValue 是要被替换的内容，可以是一个字符串或者一个正则表达式。
• replaceValue 是用来替换 searchValue 的新内容，可以是一个字符串或者一个函数。

.replace() 方法会在 string 中查找 searchValue，然后用 replaceValue 来替换找到的第一个匹配项。如果 searchValue 是一个字符串，.replace() 只会替换找到的第一个匹配项；如果要替换所有匹配项，可以使用正则表达式，并在正则表达式上使用全局标志 g。

//在这个例子中，.replace() 方法会将原始字符串中的 "world" 替换为 "universe"。
const originalString = "Hello, world!";
const newString = originalString.replace("world", "universe");
console.log(newString); // 输出 "Hello, universe!"



// 创建一个字符串
const str = "Hello World";
// 使用 replace 方法从索引 6 开始替换 "World" 为 "React"
const newStr = str.replace("World", "React", 6);
console.log(newStr); // 输出将会是："Hello React"


// 创建一个字符串
const str = "Hello 123 World 456";
// 使用正则表达式替换所有数字
const newStr = str.replace(/\d+/g, "React");
console.log(newStr); // 输出将会是："Hello React World React"



// 正则表达式来移除字符串中的所有空白字符
const newObj = str.replace(/\s/g, "");
//   /\s/g：这是一个正则表达式。\s 表示匹配任何空白字符，包括空格、制表符、换行符等。g 是全局标志， 
//          表示查找字符串中所有匹配项，而不是只找到第一个匹配项。
//   ""：这是一个空字符串，用来替换匹配到的空白字符，实际上就是将它们删除。

另外，如果 replaceValue 是一个函数，那么这个函数会被调用来生成替换的内容。这样的话，可以在替换过程中进行更复杂的逻辑处理。

7.split( )

split 方法是字符串对象的一个方法，用于将一个字符串分割成一个数组。这个方法可以接受一个分隔符作为参数，并按照分隔符将字符串拆分成多个子字符串，每个子字符串都会成为数组中的一个元素。

// 创建一个字符串
var str = "Hello World";
// 使用 split 方法按照空格分隔字符串
var words = str.split(" ");
console.log(words); // 输出将会是：["Hello", "World"]

// 创建一个字符串
var str = "Hello World Hello";
// 使用 split 方法按照 "Hello" 分隔字符串，最大出现次数为 1
var parts = str.split("Hello", 1);
console.log(parts); // 输出将会是：["World", "Hello"]

// 创建一个字符串
var str = "12345 67890";
// 使用正则表达式分割字符串，匹配两个数字组成的序列
var numbers = str.split(/\d{2}/);
console.log(numbers); // 输出将会是：["", "12", "345", "67", "890"]


value?.split("-").length > 2 ? true : false ;

8.value?.lastIndexOf(  )

调用 lastIndexOf 方法时，获取一个字符串中指定子字符串最后一次出现的索引。如果字符串中不存在该子字符串，或者字符串不是字符串类型，lastIndexOf 方法将返回 -1。

// 假设我们有一个字符串
let str = "123-456-789";

// 我们想要找到 "-" 在字符串中最后一次出现的位置
let lastHyphenIndex = str?.lastIndexOf("-");

console.log(lastHyphenIndex); // 输出将会是：7

在这个例子中，lastIndexOf 方法会搜索字符串 str 中最后一次出现的 "-" 字符，并返回它的索引，即 7。

可选链操作符 ?. 的使用在这里是安全的，因为如果 str 是 null 或 undefined，str?.lastIndexOf("-") 将会返回 undefined，而不会抛出错误。这样，我们就可以在不确定 str 是否存在的条件下，安全地调用 lastIndexOf 方法。

lastIndexOf() 方法用于返回指定字符串值在调用该方法的字符串中最后出现的位置（从右向左搜索），如果没有找到则返回 -1。

9.substring ( )

substring 方法是字符串对象的一个方法，用于提取字符串的一个子串。这个方法接受两个参数：起始索引和结束索引。起始索引是子串开始的字符的索引（包括该字符），结束索引是子串结束的字符的索引（不包括该字符）。

var originalString = "Hello World";
var newString = originalString.substring(startIndex, endIndex);
//其中 startIndex 是子串开始的索引，endIndex 是子串结束的索引。
var newString = originalString.substring(6, 11);
console.log(newString); // 输出将会是 "World"

在这个例子中，substring(6, 11) 从索引 6 开始提取字符，直到索引 11 之前的位置，因此结果是 "World"。

需要注意的是：

• 如果 startIndex 大于或等于字符串的长度，或者如果 endIndex 小于 startIndex，substring 方法将返回一个空字符串。
• 如果 endIndex 大于字符串的长度，substring 方法将从 startIndex 开始提取到字符串的末尾。

//例如，如果 startIndex 大于字符串长度：
var originalString = "Hello World";
var newString = originalString.substring(10, 20);
console.log(newString); // 输出将会是空字符串 ""

//如果 endIndex 大于字符串长度：
var originalString = "Hello World";
var newString = originalString.substring(0, 20);
console.log(newString); // 输出将会是 "Hello World"

如果是一个字符串有多个 "-" 的情况下，按照最后一个 “-” 来分割的话：

const valueData="123-abc-456-def";
const lastIndex=valueData.lastIndexOf("-");
//valueData?.substring(0,lastIndex)   valueData?.substring(lastIndex+1) 两个字符串
Ref?.current?.setFieldValue([name,"BANK_NAME"],valueData?.substring(0,lastIndex));
Ref?.current?.setFieldValue([name,"BANK_ID"],valueData?.substring(lastIndex+1));