在项目开发中会经常使用到这些js的基础API,在这里总结一些常用的API
- 数组去重
// 简单的数组去重
const array = [1, 2, 3, 4, 5, 6, 2, 3, 6, 9];
array.filter((item, key, arr) => arr.indexOf(item) === key);
// or
const newarr = [...new Set(array)];
// console.log(newarr);
2.但是在项目中有时候我们经常遇到的是对象数组去重,直接封装一个方法来调用
let objectArr = [
{ first_name: '1号', id: '1' },
{ first_name: '2号', id: '2' },
{ first_name: '3号', id: '3' },
{ first_name: '相同2号', id: '2' }
];
let list = [
{ first_name: '4号', id: '4' },
{ first_name: '5号', id: '5' },
{ first_name: '6号', id: '6' },
{ first_name: '7号', id: '3' }
]
function arrayUnique(arr, key) {
// 1. 原生方法,原生方法需要传递key(id)值,或者写死为id,但有些需求是根据名字name来去重的也有,具体看个人需求传啥吧
let newobj = {}, newArr = [];
// for (let i = 0; i < arr.length; i++) {
// let item = arr[i];
// if (!newobj[item[key]]) {
// newobj[item[key]] = newArr.push(item);
// }
// }
// 2. 数组的reduce()方法(ie9以下不支持此方法)
newArr = arr.reduce((preVal, curVal) => {
newobj[curVal.id] ? '' : newobj[curVal.id] = preVal.push(curVal);
return preVal
}, [])
return newArr
// 实现去重的方法很多,看个人用法
}
- 对比两个数组是否存在相同的id,存在相同则返回 true,不存在相同则返回 false
/**
* 判断两个数组里的对象id是否存在相同,存在相同则返回 true,不存在相同则返回 false
* 需求是勾选,筛选数据的时候不能和另外一组存在相同的选项,来做一个提示,项目中很多地方用到,封装函数方便全局调用
*
*/
// console.log(contrastArr(objectArr, list));
function contrastArr(arr1, arr2) {
let flag = false
for (let i = 0; i < arr2.length; i++) {
for (let j = 0; j < arr1.length; j++) {
if (arr1[j].id == arr2[i].id) {
// console.log(arr1[j],arr2[i]); 找出相对应的对象做逻辑处理
flag = true
break
}
}
}
return flag
}
4.//数组排序 大小排序
var sortarr = [99, 33, 77, 66, 11, 22, 101];
function sortNumber(a, b) {
return a - b
}
// console.log(sortarr.sort(sortNumber));
5./数组拼接 concat
var arrconcat = [{ George: '1' }, { John: '2' }, { Thomas: '3' }];
var arr2 = [{ James: '4' }, { Adrew: '5' }, { Martin: '6' }];
console.log(arrconcat.concat(arr2));
6.数组,对象属性删除
// delete 数组
let arrd = [0, 1, 2];
delete arrd[1];
// console.log(arrd); // [0, empty, 2]
//对象
let objd = { name: '刘亦菲', age: '18', sex: '女' };
delete objd.sex;
// console.log(objd); // {name: "刘亦菲", age: "18"}
const arr3 = [3, 4, 4, 5, 4, 6, 5, 7];
// const a = arr3.shift(); // 把数组的第一个元素从其中删除,并返回第一个元素的值(改变原数组)
// const a = arr3.unshift(8); // (改变原数组)
// const a = arr3.push(8,9) //在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度 (改变原数组)
// console.log(arr3.join('-')); // 3-4-4-5-4-6-5-7 以参数作为分隔符,将所有参数组成一个字符串返回(默认逗号分隔)
// console.log(arr3.toString()); // 3,4,4,5,4,6,5,7 数组转字符串 join 也可以
// console.log(arr3.join());
let str = "abc,abcd,abcde"; //字符串转数组
let s = str.split(",");// 在每个逗号(,)处进行分解。 [abc,abcd,abcde]
// slice(start, end) 用于提取原来数组的一部分,会返回一个提取的新数组,原数组不变
//数组 , 对象都可以
let arr_start = [3, 4, 4, 5, 4, 6, 5, 7];
let a = arr_start.slice(2, 5); // [4, 5, 4]
let obj_start = [
{ first_name: '1号', id: '0' },
{ first_name: '2号', id: '1' },
{ first_name: '3号', id: '2' },
{ first_name: '4号', id: '3' },
{ first_name: '5号', id: '4' },
{ first_name: '6号', id: '5' },
{ first_name: '7号', id: '6' },
{ first_name: '8号', id: '7' },
]
// let newa = obj_start.slice(2, 5) // 从第2个开始提取,索引从0开始算,到第5个为止不包括第5个
// let newa = obj_start.splice(2, 5) // 会改变原数组,从索引第2个开始截取,截取5个
// splice(t, v, s)t: 被删除元素的起始位置;v:被删除元素个数;s:s 以及后面的元素为被插入的新元素
let newa = obj_start.splice(2, 5, { first_name: '插入进来的元素', id: '9' })//在原数组删除后,往原数组插入一个对象
// console.log(newa) // newa提取后的新数组, obj_start已经被改变
7.map 和forEach ,filter ,find
// map 依次遍历数组成员,根据遍历结果返回一个新数组。(不会改变原始数组)
// forEach 跟 map 方法类似,遍历数组,区别是无返回值。 会改变原始数组
let esArr = [1, 2, 3, 4]
let newEs = esArr.map((item) => {
return item * 2
})
// console.log(newEs); //返回新的数组,不会改变原始数组
let isA = [
{ name: 'lilei', age: '25', sex: 'men' },
{ name: 'nike', age: '23', sex: 'men' },
{ name: 'alisa', age: '23', sex: 'men' }
]
isA.forEach((value, index) => {
// value['age'] = '18'
value.age = '18'
})
// console.log(isA);
// 过滤函数,返回符合条件的元素的数组
const arrFilter = [3, 4, 4, 5, 4, 6, 5, 7];
const af = arrFilter.filter(item => {
return item >= 4 && item <= 6
});
// 数组实例的`find`方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为`true`的成员,然后返回该成员。如果没有符合条件的成员,则返回`undefined`。
const afin = arrFilter.find((item, index) => {
return item >= 10
});
8.reduce
pre: 必填,累计变量;cur:必填,当前变量;curIndex: 可选,当前位置;arr: 可选,原数组;
// 计算数组中每个元素出现的次数
let names = ['小明', '小红', '张三', '李四', '王五', '小红'];
let nameNum = names.reduce((pre, cur, curIndex, arr) => {
if (cur in pre) {
pre[cur]++
} else {
pre[cur] = 1
}
return pre
}, {})
// console.log(nameNum);
let arrRe = [1, 2, 3, 4]; //
let sum = arrRe.reduce((x, y) => {
return x + y
})
let mul = arrRe.reduce((x, y) => x * y)
// console.log(sum); //求和,10
// console.log(mul); //求乘积,24
9…trim() 去掉字符串两端的空格
const str_s = ' hello world ';
console.log(str_s.trim()) // hello world(不会改变原数组)
10.Array.isArray()用来判断是不是数据是不是一个数组,返回值为 true 或 false。
const arr = [{name:'张三',id:'123'}];
console.log(Array.isArray(arr)) // true
11.replace()替换匹配的字符串
const reArr = 'hello world';
console.log(reArr.replace('world', '世界')) // hello 世界
- 合并对象
// 合并对象
let a1 = { v: 'Vue' }
let a2 = { r: 'React' }
let a3 = { A: 'Angular' }
let oas = {...a1,...a2,...a3}
// 象合并也可以使用 Object.assign({},{})
- 将数组中字符串转换成整型,
有时候后端传给前端的是 [“1”, “2”, “3”]这样的的数据,但前端需要的是[1,2,3] 这样整数类型的
var arrmap = ["1", "2", "3"];
integer= arrmap.map(function (data) {
return +data;
});//此时arr变成[1,2,3]
虽然这是一些简单处理数据的API,项目中也经常用到,方便下次用到记录一下,
面试中也经常被面试官问到,有些面试官就喜欢问一些基础的东西,在一些场景下用什么方法去处理,在项目中用多了也就牢记于心了,还有一些ES6基础也是必问的