前端开发常用函数整理

数组插入元素

以下是几种常用的数组插入数据的方式：

1.使用 push() 方法：push() 方法将一个或多个元素追加到数组的末尾。

// 示例数组
let arr = [1, 2, 3];

// 在数组末尾插入元素
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

2.使用 unshift() 方法：unshift() 方法将一个或多个元素插入到数组的开头。

// 示例数组
let arr = [2, 3, 4];
// 在数组开头插入元素
arr.unshift(1);
console.log(arr); // [1, 2, 3, 4]

3.使用 splice() 方法：splice() 方法可以向数组的指定位置插入一个或多个元素，并可以选择删除已有的元素。

// 示例数组
let arr = [1, 2, 4];
// 在索引为 2 的位置插入元素 3
arr.splice(2, 0, 3);
console.log(arr); // [1, 2, 3, 4]

数组删除元素

以下是几种常用的数组删除数据的方式：

1.使用 pop() 方法：pop() 方法用于删除数组的最后一个元素，并返回被删除的元素。

// 示例数组
let arr = [1, 2, 3, 4];

// 删除最后一个元素
let removedElement = arr.pop();
console.log(arr); // [1, 2, 3]
console.log(removedElement); 4

2.使用 shift() 方法：shift() 方法用于删除数组的第一个元素，并返回被删除的元素。

// 示例数组
let arr = [1, 2, 3, 4];
// 删除第一个元素
let removedElement = arr.shift();
console.log(arr); // [2, 3, 4]
console.log(removedElement); // 1

3.使用 splice() 方法：splice() 方法可以向数组的指定位置插入一个或多个元素，并可以选择删除已有的元素。

// 示例数组
let arr = [1, 2, 3, 4];
// 删除索引为 1 的元素
arr.splice(1, 1);
console.log(arr); // [1, 3, 4]

toFixed() 函数

toFixed() 函数：可把 Number 四舍五入为指定小数位数的数字。

toFixed()中的参数就是需要取的小数位数，0表示不留小数点

注意：四舍五入

Var Number=3.1415926
Number.toFixed(2);  //输出3.14
Number.toFixed(0);  //输出3

Var Number=18.888;
Number.toFixed(0);  //输出19 

JSON.stringify，JSON.parse函数

• JSON.stringify将对象转为JSON字符串；
• JSON.parse将JSON字符串转为对象；

对象：{productId: 129}

JSON字符串：“{“productId”:129}”

JSON使用场景

1. localStorage/sessionStorage 存储对象

localStorage/sessionStorage 只可以存储字符串，当我们想存储对象的时候，需要使用 JSON.stringify 转换成字符串，获取的时候再JSON.parse

2.路由（浏览器地址）传参

因为浏览器传参只能通过字符串进行，所以也是需要用到 JSON.stringify

3. 实现对象深拷贝,用来做逻辑处理

具体步骤为：JSON.sringify将JavaScript对象序列化成字符串，再将字符串通过JSON.parse解析成（反序列化）JavaScript对象，即：JSON.parse(JSON.stringify(obj))

splice()函数

splice()函数是JavaScript中数组对象的一个方法，用于修改数组的内容。它可以实现删除、插入和替换数组中的元素。splice()函数的语法如下：

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

• start：指定要修改的起始位置的索引。如果为负数，则从数组末尾开始计算，默认为 0。
• deleteCount：指定要删除的元素个数。如果为 0，则不删除任何元素，只进行插入操作。
• item1, item2, …：可选参数，表示要插入到指定位置的新元素。

splice()函数的返回值是一个由删除的元素组成的数组（如果有删除的话）。

下面是一些例子，演示splice()函数的用法：

1.删除数组元素：

let array = [1, 2, 3, 4, 5];
array.splice(2, 1); // 从索引为2的位置开始，删除1个元素
console.log(array); // 输出 [1, 2, 4, 5]

2.替换数组元素：

let array = [1, 2, 3, 4, 5];
array.splice(2, 1, 'a', 'b', 'c'); // 从索引为2的位置开始，删除1个元素并插入新元素
console.log(array); // 输出 [1, 2, 'a', 'b', 'c', 4, 5]

3.插入新元素：

let array = [1, 2, 3, 4, 5];
array.splice(2, 0, 'a', 'b', 'c'); // 从索引为2的位置开始，删除0个元素并插入新元素
console.log(array); // 输出 [1, 2, 'a', 'b', 'c', 3, 4, 5]

slice()函数

前端中的slice()函数是用于提取数组的一部分元素创建一个新的数组。slice()方法接收两个参数，分别是起始索引和结束索引（可选），并返回包含所提取元素的新数组。

以下是slice()函数的用法示例：

1.提取数组的一部分元素：

