JavaScript 의 실 용적 인 팁 요약

머리말
이 글 은 평소에 자신 이 실천 한 블 로그 에서 배 운 것 과 일부 프로젝트 소스 에서 본 자바 script 기 교 를 기록 하고 있다.어떤 것들 은 기음 기교 라 고 할 수 있 고,어떤 것들 은 ES6+에서 비교적 실용성 을 가 진 새로운 문법 일 수도 있다.
&&와|||의 묘 용
때때로 우 리 는 어떤 함수 나 변수 가 true 일 때 다른 함 수 를 실행 해 야 한다.예 를 들 면:

const task1 = () => {
 console.log('   task1');
 return Math.random() >= 0.5;
}

const task2 = () => console.log('task1         task2');
if (task1()) task2();

위의 if 문 구 는&&직접 약자 로 사용 할 수 있 습 니 다.

task1() && task2();

task 1 이 실패(즉,task 1 이 false 로 돌아 가 는 것)한 후에 task 3 를 실행 하려 면 다음 을 사용 할 수 있 습 니 다.

const task3 = () => console.log('task1         task3');
task1() && task2() || task3();

본질 적 으로&&와||의 단락 특성 을 이용 했다.
사실 여기 서 조건 연산 자 를 사용 하 는 것 도 가능 하 다.

task1() ? task2() : task3();

제 가 최근 에 react hooks 를 사용 하여 개발 한 프로젝트 의 코드 세 션 을 보 여 드 리 겠 습 니 다.

const ProfileItem = (props) => {
 const { name, value, render } = props;

 return (
  <div className="profile-item">
   <span className="item-name">{name}</span>
   <form action="">
    {/*       render    props          */}
    {render && render(props) || <SimpleProfileItemContent value={value}/>}
   </form>
  </div>
 )
}

함수 기본 값
ES5 버 전
단락 이나 조작 자 를 사용 하여 함수 의 기본 값 을 설정 하 는 방식 은 흔 하 다.그러나 일부 구덩이 가 있 습 니 다.아래 에 보 여 준 코드 에서 기본 값 매개 변수 가 하나의 숫자 일 때 전 삼 이 0 인지 기본 값 을 사용 하 는 지 Y 가 0 일 때 단독으로 판단 해 야 합 니 다.

const pow = (x, y) => {
 y = y || 2;
 
 let result = 1;
 for (let i = 0, max = y; i < max; i++) {
  result *= x;
 }

 return result;
}

console.log(pow(2)); // => 4
console.log(pow(2, 3)); // => 8

//   y     0  , y    2
console.log(pow(2, 0)); // => 4

ES6 버 전
ES6 문법 차원 에서 제공 하 는 기본 값 문법 은 훨씬 믿 을 만하 다.

const pow = (x, y=2) => {
 let result = 1;
 for (let i = 0, max = y; i < max; i++) {
  result *= x;
 }

 return result;
}

console.log(pow(2)); // => 4
console.log(pow(2, 3)) // => 8
console.log(pow(2, 0)); // => 1

클래스 배열
클래스 배열 은 arguments,jquery 대상 처럼 아래 표 시 를 사용 하여 length 속성 과 배열 이 비슷 하지만 배열 의 대상 은 아 닙 니 다.
클래스 배열 에 slice,map 등 집합 함수 가 없 는 것 도 우리 가 가끔 클래스 배열 을 배열 로 바 꿔 야 하 는 이유 입 니 다.

function func() {
 for (let i = 0, max = arguments.length; i < max; i++) {
  console.log(arguments[i]);
 }

 console.log(Array.isArray(arguments)); // => false
 //       slice, forEach, map      
 console.log(arguments.slice === undefined); // => true
}

func('Google', 'facebook', 'Microsoft'); 
// => 
// Google
// facebook
// Microsoft

ES5 에서 의 전환 방법
Array 프로 토 타 입 의 slice 방법 을 arguments 대상 에 연결 하여 호출 하고 매개 변 수 를 전달 하지 않 는 목적 은 모든 요 소 를 되 돌려 주기 위해 서 입 니 다.

function func() {
 const array = Array.prototype.slice.call(arguments);
 console.log(array.slice(0, 1));
}

func('Google', 'facebook', 'Microsoft'); // => [ 'Google' ]

ES6 에서 의 전환 방법
ES6 는 클래스 배열 을 배열 로 바 꾸 는 방법 이 많다.
확장 연산 자 사용

function func() {
 console.log([...arguments])
}

func('Google', 'facebook', 'Microsoft'); // [ 'Google', 'facebook', 'Microsoft' ]

Array.from 사용 하기

function func() {
 console.log(Array.from(arguments))
}

func('Google', 'facebook', 'Microsoft'); // [ 'Google', 'facebook', 'Microsoft' ]

