찾다
웹 프론트엔드JS 튜토리얼JavaScript 코드 작성 시 몇 가지 팁 공유
JavaScript 코드 작성 시 몇 가지 팁 공유Jun 17, 2017 pm 03:04 PM
javascriptjs암호공유하다기능

머리말

일과 생활의 변화로 인해 최근 기사 작성 빈도가 조금 줄어들었습니다. 하지만 곧 회복되리라 믿습니다. 지속적인 관심과 지원 부탁드립니다.

이 기사에서는 JavaScript 코드를 작성할 때 주로 몇 가지 방법과 기법을 공유합니다. 때로는 모든 길이 로마로 통하지만 항상 최단 경로가 있을 수 있습니다. 다음 JavaScript 기술을 통해 모든 사람의 코드가 "복잡하고 단순화되고 단순화되고 세련"될 수 있기를 바랍니다.

능숙하게 배우고 사용하세요

1. new Set()

ES6가 새로운 데이터 구조 Set을 제공한다는 것을 아는 사람도 있지만 이를 유연하게 사용할 수 있는 사람은 많지 않습니다. Set 데이터 구조를 사용하면 다음과 같이 배열의 중복을 쉽게 제거할 수 있습니다:

let arr = [1, 2, 2, 3];let set = new Set(arr);let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。console.log(newArr); // [1, 2, 3]

2. Object.sign()

Object.ass()도 ES6에서 제공되는 객체의 확장 메서드로, 병합에 사용할 수 있습니다. 예:

let obj1 = {a: 1};let obj2 = {b: 2};let obj3 = Object.assign({}, obj1, obj2);console.log(obj3); // {a: 1, b: 2}

3. map()

map 메서드는 배열을 탐색하는 데 사용되며 반환 값이 있으며 배열의 각 항목에 대해 작동하고 새 배열을 생성할 수 있습니다. 때로는 for 및 forEach 루프를 대체하여 다음과 같이 코드를 단순화할 수 있습니다.

let arr3 = [1, 2, 3, 4, 5];let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10console.log(newArr3); // [10, 20, 30, 40, 50]

4. filter()

filter 메서드는 이름에서 알 수 있듯이 배열을 필터링하고 트리거하는 데에도 사용됩니다. 각 요소 뒤에 콜백 함수를 사용하여 현재 항목을 유지하거나 제거하고 마지막으로 다음과 같은 새 배열을 반환합니다. some()

some 메소드를 사용하여 배열을 탐색합니다. 각 요소 뒤에 콜백 함수를 추가하고 조건을 충족하는 한 true를 반환하고, 그렇지 않으면 || 비교와 유사하게 false를 반환합니다. 예:

let arr4 = [1, 2, 3, 4, 5];let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模,过滤余数不为0的数console.log(newArr4); // [2,4]

6.every()

모든 메서드는 배열을 탐색하는 데 사용됩니다. , 각 요소 다음에 콜백 함수를 트리거하고 조건을 충족하지 않는 한 false를 반환합니다. 그렇지 않으면 && 비교와 유사하게 true를 반환합니다. 예:

let arr5 = [{result: true}, {result: false}];let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true,即为trueconsole.log(newArr5); // true

7 ~~ 연산자

~ 기호가 사용됩니다. JavaScript에서 비트 반전을 수행하려면 ~~ 두 번 반전을 의미하며

비트 연산

의 연산 값은 요구 사항이 정수이고 결과도 정수이므로 비트 연산은 자동으로 정수가 되고 소수 부분은

let arr6 = [{result: true}, {result: false}];let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false,即为falseconsole.log(newArr6); // false
8. || 연산자

영리하게 || 연산을 사용합니다.

let a = 1.23;let b = -1.23;console.log(~~a); // 1console.log(~~b); // -1

9와 같이 변수에 대한 기본값을 설정할 수 있습니다. .Operator

...연산자는 ES6에서 배열을 분해하는 데 사용되는 방법이며 다음과 같이 배열의 매개변수를 빠르게 얻는 데 사용할 수 있습니다.

let c = 1;let d = c || 2; // 如果c的值为true则取存在的值,否则为2console.log(d); // 1

10

3차 연산

연산자모두가 이 연산자에 익숙하면 다음과 같이 조용히 작성하면 if else 작성을 단순화할 수 있습니다.

let [num1, ...nums] = [1, 2, 3];console.log(num1); // 1console.log(nums); // [2, 3]

결론

이 기사에는

JavaScript 구문

만 나열되어 있습니다. 코딩 효율성을 향상시키는 보다 일반적인 10포인트 방법이 간략하게 설명됩니다. 물론 각 지식 포인트는 그에 따라 확장되고 탐색될 수 있습니다. 모두가 능숙하게 학습하면서 능숙한 사용의 효과를 얻을 수 있기를 바랍니다.

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전