const fruits = ['apple', 'banana', 'orange', 'melon', 'grape'];
const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // ['banana', 'orange', 'melon']

2.复制整个数组：

const originalArray = [1, 2, 3, 4, 5];
const copyArray = originalArray.slice();
console.log(copyArray); // [1, 2, 3, 4, 5]

3.提取结尾部分的元素：

const fruits = ['apple', 'banana', 'orange', 'melon', 'grape'];
const slicedFruits = fruits.slice(2);
console.log(slicedFruits); // ['orange', 'melon', 'grape']

需要注意的是，slice()函数不会修改原始数组，而是返回一个新的数组。

另外，起始索引可以是负数，表示从数组末尾开始计算。如果未提供结束索引，则默认提取到数组的末尾。

split() 函数

split() 函数是 JavaScript 中的字符串方法，用于将字符串分割成字符串数组。它接受一个分隔符作为参数，将原字符串根据该分隔符进行分割，并返回一个包含分割后的子字符串的数组。

下面是 split() 函数的语法：

string.split(separator, limit)

其中，string 是要分割的字符串，separator 是分隔符，可以是一个字符串或正则表达式，limit 是一个可选参数，表示分割后的数组的最大长度。

例如，假设我们有以下字符串：

var str = "Hello,World";

调用 split() 函数分割该字符串：

var arr = str.split(",");

此时，arr 的值将是一个包含两个元素的数组：[“Hello”, “World”]。

需要注意的是，split() 函数会根据分隔符将字符串进行分割，生成的数组并不包含分隔符本身。如果在 split() 函数中不传入分隔符参数，它将会将整个字符串作为一个元素放入数组中。

join()函数

在前端开发中，join()函数是用于数组的一个方法。它将数组中的所有元素按照指定的分隔符连接起来，并返回一个字符串。

该函数的语法如下：

array.join(separator)

其中，array是要被连接的数组，separator是数组元素之间的分隔符。分隔符可以是一个字符串，用于在每个数组元素之间进行分隔。如果不提供分隔符参数，则默认使用逗号作为分隔符。

下面是一个简单的示例：

var fruits = ["apple", "banana", "orange"];
var result = fruits.join(", ");
console.log(result);//apple, banana, orange1.

在此示例中，我们将数组中的元素连接起来，并以逗号和空格作为分隔符。

需要注意的是，join()函数不会改变原始数组，而是返回一个新的字符串。如果数组中的元素是对象或其他复杂类型，会先将它们转换为字符串再进行连接。

sort()函数

前端的sort()函数是JavaScript中数组的原生方法之一。它用于对数组元素进行排序。排序可以是升序（默认）或降序。

sort()方法原地修改数组，以使其元素按照Unicode码点进行排序。它不会创建新的数组，而是直接在原始数组中重新排列元素的顺序。

例如，可以使用sort()方法对数字数组进行排序：

var numbers = [10, 5, 8, 2, 1];
numbers.sort();
console.log(numbers); // 输出 [1, 10, 2, 5, 8]

注意，由于sort()方法默认使用Unicode码点进行排序，因此数字排序的结果可能会出乎意料。

如果要按正确的数字顺序进行排序，可以提供一个比较函数作为sort()方法的参数。比较函数将告诉sort()方法如何比较数组元素。

var numbers = [10, 5, 8, 2, 1];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // 输出 [1, 2, 5, 8, 10]

上述例子中的比较函数将数组元素按升序进行排序。如果想要按降序排序，只需交换比较函数中的返回值即可。

reverse()函数

在前端开发中，reverse() 是 JavaScript 数组对象自带的一个方法，用于将数组元素的顺序反转。它会修改原数组，将数组中的元素按照相反的顺序重新排列。

使用示例：

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

在上述示例中，reverse() 方法将数组 [1, 2, 3, 4, 5] 反转为 [5, 4, 3, 2, 1]。

需要注意的是，reverse() 方法会直接修改原数组，而不是返回一个新的反转后的数组。如果希望保留原数组的不变性，可以通过先复制数组，再应用 reverse() 方法：

const array = [1, 2, 3, 4, 5];
const reversedArray = [...array].reverse();
console.log(reversedArray);  // 输出：[5, 4, 3, 2, 1]
console.log(array);  // 输出：[1, 2, 3, 4, 5]1.2.3.4.

上述示例中，[...array] 使用了 ES6 的展开语法，创建了原数组的一个浅拷贝，然后对拷贝后的数组应用 reverse() 方法，以保持原数组的不变性。

forEach()函数

在前端开发中，forEach()函数常用于对数组进行遍历，该函数会依次遍历数组中的每一个元素，可以使用回调函数对每个元素进行处理。

