찾다
웹 프론트엔드JS 튜토리얼JavaScript의 배열 지식 요약

이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 페이지 태그 선택, 페이지 태그 속성 운영 등 DOM API 지식과 관련된 문제를 정리합니다. 모두에게 도움이 되기를 바랍니다.

JavaScript의 배열 지식 요약

[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]

배열의 개념

  • 배열도 일반적인 객체와 비슷한 기능을 갖고 있는 객체입니다.
  • 차이점은 일반 객체는 문자열을 속성 이름으로 사용하는 반면 배열은 숫자를 인덱스로 사용
  • 인덱스: 0부터 시작하는 정수는 인덱스입니다.
  • 배열의 저장 성능은 다음과 같습니다. 일반 객체보다 더 좋습니다. 개발 중에 일부 데이터를 저장하기 위해 배열을 사용하는 경우가 많습니다.

배열 객체 만들기

구문 1: var array name = new Array();
괄호 안에 숫자 값이 전달되면 배열 길이를 나타냅니다. 1보다 큰 값이 전달되면 이는 배열에 요소를 추가하는 것을 의미합니다.

var 数组名 = new Array();
当在括号内传入一个数字类型的值时,表示数组的长度,当传入大于1个的值时,表示向数组中添加元素。

语法2:var 数组名 =[];
当在方括号内传入值时,即为数组添加元素。

使用typeof检查数组对象时返回Object

向数组中添加元素

1.直接添加

语法:数组名 = [元素1,元素2...];

2.按照索引添加(将元素添加到哪个位置)

语法:数组名[索引] = '元素';

这里值得注意的是,如果按照索引添加元素,数组的长度是按照的添加的最大索引来计算的。

读取数组中的元素

读取数组元素是一个返回值,需要变量去接收或者直接输出。
1.直接读取,即读取整个数组内的元素。

语法:console.log(数组名);

2.读取数组中的某个元素。

语法:console.log(数组名[索引]);

3.当读取一个不存在的元素时,返回undefined。

数组中的常用属性和方法

1.length属性

length属性可以设置/返回数组长度。

  • 设置数组长度:数组名.length = 长度;
    当设置的数组长度>原数组长度时,将空出多余的空间。
    当设置的数组长度
  • 返回数组长度:数组名.length;

JavaScript의 배열 지식 요약

补充小技巧:可以利用length属性向数组的最后一个位置添加元素
JavaScript의 배열 지식 요약

2.cancat方法

concat() 方法用于连接两个或多个数组。

语法:数组1.concat(数组2,数组3...);

JavaScript의 배열 지식 요약

3.join方法

join() 方法用于把数组中的所有元素转换一个字符串。

语法:数组名.join(分隔符,不写则默认为逗号分隔);

JavaScript의 배열 지식 요약

4.pop方法

pop() 方法用于删除数组的最后一个元素返回删除的元素

语法:数组名.pop();

JavaScript의 배열 지식 요약

5.push方法

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度

语法:数组名.push(元素1,元素2...);

구문 2: var array name =[];
대괄호 안에 값이 전달되면 요소가 배열에 추가됩니다.

JavaScript의 배열 지식 요약

typeof를 사용하여 배열 개체를 확인할 때 Object를 반환합니다. 🎜🎜배열에 요소 추가🎜🎜1. 직접 추가 🎜🎜🎜 구문: 배열 이름 = [요소 1, 요소 2...] 🎜🎜🎜 2. 인덱스에 따라 요소 추가( 요소 추가 어느 위치에 추가)🎜🎜🎜구문: ​​배열 이름 [색인] = '요소';🎜🎜🎜여기서 주목할 가치가 있는 것은 요소가 색인에 따라 추가되면 길이가 최대 인덱스를 기준으로 계산된 대로 배열이 추가됩니다. 🎜🎜배열의 요소 읽기🎜🎜배열의 요소를 읽는 것은 반환 값이며, 이를 직접 수신하거나 출력하려면 변수가 필요합니다.
1. 직접 읽기, 즉 전체 배열의 요소를 읽는 것입니다. 🎜🎜🎜구문: ​​console.log(배열 이름);🎜🎜🎜2. 배열의 요소를 읽습니다. 🎜🎜🎜구문: ​​console.log(배열 이름[색인]);🎜🎜🎜3. 존재하지 않는 요소를 읽을 때는 정의되지 않은 값을 반환합니다. 🎜🎜🎜배열에서 일반적으로 사용되는 속성과 메서드🎜🎜

