찾다
웹 프론트엔드JS 튜토리얼JavaScript의 배열 객체 소개 요약

JavaScript의 배열 객체 소개 요약

Jun 26, 2017 am 09:07 AM
javascriptjs물체정렬상해

Array 객체는 단일 변수에 여러 값을 저장하는 데 사용되는 배열 객체입니다. JS 배열은 약한 유형이므로 배열 요소는 객체 또는 다른 배열일 수도 있습니다.

  • 배열 생성 구문

1. 배열 생성자

1、var list=new Array();2、var list=new Array(size);3、var list=new Array(element0,element1,...elementn);

2. 리터럴 방식

var Array[element0,element1,...elementn];

var list=new Array(1,true,null,undefined,{x:1},[1,2,3]);
var list[1,true,null,undefined,{x:1},[1,2,3]];
  • 배열 분류

1. -차원 배열, 2의 본질 차원 배열은 배열의 요소도 배열이라는 것입니다.

var arr = [[1,2],[a,b]];
alert(arr[1][0]); //a 第2列第1行所在的元素

2. 희소 배열

희소 배열은 0부터 시작하는 불연속적인 인덱스를 포함하는 배열입니다. 희소 배열에서 길이 속성 값은 일반적으로 실제 요소 수보다 큽니다(흔하지 않음)
Example
var a=["a",,"b",,,,"c",,];<code>var a=["a",,"b",,,,"c",,];

  • 数组对象属性

属性 作用
length 属性 表示数组的长度,即其中元素的个数
prototype 属性 返回对象类型原型的引用
constructor 属性 表示创建对象的函数

1、length 属性

通过一些操作来讲解length属性
var arr=[1,2,3,4,5,6,7,8,9,10];//定义了一个包含10个数字的数组。
数组的长度属性是可变的

alert(arr.length); //显示数组的长度10
arr.length=15; //增大数组的长度,length属性是可变的
alert(arr.length); //显示数组的长度已经变为15

访问数组元素

alert(arr[3]); //显示第4个元素的值,为4

减小数组长度

arr.length=2; //将数组的长度减少到2,数组中的元素只剩下索引值小于2的元素
alert(arr[9]); //这时候显示第10个元素已经变为"undefined"因为索引值大于等于2的元素都被抛弃了

恢复数组长度

arr.length=10; //将数组长度恢复为10
alert(arr[9]); //长度恢复之后已经抛弃的元素却无法收回,显示"undefined"

2、prototype 属性

prototype 属性返回对象类型原型的引用。prototype 属性是object共有的。
objectName.prototype
objectName 参数是object对象的名称。

说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

对于数组对象,用以下例子说明prototype 属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。

function array_max( )
{   var i, max = this[0];   for (i = 1; i < this.length; i++)
   {       if (max < this[i])
       max = this[i];
   }   return max;
}Array.prototype.max = array_max;var x = new Array(1, 2, 3, 4, 5, 6);var y = x.max( );

该代码执行后,y 保存数组 x 中的最大值,或说 6。

3、constructor 属性

constructor 属性表示创建对象的函数。
object.constructor //object是对象或函数的名称。
说明:constructor 属性是所有具有prototype 的对象的成员。它们包括除 Global 和 Math对象以外的所有JScript固有对象。constructor

Array 객체 속성

  • property

function

length 속성은 배열의 길이, 즉 배열에 포함된 요소의 수를 나타냅니다.pro totype 속성returns 객체 유형 프로토타입constructor 속성의 참조는 객체
var arr=[ 1,2,3,4,5,6,7,8,9,10];//10개의 숫자를 포함하는 배열을 정의합니다.
x = new String("Hi");if (x.constructor == String) // 进行处理(条件为真)。//或function MyFunc {// 函数体。
}

