JavaScript 개체 및 array_javascript 기술에 대한 자세한 설명
C, C#, Java 및 기타 고급 프로그래밍 언어와 같은 많은 고급 프로그래밍 언어가 객체 지향적입니다. 그렇다면 객체 지향 언어의 기본 요구 사항은 무엇입니까? 이제 객체 지향 지식에 대해 이야기해 보겠습니다.
객체 지향 언어는 개발자에게 네 가지 기본 기능을 제공해야 합니다.
- (1) 캡슐화: 관련 정보(데이터든 메소드든)를 객체에 저장하는 기능
- (2) Aggregation: 하나의 객체를 다른 객체 내에 저장하는 기능
- (3) 상속: 다른 클래스(또는 여러 클래스)에서 클래스의 속성과 메서드를 얻는 기능
- (4) 다형성: 여러 가지 방법으로 실행될 수 있는 함수나 메소드를 작성하는 능력
ECMAScript는 이러한 요구 사항을 지원하므로 객체 지향이라고 간주할 수 있습니다. ECMAScript에서는 객체의 물리적 표현에 접근할 수 없고 참조에만 접근할 수 있습니다. 객체가 생성될 때마다 변수에 저장되는 것은 객체 자체가 아닌 객체에 대한 참조입니다. 따라서 JavaScript는 객체지향을 기반으로 하는 약한 유형의 웹 스크립트 언어입니다.
1. 객체 유형
객체 유형에는 속성(필드라고도 함)과 메서드(함수라고도 함)가 포함되어 있습니다. 따라서 Object 유형을 생성할 때 설명해야 할 핵심 사항이 있습니다. 일반적으로 객체 유형 번호를 생성하는 방법에는 두 가지가 있습니다.
(1) new 연산자 사용
var box=new Object(); box.name="张三";//创建属性以及初始化 box.age=23; box.run=running();//创建方法 function running(){ return "我是中国人!"; } document.write(typeof box+"<br/>"); document.write(box.name+"<br/>"); document.write(box.age+"<br/>"); document.write(box.run);
출력: 객체
장산
23
나는 중국인이다!
(2) 문자 그대로의 표현
var box={ name:"张三", age:23, run:function(){ return "我是中国人!"; } }; document.write(typeof box+"<br/>"); document.write(box.name+"<br/>"); document.write(box.age+"<br/>"); document.write(box.run());
출력: 위와 동일
(3) 포괄적 사용
여러 매개변수를 전달할 때 이를 순서대로 입력해야 하는 번거로운 과정을 해결하기 위해 여러 매개변수를 캡슐화할 수 있습니다
Object 유형의 경우 Object 유형을 매개변수로 사용하여 존재하지 않는 매개변수나 추가 매개변수를 판단할 수도 있으므로 함수를 호출하기가 더 쉽습니다.
매개변수를 계산하고 전달합니다.
function box(obj){ if(obj.name!=undefined)document.write(obj.name+"<br/>"); if(obj.age!=undefined)document.write(obj.age+"<br/>"); if(obj.love!=undefined)document.write(obj.love+"<br/>"); } var obj={ name:"张三", age:23 }; box(obj);
출력: 장산
23
2. 배열 유형
ECMAScript의 배열은 다른 언어와 매우 다릅니다. JS의 배열 요소는 모든 데이터 유형이 될 수 있으며 배열의 크기도
입니다.
조정될 수 있습니다. JS가 약한 유형의 언어라는 측면에서 반영됩니다. 배열 유형 번호를 만드는 방법에는 두 가지가 있습니다.
(1) new 연산자 사용(new는 생략 가능)
var box=new Array(1,2,3,4); document.write(typrof box+"<br/>");//Array属于Object类型 document.write(box);//输出1,2,3,4
색인 첨자는 0부터 시작합니다
var box=new Array(1,2,3,4); document.write(box[0]+box[1]+box[2]+box[3]);//输出1,2,3,4
10개의 요소로 구성된 배열 만들기
var box=new Array(10);//创建数组默认必须是数字,必须是一位数字 box[3]=4;//初始化数组中的元素 box[5]=6; document.write(box);//输出,,,4,,6,,,,
(2) 리터럴을 사용하여 배열 생성
var box=[1,2,3,4]; document.write(typrof box+"<br/>");//输出Object document.write(box.length+"<br/>");//输出数组的长度为4 document.write(box);//输出1,2,3,4
복잡한 배열 생성(다양한 유형 가능)
var box=[ { name:"张三", age:23 },//Object类型 [1,2,3,4],//Array类型 "JS",//String类型 25+25,//Number类型 new Array(1,2,3)//Array类型 ]; document.write(typeof box+"<br/>"); document.write(box[0].name+"<br/>"); document.write(box[3]);
페이지의 출력 결과는 다음과 같습니다.
3. 객체의 메소드
(1)변환방법
객체나 배열에는 toLocaleString(), toString() 및 valueOf() 메서드가 있습니다. 그중 toString()과 valueOf()는 누가 재정의되든
을 반환합니다.
동일한 값을 반환합니다. 배열은 각 값을 쉼표로 구분된 문자열 형식으로 연결합니다.
var box=[1,2,3,4]; document.write(box+"<br/>");//输出1,2,3,4 document.write(box.toString()+"<br/>");//输出1,2,3,4 document.write(box.valueOf()+"<br/>");//输出1,2,3,4 document.write(box.toLocaleString());//输出1,2,3,4
기본적으로 배열 문자열은 쉼표로 구분됩니다. Join() 메소드를 사용하는 경우 다양한 구분 기호를 사용하여 이 문자열을 작성할 수 있습니다
var box=[1,2,3,4]; document.write(box+"<br/>"); document.write(typeof box+"<br/>"); document.write(box.join("-")+"<br/>"); document.write(typeof box.join("-"));
页面输出的结果为:
(2)栈方法
ECMAScript数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说,可以让数组像栈一样,可以限
制插入和删除想的数据结构。栈是一种后进先出的数据结构,也就是最新添加的元素最早被移除。而栈元素的插入和
移除,只发生在栈的顶部。ECMAScript为数组专门提供了push()和pop()方法。
栈操作数组元素的图片:
push()方法可以接受任意数量的参数,把它们逐个添加到数组的末尾,并返回修改数组的长度。而pop()方法则从
数组末尾移除最后一个元素,减小数组的length值,然后返回移除的元素。
var box=[1,2,3,4]; document.write(box+"<br/>"); box.push(5,6);//在数组末尾添加元素 document.write(box+"<br/>"); document.write(box.push(7,8)+"<br/>");//在数组末尾添加元素,并返回添加元素后数组的长度 document.write(box+"<br/>"); box.pop();//移除数组末尾的元素 document.write(box+"<br/>"); document.write(box.pop()+"<br/>");//移除数组末尾的元素,并返回移除的元素 document.write(box);
输出:
(3)队列方法
栈方法是后进先出,队列方法是先进先出。队列在数组的末端添加元素,从数组的前端移除元素。通过push()向
数组末端添加一个元素,然后通过shift()方法从数组的前端移除一个元素。
队列操作数组元素的图片
var box=[1,2,3,4]; document.write(box+"<br/>"); box.push(5,6);//在数组末尾添加元素 document.write(box+"<br/>"); document.write(box.push(7,8)+"<br/>");//在数组末尾添加元素,并返回添加元素后数组的长度 document.write(box+"<br/>"); box.shift();//移除数组前端的一个元素 document.write(box+"<br/>"); document.write(box.shift()+"<br/>");//移除数组前端的一个元素,并返回移除的元素 document.write(box);
输出:
ECMAScript还为数组提供了一个unshift()方法,它和shift()方法的功能完全相反。unshift()方法为数组的前端添加
一个元素。
var box=[1,2,3,4]; document.write(box+"<br/>"); box.unshift(0);//在数组的前端添加一个元素 document.write(box+"<br/>"); document.write(box.unshift(-1)+"<br/>");//在数组的前端添加一个元素,并返回添加元素会数组的长度 document.write(box+"<br/>"); box.pop();//在数组末尾移除元素 document.write(box+"<br/>"); document.write(box.pop()+"<br/>");//在数组末尾移除元素,并返回移除元素后数组的长度 document.write(box);
输出:
(4)重排序方法
数组中已经存在两个直接用来排序的方法:reverse()和sort()。
reverse():逆向排序
var box=[1,2,3,4,5]; box.reverse(); document.write(box+"<br/>");//输出54321 document.write(box.reverse());//再次进行逆序,输出12345
sort():从小到大排序
var box=[3,2,6,4,1,5]; box.sort(); document.write(box+"<br/>");//输出1,2,3,4,5,6 document.write(box.sort());//再次从小到大进行排序
如果我们实验次数多的话可能回遇到这样的问题,
var box=[0,15,10,1,5]; box.sort(); document.write(box);//输出0,1,10,15,5
我们从结果可以看出,这违背了我们想要的结果,解决方法:
function compare(value1,value2){ if(value1<value2){ return -1; } else if(value1>value2){ return 1; } else{ return 0; } } var box=[0,15,10,1,5]; box.sort(compare); document.write(box);//输出0,1,5,10,15
(5)操作方法
JS为操作已经包含在数组中的元素提供了许多的方法。concat()方法可以基于当前数组创建一个新数组。slice()方
法可以基于当前数组获取指定区域元素并创建一个新数组。splice()方法主要用途是向数组的中部插入元素。
a
var box=[1,2,3,4,5]; var box1=box.concat(6);//创建新数组,并添加新元素 document.write(box1+"<br/>");//输出1,2,3,4,5,6, document.write(box);//原数组不变化
b
var box=[1,2,3,4,5]; var box1=box.slice(2);//取出索引为2以后的元素组成新的数组 document.write(box1+"<br/>");//输出3,4,5 document.write(box);//原数组不变化
c
var box=[1,2,3,4,5]; var box1=box.slice(2,3);//取出索引为2到3之间的元素组成新的数组 document.write(box1+"<br/>");//输出3 document.write(box);//原数组不变化
splice中的删除功能
var box=[1,2,3,4,5]; var box1=box.splice(0,2);//截取索引为0开始的两个元素组成新的数组 document.write(box1+"<br/>");//返回截取的元素1,2 document.write(box);//当前数组被截取的元素被删除,输出3,4,5
splice中的插入功能
var box=[1,2,3,4,5]; var box1=box.splice(4,0,6);//索引为4的位置插入了一个元素 document.write(box1+"<br/>");//返回新的数组为空,并没有截取元素 document.write(box);//当前数组索引为4的位置插入一个元素1,2,3,4,6,5
splice中的替换功
var box=[1,2,3,4,5]; var box1=box.splice(4,1,6);//索引为4的元素被替换,替换下来的元素组成新数组 document.write(box1+"<br/>");//返回新的数组5 document.write(box);//被替换后的原数组1,2,3,4,6
以上就是关于JavaScript对象和数组的详细介绍,希望对大家的学习有所帮助。

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...

JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.

프론트 엔드에서 VSCODE와 같은 패널 드래그 앤 드롭 조정 기능의 구현을 탐색하십시오. 프론트 엔드 개발에서 VSCODE와 같은 구현 방법 ...
