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
[]

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 렌더링 시 {{}} 깜박임 문제 및 해결 방법

j텍스트가 1줄, 2줄 또는 지정된 줄 수를 초과할 때 자동으로 줄임표를 추가하는 쿼리 방법

JS EL 표현식을 사용하여 컨텍스트 매개변수 값을 얻는 방법

위 내용은 JS에서 데이터를 완벽하게 구문 분석하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!