자바스크립트 학습노트(2) 배열과 객체 부분_기본지식

자바스크립트 객체 부분

1: 기본 부분

1. JavaScript의 모든 변수는 null과 정의되지 않은 두 가지 예외를 제외하고 개체입니다.

2.Jscript는 내부 개체, 생성된 개체, 호스트에서 제공한 개체(모든 BOM 및 DOM 개체는 호스트 개체입니다.) 및 ActiveX 개체(외부 구성 요소)의 네 가지 유형의 개체를 지원합니다.

3.Microsoft Jscript는 11개의 내부(또는 "기본 제공") 개체를 제공합니다. 배열, 부울, 날짜, 함수, 전역, 수학, 숫자, 개체, RegExp, 오류 및 문자열 개체입니다.

4. 객체는 특별한 종류의 데이터일 뿐입니다. 객체에는 속성과 메서드가 있습니다. JavaScript는 객체 지향 언어이지만 JavaScript는 클래스를 사용하지 않습니다. JavaScript는 클래스 기반이 아닌 프로토타입 기반입니다.

5. 속성: 특정 객체에 속하는 변수입니다. 메소드: 특정 객체에서만 호출할 수 있는 함수입니다.

6.Jscript 객체는 속성과 메서드의 모음입니다. 메소드는 객체의 구성원인 함수입니다. 속성은 객체의 구성원인 값 또는 값 집합(배열 또는 객체 형태)입니다.

7.자바스크립트 객체는 생성자 함수를 기반으로 생성자 함수를 사용하여 새 객체를 생성하는 경우 새 객체를 인스턴스화한다고 할 수 있습니다. 속성은 생성자 함수 내부의 변수입니다.

생성자 함수를 사용하여 인스턴스화된 개체:

고양이 = 새로운 동물();
8.Javascript는 객체 기반 언어이며 접하는 거의 모든 것이 객체입니다. 그러나 구문에 클래스가 없기 때문에 진정한 객체 지향 프로그래밍(OOP) 언어는 아닙니다.

코드 복사 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

//마침표(.)나 "[]"를 통해 객체의 속성에 접근
browser.name //"Firefox"
browser["kernel"] //"게코"

객체(objct)는 속성의 모음입니다. 각 속성은 "이름/값 쌍"으로 구성됩니다. 또한 js는 번호가 매겨진 값의 정렬된 목록인 배열을 정의합니다. Node.js는 또한 특수 객체(함수)를 정의합니다. 함수는 함수를 호출하여 실행되는 코드가 있는 객체입니다.

개념 명확화:
JS 4에서는 "객체 기반 = 객체 지향"입니다. JS에는 클래스(Class)가 없지만 "프로토타입 객체"라는 새로운 이름이 있으므로 "클래스 = 프로토타입 객체"

2: 클래스(프로토타입 객체)와 객체(인스턴스)의 차이점과 연관성###　　

1. 클래스(프로토타입 객체)는 추상적이고 개념적이며 사물의 유형을 나타냅니다.
2. 대상은 구체적이고 실제적이며 특정 사물을 나타냅니다.
3. 클래스(프로토타입 객체)는 객체 인스턴스의 템플릿이고, 객체 인스턴스는 클래스의 개체이다.
일반적인 오해는 숫자 리터럴이 객체가 아니라는 것입니다. 이는 도트 연산자를 부동 소수점 숫자 리터럴의 일부로 구문 분석하려고 시도하는 JavaScript 파서의 버그 때문입니다.

숫자 리터럴을 객체처럼 보이게 만드는 해결 방법은 다양합니다.

2..toString(); // 두 번째 마침표는 정상적으로 구문 분석 가능
2.toString(); // 마침표 앞의 공백에 주의
(2).toString(); // 2가 먼저 계산됩니다
속성 삭제

속성을 삭제하는 유일한 방법은 삭제 연산자를 사용하는 것입니다. 속성을 정의되지 않음 또는 null로 설정하면 실제로 속성이 삭제되지 않고 속성과 값 사이의 연결만 제거됩니다.

자바스크립트 객체지향의 3대 특징

캡슐화: 내부 구현을 고려하지 않고 기능적 사용만 고려
상속: 기존 개체에서 새 개체를 상속합니다.
다형성: 소위 다형성은 다양한 상황에서 참조의 여러 상태를 나타냅니다.
1. 캡슐화

캡슐화는 사용 편의성을 위해 동일한 유형의 공통 기능(속성 및 동작 포함)을 클래스로 그룹화하는 것입니다. 예를 들어 다음과 같은 방법으로 사람들을 캡슐화할 수 있습니다.

사람{

연령(속성 1)
높이(속성 2)
성별(속성 3)

무언가를 하기(행동 중 하나)

걷기(행동2)
말하기(행동 3)
}

캡슐화의 이점:

캡슐화는 내부 데이터의 무결성을 보호합니다.