y = new MyFunc;if (y.constructor == MyFunc) // 进行处理(条件为真)。
배열 요소에 액세스
y = new Array();
var arr=[1,2,3,4,5];
arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]
arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]
var arr=[1,2,3,4,5];
arr.slice(1,3);//[2,3]
arr.slice(1);//[2,3,4,5]
arr.slice(1,-1);//[2,3,4]
arr.slice(-4,-3);//[2]
2.프로토타입 속성objectName.prototype설명: 프로토타입 속성을 사용하여 객체 클래스의 기본 기능 세트를 제공합니다. 객체의 새로운 인스턴스는 객체의 프로토타입에 할당된 작업을 "상속"합니다. 배열 객체에 메서드를 추가하여 배열의 최대 요소 값을 반환합니다. 이를 수행하려면 함수를 선언하고 Array.prototype에 추가한 후 사용하세요. 이 코드가 실행된 후 y는 배열 x의 최대값, 즉 6을 보유합니다.
3. 생성자 속성 constructor 속성은 객체를 생성하는 함수를 나타냅니다. 설명: constructor 속성은 프로토타입이 있는 모든 객체의 멤버입니다. 여기에는 GlobalMath 개체를 제외한 모든 JScript 기본 개체가 포함됩니다. constructor 속성은 특정 객체 인스턴스를 생성하는 함수에 대한 참조를 보유합니다. 예: 배열의 경우: Object method of Array설명: 일부는 ECMAScript5의 새로운 기능입니다(IE678에서는 지원되지 않음)기능 concat()join()pop()push()reverseshift()slice()sort()splice ()toSource()toString()toLocalString() unshift
1을 생성하는 함수를 나타냅니다. 일부 연산을 통한 길이 속성 배열의 길이 속성은 가변적입니다
배열 길이 줄이기배열 길이 복원
prototype code> 속성은 객체 유형의 프로토타입에 대한 참조를 반환합니다. <code>prototype 속성은 object에 공통됩니다. objectName 매개변수는 object 개체의 이름입니다.
배열 객체의 경우 다음 예를 사용하여 프로토타입 속성의 사용을 보여줍니다.
var arr=[1,2,3,4,5];
arr.splice(2);//[3,4,5]
arr;//[1,2];原数组被修改了

var arr=[1,2,3,4,5];
arr.splice(2,2);//[3,4]
arr;//[1,2,5];

var arr=[1,2,3,4,5];
arr.splice(1,1,‘a’,‘b’);//[2]
arr;//[1,"a","b",3,4,5];
object.constructor //object는 개체 또는 함수의 이름입니다.
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a)
{//分别对应:数组元素,元素的索引,数组本身console.log(x + &#39;|&#39; + index + &#39;|&#39; + (a === arr));
});// 1|0|true// 2|1|true// 3|2|true// 4|3|true// 5|4|true
例2
var data=[1,2,3,4,5,6];
var sum=0;
data.forEach(function(v){//其中的v就是数组的值 123456
sum+=v;})
document.write(sum+"<br>");//打印出来是21
Method
두 개 이상의 배열을 연결하고 결과를 반환
배열의 요소를 문자열로 결합
삭제하고 반환 배열의 마지막 요소
배열 끝에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.
배열의 요소 순서를 뒤집습니다
Delete 배열의 첫 번째 요소를 반환
기존 배열에서 선택한 요소를 반환
배열 요소 정렬
요소를 삭제하고 배열에 새 요소 추가
객체의 소스 코드를 반환
배열을 문자열로 변환하고 결과를 반환
배열을 로컬 요소로 변환하고 결과를 반환합니다.
배열의 시작 부분에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.🎜🎜🎜🎜valueof()🎜🎜Return 배열 객체의 원래 값🎜 🎜🎜🎜forEach()🎜🎜배열 객체를 통해 루프🎜🎜🎜🎜map()🎜🎜배열에 매핑을 수행하세요🎜🎜🎜🎜filter()🎜🎜Filter🎜🎜🎜🎜 Every()🎜🎜check Judgment🎜🎜🎜🎜 some()🎜🎜Check and Judge🎜🎜🎜🎜reduce()🎜🎜특정 연산을 쌍으로 수행🎜🎜🎜🎜reduceRight()🎜🎜오른쪽에서 왼쪽으로 연산 수행🎜 🎜 🎜🎜indexOf()🎜🎜특정 요소를 찾기 위한 배열 검색🎜🎜🎜🎜Array.isArray([])🎜🎜배열인지 확인🎜🎜🎜🎜

主要对一些新特性进行讲解
concat
concat作用是拼接数组,需要注意的是也可以把一个数组元素作为拼接的元素,如果这样的话,数组会被拉平,再和其它的元素拼接起来成为新的数组,但是不会被拉平两次,concat不会修改原数组。
例如

var arr=[1,2,3,4,5];
arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]
arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]

slice
slice(a,b)a和b可以取负数,表示从a位置开始截取到b位置的一段数组,是一个左闭右开的区间,a和b可以取负数,如果是负数代表倒数第a/b个元素

var arr=[1,2,3,4,5];
arr.slice(1,3);//[2,3]
arr.slice(1);//[2,3,4,5]
arr.slice(1,-1);//[2,3,4]
arr.slice(-4,-3);//[2]

