15가지 JavaScript 개발 기술 요약(정리 및 공유)

이 글에서는 프로젝트에서 자주 사용되는 몇 가지 팁을 공유하겠습니다. JavaScript에는 대부분의 초보자와 중급 개발자가 모르는 멋진 기능이 많이 있습니다. 그것이 모두에게 도움이 되기를 바랍니다.

1. 조건부로 객체에 속성 추가

스프레드 연산자(...)를 사용하여 JS 객체에 조건부로 속성을 빠르게 추가할 수 있습니다.

const condition = true;
const person = {
  id: 1,
  name: 'John Doe',
  ...(condition && { age: 16 }),
};

&& 연산자는 각 피연산자가 true로 평가되면 마지막으로 평가된 표현식을 반환합니다. 따라서 {age: 16} 객체가 반환되고, 이는 person 객체의 일부로 확장됩니다.

조건이 false인 경우 JavaScript는 다음과 같은 작업을 수행합니다.

const person = {
  id: 1,
  name: '前端小智',
  ...(false), 
};
// 展开 `false` 对对象没有影响
console.log(person); // { id: 1, name: 'John Doe' }

2. 객체에 속성이 있는지 확인합니다.

in 키워드를 사용하여 JavaScript 객체에 특정 속성이 있는지 확인할 수 있습니다. .

const person = { name: '前端小智', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

3. 객체의 동적 속성 이름

동적 키를 사용하여 객체 속성을 설정하는 것은 간단합니다. ['키 이름']을 사용하여 속성을 추가하세요.

const dynamic = 'flavour';
var item = {
  name: '前端小智',
  [dynamic]: '巧克力'
}
console.log(item); // { name: '前端小智', flavour: '巧克力' }

동일한 키를 사용하여 객체 속성을 참조하는 데에도 동일한 방법을 사용할 수 있습니다.

const keyName = 'name';
console.log(item[keyName]); // returns '前端小智'

4동적 키를 사용하여 객체 구조 분해

객체에서 이를 알고 있습니다. 구조 분해할 때 다음을 사용하여 구조 분해된 속성의 이름을 바꿀 수 있습니다. 하지만 키 이름이 동적일 때 객체의 속성을 분해할 수도 있다는 사실을 알고 계셨나요?

const person = { id: 1, name: '前端小智' };
const { name: personName } = person;
console.log(personName); // '前端小智'

이제 동적 키를 사용하여 속성을 분해합니다.

const templates = {
  'hello': 'Hello there',
  'bye': 'Good bye'
};
const templateName = 'bye';
const { [templateName]: template } = templates;
console.log(template); // Good bye

5. Null 값 병합 ?? 연산자

?? 연산자는 변수가 null인지 정의되지 않았는지 확인하는 데 유용합니다. 왼쪽 피연산자가 null이거나 정의되지 않은 경우 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환합니다.

const foo = null ?? 'Hello';
console.log(foo); // 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // 0

세 번째 예에서는 JS에서 0이 false로 간주되더라도 null이거나 정의되지 않은 것이 아니기 때문에 0이 반환됩니다. || 연산자를 사용할 수 있다고 생각할 수도 있지만 둘 사이에는 차이가 있습니다.

여기서는 || 연산자를 사용할 수 있다고 생각할 수도 있지만 둘 사이에는 차이가 있습니다.

const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // 0

6. 선택적 체인 ?.

다음과 같은 오류가 자주 발생합니까? TypeError: Cannot read property 'foo' of null. 이것은 모든 개발자에게 성가신 문제입니다. 이 문제를 해결하기 위해 선택적 연결이 도입되었습니다. 살펴보겠습니다.

const book = { id:1, title: 'Title', author: null };
// 通常情况下，你会这样做
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // null
// 使用可选链
console.log(book.author?.age); // undefined
// 或深度可选链
console.log(book.author?.address?.city); // undefined

다음과 같은 선택적 함수 체인을 사용할 수도 있습니다.

const person = {
  firstName: '前端',
  lastName: '小智',
  printName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(person.printName()); // '前端 小智'
console.log(persone.doesNotExist?.()); // undefined

7. 연산자를 사용하면 표현식의 결과를 빠르게 변환할 수 있습니다. 부울 값으로(true 또는 false):

const greeting = 'Hello there!';
console.log(!!greeting) // true
const noGreeting = '';
console.log(!!noGreeting); // false

8. 문자열 및 정수 변환

+ 연산자를 사용하여 문자열을 숫자로 빠르게 변환:

const stringNumer = '123';
console.log(+stringNumer); //123
console.log(typeof +stringNumer); //'number'

숫자를 문자열로 빠르게 변환하려면 다음을 사용할 수도 있습니다. + 연산자 기호 뒤에 빈 문자열이 옵니다:

const myString = 25 + '';
console.log(myString); //'25'
console.log(typeof myString); //'string'

이러한 유형 변환은 매우 편리하지만 명확성과 코드 가독성이 떨어집니다. 따라서 실제 개발에는 신중한 선택과 사용이 필요합니다.

9. 배열에서 거짓 값을 확인하세요

모든 사람은 필터, 일부, 모든 배열 방법을 사용해야 합니다. 이러한 방법은 참 및 거짓 값을 테스트하는 데 사용할 수 있습니다.

const myArray = [null, false, 'Hello', undefined, 0];
// 过滤虚值
const filtered = myArray.filter(Boolean);
console.log(filtered); // ['Hello']
// 检查至少一个值是否为真
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // true
// 检查所有的值是否为真
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // false

작동 방식은 다음과 같습니다. 우리는 이러한 배열 메서드가 콜백 함수를 허용한다는 것을 알고 있으므로 콜백 함수로 부울을 전달합니다. 부울 함수 자체는 매개변수를 받아들이고 매개변수의 진실성에 따라 true 또는 false를 반환합니다. 따라서:

myArray.filter(val => Boolean(val));

는 다음과 같습니다.

myArray.filter(Boolean);

10. 배열 병합

배열 배열에서 단일 배열을 만드는 프로토타입 Array에는 flat 메서드가 있습니다.

const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];
const flattedArray = myArray.flat(); 
//[ { id: 1 }, { id: 2 }, { id: 3 } ]

중첩된 배열 구조를 얼마나 깊게 평면화해야 하는지 지정하여 깊이 수준을 정의할 수도 있습니다. 예:

const arr = [0, 1, 2, [[[3, 4]]]];
console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]

