이번에는 js 데이터 파싱 스킬에 대한 요약을 가져오겠습니다. js 데이터 파싱 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
프런트엔드와 백엔드가 분리된 이후 일부 백엔드 파트너가 제공하는 데이터 구조가 점점 더 혼란스러워졌습니다. 분리하면 부담이 줄어들고, 인터페이스의 질도 매우 높을 거라 생각했는데, 인간의 게으름은 '완벽'한 것으로 드러났다. js는 타자화된 언어이기 때문에 데이터를 사용할 때 이러한 오류가 자주 발생합니다
TypeError: Cannot read property 'xxx' of undefined TypeError: Cannot read property 'xxx' of null TypeError: xxx.map is not a function
그리고 이러한 예외는 찾기 어렵고, 제때에 온라인에 게시하더라도 발견되지 않을 수 있습니다. 이러한 문제는 데이터 이상으로 인해 발생하기 때문입니다. 사용자 경험에 영향을 미치는 이러한 문제를 우아하게 해결하거나 피한다면 어떨까요?
// 第一种做法肯定是这样的 if(a){ return a.name || '你没名字' } // 这种做法处理简单的还能凑合用,但是如果你遇到这样的呢 user.country.area.city.name,难道要这样写 if(user && user.country && user.country.area && user.country.area.city){ return user.country.area.city.name || '你没名字' } // 这是多么痛苦的一件事情 @后端兄弟 // 第二种,感谢es6 let {country={area:{city:{name:'你没名字'}}}} = user; 这个感觉也不是很好的解决方案 // 第三种,利用reduce构建一个解析函数 function getValue(obj,key){ return key.split('.').reduce(function(o,k){ // o,当前对象 // key,数组下一个元素 if((typeof o === 'undefined' || o === null)){ return k.indexOf('[array]') !== -1?[]:o }else{ return k.indexOf('[array]') !== -1?(o[k.replace('[array]','')]||[]):o[k] } },obj) } let user1; let user2 = { } let user3 = { country:{ area:{ city:{ name:'12312' } } } } let user4 = { country:[ { city:{ name:'12312' } } ] } let user5 = { country:{ city:[1,2,3] } } console.log(getValue(user1,'country.area.city.name')) console.log(getValue(user2,'country.area.city.name')) console.log(getValue(user3,'country.area.city.name')) console.log(getValue(user5,'country.city[array]')) console.log(getValue(user5,'country.city[array].1')) console.log(getValue(user5,'country.city[array].10')) console.log(getValue(user5,'country.city[array].1.name')) console.log(getValue(user5,'country.city[array].persion[array]')) // 输出结果 undefined undefined "12312" [1, 2, 3] 2 undefined undefined []
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
jquery 드래그 파일 업로드 로드 추가 진행률 표시줄JS 프로토타입 및 프로토타입 체인 사용에 대한 자세한 설명위 내용은 js 데이터 구문 분석 기술 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!