JavaScript 유 틸 리 티 코드 팁

지난번'크롬 개발 자 도구 당신 이 모 를 수 있 는 작은 기술'글 에서 많은 개발 친구 들 의 피드백 을 받 아 이런 작은 기술 을 모 르 고 있 습 니 다.오늘 은 EcmaScript 5/6+에서 의 작은 기술 에 대해 이야기 하 겠 습 니 다.댓 글 에서 더 많은 기 교 를 토론 하 시 는 것 을 환영 합 니 다.
JSON.stringify
우 리 는 평소에 JSON 대상 을 자주 사용 합 니 다.예 를 들 어 우리 가 대상 의 깊 은 복사 본 을 실현 하려 고 할 때 JSON 대상 의 JSON.stringify 와 JSON.parse 로 똑 같은 대상 을 복사 할 수 있 고 원래 대상 에 대해 어떠한 인용 관 계 를 가지 지 않 습 니 다.localstorage 를 사용 할 때 도 사용 합 니 다.localstorage 는 문자열 형식의 내용 만 저장 할 수 있 기 때문에 저장 하기 전에 수 치 를 JSON 문자열 로 바 꾸 고 꺼 낼 때 대상 이나 배열 로 바 꿉 니 다.
JSON.stringify 방법 에 대해 서 는 대상 이나 배열 을 JSON 문자열 로 변환 하 는 데 도움 을 줄 수 있 습 니 다.우 리 는 보통 그것 의 첫 번 째 매개 변수 만 사용 하 는데,사실은 그것 에 또 다른 두 개의 매개 변수 가 있어 서,그것 으로 하여 금 매우 좋 은 기능 을 실현 하 게 할 수 있다.
먼저 문법 을 봅 시다.

JSON.stringify(value[, replacer [, space]])

인자:

value:직렬 화 될 변수의 값

대체 기.함수 나 배열 일 수 있 습 니 다.함수 라면 value 의 모든 속성 은 이 함수 의 처 리 를 거 쳐 야 합 니 다.이 함수 의 반환 값 은 마지막 으로 직렬 화 된 값 입 니 다.하나의 배열 이 라면 이 배열 의 요 소 는 문자열 이 고 이 요 소 는 value 의 키(key)로 일치 하 며 마지막 으로 직렬 화 된 결 과 는 이 배열 의 모든 요 소 를 key 로 만 포함 하 는 값 입 니 다4.567917.space:출력 수 치 를 지정 하 는 코드 들 여 쓰기,형식 을 미화 하 는 데 사용 되 며 숫자 나 문자열 일 수 있 습 니 다.숫자(최대 10)라면 줄 마다 코드 의 들 여 쓰기 가 몇 개의 빈 칸 인지 나타 낸다.문자열 이 라면 이 문자열(최대 10 글자)은 줄 마다 코드 앞 에 표 시 됩 니 다이 럴 때 는 알 겠 지.JSON.stringify 를 사용 하여 직렬 화 된 필 터 를 할 수 있 습 니 다.JSON.stringify 의 해석 논 리 를 사용자 정의 할 수 있 는 것 과 같 습 니 다.
함수 필터 사용 및 직렬 화 대상:

//   “  ”    
function replacer(key, value) {
 if (typeof value === "string") {
 return undefined;
 }
 return value;
}
var foo = {
 foundation: "Mozilla", 
 model: "box", 
 week: 45, 
 transport: "car", 
 month: 7
};
var jsonString = JSON.stringify(foo, replacer);
// {"week":45,"month":7}

배열 필터 와 직렬 화 대상 사용 하기:

//   “  ”    
const user = {
 name: 'zollero',
 nick: 'z',
 skills: ['JavaScript', 'CSS', 'HTML5']
};
JSON.stringify(user, ['name', 'skills'], 2);
// "{
// "name": "zollero",
// "skills": [
//  "JavaScript",
//  "CSS",
//  "HTML5"
// ]
// }"

또 하나의 재 미 있 는 것 은 대상 의 toJSON 속성 이다.
대상 이 toJSON 속성 이 있 으 면 직렬 화 될 때 이 대상 을 직렬 화 하지 않 고 toJSON 방법의 반환 값 을 직렬 화 합 니 다.
아래 의 예 를 보십시오.

var obj = {
 foo: 'foo',
 toJSON: function () {
 return 'bar';
 }
};
JSON.stringify(obj);  // '"bar"'
JSON.stringify({x: obj}); // '{"x":"bar"}'

세트 로 배열 의 무 게 를 실현 합 니 다.
ES6 에 새로운 데이터 구조 유형 인 Set 를 도입 했다.한편,set 와 Array 의 구 조 는 매우 유사 하고 set 와 Array 는 서로 전환 할 수 있다.
배열 이 무 거 워 지 는 것 도 비교적 흔히 볼 수 있 는 전단 면접 문제 라 고 할 수 있 습 니 다.방법 은 여러 가지 가 있 습 니 다.여 기 는 군말 이 많 지 않 습 니 다.다음은 set 와...(연산 자 확장)로 간단하게 배열 을 해서 무 게 를 줄 수 있 는 지 살 펴 보 겠 습 니 다.

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