11.Object.entries

대부분의 개발자는 Object.keys 메서드를 사용하여 객체를 반복합니다. 이 메서드는 값이 아닌 객체 키 배열만 반환합니다. Object.entries를 사용하여 키와 값을 얻을 수 있습니다.

const person = {
  name: '前端小智',
  age: 20
};
Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', '前端小智'], ['age', 20]]

객체를 반복하려면 다음을 수행할 수 있습니다.

Object.keys(person).forEach((key) => {
  console.log(`${key} is ${person[key]}`);
});
// 使用 entries 获取键和值
Object.entries(person).forEach(([key, value]) => {
  console.log(`${key} is ${value}`);
});
// name is 前端小智
// age is 20

위의 두 메서드 모두 동일한 결과를 반환하지만 Object.entries가 키-값 쌍을 얻는 것이 더 쉽습니다.

12.replaceAll 메서드

JS에서는 문자열의 모든 항목을 다른 문자열로 바꾸려면 다음과 같은 정규식을 사용해야 합니다.

const str = 'Red-Green-Blue';
// 只规制第一次出现的
str.replace('-', ' '); // Red Green-Blue
// 使用 RegEx 替换所有匹配项
str.replace(/\-/g, ' '); // Red Green Blue

하지만 ES12에서는 교체All이라는 새로운 메서드가 있었습니다. String.prototype에 추가되어 모든 문자열을 다른 문자열 값으로 바꿉니다.

str.replaceAll('-', ' '); // Red Green Blue

13. 숫자 구분 기호

밑줄을 숫자 구분 기호로 사용하면 숫자에서 0의 개수를 쉽게 계산할 수 있습니다.

// 难以阅读
const billion = 1000000000;
// 易于阅读
const readableBillion = 1000_000_000;
console.log(readableBillion) //1000000000

下划线分隔符也可以用于BigInt数字，如下例所示

const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000

14.document.designMode

与前端的JavaScript有关，设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台，输入以下内容即可。

document.designMode = 'on';

15.逻辑赋值运算符

逻辑赋值运算符是由逻辑运算符&&、||、??和赋值运算符=组合而成。

const a = 1;
const b = 2;
a &&= b;
console.log(a); // 2
// 上面等价于
a && (a = b);
// 或者
if (a) {
  a = b
}

检查a的值是否为真，如果为真，那么更新a的值。使用逻辑或 ||操作符也可以做同样的事情。

const a = null;
const b = 3;
a ||= b;
console.log(a); // 3
// 上面等价于
a || (a = b);

使用空值合并操作符 ??:

const a = null;
const b = 3;
a ??= b;
console.log(a); // 3
// 上面等价于
if (a === null || a === undefined) {
  a = b;
}

注意：??操作符只检查 null 或 undefined 的值。

【相关推荐：javascript学习教程】

위 내용은 15가지 JavaScript 개발 기술 요약(정리 및 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!