forEach 只是让数组里面的元素执行一次函数，并不会对原数组产生影响，也不会获得新的数组

回调函数有三个参数：当前遍历的元素值、对应的元素索引、被遍历的数组。

以下是forEach()函数的基本使用方法：

array.forEach(function(currentValue, index, array) {
  // 对每个元素做一些操作
});

其中，array是被遍历的数组，currentValue是当前遍历到的元素值，index是当前元素对应的索引。

举个例子，如果要遍历一个数字数组并计算所有元素的总和，代码如下：

const nums = [1, 2, 3, 4, 5];
let sum = 0;
nums.forEach(function(num) {
  sum += num;
});
console.log(sum);

输出结果为：15，即数字数组 [1, 2, 3, 4, 5] 内所有元素的总和。

需要注意的是，使用forEach()函数只是对数组元素进行操作，无法改变数组本身。如果要使用遍历后的数组执行其他操作，需要在回调函数中使用其他函数/方法进行处理，或者使用其他操作方式，如map()、 filter()、reduce()等函数。

filter()函数

在前端开发中，filter() 是 JavaScript 数组对象自带的一个方法，用于过滤数组元素并返回符合条件的新数组。它不会修改原数组，而是返回一个新的数组。

filter() 方法接受一个回调函数作为参数。这个回调函数会被应用于数组中的每个元素，根据回调函数的返回值来确定是否将该元素包含在新数组中。回调函数需要返回一个布尔值，true 表示将该元素包含在新数组中，false 表示不包含。

使用示例：

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(item => item > 2);
console.log(filteredArray);  // 输出：[3, 4, 5]

在上述示例中，filter() 方法使用箭头函数作为回调函数，筛选出数组中大于 2 的元素，并返回一个新数组 [3, 4, 5]。

可以在回调函数中使用各种条件和逻辑来进行过滤操作。filter() 方法会遍历原数组中的每个元素，将满足条件的元素添加到新数组中。最后返回新数组。

需要注意的是，filter() 方法始终返回一个新数组，即使条件没有匹配到任何元素时，也会返回一个空数组。如果只想获得一个匹配的元素，可以考虑使用 find() 方法，它会返回第一个匹配到的元素或 undefined。

map函数

前端中的**map**函数是JavaScript中的数组方法，它可以用于遍历数组并返回一个新的数组。**map**函数接受一个回调函数作为参数，该回调函数会对数组中的每个元素执行某个操作，并将操作后的结果存储在新的数组中。

以下是map函数的基本语法：

复制

array.map(callback(currentValue[, index[, array]])[, thisArg])1.

参数解释：

• callback：必需，表示要对每个数组元素执行的回调函数。该函数可以接受以下三个参数：

• currentValue：当前正在处理的数组元素。

• index（可选）：当前正在处理的数组元素的索引。

• array（可选）：调用map方法的数组。

• thisArg（可选）：回调函数中的this指向。

map函数将遍历数组中的每一个元素，对每个元素执行回调函数，并将回调函数的返回值存储在一个新的数组中。最后，返回这个新的数组。

以下是一个简单的示例，展示了如何使用map函数将数组中的每个元素乘以2，并得到一个新的数组：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

上述示例中，我们使用map函数遍历numbers数组中的每个元素，将每个元素乘以2，并将结果存储在doubledNumbers数组中。最终得到了一个新的数组[2, 4, 6, 8, 10]

reduce()函数

在前端开发中，reduce()函数常用于对数组进行遍历并返回一个累加值或者一个新的数据结构。该函数接收一个回调函数作为参数，该回调函数接受四个参数：accumulator（累加器）, currentValue（当前值）, currentIndex（当前索引） 和 array（原始数组）。

以下是reduce()函数的基本使用方法：

array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // 处理当前元素并返回结果
}, initialValue);

其中，array是被遍历的数组，accumulator是回调函数执行时上一次返回的累加值，currentValue是当前遍历到的元素值，currentIndex是当前元素对应的索引，initialValue是可选参数，用于设置初始累加值。

举个例子，如果要计算一个数字数组内所有元素的累加值，可以使用reduce()函数，代码如下：

var a = [1,2,3,4];
var newa= a.reduce(function(total, current){
 return total + current;
},100);
console.log(newa,a);
//110   //1 2 3 4