연속 정수 의 배열 을 구성 하 다.
여기 서 바로 제 가 생각 하 는 가장 좋 은 방법 을 알려 드릴 게 요.

//    2      8   
const array = Array.from({ length: 8}).map((ele, index) => index + 2);
console.log(array); // => [ 2, 3, 4, 5, 6, 7, 8, 9 ] 
//             , Array.from        
const array = Array.from({ length: 8}, (ele, index) => index + 2);
console.log(array); // => [ 2, 3, 4, 5, 6, 7, 8, 9 ] 

함수 매개 변 수 는 재 구성 할당 을 사용 합 니 다.
함수 매개 변수 가 비교적 많 을 때 우 리 는 매개 변 수 를 설정 대상 을 직접 받 아들 이게 합 니 다.그러나 대상 파 라 메 터 를 사용 하면 기본 값 을 설정 할 수 없습니다.함수 체 에서 대상 파 라 메 터 를 사용 할 때 대상 파 라 메 터 를 통 해 방문 해 야 합 니 다.방문 횟수 가 많 거나 끼 워 넣 으 면 불편 합 니 다.함수 매개 변수 에서 재 구성 할당 을 사용 하면 위의 문 제 를 해결 할 수 있 습 니 다.

//             ,                  
const getUsers = ({
 offset=0,
 limit=1,
 orderBy="salary"
}={}) => {
 //                
 console.log({ offset, limit, orderBy });
}

getUsers({ offset: 10, limit: 20,orderBy: 'age' }); // => { offset: 10, limit: 20, orderBy: 'age' }
getUsers();// => { offset: 0, limit: 1, orderBy: 'salary' }

사용!!다른 형식 을 bool 형 으로 변환 합 니 다.

console.log(!!{}); // true
console.log(!!0); // false
console.log(!![]); // true
console.log(!!undefined); // false

const httpGet = (url, retry) => {
 if (!!retry) {
  //     
 }
}

JSON.stringify
딥 클론
선 직렬 화 를 사용 하고 반 직렬 화 를 하 는 방식 으로 대상 을 깊이 있 게 복제 하 는 것 은 일반적인 상황 에서 매우 편리 하 며,단점 은 함수 와 계승 할 수 없 는 속성 이다.
함수 속성 을 복제 하려 면 lodash 의 cloneDeep 을 추천 합 니 다.

const me = {
  name: 'lyreal666',
  age: 23,
  speak() {
    console.log(`Hello, I'm ly!`);
  }
}

const clonedMe = JSON.parse(JSON.stringify(me));
console.log(clonedMe); // => { name: 'lyreal666', age: 23 }
console.log(clonedMe.speak === undefined); // => true

두 번 째 와 세 번 째 매개 변 수 를 사용 합 니 다.
JSON.stringify 의 두 번 째 매개 변 수 는 속성 값 을 처리 하 는 데 사 용 됩 니 다.세 번 째 매개 변 수 는 출력 된 json 문자열 의 들 여 쓰기 길 이 를 지정 하고 숫자 를 전달 할 수도 있 고 문자열 을 전달 할 수도 있 습 니 다.

const me = {
  name: 'lyreal666',
  age: 23,
  speak() {
    console.log(`Hello, I'm ly!`);
  }
}

const jsonStr = JSON.stringify(me, (key, value) => key === 'name' ? '  ' : value, 2);

console.log(jsonStr);
/* =>
{
 "name": "  ",
 "age": 23
}
*/

우아 한 커 플
해체 할당 과 Object.entries 를 사용 합 니 다.

const me = {
  name: 'lyreal666',
  age: 23,
  speak() {
    console.log(`Hello, I'm ly!`);
  }
}

for (const [key, value] of Object.entries(me)) {
  console.log(`${key}: ${value}`);
}

/* =>
name: lyreal666
age: 23
speak: speak() {
    console.log(`Hello, I'm ly!`);
  }
*/

배열 을 비 우 는 가장 빠 른 방법
댓 글 에 서 는 length 를 직접 수정 하 는 방법 에 문제 가 있다 고 합 니 다.저도 예전 에 배열 을 비 우 는 방법 에 대한 토론 을 본 적 이 있 지만 일반적인 상황 에서 이렇게 사용 하 는 것 은 문제 가 없다 고 생각 합 니 다.간단 하면 서도 새 배열 에 메모 리 를 다시 할당 하지 않 아 도 된다 고 생각 합 니 다.

const array = [1, 2, 3, 4];
array.length = 0;
console.log(array); // => []

//                    
let array = [1, 2, 3, 4];
array = [];

하나의 정수 가-1 인지 아 닌 지 를 판단 하 다.

// ~                       
console.log(~1); // => -2
console.log(~0); // => -1
console.log(~(-3)); // => 2
console.log(~(-1)); // => 0

