JavaScript开发常用函数
- String
- 数组
- 1、array.filter():接受一个函数作为参数,函数中做判断,返回符合判定条件的元素并组成一个新的数组,不会改变原数组
- 2、array.foreach(): 循环遍历数组中的每个元素并执行回调函数
- 3、array.map(): 循环遍历数组中的每个元素并执行回调函数,使用回调函数的返回值创建一个新的数组
- 4、array.find(): 查找数组中满足条件的第一个元素,如果没有找到,则返回undefined。
- 5、array.findIndex(): 查找数组中满足条件的第一个元素的索引,如果没有找到,返回-1。
- 6、array.reduce(): 数组的一个高级方法,可以对数组元素进行组合。
- 7、array.every(): 遍历数组中的元素并执行一个布尔类型的回调函数。
- 8、array.some(): 遍历数组中的元素并执行一个布尔类型的回调函数。
- 9、array.sort(): 对数组中的元素进行排序,sort()方法会改变原数组。
- 10、array.flat(): 用于将嵌套数组展平为一维数组。
- 11、array.reverse(): 将原数组转换为倒序,会直接改变原数组。
- 12、array.includes(): 遍历数组,判断数组中是否存在某个元素,返回一个布尔类型的值。
- 13、array.fill(): 将数组中的所有元素全部设置为一个给定值。
- 14、array.concat(): 组合两个数组。
- 15、array.at(): 根据索引返回指定元素,也支持负索引。
- 16、array.slice(): 截取数组中的元素
- 17、array.splice(): 截取数组中的元素
- JSON
String
1、string.split() : 以某一个字符为分割依据,将字符串转换成数组。
假如有两个URL:http://localhost:1234/api/studentLogin
、http://localhost:1234/api/teacherLogin
,我希望根据用户输入的URL来判断是学生登录还是教师登录,这里就需要判断URL的最后是studentLogin还是teacherLogin。
第一步:
先获取到浏览器当前页面URL信息:window.location.href
,这个方法的返回值是一个字符串。
第二步:
window.location.href.split('/')
,根据'/'
字符将字符串拆分成数组。
以http://localhost:1234/api/teacherLogin
为例,拆分后获取到一个length为5的数组,通过访问数组下标就可以获取URL最后一段的值
var str = "http://localhost:1234/api/teacherLogin";
var arr = str.split('/');
console.log(arr);
2、string.replace():对string进行查找和替换,并返回一个新字符串。
string.replace(regexp/substr, replacement)
regexp/substr:必需。规定子字符串或要替换的模式的 RegExp 对象。
replacement:必需。一个字符串值。规定了替换文本或生成替换文本的函数。
replace()
方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用给定的字符来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。
var str="hello world"
console.log(str.replace(/l/,"L"));
// heLlo world
var str="hello world"
console.log(str.replace(/l/g,"L"));
// heLLo worLd
数组
1、array.filter():接受一个函数作为参数,函数中做判断,返回符合判定条件的元素并组成一个新的数组,不会改变原数组
function runArr() {
var a = [1,2,3];
var b = a.filter(i => i !== 2);
console.log('a=>',a);
console.log('b=>',b);
};
runArr();
2、array.foreach(): 循环遍历数组中的每个元素并执行回调函数
const arr = [1,2,3];
cosnt re = arr.foreach(a => console.log(a));
console.log(re);
// Console: 1, 2, 3
3、array.map(): 循环遍历数组中的每个元素并执行回调函数,使用回调函数的返回值创建一个新的数组
const arr = [1, 2, '12', 12, 'a'];
const re = arr.map(a => typeof)
console.log(re);
// Console:'number', 'number', 'string', 'number', 'string'
4、array.find(): 查找数组中满足条件的第一个元素,如果没有找到,则返回undefined。
const arr = [1, 2, '12', 12, 'a'];
const re = arr.find(a => a%2 === 0);
console.log(re);
// Console: 2
5、array.findIndex(): 查找数组中满足条件的第一个元素的索引,如果没有找到,返回-1。
const arr = [1, 2, '12', 12, 'a'];
const re = arr.findIndex(a => a%2 === 0);
console.log(re);
// Console: 1
6、array.reduce(): 数组的一个高级方法,可以对数组元素进行组合。
// 语法:
array.reduce((total, currentValue, currentIndex, arr) => {}, initialValue)
参数 | 说明 |
---|---|
(total, currentValue, currentIndex, arr) => {} | 必需。遍历数组中的每个元素并执行函数。total:必需,值为initialValue或者函数返回的值;currentValue:必需,当前元素的值;index:可选,当前元素的数组索引;arr: 可选,此次遍历的数组对象 |
initialValue | 可选。作为初始值传递给函数的total |
const arr = [1, 2, 3, 4, 5];
const re = arr.reduce((a, num) => {
console.log(a, num);
return a + num;
});
console.log(re);
const arr = [1, 2, 3, 4, 5];
const re = arr.reduce((a, num) => {
console.log(a, num);
return a + num;
},1);
console.log(re);
通过上面两个简单的demo可以知道,当方法存在initialValue参数时,回调函数的初始total的值是initialValue,并且遍历从索引为0的元素开始;当方法不存在initialValue参数时,回调函数的初始total的值是数组的第一个元素,并且遍历从索引为1的元素开始。
7、array.every(): 遍历数组中的元素并执行一个布尔类型的回调函数。
当所有元素回调函数的返回值都为true时,every()方法返回true,如果有一个元素的回调函数的返回值为false,则every()方法返回false;
8、array.some(): 遍历数组中的元素并执行一个布尔类型的回调函数。
遍历数组的所有元素,并执行回调函数,只要有一个元素的回调函数返回值为true,some()方法就返回true,否则返回false
9、array.sort(): 对数组中的元素进行排序,sort()方法会改变原数组。
默认情况下,按升序对数组中的元素进行排序
const arr = [1, 2, 6, 4, 5];
const re = arr.sort();
console.log(re);
// Console: [1, 2, 4, 5, 6]
sort()方法也可以接受一个回调函数作为参数,这个回调函数有a,b两个参数,下面的demo演示了如何通过a,b两个参数实现升序和降序:
const arr = [1, 2, 6, 4, 5];
const re = arr.sort((a, b) => a - b);
console.log(re);
// Console: [1, 2, 4, 5, 6]
const arr = [1, 2, 6, 4, 5];
const re = arr.sort((a, b) => b - a);
console.log(re);
// Console: [6, 5, 4, 2, 1]
10、array.flat(): 用于将嵌套数组展平为一维数组。
flat()方法用于将多维数组降维,可以接受一个数字作为参数,这个数值指定数组降维的深度,如下面的demo所示,参数为1时,将一个三维数组降维二维数组,参数为2时,将一个三维数组降为一维数组。
const arr = [[[0,1],2,3], [2,3]];
const re = arr.flat(1);
console.log(re);
// Console: [[0,1],2,3,2,3]
const arr = [[[0,1],2,3], [2,3]];
const re = arr.flat(2);
console.log(re);
// Console: [0,1,2,3,2,3,
const arr = [[1,2,3], [2,3]];
const re = arr.flat();
console.log(re);
// Console: [1,2,3,2,3]
11、array.reverse(): 将原数组转换为倒序,会直接改变原数组。
const arr = [1,2,3];
const re = arr.reverse();
console.log(re, arr);
// Console: [3,2,1], [3,2,1]
12、array.includes(): 遍历数组,判断数组中是否存在某个元素,返回一个布尔类型的值。
const arr = [1,2,3];
const re = arr.includes(22);
console.log(re);
// Console: false
13、array.fill(): 将数组中的所有元素全部设置为一个给定值。
const arr = [1,2,3];
const re = arr.fill(22);
console.log(re);
// Console: [22,22,22]
const arr = new Array(5);
const re = arr.fill(22);
console.log(re);
// Console: [22,22,22,22,22]
14、array.concat(): 组合两个数组。
const arr = [1,2,3];
const arr2 = [4,5,6];
const re = Array.concat(arr, arr2);
console.log(re);
// Console: [1, 2, 3, 4, 5, 6]
15、array.at(): 根据索引返回指定元素,也支持负索引。
const arr = [1,2,3];
const re = arr.at(1)
console.log(re);
// Console: 2
const arr = [1,2,3];
const re = arr.at(-1)
console.log(re);
// Console: 3
负索引是从数组最后一个元素往前数。
16、array.slice(): 截取数组中的元素
slice(start,end)表示从下标start开始到下标end(不包括end)进行截取,得到的是一个新数组,不改变原数组。当start为负值时表示从倒数第几个元素开始往后截取,不填end的话就表示从倒数的第几个元素开始截取,一直截取到数组末尾元素
// 原数组
const array=[1,2,3,4,5,6,7,8]
//截取数组前三个元素
const sliceA=array.slice(0,3)
console.log('sliceA',sliceA)//得到[1,2,3]
//截取数组后三个元素
const sliceArr=array.slice(-3)
console.log('sliceArr',sliceArr)//得到[6,7,8]
17、array.splice(): 截取数组中的元素
splice()方法有三个参数,分别表示从哪个下标开始,删几个,新元素。可以实现增加、删除、替换数组元素的功能。array.splice(-3,3)表示从倒数第三个元素开始,删除五个元素。该方法返回值时删除的元素集合,会改变原数组。原数组会变成删除的元素剩下的元素集合
// 原数组
const array=[1,2,3,4,5,6,7,8]
//截取数组后三个元素 splice方法
const spliceArr=array.splice(-3,3)
console.log('spliceArr',spliceArr)//得到[6,7,8]
JSON
1、JSON.parse():将一个字符串类型数据解析成JSON对象
var str = '{ "id":1, "name":"张三"}';
console.log(JSON.parse(str));
2、JSON.stringify(): 将一个JSON对象解析为字符串
var str = { id: 1, name: '李四'};
console.log(JSON.stringify(str));