캡슐화를 사용하면 객체 재구성이 더 쉬워집니다.
모듈 간의 결합을 약화시키고 객체의 재사용성을 향상시킵니다.
네임스페이스 충돌을 방지하는 데 도움이 됩니다.
다음 예를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

            var boy = {}; //빈 객체 생성
                             boy.name = "Xiao Ming" // 프로토타입 객체의 속성에 따라 값 할당
소년.나이 = 12;

var 소녀 = {};                      girl.name = "小红";

여자.나이 = 10;

이것은 두 가지 속성을 하나의 객체로 캡슐화하는 가장 간단한 캡슐화입니다. 그러나 이 방법에는 두 가지 단점이 있습니다. 첫째, 더 많은 인스턴스가 생성되면 작성이 매우 번거로워지고, 둘째, 인스턴스와 프로토타입 간의 연결을 확인할 방법이 없습니다.

생성자 패턴

프로토타입 객체에서 인스턴스를 생성하는 문제를 해결하기 위해 Javascript는 생성자 패턴을 제공합니다.

소위 "생성자"는 실제로는 일반적인 함수이지만 this 변수는 내부적으로 사용됩니다. 생성자에서 new 연산자를 사용하면 인스턴스가 생성되고 this 변수는 인스턴스 개체에 바인딩됩니다.

예를 들어, 소년과 소녀의 프로토타입 객체는 이제 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

         기능 사람(이름,나이){

This.name = 이름;
이.나이=나이;
}

이제 인스턴스 개체를 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

          var boy = new Person("샤오밍", "12")
        var girl = new Person("小红","10");
경고(소년.이름); //샤오밍

경고(소년.나이); //12

이때 Boy와 Girl은 생성자를 가리키는 생성자 속성을 자동으로 갖게 됩니다.

코드 복사 코드는 다음과 같습니다.

경고(boy.constructor == 사람); //true
경고(girl.constructor == 사람) //true

프로토타입 모드 Javascript는 각 생성자가 다른 객체를 가리키는 프로토타입 속성을 갖는다고 규정합니다. 이 개체의 모든 속성과 메서드는 생성자의 인스턴스에 상속됩니다.
즉, 프로토타입 객체에서 직접 변경할 수 없는 속성과 메서드를 정의할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

그런 다음 인스턴스를 생성합니다.

코드 복사 코드는 다음과 같습니다.

이때, 모든 인스턴스의 type 속성과 eat() 메소드는 실제로 동일한 메모리 주소를 가지므로 프로토타입 객체를 가리키므로 작업 효율성이 향상됩니다.

alert(boy.eat == girl.eat) //참

프로토타입 속성은 객체가 확장하는 생성자 함수를 지정하는 내장 속성입니다.
다음 코드는 Animal 생성자 함수에 새 속성 크기를 추가합니다. 이 새 속성은 cat 객체의 프로토타입 속성입니다. 프로토타입 속성을 사용하면 Animal 생성자 함수를 확장하는 모든 객체가 크기 속성에 액세스할 수 있습니다

cat = new Animal("고양이","야옹", "걷기/달리기");

cat.prototype.size = "뚱뚱함"
이 경우 모든 Animal 객체의 크기 속성은 "fat"입니다. 프로토타입은 기본적으로 Object의 새 인스턴스로 설정되므로 개체에 새 속성을 추가할 수 있습니다. 스타일이 JavaScript의 객체인 것처럼 스타일 뒤에 속성을 계속 추가할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

객체는 속성을 찾을 때 먼저 자신의 속성을 순회합니다. 속성이 없으면 [[Prototype]]에서 참조하는 객체를 계속 검색합니다. [[Prototype]].[[Prototype].]을 검색하려면 [[Prototype]]...[[Prototype]]이 정의되지 않을 때까지(Object의 [[Prototype]]이 정의되지 않음) )

간단히 말하면 객체의 [[Prototype]]을 통해 다른 객체에 대한 참조를 저장하고, 이 참조를 통해 위쪽으로 속성을 검색하는 것이 프로토타입 체인입니다.

전역 창 개체

JavaScript의 모든 전역 함수나 변수는 창의 속성입니다.
self 객체는 window 객체와 정확히 동일합니다. 일반적으로 Self는 현재 양식 내에 있는지 확인하는 데 사용됩니다.

창의 주요 개체는 주로 다음과 같습니다.

자바스크립트 문서 객체
JavaScript 프레임 객체
자바스크립트 기록 개체
JavaScript 위치 개체
JavaScript 네비게이터 객체
자바스크립트 화면 객체
몇 가지 일반적인 방법

valueof() 메소드: 지정된 객체의 원래 값을 반환합니다
Split() 메서드는 문자열을 문자열 배열로 분할하고 이 배열을 반환합니다.
indexOf() 메서드는 문자열에서 지정된 문자열 값이 처음 나타나는 것을 반환합니다.
substring() 메서드는 문자열에서 지정된 두 첨자 사이의 문자를 추출하는 데 사용됩니다.
substr() 메소드는 문자열에서 startPos 위치부터 지정된 개수의 문자열을 추출합니다.
Join() 메소드는 배열의 모든 요소를 ​​문자열에 넣는 데 사용됩니다.
arrayObject.join(구분자)
reverse() 메소드는 배열의 요소 순서를 바꾸는 데 사용됩니다.
Slice() 메서드는 기존 배열에서 선택한 요소를 반환합니다.
객체 리터럴