const number = -2;

//          -1
if (!~number) {
  //   number   -1    ...
}

즉시 실행 함수
즉시 실행 함 수 는 우리 코드 의 변 수 를 외부 변 수 를 오염 시 키 지 않 게 할 수 있 습 니 다.흔히 볼 수 있 는 사용 방식 은 아래 와 같 습 니 다.

//             
(function(window, $) {
  //     
}) (window, jQuery)

더 우아 한 방식 은 다음 과 같 습 니 다.사실은 많은 다른 산술 연산 자,예 를 들 어+,-,*,~등 도 가능 합 니 다.

! function(window, $) {
  //     
} (window, jQuery)

//       +, -, *  
+ function(window, $) {
  //     
} (window, jQuery)

//           new, typeof     
new function(window, $) {
  //     
} (window, jQuery)；

set 를 사용 하여 배열 을 반복 합 니 다.

console.log([...new Set([1, 3, 1, 2, 2, 1])]); // => [ 1, 3, 2 ]

reduce 연승 또는 연 가 를 사용 합 니 다.

const array = [ 1, 2, 3, 4];
//   
console.log(array.reduce((p, c) => p + c)); // => 10
//   
console.log(array.reduce((p, c) => p * c)); // => 24

정돈 하 다
Math 중의 한 무더기 의 추출 함 수 는 여기 서 말 하지 않 겠 습 니 다.주로 비교적 교묘 하 게 추출 하 는 방식 을 제시 합 니 다.

console.log(~~3.14); // => 3
console.log(~~(-2.5)); // => -2

console.log(6.18 | 0); // => 6
console.log(-3.6 | 0); // => -3

console.log(9.9 >> 0); // => 9
console.log(-2.1 >> 0); // => -2

// superagent           http     node   ，             |
var type = status / 100 | 0;

// status / class
res.status = status;
res.statusType = type;

// basics
res.info = 1 == type;
res.ok = 2 == type;
res.clientError = 4 == type;
res.serverError = 5 == type;
res.error = 4 == type || 5 == type;

사용+다른 형식 을 number 형식 으로 변환

console.log(+'3.14'); // => 3.14
console.log(typeof +'3.14') // => number

const sleep = (milliseconds) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(), milliseconds);
    });
}

//            console.time    
! async function main() {
  const start = +new Date();
  await sleep(3000);
  const end = +new Date();
  console.log(`   ${end - start}`); //     3002
}();

과학 계수 법 을 사용 하여 큰 숫자 를 표시 하 다.

const str1 = 'hello';
const str2 = ' world'

console.time('   +      ');
for (let i = 0; i < 200000000; i++) {
  const joinedStr = str1 + str2;
}
console.timeEnd('   +      ');

console.time('            ');
//           8   0     
for (let i = 0; i < 2E8; i++) {
  const joinedStr =`${str1}${str2}`;
}
console.timeEnd('            ')

/* =>
   +      : 3238.037ms
            : 3680.225ms
*/

교환 변수 값
직접 재 구성 할당

let a = 666;
let b = 999;
[a, b] = [b, a];
console.log({ a, b }); // => { a: 999, b: 666 }

무 작위 문자열 가 져 오기
아래 표 시 된 2 가 시 작 된 문자열 을 캡 처 한 것 은 Math.random()이 되 돌아 오 는 소수 로 구 성 된 문자열 의 0 이 필요 하지 않 기 때 문 입 니 다.36 진법 을 사용 하면 문자 종류 가 더 많은 무 작위 문자열 을 만 들 수 있 습 니 다.

console.log(Math.random().toString(16).substring(2)); // 13  => 45d9d0bb10b31
console.log(Math.random().toString(36).substring(2)); // 11  => zwcx1yewjvj

평면 화 배열
ES 2019 는 Array.prototype.flat 를 신 설 했 으 며,현재 chrome 최신 정식 판 73.0.3683.103 은 지원 되 고 있 으 며,node 최신 LTS 10.15.3 은 지원 되 지 않 으 며,node 최신 개발 판 11.13.0 은 지원 되 고 있다.여기에 금 을 파 는 한 형제의 면경 에서 보 이 는 비교적 hack 방법 을 붙 이 고 상황 에 따라 유형 전환 에 주의해 야 한다.

const array = [1, [2, [3, 4], 5], 6, 7];
console.log(array.toString().split(',').map(ele => Number.parseInt(ele))); // => [ 1, 2, 3, 4, 5, 6, 7 ]

최근 에 텐 센트 면접 을 봤 는데 아 리 전단 실습 실 은 정말 한 마디 로 말 하기 어 려 웠 습 니 다.그 다음 에 글 한 편 을 통 해 제 최근 의 면접 경험 에 대해 이야기 할 계획 입 니 다.
총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.