js的常用方法

js的常用方法+已经使用过的实例

JavaScript有许多基本方法，这些方法可用于执行各种操作，包括字符串操作、数组操作、数学运算等。以下是一些常用的JavaScript基本方法及简单示例：

一、字符串方法

1、toUpperCase()：将字符串转换为大写。

let str = "hello";

console.log(str.toUpperCase()); // 输出 "HELLO"

2、toLowerCase()：将字符串转换为小写。

let str = "HELLO";

console.log(str.toLowerCase()); // 输出 "hello"

3、trim()：去除字符串两端的空格。

let str = " hello ";

console.log(str.trim()); // 输出 "hello"

4、 substring(startIndex, endIndex)：提取字符串的子串，从 startIndex 开始到 endIndex（不包括）结束。

例一：

let str = "hello world";

console.log(str.substring(6, 11)); // 输出 "world"

例二：

将dateData数组中的每一个date都取后五位并返回新数组

data: this.chartData.dateData.map(date => date.substr(-5)),//取后五位

二、数组方法

1、push()：向数组末尾添加一个元素。

let arr = [1, 2, 3];

arr.push(4);

console.log(arr); // 输出 [1, 2, 3, 4]

2、 pop()：从数组末尾移除一个元素。

let arr = [1, 2, 3];

arr.pop();

console.log(arr); // 输出 [1, 2]

3、 join(separator)：将数组元素连接成一个字符串，使用 separator 作为分隔符。

let arr = ["apple", "banana", "orange"];

console.log(arr.join(", ")); // 输出 "apple, banana, orange"

4、concat () ：用于连接两个数组，或者多个数组，(不会改变原数组，返回新数组)

语法：

array1.concat(array2, array3, ..., arrayN)

示例：

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

let arr3 = [7, 8, 9];

let newArr = arr1.concat(arr2, arr3);

console.log(newArr); // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

5、 slice() 方法用于提取数组中的一部分元素，并返回一个新数组，而不会改变原始数组。它接受两个参数，分别是起始索引和结束索引（不包括），可以用来提取数组的某个范围。

let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

let citrus = fruits.slice(1, 3);

console.log(citrus); // 输出 ["Orange", "Lemon"]

6、 shift() 方法用于移除数组中的第一个元素，并返回被移除的元素。它会改变原始数组的长度。

let fruits = ["Banana", "Orange", "Apple"];

let removedFruit = fruits.shift();

console.log(removedFruit); // 输出 "Banana"

console.log(fruits); // 输出 ["Orange", "Apple"]

 7、unshift() 方法用于向数组的开头添加一个或多个元素，并返回新的长度。它会改变原始数组。

let fruits = ["Banana", "Orange", "Apple"];

let newLength = fruits.unshift("Mango", "Lemon");

console.log(newLength); // 输出 5

console.log(fruits); // 输出 ["Mango", "Lemon", "Banana", "Orange", "Apple"]

8、 reverse() 方法用于颠倒数组中元素的顺序，并返回颠倒后的数组。它会改变原始数组。

语法：

array.reverse()

示例：

let arr = [1, 2, 3, 4, 5]; arr.reverse();

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

9、 sort() 方法用于对数组的元素进行排序，并返回排序后的数组。默认情况下，sort() 方法将元素转换为字符串，然后按照字符编码的顺序进行排序。

语法：

array.sort(compareFunction)

示例：

let fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort();

console.log(fruits); // 输出 ["Apple", "Banana", "Mango", "Orange"]

10、 splice() 方法用于向数组中添加或删除元素，并返回被删除的元素组成的数组。它会改变原始数组。splice() 方法接受三个参数：起始索引、要删除的元素个数（可选）、要添加进数组的元素（可选）。

语法：

array.splice(startIndex, deleteCount, item1, item2, ...)

示例：

let fruits = ["Banana", "Orange", "Apple", "Mango"];

let removedItems = fruits.splice(1, 2, "Lemon", "Kiwi");