🎜1.length 속성🎜

🎜length 속성은 배열 길이를 🎜설정/반환🎜할 수 있습니다. 🎜🎜🎜배열 길이 설정: 배열 이름.길이 = 길이;
설정된 배열 길이 > 원래 배열 길이인 경우 초과 공간이 비워집니다.
설정된 배열 길이가 배열 이름.길이;🎜🎜🎜여기에 이미지 설명 삽입🎜🎜추가 팁: 길이 속성을 사용하여 요소🎜를 🎜마지막 위치에 추가할 수 있습니다. 배열.
여기에 이미지 설명 삽입
🎜

🎜2.cancat method🎜

🎜concat() 메서드는 두 개 이상의 배열을 연결하는 데 사용됩니다. 🎜🎜🎜구문: ​​array1.concat(array2,array3...);🎜🎜🎜여기에 그림 설명 삽입🎜

🎜3.join 메소드🎜

🎜join() 메소드가 사용됨 모든 요소 변환 배열을 문자열로. 🎜🎜🎜 구문: 배열 이름.join(구분 기호, 작성하지 않으면 기본값은 쉼표 구분);🎜🎜🎜여기에 이미지 설명 삽입🎜

🎜4.pop method🎜

🎜pop() 방법 배열의 🎜마지막 요소🎜를 제거하고 🎜제거된 요소를 반환🎜하는 데 사용됩니다. 🎜🎜🎜구문: ​​배열 이름.pop();🎜🎜🎜여기에 이미지 설명 삽입🎜

🎜5.push method🎜

🎜push() 메서드는 배열 끝에 하나 이상을 추가할 수 있습니다. 🎜 요소 🎜 및 🎜새 길이를 반환 🎜합니다. 🎜🎜🎜구문: ​​배열 이름.push(요소 1, 요소 2...);🎜🎜🎜🎜🎜

6.shift 메소드

shift() 메소드는 배열의 첫 번째 요소를 삭제하고 첫 번째 요소의 값을 반환하는 데 사용됩니다. shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

语法:数组名.shift();

JavaScript의 배열 지식 요약

7.unshift方法

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度

语法:数组名.unshift(元素1,元素2...);

JavaScript의 배열 지식 요약

8.slice方法

slice() 方法可从已有的数组中返回选定的元素。可提取字符串的某个部分,并以新的字符串返回被提取的部分。注意: slice() 方法不会改变原始数组。

语法:数组名.slice(start,end);区间为左闭右开
如果为负数则从数组的倒数第几个数取。

JavaScript의 배열 지식 요약

9.splice方法

splice() 方法用于添加删除数组中的元素。

语法:数组名.splice(从哪个位置开始(必填),要删除的元素个数(可选),要添加的元素(可选))

JavaScript의 배열 지식 요약
JavaScript의 배열 지식 요약

10.reverse方法

reverse() 方法用于颠倒数组中元素的顺序

语法:数组名.reverse();

JavaScript의 배열 지식 요약

11.sort方法

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。

语法:数组名.sort();

1.按字母排序(升序/降序)

JavaScript의 배열 지식 요약

2.按数字排序(从大到小/从小到大)需定义一个函数。
JavaScript의 배열 지식 요약

数组的遍历

使用for循环可进行对数组的遍历。