输出结果为：110 1 2 3 4，即数字数组 [1, 2, 3, 4, ]` 内所有元素的累加值。

需要注意的是，reduce()函数可以处理不同类型的数组，并且可以使用具有不同类型返回值的回调函数。具体使用还需根据实际情况进行灵活运用。

总结：当想改变数组的时候用map，想对数组进行过滤用filter，累加数组用reduce。

every函数

前端中的every函数是用于验证数组中的每个元素是否都满足某个条件。它接受一个回调函数作为参数，该回调函数会依次遍历数组中的每个元素，并返回一个布尔值来表示该元素是否满足条件。如果数组中的所有元素都满足条件，every函数将返回true；否则，返回false。

下面是一个示例代码，展示了如何使用every函数来判断数组中的每个元素是否都大于10：

const numbers = [12, 15, 20, 18];

const allGreaterThanTen = numbers.every(function(number) {
  return number > 10;
});
console.log(allGreaterThanTen); // 输出 true

在上面的代码中，every函数会遍历数组中的每个元素，并使用回调函数function(number)来判断每个元素是否大于10。由于数组中的所有元素都满足这个条件，所以最终返回true。

indexOf()函数

indexOf()函数是JavaScript中的一个字符串方法，用于查找字符串中指定子字符串的位置。它的语法如下：

string.indexOf(searchValue, startIndex)

其中，searchValue参数表示要搜索的子字符串，startIndex参数表示搜索的起始位置（可选，默认为0）。

这个函数返回搜索到的子字符串的第一个字符的索引值，如果未找到则返回-1。需要注意的是，索引值从0开始计数。

以下是一些示例:

复制

var str = "Hello, world!";
console.log(str.indexOf("world"));  // 输出：7
console.log(str.indexOf("o"));      // 输出：4
console.log(str.indexOf("o", 5));   // 输出：8
console.log(str.indexOf("test"));   // 输出：-1

在示例中，第一个indexOf()函数检查字符串"world"在str中的位置，返回值为7。

第二个indexOf()函数查找字符"o"在str中的位置，返回值为4。

第三个indexOf()函数从索引5开始查找字符"o"在str中的位置，返回值为8。

最后一个indexOf()函数查找字符串"test"在str中的位置，但由于没有找到，返回值为-1。

typeof （）函数

在前端开发中，typeof 操作符用于获取一个值的数据类型。

它是一个一元操作符，后面跟着要检测数据类型的值或者表达式，并返回一个表示数据类型的字符串。要注意的是，在 typeof 后面的括号中你需要放置一个要检测的值，而不是一个函数名。以下是一个示例：

复制

console.log(typeof 'Hello');  // 输出: 'string'
console.log(typeof 42);       // 输出: 'number'
console.log(typeof true);     // 输出: 'boolean'
console.log(typeof {});       // 输出: 'object'
console.log(typeof []);       // 输出: 'object'
console.log(typeof null);     // 输出: 'object'
console.log(typeof undefined);// 输出: 'undefined'
console.log(typeof function() {}); // 输出: 'function'1.2.3.4.5.6.7.8.

需要注意的是，typeof 操作符对于函数和数组返回的都是 ‘object’，这是由于历史原因。对于函数，你可以使用 typeof 来检测它是函数类型。而对于数组，可以使用 Array.isArray() 方法来更可靠地判断。

isArray函数

前端中的isArray函数用于判断一个值是否为数组。

Array.isArray(value);

这个方法会返回一个布尔值，如果 value 是一个数组，则返回 true，否则返回 false。

trim()函数

前端的trim()函数是用于去除字符串两端的空格（空格、制表符、换行符等）的函数。

示例：

const str = "   Hello, World!   ";
const trimmedStr = str.trim();

console.log(trimmedStr); // 输出：Hello, World!

在上面的例子中，原始字符串str两端都有空格，使用trim()函数去除了字符串两端的空格，并将结果赋值给变量trimmedStr。最后，输出了去除空格后的字符串。

需要注意的是，trim()函数不会改变原始字符串，而是返回一个新的字符串。

replace函数

前端的replace函数是用来替换字符串中的某个字符或者匹配的字符模式。它可以通过传入两个参数来完成替换操作，第一个参数是要被替换的内容，可以是一个具体的字符或者一个正则表达式，第二个参数是替换后的内容。

例如，使用replace函数将字符串中的所有的空格替换成"-"，可以这样写：

var str = "Hello World";
var newStr = str.replace(/\s/g, "-");
console.log(newStr); // 输出 "Hello-World"1.2.3.

这里的\s是一个正则表达式，表示空格字符，而/g则是一个修饰符，表示全局匹配。所以这个例子中的replace函数会将字符串中的所有空格字符都替换成"-"。

除了传入正则表达式，replace函数也可以传入一个普通的字符串，用来替换匹配到的内容。例如，将字符串中的"apple"替换成"orange"，可以这样写：

var str = "I like apple";
var newStr = str.replace("apple", "orange");
console.log(newStr); // 输出 "I like orange"

需要注意的是，replace函数并不会改变原字符串本身，而是返回一个新的字符串作为替换操作的结果。如果要改变原字符串，可以将返回值赋值给原字符串。