文章目录
- JavaScript 内置对象常用方法总结
- 常用内置对象都有哪些？
- Array
- Array 常用方法总结（表格）
- fliter
- reduce
- 统计数据中重复的元素的个数
- 加和
- 去重
- splice 与 slice
- flat
- String
- String 常用方法总结（表格）
- Date
- RegExp
JavaScript 内置对象常用方法总结
常用内置对象都有哪些？
- Array
- Boolean
- Number
- String
- Data
- Math
- RegExp
Array
有几个需要注意的方法，我会详细说明
Array 常用方法总结（表格）
常用方法 | 作用 | 返回值 | 是否改变原数组 |
追加和删除 | |||
| 尾部追加 | 追加后的数组长度 | 改变 |
| 尾部删除 | 删除的元素 | 改变 |
| 头部删除 | 删除的元素 | 改变 |
| 头部追加 | 追加后的数组长度 | 改变 |
拼接及切割 | |||
| 数组内元素拼接 |
| 不 |
| 数组之间拼接 | 拼接后的新数组 | 不 |
| 切割 | 切割的数组（左开右闭） | 不 |
| 切割 | 切割的数组（左闭右闭） | 改变 |
排序 | |||
| 排序 | 排序后的数组 | 改变 |
| 从小到大排序 | 排序后的数组 | 改变 |
| 从大到小排序 | 排序后的数组 | 改变 |
其他 | |||
| 翻转 | 翻转后的数组 | 改变 |
| 拍平数组 | 拍平后的数组 | 不 |
| 遍历 | - | - |
fliter
它是过滤器，注意要返回一个布尔值
var arr = [1,2,3,4,5];
var result = arr.filter(( item, index, array) => {
return item < 3
})
console.log(result); // (2) [1, 2]总结一下，这个可以根据筛选条件来提取你想要的数据，再举一个栗子。
<script>
/*filter 过滤
return 为 true 会保留
为 false 会过滤掉*/
var grade = [
{name:"zhangsan1",grade:60},
{name:"zhangsan2",grade:50},
{name:"zhangsan3",grade:40},
{name:"zhangsan4",grade:70},
{name:"zhangsan5",grade:80},
];
/*过滤器*/
var arr1 = grade.filter(function (value, index, array) {
return value.grade >= 60;
/*return == 'zhangsan1';*/
});
console.log(arr1);
</script>
reduce
首先，这些参数我也不可能一直记住，那怎么办呢？
授人以渔，测试呗，但我知道他是个累加器，有初始值，也需要有返回值。
var arr = [1,2,3,4,5];
var result = arr.reduce(( a, b , c, d, e) => {
console.log("a:", a);
// console.log("b:", b); // 1
// console.log("c:", c); // 0
// console.log("d:", d); // (5) [1, 2, 3, 4, 5]
// console.log("e:", e); // undefined
},0)我们起初可以一个一个打印，来测试。
可以发现，b这个值是每一项，c是下标，d打印的是所有数组，到e就是undefined了，没了，说明它只有四个参数。
那 a 刚开始是0，之后都是undefined了，这是为什么呢？
别忘了他是累加器啊，我们试试这样：
var arr = [1,2,3,4,5];
var result = arr.reduce((a, b) => {
console.log("a:", a);
return a + b
},0)
console.log(result); // 15
由此我们可以猜测，a值是保存每次累加之后的结果。
细心的人会发现，reduce第二个参数怎么是个0呢，别急，我们来修改一下它
var result = arr.reduce((a, b) => {
console.log("a:", a);
return a + b
},10)
console.log('result:', result); // 25
说明这第二个参数是初始值
如果不写这个值的话，那么默认初始值是数组的第一个数。
var result = arr.reduce((a, b) => {
console.log("a:", a);
return a + b
})
console.log('result:', result); // 15
由此了解reduce累加器的简单工作原理，好好命名给参数就清晰了~，它也可以累加对象中的参数，灵活运用。
var arr = [1,2,3,4,5];
var initValue = 0;
var result = arr.reduce((prev, next, index, array) => {
return prev + next;
}, initValue)
console.log('result:', result); // 15统计数据中重复的元素的个数
<script>
var arr = [1,2,3,1,1,178,1,1,1,2,2,3,15];
var sum = arr.reduce(function(prev,next) {
/*如果next在prev中*/
/*console.log(prev);*/
if(next in prev){
prev[next]++;
}else{
/*这么做就是向prev中追加新的统计元素*/
prev[next] = 1;
}
return prev;
/*这里要有个花括号，初始化prev*/
},{});
console.log(sum);
/*这里面会有key 值的排序，并不是reduce处理的，而是对象拍的序
* key值如果是数字的话，obj会自己排序*/
</script>加和
var grade = [
{name:"zhangsan1",grade:60},
{name:"zhangsan2",grade:70},
{name:"zhangsan3",grade:80},
{name:"zhangsan4",grade:90},
];
var sum = grade.reduce(function (previousValue, currentValue) {
/*注意这里赋值给prev*/
return previousValue + currentValue.grade;
},0);
console.log(sum);去重
测试去重的时候，漏敲了几行代码，导致老是提示错误，尝试打印 arr1 和 arr2 中发现途中 arr2 会变成 undefined，我猜测这个 reduce 一定是有某种机制在里面的，问老师先。
<script>
var arr1 = [1,2,3,1,23,1,2,3,1,2,3];
var arr2 = arr1.reduce(function (previousValue, currentValue) {
/*indexOf可以是数组，字符串*/
if(previousValue.indexOf(currentValue) == -1){
return previousValue.concat(currentValue);
}else{
/*必须要有这个返回值，不然你的arr2会变成undefined*/
return previousValue;
}
},[]);
console.log(arr2);
</script>测试如下
我们也可以通过算法去重
// 数组去重
// 1. 先排序
// 2. 在一遍过滤
var arr = [1,2,3,1,1,178,1,1,1,2,2,3,15,0];
arr.sort((x, y) => x - y);
var result = [];
// console.log(arr);
for (let i = 0, len = arr.length - 1; i <= len; i++) {
if(arr[i] !== arr[i+1]){
result.push(arr[i])
}
}
console.log(result); //(6) [0, 1, 2, 3, 15, 178]splice 与 slice
-
splice分割的数组是左闭右闭的，会改变原数组的 -
slice分割的数组是左闭右开的，也就是不包含第二个下标的参数，而且不会改变原数组
let arr = ['一','二','三','四'];
console.log(arr.splice(2,3)); // (2) ["三", "四"]
console.log(arr); // (2) ["一", "二"]let arr = ['一','二','三','四'];
console.log(arr.slice(2,3)); // ["三"]
console.log(arr); // (4) ["一", "二", "三", "四"]- 如果只写一个参数的话
let arr = ['一','二','三','四'];
console.log(arr.splice(2)); // (2) ["三", "四"]
console.log(arr); // (2) ["一", "二"]let arr = ['一','二','三','四'];
console.log(arr.slice(2)); // (2) ["三", "四"]
console.log(arr); // (4) ["一", "二", "三", "四"]flat
-
arr.flat()这个方法可以拍平多维数组，其中参数n代表拍平n维，而且不会修改原数组。
let arr = [1,2,3,[4,5,[6,7,8,[9,10,11,[12,13,14]]]]];
console.log(arr.flat(1)); // (6) [1, 2, 3, 4, 5, Array(4)]
console.log(arr.flat(2)); // (9) [1, 2, 3, 4, 5, 6, 7, 8, Array(4)]
console.log(arr.flat(3)); // (12) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, Array(3)]
console.log(arr.flat(Infinity)); // (14) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
console.log(arr); // (4) [1, 2, 3, Array(3)]- 也可以把残缺的数组医治好。
let arr = ['一',,,,,,1,,,,,23,,,,];
console.log(arr.flat()); // (3) ["一", 1, 23]
console.log(arr); // (15) ["一", empty × 5, 1, empty × 4, 23, empty × 3]String
String 常用方法总结（表格）
常用方法 | 作用 | 返回值 | 其他说明 |
分割 | |||
| 字符串分割成数组 | 数组 | - |
| 字符串截取 | 字符串 | 第二个参数规定截取结束的位置，默认是字符串尾部。 |
查找 | |||
| 根据下标找元素，如果越界的话返回空字符串 | 寻找的元素 | |
| 根据元素，找下表，如果查找不到返回 | 下标 | 第一个’要查找的元素’,起始位置 |
| 根据元素找下表 | 下标 | - |
| 参数可以是字符串或者正则表达式 | 数组 | |
| 从字符串开头寻找 | 布尔值 | 注意：不是包含关系，一定是要在头部开始的， |
| 从字符串尾部寻找 | 布尔值 | - |
|
| 布尔值 | |
去空格 | |||
| 去掉字符串前后的空格 | 新字符串 |
|
| 去前空格 | 新字符串 |
|
| 去尾空格 | 新字符串 |
|
| 去除所有空格 | 新字符串 | |
转换 | |||
| 转小写 | 小写字符串 | |
| 转大写 | 大写字符串 | |
补全 | |||
| 把 | 返回补足后的新字符串 | |
| 把 | 返回补足后的新字符串 | |
其他 | |||
| 重复 | 重复后的新字符串 | 不会改变原字符串 |
Date
首先定义 var date = new Date(); 调用的方法如下
-
date.getFullYear();年份 -
date.getMonth();月份 -
date.getDate();日 -
date.getHours();时 -
getMinutes();分 -
getSeconds();秒
RegExp