语法:for(var 变量=0; 变量<blockquote></blockquote>

구문: 배열 이름.shift();

JavaScript의 배열 지식 요약여기에 이미지 설명 삽입

7.unshift methodunshift() 메서드는 배열의 시작 부분에 하나 이상의 요소

를 추가할 수 있으며

새로운 길이를 반환하세요.

구문: 배열 이름.unshift(요소 1, 요소 2...);


JavaScript의 배열 지식 요약여기에 그림 설명 삽입

8.slice methodslice() 메서드는 기존 반품에서 사용할 수 있습니다. 배열에서 선택된 요소. 문자열의 일부를 추출하고 추출된 부분을 새 문자열로 반환합니다. 참고: Slice() 메서드는 원래 배열을 변경하지 않습니다.
구문: array name.slice(start,end);간격은 왼쪽이 닫히고 오른쪽이 열립니다 음수인 경우 배열의 마지막 숫자에서 가져옵니다. 정렬.

여기에 이미지 설명 삽입🎜🎜🎜9. splice 메서드 🎜🎜🎜splice() 메서드는 배열의 요소를 🎜 추가 🎜하거나 🎜 삭제 🎜하는 데 사용됩니다. 🎜
🎜구문: 배열 이름.스플라이스(어느 위치에서(필수), 삭제할 요소 수(선택), 추가할 요소(선택))🎜🎜 🎜여기에 이미지 설명 삽입🎜여기에 이미지 설명 삽입🎜🎜10.reverse method🎜🎜reverse() 메서드는 배열 요소의 🎜순서🎜를 🎜역전하는 데 사용됩니다. 🎜
🎜구문: 배열 이름.reverse();🎜🎜🎜여기에 이미지 설명 삽입🎜🎜🎜11.sort method🎜🎜🎜sort() 메서드는 배열의 요소를 정렬하는 데 사용됩니다. 정렬 순서는 알파벳순이나 숫자순, 오름차순 또는 내림차순일 수 있습니다. 기본 정렬 순서는 알파벳순으로 오름차순입니다. 🎜
🎜구문: array name.sort();🎜🎜🎜1. 알파벳순으로 정렬(오름차순/내림차순)🎜🎜여기에 그림 설명 삽입🎜🎜2. 숫자(큰 것에서 작은 것, 작은 것에서 큰 것)로 정렬하려면 함수 정의가 필요합니다. 🎜여기에 이미지 설명 삽입🎜🎜🎜배열 순회🎜 🎜🎜 for 루프를 사용하여 배열을 탐색합니다. 🎜
🎜구문: for(var 변수=0; 변수🎜🎜🎜🎜🎜 🎜🎜Array 순회 작은 연습🎜🎜🎜🎜배열에 6개의 개체를 추가하고 성인 목록을 새 배열에 추가하세요! ! 🎜🎜<pre class="brush:php;toolbar:false">nbsp;html&gt;     &lt;meta&gt;     &lt;meta&gt;     &lt;meta&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;script&gt; function Person(name, age){ this.name = name; this.age = age; } var per1 =new Person(&amp;#39;苏凉&amp;#39;,21); var per2 =new Person(&amp;#39;小红&amp;#39;,15); var per3 =new Person(&amp;#39;小月&amp;#39;,17); var per4 =new Person(&amp;#39;小丽&amp;#39;,19); var per5 =new Person(&amp;#39;小水&amp;#39;,20); var per6 =new Person(&amp;#39;小花&amp;#39;,5); var per_list= [per1,per2,per3,per4,per5,per6]; function arrAdult(){ var newArr=[]; for(var i = 0;i&lt;per_list.length;i++){ var x = per_list[i]; if(x.age&lt;18){ console.log(x.name + &amp;#39;未通过&amp;#39;); }else if(x.age&gt;=18){ console.log(x.name + &amp;#39;恭喜你,通过了!&amp;#39;); newArr.push(x.name) } } return newArr; } var list = arrAdult(); console.log(&amp;#39;通过名单:&amp;#39;+ list) &lt;/script&gt;     </pre>🎜실행 결과: 🎜🎜🎜🎜🎜

위 내용은 JavaScript의 배열 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 CSDN에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
JavaScript가 C로 작성 되었습니까? 증거를 검토합니다JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

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 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

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

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경