console.log(removedItems); // 输出 ["Orange", "Apple"]

console.log(fruits); // 输出 ["Banana", "Lemon", "Kiwi", "Mango"]

11、 toString() 方法用于将数组转换为字符串，并返回结果。它不会改变原始数组。

语法：

array.toString()

示例：

let fruits = ["Banana", "Orange", "Apple", "Mango"];

let fruitString = fruits.toString();

console.log(fruitString); // 输出 "Banana,Orange,Apple,Mango"

12、valueOf() 方法返回数组对象的原始值。在大多数情况下，valueOf() 方法与toString()方法返回的值是相同的。JavaScript 数组对象覆盖了Object内置对象的valueOf()方法。Array对象从Object对象继承了valueOf()方法，因此Array对象上的valueOf()方法返回其原始值。 

语法：

array.valueOf()

示例：

let fruits = ["Banana", "Orange", "Apple", "Mango"];

let originalValue = fruits.valueOf();

console.log(originalValue); // 输出 ["Banana", "Orange", "Apple", "Mango"]

13、 indexOf() 方法用于在数组中查找指定元素，并返回它的第一次出现的索引。如果数组中不存在该元素，则返回 -1。

语法：

array.indexOf(searchElement, fromIndex)

• searchElement：要查找的元素。
• fromIndex（可选）：从该索引处开始查找元素。如果省略，则从数组的起始位置开始查找。如果该值为负数，则表示倒数的起始索引。

示例：

let fruits = ["Apple", "Banana", "Orange", "Apple", "Mango"];

let index1 = fruits.indexOf("Apple");

let index2 = fruits.indexOf("Apple", 2);

console.log(index1); // 输出 0

console.log(index2); // 输出 3

 14、lastIndexOf() 方法是类似于 indexOf() 方法的数组方法，不同之处在于它在数组中从后向前查找指定元素，并返回它的最后一次出现的索引。如果数组中不存在该元素，则返回 -1。

语法：

array.lastIndexOf(searchElement, fromIndex)

• searchElement：要查找的元素。
• fromIndex（可选）：从该索引处开始向前查找元素。如果省略，则从数组的末尾位置开始向前查找。如果该值为负数，则表示倒数的起始索引。

示例：

let fruits = ["Apple", "Banana", "Orange", "Apple", "Mango"]; let index1 = fruits.lastIndexOf("Apple"); let index2 = fruits.lastIndexOf("Apple", 2); console.log(index1); // 输出 3 console.log(index2); // 输出 0

15、 forEach() 方法用于对数组中的每个元素执行一次指定的函数。它不会改变原始数组。

语法：

