지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JavaScript 개체 및 array_javascript 기술에 대한 자세한 설명

WBOY
풀어 주다： 2016-05-16 15:27:50
원래의
1122명이 탐색했습니다.

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对象和数组的详细介绍，希望对大家的学习有所帮助。

관련 라벨：
javascript对象 javasript数组
원천：php.cn
이전 기사：jQuery 모바일 페이지 개발의 터치 이벤트 및 가상 마우스 이벤트 소개_jquery 다음 기사：JavaScript_javascript 스킬 중 Apply, Call 및 this 사용에 대한 간단한 비교 분석
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
잘못된 React 하위 요소(발견: {clientVersion} 키가 있는 개체) 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요. 다단계 양식이 있는데 제출하려고 하면 이 오류가 표시됩니다. 그러나 간단한 형태로 createOrganization 스케줄링을 사용하면 작동합니다. 백엔드 문제인...
에서 2024-04-06 16:25:39
0
1
346
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
**오류 유형: 'NoneType' 개체를 반복할 수 없습니다** SSH 터널을 사용하여 MySQL 데이터베이스에 액세스하고 싶습니다. 안타깝게도 이 코드의 아키텍처는 함수가 내 쿼리 형식과 호환되지 않는 것 같기 때문에 내 쿼...
에서 2024-04-06 10:26:38
0
1
378
배열, 구성 가능한 API에 객체 푸시 프로젝트가 있습니다. "크기"(대형, 소형) 및 수량(2/4/6)의 두 가지 선택 옵션이 있습니다. 각 옵션을 선택하면 선택 사항이 제목에 표시...
에서 2024-04-05 14:41:47
0
1
1526
반복을 통해 HTML 테이블에 객체의 중첩 배열 표시 중첩된 개체 배열이 포함된 다음 입력이 있습니다. summary는 상위 개체 배열이고, run_type은 중첩된 개체 배열입니다. letinput={"s...
에서 2024-04-05 14:11:42
0
1
1373
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