블록 급 역할 영역 으로 이름 충돌 방지
개발 과정 에서 이름 충돌 문제 가 발생 하 는데 장면 에 따라 서로 다른 값 을 정의 하여 같은 변 수 를 부여 해 야 한 다 는 것 이다.이 문 제 를 해결 하기 위해 ES6 의 블록 급 역할 영역 을 사용 하 는 방법 을 소개 한다.
예 를 들 어 switchcase 를 사용 할 때 우 리 는 이렇게 할 수 있다.

switch (record.type) {
 case 'added': {
 const li = document.createElement('li');
 li.textContent = record.name;
 li.id = record.id;
 fragment.appendChild(li);
 break;
 }
 case 'modified': {
 const li = document.getElementById(record.id);
 li.textContent = record.name;
 break;
 }
}

함수 매개 변수 값 검사
ES6 에서 함수 에 매개 변수 기본 값 의 특성 을 추가 하고 매개 변수 에 기본 값 을 설정 할 수 있 으 며 코드 를 더욱 간결 하고 유지 할 수 있다 는 것 을 알 고 있 습 니 다.
사실 우 리 는 이 특성 을 통 해 함수 매개 변수 값 의 검 사 를 할 수 있다.
우선,함수 의 매개 변 수 는 임의의 형식의 값 일 수도 있 고 함수 일 수도 있 습 니 다.예 를 들 어 아래 의 이것:

function fix(a = getA()) {
 console.log('a', a)
}
function getA() {
 console.log('get a')
 return 2
}
fix(1);
// a 1
fix();
// get a
// a 2

이 를 통 해 알 수 있 듯 이 fix 를 호출 할 때 인자 a 를 전달 하면 함수 getA 를 실행 하지 않 고 인자 a 를 전달 하지 않 을 때 만 함수 getA 를 실행 할 수 있 습 니 다.
이때,우 리 는 이 특성 을 이용 하여 인자 a 에 필수 적 인 검 사 를 추가 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다.

function fix(a = require()) {
 console.log('a', a)
}
function require() {
 throw new Error('      a')
}
fix(1);
// a 1
fix();
// Uncaught Error:       a

해체 할당 으로 대상 속성 필터 링
앞에서 JSON.stringify 를 사용 하여 대상 의 속성 을 걸 러 내 는 방법 을 소개 했다.여기 서 우 리 는 ES6 의 해체 할당 과 연산 자의 특성 을 이용 하여 속성 을 걸 러 내 는 다른 방법 을 소개 한다.
예 를 들 어 다음 예제:

//          types    inner   outer   
const { inner, outer, ...restProps } = {
 inner: 'This is inner',
 outer: 'This is outer',
 v1: '1',
 v2: '2',
 v4: '3'
};
console.log(restProps);
// {v1: "1", v2: "2", v4: "3"}

구조 할당 값 으로 포 함 된 대상 의 속성 을 가 져 옵 니 다.
재 구성 할당 의 특성 이 매우 강하 다.그것 은 우리 가 원 하 는 것 을 쉽게 얻 을 수 있 도록 해 준다.예 를 들 어 다음 코드:

//               
const car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }
};
//      ES6       ，   { vin }    { vin: vin }
const modalAndVIN = ({ model, engine: { vin }}) => {
 console.log(`model: ${model}, vin: ${vin}`);
}
modalAndVIN(car);
// "model: bmw 2018, vin: 12345"

병합 대상
ES6 에 추 가 된 확장 연산 자 는 배열 을 재 구성 할 수도 있 고 대상 을 재 구성 할 수도 있 으 며 대상 의 모든 속성 을 펼 칠 수도 있다.
이 특성 을 통 해 우 리 는 대상 통합 작업 을 할 수 있 습 니 다.다음 과 같 습 니 다.

//            ，                 
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { c: 5, d: 9 };
const merged = { ...obj1, ...obj2 };
console.log(merged);
// {a: 1, b: 2, c: 5, d: 9}
const obj3 = { a: 1, b: 2 };
const obj4 = { c: 3, d: { e: 4, ...obj3 } };
console.log(obj4);
// {c: 3, d: {a: 1, b: 2, e: 4} }

사용===대체==
JavaScript 에서==과==은 매우 큰 차이 가 있 습 니 다.==은 양쪽 의 변 수 를 전의 한 다음 에 전의 후의 값 을 비교 합 니 다.==은 엄격하게 비교 합 니 다.양쪽 의 변 수 는 값 이 같 을 뿐만 아니 라 자신의 유형 도 같 아야 합 니 다.
자바 스 크 립 트 는 항상 신기 한 언어 로 조롱 당 합 니 다.바로 전의 적 특성 때문에==으로 깊이 묻 힌 bug 를 도입 할 수 있 습 니 다.bug 를 멀리 하 시 겠 습 니까?아니면 사용 하 시 겠 습 니까?

[10] == 10  // true
[10] === 10  // false
'10' == 10  // true
'10' === 10  // false
 [] == 0  // true
 [] === 0  // false
 '' == false // true
 '' === false // false

물론===을 사용 할 때 도 문제 가 생 길 수 있다.예 를 들 어:

NaN === NaN // false

ES6 에서 새로운 방법 을 제공 했다.Object.is()는===의 일부 특징 을 가지 고 더욱 좋 고 정확 하 며 일부 특수 한 장면 에서 더욱 잘 표현 된다.

Object.is(0 , ' ');   //false
Object.is(null, undefined); //false
Object.is([1], true);  //false
Object.is(NaN, NaN);  //true

다음 그림 은=,===과 Object.is 의 대비 입 니 다.