巩固基础,项目中常用的js场景代码
let arr = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 1, name: 'c'}]
- 数组对象根据唯一id去重:
let obj = {};
arr = arr.reduce((cur, next)=> {
obj[next.id] ? '' : obj[next.id] = true && cur.push(next);
return cur;
}, []);
2 数组寻找某项:
// filter 通过某个属性进行过滤 返回符合条件的对象数组
let filterArr = arr.filter(item => item.id === 1);
// find 也是通过某个属性查找 返回符合条件的第一个对象
let findArr = arr.find(item => item.id === 1) ;
// findIndex 与find类似 返回的是符合条件的第一个对象下标
let findIndex = arr.findIndex(item => item.id === 1);
// 判断数组中是否包含某个值
arr.includes('4') === true ? '是' : '否';
3 数组常用循环
// for 大多数场景都能用得到的 break跳出循环
// 循环中需要删除数组中符合某个条件的对象,除了用过滤filter,把符合条件的筛出去,也可以用for循环
for(let i = 0; i < arr.length; i ++) {
// 删除数组中id为1的对象
if (arr[i].id === 1) {
arr.splice(i, 1);
//重置i,否则i会跳一位
i--;
};
}
// forEach 注意用break或者return不能跳出循环;可以用一个flag作标记,在forEach外面return;或者 try catch 跳出循环
try {
arr.forEach((item, index) => {
if(item.id === 1) {
throw new Error("我抛出的错误")
}
})
}
catch(e) { console.log(e) }
// map 返回一个新数组 不会改变原数组
let newArr = arr.map((item, index)=> { if(item.id === 1) { item.name = 'd' } return item; }
// some every循环
// 和filter一起使用查两个数组的交集和并集
let arr2 = [{id: 1, name: 'a'}]
// 并集
let union = arr.filter(item => arr2.every(v => item.id !== v.id));
// 交集
let intersect = arr.filter(item => arr2.some(v => item.id === v.id));
// 数组对象中某个值循环累加
let sourceData = [{inputAmt: 1, name: '张三'}, {inputAmt: 9, name: '李四'}}]
let sum = sourceData.reduce((total,cur) =>{ return total + cur.inputAmt }, 0)
4 对象循环
let obj = { a: 1, b: 2, c: 3 }
// for in 循环
for(let key in obj) {
console.log(key)
}
// Object.key(obj): 对象key值组成的数组 Object.values(obj):对象value组成的数组 Object.keys(obj).forEach(key => {
console.log(key)
})
Object.values(obj).forEach(value => {
console.log(value)
})
// for of
for (const [key, value] of Object.entries(obj)) {
console.log(key, value)
}
5 字符串处理
let str = 'http://www.baidu.com/#'
// 查找字符下标
let index = str.indexOf('/', 10)
// 从下标10往后找 lastIndexOf则从后往前找
// 截去字符串最后一个字符
// 使用substring接收两个参数,开始点截取,结束点不截取;
// 若第二个参数省略, 表示截取到结尾
str = str.substring(0, str.length - 1)
// 替换字符串中符合要求的字符 使用replace
str = str.replace('http', 'https')
// 转为大小写
let upperStr = str.toUpperCase() // 大写
let lowerStr = str.toLowerCase() // 小写
6 其他常用的对象和数组操作
let arr = [0, 1, 2]
let obj = {a: 1, b: 2}
// 对象合并 注意如果两个对象有相同的属性,后面的obj2 a值会替换obj1的a值
let obj1 = {a: 1, b: 2};
let obj2 = {a: 3, c: 4, d: 5};
let objSum = Object.assign({}, obj1, obj2);
// 或者es6的扩展运算
objSum = {...obj1, ...obj2};
// 判断对象是否为{}包裹的对象格式
Object.prototype.string.call(obj) === '[object Object]' ? '是' : '否'
// 判断是否为数组格式
Array.isArray(arr) === true ? '是' : '否'