js进阶学习
本文章是自学，有错误欢迎指出
循环
for(i=0;i<10;i++){}输出
console.log("a")prototype
在JavaScript中，prototype是一个对象，它允许定义一个对象的实例方法。通过将这些方法添加到原型对象上，可以使得它们在所有创建的对象实例中共享。这意味着，当你创建一个对象时，你可以在该对象的实例上调用这些定义在原型对象上的方法。
下面是一个示例，展示了如何使用prototype来定义一个简单的Person类，并在其上添加一个名为greet的方法：
// 创建一个Person类
function Person(name) {
this.name = name;
}
// 在Person类的原型上添加greet方法
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}`);
};
// 创建一个Person对象实例
const person1 = new Person('Alice');
const person2 = new Person('Bob');
// 在对象实例上调用greet方法
person1.greet(); // 输出: Hello, my name is Alice
person2.greet(); // 输出: Hello, my name is Bob在这个示例中，我们定义了一个Person类，并在其原型上添加了一个名为greet的方法。然后，我们创建了两个Person对象实例，并在每个实例上调用greet方法。由于这个方法是在Person类的原型上定义的，所以它可以在所有的Person对象实例上共享和访问。
split()
在JavaScript中，可以使用split()函数来分割字符串。split()函数根据指定的分隔符将字符串分割成数组。
以下是split()函数的基本用法：
在这个例子中，我们使用逗号（,）作为分隔符，将字符串"Hello, World!"分割成了两个部分。
split()函数还可以接受第二个参数，表示分割的次数。例如：
let str = "Hello, World!";
let arr = str.split(",");
console.log(arr); // ["Hello", " World!"]let str = "apple,banana,cherry";
let arr = str.split(",", 2);
console.log(arr); // ["apple", "banana", "cherry"]
在这个例子中，我们使用逗号（,）作为分隔符，并将字符串"apple,banana,cherry"分割成了三个部分。注意，尽管我们只分割了两次，但是结果数组中仍然包含三个元素。这是因为split()函数总是返回一个包含所有部分的数组。
如果你想要忽略空的部分，你可以使用正则表达式作为分隔符：
let str = "apple,,cherry";
let arr = str.split(/,/);
console.log(arr); // ["apple", "", "cherry"]在这个例子中，我们使用正则表达式/,/作为分隔符，它匹配任意数量的逗号。因此，结果数组中不包含空的部分。
Set()函数及其相关属性和方法
JavaScript 的 Set （）是定义数组的函数对象有一些内置的属性和方法，这些属性和方法可以帮助你操作和操作集合中的元素。
const arr = new Set()下面是一些 Set 对象的重要属性：
- size: 返回集合中的元素数量。
- has(value): 返回一个布尔值，表示集合是否含有指定的值。
- add(value): 添加一个值，并返回这个新的 Set 对象。如果这个值已经存在于 Set 中，那么 Set 的大小不会增加，但是会返回新的 Set 对象。
- delete(value): 删除 Set 中的第一个匹配的值，并返回 true。如果值不存在于 Set 中，返回 false。
- clear(): 移除 Set 中的所有元素，并返回 undefined。
- keys(): 返回一个新的迭代器对象，该对象包含 Set 对象中每个元素的 key。
- values(): 返回一个新的迭代器对象，该对象包含 Set 对象中每个元素的值。
- entries(): 返回一个新的迭代器对象，该对象包含 Set 对象中每个元素的 [key, value] 数组。
以上就是 JavaScript Set 对象的一些主要属性。通过这些属性和方法，你可以创建、操作和管理你的集合
CharAt（）
在JavaScript中，charAt()是一个字符串方法，用于返回在指定位置的字符。字符串中的字符位置从0开始计数。
例如，如果你有一个字符串var str = "Hello"，那么str.charAt(0)将返回"H"，因为"H"是在位置0的字符。如果提供的索引位置没有字符，那么charAt()将返回一个空字符串。如果索引是负数，那么它从字符串的末尾开始计数。所以，str.charAt(-1)将返回"o"，因为"o"是字符串的最后一个字符。
这是一种非常有用的方法，可以帮助你访问和操作字符串中的特定字符。
reverse()
颠倒数组中元素
滑动窗口
滑动窗口算法是一种在数组或字符串中查找特定元素的算法。它通过维护一个窗口，该窗口始终包含待搜索的数组或字符串的一部分，来加速搜索过程。
滑动窗口算法的基本步骤如下：
- 初始化窗口：选择窗口的起始位置和大小。起始位置通常为数组或字符串的起始位置，窗口的大小可以根据需要调整。
- 移动窗口：每次将窗口向右移动一位（对于数组）或一个字符（对于字符串），直到窗口的右边界超过数组或字符串的末尾。
- 调整窗口：如果窗口的左边界超出了数组或字符串的起始位置，需要将左边界调整到下一个未包含在窗口中的元素的位置。
- 检查窗口中的元素：对窗口中的每个元素进行比较，以查找满足条件的元素。
- 重复步骤2-4，直到窗口的右边界超过数组或字符串的末尾。
滑动窗口算法的优点在于它只检查数组或字符串的一部分元素，从而减少了比较的次数。这使得它在处理大型数据集时具有高效性。但是，窗口的大小和起始位置的选择对算法的性能有很大影响，因此需要根据具体问题进行适当的调整。
s = "abcabcbb"
var lengthOfLongestSubstring = function(s) {
// 哈希集合，记录每个字符是否出现过
const occ = new Set(); //创建一个空集合
const n = s.length;
// 右指针，初始值为 -1，相当于我们在字符串的左边界的左侧，还没有开始移动
let rk = -1, ans = 0;//ans记录我们的最大字符串长度，刚开始为0
for (let i = 0; i < n; ++i) {
if (i != 0) {
// 左指针向右移动一格，移除一个字符
occ.delete(s.charAt(i - 1));
}
// 进行右指针不断移动
while (rk + 1 < n && !occ.has(s.charAt(rk + 1))) {
// 不断地移动右指针
occ.add(s.charAt(rk + 1));
++rk;
}
// 当不满足while里的条件时，我们进行下一个循环，这时候要移动做指针一位，
// 再次遍历我们的数组，直到我们的数数组里不再存在相同的数
// 第 i 到 rk 个字符是一个极长的无重复字符子串
ans = Math.max(ans, rk - i + 1);
}
return ans;
};
console.log(lengthOfLongestSubstring(s));js语句取出p标签加粗
p = document.getElementsByTagName("p")[0];
p.innerHTML = p.innerText.replace("牛客网","<strong>牛客网</strong>")升序和降序sort
array.sort((a,b) => a-b)//升序
array.sort((a,b) => b-a)//降序
字符串大小写转换
在JavaScript中，可以使用以下方法进行大小写转换：
-
toUpperCase(): 将字符串转换为大写。
let str = "hello world";
let upperStr = str.toUpperCase(); // "HELLO WORLD"-
toLowerCase(): 将字符串转换为小写。
let str = "Hello World";
let lowerStr = str.toLowerCase(); // "hello world"去除数据两端的空格trim
string.trim(); 将时间戳转换为字符串类型的数据
function _date(number) {
let date = new Date(number);
// 注意月份要加1，因为是从0开始计算的
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}返回数值的整数部分parseInt，floor
//写法一： parseInt()函数解析字符串并返回整数。
return parseInt(value)
//写法二：Math.floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。
return Math.floor(value)
将传入的数组以字符串的方式分解合并后输出join
return array.join('');...的用法
在JavaScript中，当你需要使用不确定数量的参数或者元素来调用函数或方法时，可以使用省略号（...）。
以下是一些使用省略号的场景：
1.函数参数：当你需要传递不确定数量的参数给函数时，可以使用省略号。例如，一个函数可以接受任意数量的参数，并将它们相加起来：
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 输出：62.扩展操作符：在JavaScript中，可以使用扩展操作符（...）将数组或可迭代对象展开为函数的参数。例如：
function greet(name1, name2, ...names) {
console.log(`Hello ${name1}, ${name2}, and ${names.join(', ')}!`);
}
greet('Alice', 'Bob', 'Charlie', 'Dave'); // 输出：Hello Alice, Bob, and Charlie, Dave!3.解构赋值：在解构赋值时，可以使用省略号来忽略不需要的属性或元素。例如：
const [x, y, ...z] = [1, 2, 3, 4, 5];
console.log(x); // 输出：1
console.log(y); // 输出：2
console.log(z); // 输出：[3, 4, 5]4.rest属性：在对象字面量中，可以使用rest属性来获取对象中剩余的属性。例如:
const { x, y, ...rest } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 输出：1
console.log(y); // 输出：2
console.log(rest); // 输出：{ a: 3, b: 4 }reduce的用法
reduce() 是 JavaScript 数组的一个方法，它接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。这个方法在处理数组的复杂计算时非常有用。
1.计算数组的总和：你可以使用 reduce() 方法来计算一个数组中所有元素的总和。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出：152.将数组元素转换为新的数据结构：你可以使用 reduce() 方法来将数组的元素转换为一个新的数据结构。例如，你可以使用它来创建一个对象，对象的键是数组中的元素，值是元素的平方。
let numbers = [1, 2, 3, 4, 5];
let squares = numbers.reduce((accumulator, currentValue) => {
accumulator[currentValue] = currentValue * currentValue;
return accumulator;
}, {});
console.log(squares); // 输出：{ '1': 1, '2': 4, '3': 9, '4': 16, '5': 25 }3.合并数组：你也可以使用 reduce() 方法来合并数组。例如，你可以将一个二维数组转换为一个一维数组。
let array = [[1, 2], [3, 4], [5, 6]];
let flattened = array.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
console.log(flattened); // 输出：[1, 2, 3, 4, 5, 6]foreach里面的return语句是不能传递到外面的
function _search(string) {
let arr = string.split(''); // 所得数组每一项都是字符串
arr.forEach(element => {
console.log(element);
let temp = parseInt(element);
if(temp === 'number'){
return true
}
});
}
console.log(_search('123wqe'));这个函数的输出结果是undefined
splice再数组插入元素
splice() 是 JavaScript 数组的一个方法，用于在任何位置添加/删除数组元素。这个方法会直接修改原数组。
splice() 方法的基本语法是：
array.splice(index, howmany, item1, ....., itemX) |
index: 必需。一个整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。howmany: 可选。要删除的项目数量。如果设置为 0，则不会删除项目。item1, ..., itemX: 可选。向数组添加的新项目。
splice() 方法返回一个包含被删除元素的新数组。如果没有删除任何元素，则返回一个空数组。
这是一个例子：
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi"); // 在第2个位置插入 "Lemon" 和 "Kiwi"
console.log(fruits);
// expected output: Array [ "Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango" ]查看数组的下标indexof
let arr = [1, 5, 2, 8, 3];
let index = arr.indexOf(5);
console.log(index); // 输出 1indexof不止可以查看数组的下标，还能查找字符串内是否存在另一个字符串
function _search(string,value) {
// 补全代码
return string.indexOf(value) === -1?false : true;
}构造一个正则表达式RegExp（）
在JavaScript中，RegExp是正则表达式的构造函数，用于创建正则表达式对象。正则表达式是一种用于匹配和操作文本的强大工具。
以下是查找value是否在string中：
function _search(string,value) {
// 补全代码
let reg = new RegExp(value)
return string.search(reg) === -1?false : true
}浏览器在调用函数是会返回两个参数
// ①返回伪数组对象
// ②在调用函数时，浏览器每次都会传递进两个隐含参数
// -上下文对象this
// -封装实参的对象arguments
// arguments是一个类数组对象
// （arguments instanceof Array------>false
// Array.isArray（arguments）------>false）说明arguments不是数组对象
// arguments.length可以获得传入的实参的数目------>类数组对象可以通过索引来操作数据，也可以获取长度
function getArguments(a, b, c) {
return arguments
}
console.log(getArguments(1, 2, 3));数组内的函数嵌套写法
var obj = {
a: 1,
b: 2,
fn: function(){
// 补全代码
return this.a+this.b
}JavaScript对样式的写法
获取到标签的id，改变id的css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变css样式</title>
<style>
#intro{
/* color: red; */
}
</style>
</head>
<body>
<p id="intro" style = "color:green"></p>
<script>
temp = document.getElementById("intro");
temp.innerHTML = Date();
temp.style = "color:red";
</script>
</body>
</html>在JavaScript中，有大量的函数可以用来获取DOM元素。
以下是一些常用的函数：
document.getElementById(id): 通过元素的ID获取元素。document.getElementsByClassName(className): 通过类名获取元素，返回的是一个NodeList。document.getElementsByTagName(tagName): 通过标签名获取元素，返回的是一个HTMLCollection。document.querySelector(selector): 返回文档中匹配指定CSS选择器的第一个Element元素。document.querySelectorAll(selector): 返回文档中匹配指定CSS选择器的所有Element元素的NodeList（静态的）。element.querySelector(selector): 返回元素中匹配指定CSS选择器的第一个Element元素。element.querySelectorAll(selector): 返回元素中匹配指定CSS选择器的所有Element元素的NodeList（静态的）。
以上函数可以满足大部分获取DOM元素的需求。
阻止冒泡
const li=document.querySelector('li')li.addEventListener('click', function(event) {
//方法一：cancelBubble 属性防止事件流冒泡到父元素。
event.cancelBubble=true;
//方法二：提示：如需防止向上冒泡到父元素并向下被子元素捕获，使用 stopPropagation() 方法。
event.stopPropagation();
//方法三：preventDefault() 用于取消事件的默认行为，
//如果a标签的默认事件是href跳转，加了就不会跳转了
event.preventDefault();
//方法四：事件处理过程中，阻止了事件冒泡，也阻止了默认行为，相当于会直接调用 preventDefault和stopPropapation
return false;
})
instance
instanceof是Java、php中的一个二元操作符（运算符），它的作用是判断一个引用类型变量所指向的对象是否是一个类（或接口、抽象类、父类）的实例，即它左边的对象是否是它右边的类的实例，该运算符返回boolean类型的数据。
可以用来判断继承中的子类的实例是否为父类的实现，相当于c#中的is操作符。
不可以查看某一个数是否在数组内
function _instanceof(left, right) {
if(left==right){
return 1
}else{
return 0
}
}数学函数Math
JavaScript 的 Math 对象中包含了很多常用的数学函数和常量。以下是一些常见的 Math 对象的方法和常量：
方法：
Math.abs(x)：返回 x 的绝对值。Math.acos(x)：返回 x 的反余弦弧度值（弧度值）。Math.asin(x)：返回 x 的反正弦弧度值（弧度值）。Math.atan(x)：返回 x 的反正切弧度值（弧度值）。Math.ceil(x)：返回大于等于 x 的最小整数。Math.cos(x)：返回 x 的余弦值（弧度值）。Math.exp(x)：返回 e 的 x 次幂。Math.floor(x)：返回小于等于 x 的最大整数。Math.log(x)：返回 x 的自然对数。Math.max(...args)：返回提供的所有参数中的最大值。Math.min(...args)：返回提供的所有参数中的最小值。Math.pow(x, y)：返回 x 的 y 次幂。Math.random()：返回一个伪随机数（在 [0, 1) 之间）。Math.round(x)：返回 x 四舍五入后的整数。Math.sin(x)：返回 x 的正弦值（弧度值）。Math.sqrt(x)：返回 x 的平方根。Math.tan(x)：返回 x 的正切值（弧度值）。
常量：
Math.PI：π 的近似值（约等于 3.14159265358979323846）。Math.E：e 的近似值（约等于 2.71828182845904523536）。Math.SQRT2：2 的平方根的近似值（约等于 1.41421356237309504880）。Math.SQRT1_2：(1/2) 的平方根的近似值（约等于 0.7071067811865476)。