객체 리터럴은 수많은 속성을 생성하는 데 사용되는 프로세스입니다.

코드 복사 코드는 다음과 같습니다.

여기서 주목해야 할 점은 속성과 속성값이 콜론(:)으로 구분된다는 점입니다. 여러 속성은 쉼표(,)로 구분됩니다. 객체 리터럴은 메소드를 정의할 수도 있습니다. 객체의 속성에 함수를 작성하면 됩니다. 이를 호출하려면 해당 메소드 이름()만 작성하면 됩니다.

코드 복사 코드는 다음과 같습니다.

자바스크립트 배열 부분

1.배열 객체

배열 객체: 모든 데이터 유형의 배열 생성을 지원합니다.

코드 복사 코드는 다음과 같습니다.

arrayObj = 새로운 배열()
arrayObj = 새로운 배열([크기])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

정의: var arr = [2,3,45,6]; var arr = new Array(2,4,5,7)
두 정의 사이에는 차이가 없습니다. []는 코드가 짧기 때문에 성능이 좋습니다.

배열 및 객체 리터럴 사용: var aTest = []; 배열을 생성할 때 배열 리터럴을 사용하는 것이 좋습니다. 마찬가지로 객체 리터럴을 사용하여 공간을 절약할 수도 있습니다. 다음 두 줄은 동일하지만 객체 리터럴을 사용하면 더 짧아집니다.

var oTest = new Object; // 사용하지 마세요.
var oTest = { }; //가장 좋은 선택 또는 var 0Test = [ ];
순회 배열 순회 시 최상의 성능을 얻으려면 고전적인 for 루프를 사용하는 것이 좋습니다.

코드 복사 코드는 다음과 같습니다.

var 목록 = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i console.log(list[i]);
}

위 코드에는 l = list.length를 통해 배열의 길이를 캐시하는 처리가 있습니다.

배열 생성자

Array의 생성자는 인수를 처리하는 방법이 약간 모호하므로 배열을 생성하려면 항상 배열에 대한 리터럴 구문([])을 사용하는 것이 좋습니다.

따라서 다음 코드는 혼란스러울 것입니다.

new Array(3, 4, 5); // 결과: [3, 4, 5]
new Array(3) // 결과: [], 이 배열의 길이는 3
새 배열을 생성하기 위해 배열 생성자를 사용하지 않도록 노력해야 합니다. 배열의 리터럴 구문을 사용하는 것이 좋습니다. 더 짧고 간결해져서 코드의 가독성이 높아집니다.

배열 배열 속성

배열 배열에는 길이 속성, 프로토타입 속성, 생성자 속성의 세 가지 속성이 있습니다

1.길이 속성

Length 속성은 배열의 길이, 즉 배열의 요소 수를 나타냅니다. 배열의 인덱스는 항상 0부터 시작하므로 배열의 상한과 하한은 각각 0과 길이-1입니다. 대부분의 다른 언어와 달리 JavaScript 배열의 길이 속성은 가변적이므로 특별한 주의가 필요합니다.

2.prototype 속성

객체 유형의 프로토타입에 대한 참조를 반환합니다. 프로토타입 속성은 객체에 공통됩니다.

배열 배열 객체의 경우 다음 예에서는 프로토타입 속성의 사용을 보여줍니다.
배열의 최대 요소 값을 반환하는 배열 개체에 메서드를 추가합니다. 이를 수행하려면 함수를 선언하고 Array.prototype에 추가한 후 사용하세요.

코드 복사 코드는 다음과 같습니다.

함수 array_max()
{
var i,max=this[0]; for(i=1;i {
if(max 최대=이[i]
}
최대 반환
}
Array.prototype.max=array_max

var x=새로운 배열(1,2,3,4,5,6)
var y=x.max()

이 코드가 실행된 후 y는 배열 x, 즉 6에 최대값을 저장합니다.

3.생성자 속성

은 객체를 생성하는 함수를 나타냅니다. 설명: 생성자 특성은 프로토타입이 있는 모든 개체의 구성원입니다. 여기에는 Global 및 Math 개체를 제외한 모든 JScript 기본 개체가 포함됩니다. 생성자 속성은 특정 객체 인스턴스를 생성하는 함수에 대한 참조를 보유합니다.

예:

코드 복사 코드는 다음과 같습니다.

x = new String("안녕하세요")
if(x.constructor==String) //프로세스(조건이 true).
//또는
MyFunc 기능{
//함수 본문.
}
y=new MyFunc

if(y.constructor==MyFunc)//처리 중(조건이 true).

배열의 경우:
y = 새로운 배열()

배열 방법:

첨부된 배열의 마인드 맵은 다음과 같습니다.