array.forEach(function callback(currentValue, index, array) { // 执行操作 }, thisArg)

• callback：每个元素执行的回调函数，该函数可以接收三个参数：
  • currentValue：当前元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：操作的数组。
• thisArg：执行 callback 函数时的 this 值（可选）。

示例：

let numbers = [1, 2, 3];

let sum = 0;

numbers.forEach(function(number) { sum += number; });

console.log(sum); // 输出 6

 16、map() 方法用于对数组中的每个元素执行指定的函数，并返回由函数返回值组成的新数组。它不会改变原始数组。

语法：

array.map(function callback(currentValue, index, array) {

// 执行操作并返回新值

}, thisArg)

• callback：对每个元素执行的回调函数，该函数可以接收三个参数：
  • currentValue：当前元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：操作的数组。
• thisArg：执行 callback 函数时的 this 值（可选）。

示例：

let numbers = [1, 2, 3];

let doubled = numbers.map(function(number) { return number * 2; }); console.log(doubled); // 输出 [2, 4, 6]

示例：

将dateData数组中的每一个date都取后五位并返回新数组

data: this.chartData.dateData.map(date => date.substr(-5)),//取后五位

17、 filter() 方法用于筛选数组中的元素，返回一个由通过筛选的元素组成的新数组。它不会改变原始数组。

语法：

array.filter(function callback(currentValue, index, array) {

// 返回 true 或 false

}, thisArg)

• callback：对每个元素执行的测试函数，该函数可以接收三个参数：
  • currentValue：当前元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：操作的数组。
• thisArg：执行 callback 函数时的 this 值（可选）。

示例：

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

let evenNumbers = numbers.filter(function(number) { return number % 2 === 0; }); console.log(evenNumbers); // 输出 [2, 4]

18、every() 方法用于检查数组中的所有元素是否满足指定条件，如果数组中的每个元素都通过了指定函数的测试，则返回 true，否则返回 false。它不会改变原始数组。

语法：

array.every(function callback(currentValue, index, array) {

// 执行测试并返回 true 或 false

}, thisArg)

• callback：对每个元素执行的测试函数，该函数可以接收三个参数：
  • currentValue：当前元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：操作的数组。
• thisArg：执行 callback 函数时的 this 值（可选）。

示例：

let ages = [32, 25, 28, 19, 45];

let isAdult = ages.every(function(age) { return age >= 18; }); console.log(isAdult); // 输出 true

19、some() 方法用于检测数组中是否有至少一个元素满足测试函数。它不会改变原始数组。

语法：

array.some(function callback(currentValue, index, array) {

// 返回 true 或 false

}, thisArg)

• callback：对每个元素执行的测试函数，该函数可以接收三个参数：
  • currentValue：当前元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：操作的数组。
• thisArg：执行 callback 函数时的 this 值（可选）。

示例：

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

let hasEvenNumber = numbers.some(function(number) { return number % 2 === 0; }); console.log(hasEvenNumber); // 输出 true

20、charAt() 方法用于返回指定索引位置的字符。字符串中的字符位置从 0 开始计数。如果索引超出了字符串的长度范围，则返回一个空字符串。

语法：

string.charAt(index)

• index：要返回的字符的索引值。如果索引值为负数或大于等于字符串的长度，则返回一个空字符串。

示例：

let str = "Hello, world!";

let char1 = str.charAt(0);

let char2 = str.charAt(7);

let char3 = str.charAt(12);

let char4 = str.charAt(20);

console.log(char1); // 输出 "H"

console.log(char2); // 输出 "w"

console.log(char3); // 输出 "!"

console.log(char4); // 输出 ""

21、search() 方法用于在字符串中搜索指定的子字符串或正则表达式，并返回第一个匹配的索引位置。如果找到匹配，则返回匹配的第一个字符的索引位置；如果没有找到匹配，则返回 -1。

语法：

string.search(regexp)

• regexp：要搜索的模式，可以是一个字符串或一个正则表达式对象。

示例：

let str = "Hello, world!";

let index1 = str.search("world");

let index2 = str.search(/world/i);

console.log(index1); // 输出 7

console.log(index2); // 输出 7

 三、数学方法

1、Math.max()：返回一组数中的最大值。

console.log(Math.max(10, 20, 30)); // 输出 30

let numbers = [10, 5, 8, 20];

let maxNumber = Math.max(...numbers);

console.log(maxNumber); // 输出 20

 2、Math.min()：返回一组数中的最小值。

console.log(Math.min(10, 20, 30)); // 输出 10

 3、Math.round()：将一个数四舍五入为最接近的整数。

console.log(Math.round(4.6)); // 输出 5

console.log(Math.round(4.3)); // 输出 4

4、Math.abs(x): 返回一个数的绝对值。

 5、Math.ceil(x): 返回大于或等于给定数字的最小整数

6、Math.floor(x): 返回小于或等于给定数字的最大整数。

7、Math.pow(x, y): 返回 x 的 y 次幂。

8、Math.sqrt(x): 返回给定数字的平方根。

9、Math.random(): 返回一个介于 0 到 1 之间的随机数（不包括 1）。

10、 Math.PI: 表示圆周率 π 的常量。

这些是JavaScript中的一些基本方法及其简单示例。通过这些方法，可以进行各种操作，从而实现更复杂的功能。

日常学习记录~