常用方法总结
JSON
parse(): 以文本字符串形式接受 JSON 对象作为参数，并返回相应的对象。
stringify(): 接收一个对象作为参数，返回一个对应的 JSON 字符串。
口语化理解：JSON.stringify()将不同数据类型的数据转为JSON字符串，JSON.parse()将JSON数据转换为他原本的数据类型。
JSON的数格式，首先必须是一个字符串，其次属性必须也是字符串形式，值可以是任意形式。
'{"student": "小米","id":18}'
如果一条数据是JSON形式，我们可以直接用parse将他外围的引号和属性的引号去掉，返回一个新类型的数据。
Object
Object.assign():通过复制一个或多个对象来创建一个新的对象。
Object.entries():返回给定对象自身可枚举属性的 [key, value] 数组。
Object.is():比较两个值是否相同。所有 NaN 值都相等（这与== 和 === 不同）。
Object.keys():返回一个包含所有给定对象自身可枚举属性名称的数组。
Object.values():返回给定对象自身可枚举值的数组。
var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
# 如果对象属性是 Number 则从小到大输出
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
console.log(Object.values('foo')); // ['f', 'o', 'o']
Math
Math.floor() 函数总是返回小于等于一个给定数字的最大整数。(向下取整)
Math.max() 函数返回作为输入参数的最大数字，如果没有参数，则返回 -Infinity。
Math.min() 函数返回作为输入参数的数字中最小的一个，如果没有参数，则返回 Infinity。
Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
Math.round() 函数返回一个数字四舍五入后最接近的整数。
Math的妙用
🥀四舍五入保留两位小数
方法一：使用Math.round()方法+除法
Math.round((3.6666)*100)/100 //3.67
方法二：直接使用数字类型自带的方法toFixed(n)
let num = 3.66666
num.toFixed(2) //3.67
Array
1.join (原数组不受影响)
该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。
返回值:返回一个新的字符串
//将数组用 - 符号连接起来
let arr = [1,2,3,4,5];
let str = arr.join('-');
console.log(str)//str = 1-2-3-4-5;
join('拼接符号')，拼接符号可以是任意值(代码，表情，符号 ...)
2.split (原数组不受影响)
该方法是用过指定的分隔符,将字符串分割成数组。
返回值:返回一个新的数组
let str = 'wqz-ttj'；
let arr = str.split('-');
console.log(arr);// arr=['wqz','ttj'];
let arr = str.split('');
console.log(arr);// arr=['w','q','z','t','t','j'];
数组的增删操作(直接改变原数组)
3.push
该方法可以在数组的最后面,添加一个或者多个元素
结构: arr.push(值)
返回值:返回的是添加元素后数组的长度.
4.pop
该方法可以在数组的最后面,删除一个元素
结构: arr.pop()
返回值:返回的是刚才删除的元素.
5.unshift
该方法可以在数组的最前面,添加一个或者几个元素
结构: arr.unshift(值)
返回值: 返回的是添加元素后数组的长度
6.shift
该方法可以在数组的最前面,删除一个元素
结构: arr.shift()
返回值: 返回的是刚才删除的元素.
数组的翻转和排序(改变数组)
7.reverse 翻转数组
结构:arr.reserse(),修改的是原数组。
8.sort
该方法可以对数组进行排序，修改的是原数组。
let arr = [1,3,5,2,4,23,122,34];
//没有参数:时按照首字符的先后排序
arr.sort()//arr=[1,122,2,23,3,34,4,5];
//有参数
arr.sort(function(a,b){
return a-b;//从小到大排序
return b-a;//从大到小排序
})
数组的拼接与截取(原数组不受影响)
9.concat
该方法可以把两个数组里的元素拼接成一个新的数组
返回值: 返回拼接后的新数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = arr1.concat(arr2);//arr = [1,2,3,4,5,6];
arr1.push(arr2);//arr1 = [1,2,3,[4,5,6]];
该方法和push的区别: push是直接把后一个元素原封不动的添加到第一个数组的后面;
10.slice 截取 出来
该方法可以从数组中截取指定的字段,返回出来
返回值:返回截取出来的字段,放到新的数组中,不改变原数组
结构1: arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(0,3)//newArr = [0,1,2];
结构2: arr.slice(start) ;从start下标开始截取,一直到最后
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [2，3，4，5，6，7];
结构3: arr.slice( ) ;全部截取
let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice()//newArr = [0,1,2,3,4,5,6,7];
删除或增加元素(任意在任何位置,直接改变原数组,返回的是被删除元素组成的新数组或者空数组)
11.splice
结构1: arr.splice(start,deletedCount) 纯删除
从start下标开始,删除几个
结构2: arr.splice(start,deletedCount,item) 替换
从start下标开始,删除几个,并在该位置添加item
结构3: arr.splice(start,0,item) 纯添加
从start下标开始,删除0个,并在该位置添加item,start开始全部往后移动
let arr = [1,2,6,7,8];
arr.splice(2,0,3,4,5);//arr = [1,2,3,4,5,6,7,8];
查找元素在数组中出现的位置
12.indexOf
该方法用来查找元素在数组中第一次出现的位置
结构: arr.indexOf(元素)
特殊用法:
(1) arr.indexOf (ele,fromIndex),从fromIndex这个下标开始,元素第一次出现的位置
用来判断元素是否存在于数组中!
if (arr.indexOf(ele) === -1){//说明元素不存在!!
console.log('元素不存在!)
} else {
console.log(' 元素存在! ')
}
13.lastIndexOf()
该方法用来查找元素最后一次在数组中出现的位置
14.includes()
数组是否包含指定值。返回值为true 或 false
// 参数1：包含的指定值
[1, 2, 3].includes(1); // true
// 参数2：可选，搜索的起始索引，默认为0
[1, 2, 3].includes(1, 2); // false
// NaN 的包含判断
[1, NaN, 3].includes(NaN); // true
数组方法的巧妙运用
1.字符串翻转
const src = 'abcd'
// 将字符串分割成数组
const arrSrc = src.split('') //['a','b','c','d']
// 利用数组的reverse方法翻转数组
const chuange = arrSrc.reverse() //['d','c','b','a']
// 再利用数组的join方法将数组拼接成字符串
const newSrc = change.join('') //'dcba'
// 可缩写为
const newSrc = src.split('').reverse().join('')
ES6新增的遍历数组方法
1.forEach( )
该方法等同于for循环,没有返回值
用法:
arr.forEach(function(item,index,arr){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值 (一般情况不用到)
//arr: 就是调用该方法的数组本身 (一般情况不用到)
})
2.for of
const array1 = ['a', 'b', 'c'];
for (const element of array1) {
console.log(element);
}
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"
3.map( )
映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值 (一般情况不用到)
//arr: 就是调用该方法的数组本身 (一般情况不用到)
用法:
//基本函数
const arr = [1,2,3,4,5];
const res = arr.map(function(item,index,arr){
return item*2;
})
//箭头函数
const res = arr.map(item =>item*2) //res[2,4,6,8,10]
4.filter( )
filter方法: 有返回值(返回一个新数组), 过滤出符合条件的元素
const arr = [1, 3, 5, 2, 4, 6];
//基本函数
const res = arr.filter(function(item, index) {
return item % 2 === 0;
});
//箭头函数
const res = arr.filter(item => item %2 === 0)
console.log(res); //[2,4,6]
过滤出布尔类型为true的项
const arr = [0, "", false, 1, 3, 4];
const res = arr.filter(function(item, index) {
return item;
});
console.log(res);
5.some
判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false
const arr = [
{ name: "zs", age: 18},
{ name: "ls", age: 20},
{ name: "ww", age: 22}
];
// 基本函数
const res = arr.some(function(item) {
return item.name === 'ww';
});
// 箭头函数
const res = arr.some(item =>item.name === 'ww')
console.log(res);
6.every
判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false
const arr = [
{ name: "zs", age: 18},
{ name: "ls", age: 20},
{ name: "ww", age: 22}
];
// 基本函数
const res = arr.every(function(item) {
return item.age === 18;
});
// 箭头函数
const res = arr.every(item => item.age === 18)
console.log(res);
7.find
找到符合条件的项,并且返回第一项，修改这一项的数据就是修改原数组数据
const arr = [
{ id: 3, name: "ls", done: false },
{ id: 1, name: "zs", done: true },
{ id: 2, name: "ww", done: true }
];
// 基本函数
const res = arr.find(function(item) {
return item.name === zs;
});
// 箭头函数
const res = arr.find(item => {
return item.name === zs;
});
console.log(res); // { id: 1, name: "zs", done: true }
8.findIndex
找到符合条件的项，并且返回第一个的下标
const arr = [
{ id: 3, name: "ls", done: false },
{ id: 1, name: "zs", done: true },
{ id: 2, name: "ww", done: true }
];
var res = arr.findIndex(function(item) {
return item.done;
});
console.log(res);
9.reduce
1.求和计算
*第一次：pre–>1 next–>2 index–>1
pre+next=1+2=3
*第二次：pre–>3 next–>3 index–>2
pre+next=3+3=6
*第三次：pre–>6 next–>4 index–>3
pre+next=6+4=10
*第四次：pre–>10 next–>5 index–>4
const arr = [1,2,3,4,5] ;
// 基本函数
const newArr = arr.reduce(function(pre,next,index){
return pre+next ;
//pre+next=10+5=15
})
// 箭头函数
const newArr = arr.reduce((pre,item)=>pre+item)
console.log(newArr);
2.扁平化数组(拼接数组)
var arr2 = [[1,2,3],[4,5],[6,7]] ;
var new2 = arr2.reduce(function(pre,next,index){
return pre.concat(next); //前数组拼接后数组 .concat()
})
console.log(new2);
对象数组叠加计算
var arr3 = [
{price:10,count:1},
{price:15,count:2},
{price:10,count:3}
];
var new3 = arr3.reduce(function(pre,next,index){
return pre+next.price*next.count;
},0) //pre是数组的第一项，是一个对象，不能算术运算.我们在后面自定义pre为0，next为数组第一项
console.log(new3);
应用 : 利用数组拼接的方法实现遍历添加html元素
具有和for-in，map相同的功能
const res = data.reduce((pre, item) => {
return pre + `
<tr>
<th scope="row">${item.id}</th>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.sex}</td>
<td>${item.group}</td>
<td>${item.phone}</td>
<td>${item.salary}</td>
<td>${item.truesalary}</td>
<td>${item.province + item.city + item.county}</td>
<td>
<button type="button" class="btn btn-primary btn-sm">修改</button>
<button type="button" class="btn btn-danger btn-sm">删除</button>
</td>
</tr>
`
}, '')
最后一行的''就是自定义的第一项，下一次pre是上一次return的结果，res获取return的pre总和。
item是data数组的每一项，data是数组里面保存的是很多对象