JavaScript 코드 간결성 팁

이 기사의 주요 목적은 직장에서 우리를 빛나게 만드는 모든 JavaScript 코드 간결성 팁을 여러분과 함께 배우는 것입니다.

참고: 아래 코드 비교에는 절대적인 옳고 그름이 없습니다. 일부 작성 방법은 상대적으로 단일한 사용 시나리오를 가지고 있습니다. 모든 사람의 습관과 선호도에 따라 판단할 수 있습니다. 더 좋은 의견이나 다른 의견이 있으면 메시지를 남겨주세요. ~

( 무료 학습 권장 사항: javascript 비디오 튜토리얼)

1. 단락 작업:

이런 상황이 발생하면

const res1 = item.a ? item.a : item.b // 看起来很是简洁const res2 = item.a ? item.b : item.a // 看起来很是简洁

을 사용하시겠습니까? 아니면 js 논리 연산을 사용하시겠습니까? 그것을 구현하려면?

const res1 = item.a || item.b;const res1 = item.a && item.b;

2. 조건부 판단을 통해 변수에 부울 값을 할당하는 올바른 방법:

결과를 얻기 위해 단일 값을 비교해야 하는 경우 직접 연산을 사용하고, 그렇지 않으면 if 판단이 훨씬 간단합니다~

let res;if(a === '余光'){
	res = true }else{
	res = false;}// good?const res = a === '余光'

3. if에서 배열의 길이가 0이 아닌지 확인하는 올바른 자세:

시나리오: 배열에 요소가 있는 경우 다음 작업을 수행합니다.

// badif (arr.length !== 0) {
    // todo}// goodif (arr.length) {
    // todo}

비유하자면, 결정해야 할 때 배열의 길이가 비어 있는지 여부 :

if(!arr.length){
	// todo}

4. 판단을 단순화하기 위해 포함을 사용합니다.

시나리오: 매개변수가 1, 2, 3, 4와 같으면 다음 단계로 진행합니다

코드의 첫 번째 버전:

if(a === 1 || a === 2 || a === 3 || a ===4){
	// todo}

읽고 나니 기분이 이상해져서 다음과 같이 수정했습니다.

if([1,2,3,4].includes(a)){
	// todo}

5 일부를 사용하여 정규화된 값이 있는지 확인합니다.

시나리오: 찾기 n

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: '帽子', price: 50},]function checkData(n){
	for(let i = 0; i < item.length; i++){
		if(item.price < n){
			return true;
		}
	}
	return false;}

보다 낮은 가격의 제품이 있는지

메소드가 작성되어 있지만 js에서 제공하므로 다중 배열 메소드 사용:

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: &#39;帽子&#39;, price: 50},]const checkData = (n) => itemList.some(item => item.price < n)

Optimize again

const checkData = (n, itemList) => itemList.some(item => item.price < n)

6. 필터 메소드를 사용하여 필터링합니다. 원본 배열을 사용하여 새 배열 만들기

시나리오: 일부 불필요한 요소를 제거합니다. 예를 들어 각 데이터 조각의 ID는 작업에 필요한 데이터입니다. 결함이 있는 데이터를 제거하기 위해 다음을 수행합니다.

const data = [
    { name: '手机', price: 1000, id: 1 },
    { name: '手机壳', price: 10, id: 2 },
    { name: &#39;帽子&#39;, price: 50, id: &#39;&#39; },]// badlet newArr = []for (let i = 0; i < data.length; i ++) {
    if (data.id) {
        newArr.push(arr[i])
    }}

"필터링" 개념을 익히고 다음과 같이 처리합니다:

const afterData = data.filter(item => item.id);

7. 맵을 사용하여 배열의 요소를 일괄 처리합니다.

시나리오: 가격과 관련된 상호 작용에서 우리가 얻는 가격 필드는 다음과 같습니다. 보통 센트 단위로 표시하나요?

const data = [10000, 20000, 980000]const afterData = data.map(price => price / 100)

8. 변수 값을 대체하기 위해 배열 분해 ​​

시나리오: 두 값을 교환해야 합니다.

// badlet a = 1,
    b = 2let temp = a
a = b
b = temp// goodlet a = 1,
    b = 2[b, a] = [a, b]

9 구조 분해를 코드에 통합합니다.

시나리오: 객체, 그리고 기본값을 설정하세요

코드의 첫 번째 버전을 작성하세요:

// badsetForm (person) {
    this.name = person.name    this.age = person.age 
}// goodsetForm ({name = '余光', age}) {
    this.name = name    this.age = age 
}

10. 여러 메서드를 결합하면 무엇을 할 수 있나요? (예시 1)

코드의 마지막 간결한 아이디어입니다. 다른 사람들에게 영감을 줄 수 있도록 특정 장면 거리를 두겠습니다. 댓글 영역에 메시지를 남겨주세요~

시나리오:

데이터 프런트 엔드에서 얻은 것은

data = [
    { id: 1, name: '一级标题-1' },
    { id: 2, name: '一级标题-2' },
    { id: 3, name: '二级标题-1', pid: 1 },
    { id: 3, name: '一级标题-3' },
    { id: 3, name: '二级标题-2', pid: 2 },]

다음과 같은 형식과 관계가 필요합니다.

needData = [
    {
        id: 1,
        name: '一级标题-1',
        children: [
            { id: 3, name: '二级标题-1', pid: 1 }
        ]
    },
    {
        id: 2,
        name: '一级标题-2',
        children: [
            { id: 5, name: '二级标题-2', pid: 2 }
        ]
    },
    { id: 4, name: '一级标题-3' },]

그래서 배열에서 제공하는 여러 API를 사용했습니다.

newList = data.reduce((result, item, _, arr) => {
    if (!item.pid) {
        return [...result, item];
    }
    const parentItem = arr.find(({ id }) => id === item.pid);
    if (parentItem) {
        const { children = [] } = parentItem;
        parentItem.children = [...children, item];
    }
    return result;}, []);

아이디어:

1. 부모가 있는 요소 찾기
2. 보내기 올바른 위치로
3. 부모(pid) 데이터 없이 모든 필드를 반환

더 유사한 아이디어와 작업이 있으면 꼭 메시지를 남겨주세요

관련 무료 학습 권장 사항: javascript (동영상)

위 내용은 JavaScript 코드 간결성 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!