巩固基础,项目中常用的js场景代码

151 阅读2分钟

巩固基础,项目中常用的js场景代码

let arr = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 1, name: 'c'}]

  1. 数组对象根据唯一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 ? '是' : '否'