splice
splice删除元素并向数组添加新元素
object.splice(a)从左边开始删除a个元素
object.splice(a,b)从a位置开始截取其中的b个元素
object.splice(a,b,c,d)从a位置开始截取b个元素,并将c和d或者更多的元素插入原数组
需要注意的是splice会修改原数组

var arr=[1,2,3,4,5];
arr.splice(2);//[3,4,5]
arr;//[1,2];原数组被修改了

var arr=[1,2,3,4,5];
arr.splice(2,2);//[3,4]
arr;//[1,2,5];

var arr=[1,2,3,4,5];
arr.splice(1,1,‘a’,‘b’);//[2]
arr;//[1,"a","b",3,4,5];

foreach
foreach()函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a)
{//分别对应:数组元素,元素的索引,数组本身console.log(x + &#39;|&#39; + index + &#39;|&#39; + (a === arr));
});// 1|0|true// 2|1|true// 3|2|true// 4|3|true// 5|4|true

说明:如果只有一个参数那这个参数代表数组元素,也就是数组的值,请看例2。

例2
var data=[1,2,3,4,5,6];
var sum=0;
data.forEach(function(v){//其中的v就是数组的值 123456
sum+=v;})
document.write(sum+"<br>");//打印出来是21

map 
map 对数组做一些映射,map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组,它与forEach的区别是forEach为数组中的每个元素执行一次回调函数。

var arr = [1, 2, 3];
arr.map(function(x) {     return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]

filter
filter 过滤掉某些元素,和map有点类似,Array的filter也接收一个函数。但是和map不同的是, filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素,也就是过滤掉不符合要求的某些元素。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {
     return index % 3 === 0 || x >= 8;
}); // returns [1, 4, 7, 8, 9, 10]
arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

every()与some()
every()与some()方法都是JS中数组的迭代方法。every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true。
总结就是every()当每个元素都符合条件的时候返回true,而some()是任一项满足条件就返回true

例1 every()var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {     return x < 10;
}); // true

arr.every(function(x) {     return x < 3;
}); // false

some只需要有一个符合的就行

例2 somevar arr = [1, 2, 3, 4, 5];
arr.some(function(x) {     return x === 3;
}); // true

arr.some(function(x) {     return x === 100;
}); // false

reduce()
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
var arr = [1, 2, 3];var sum = arr.reduce(function(x, y) {     return x + y
}, 0); //参数 0是可选的,如果写了参数0那第一次传递的两个值就是0和1
如果不写第一次传递的就是数组的前两个值,计算结果是6
arr; //[1, 2, 3]

arr = [3, 9, 6];var max = arr.reduce(function(x, y) {     console.log(x + "|" + y);     return x > y ? x : y;
});// 3|9// 9|6
max; // 9

reduceRight
和reduce一样只不过reduceRight 变成了从右到左两两执行某些操作

max = arr.reduceRight(function(x, y) {
     console.log(x + "|" + y);     return x > y ? x : y;
});// 6|9// 9|3max; // 9

indexOf()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,indexOf(a,b)表示查找a元素,从b位置开始;lastindexOf表示从右向左找。当b为负数的时候表示从倒数第几个元素开始找,请看例子。

var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.indexOf(99); // -1表示没有这个元素
arr.indexOf(1, 1); // 4
arr.indexOf(1, -3); // 4查找1从倒数第3个元素开始
arr.indexOf(2, -1); // -1查找2从倒数第1个元素开始
arr.lastIndexOf(2); // 3从右边开始找第一次出现2的位置
arr.lastIndexOf(2, -2); // 3从右边的倒数第二个开始找2出现的位置
arr.lastIndexOf(2, -3); // 1

isArray
isArray用来判断是否是数组,但是isArray是Array构造器对象上的属性,所以不能直接用isArray,必须要写成Array.isArray([]),但是可以其它的判断方法直接判断

[]instanceof Array;//true
({}).toString.apply([])===&#39;[object Array]&#39;;//true
[].construcror===Array;//true

数组和一般对象的比较

  数组 / 一般对象
相同点 都可以继承,对象不一定是数组,都可以当做对象添加属性
不同点 数组自动更新length按索引访问数组比访问一般对象属性明显迅速。数组对象继承Array.prototype上的大量数组操作方法

数组和字符串的比较

 

  数组 /字符串
相同点 字符串是数组的一种
不同点 字符串是不可变的数组,字符串没有数组的方法

学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流 

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 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 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전