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

JavaScript의 배열 객체 소개 요약

零下一度
풀어 주다: 2017-06-26 09:07:34
원래의
1252명이 탐색했습니다.

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 ><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 的对象的成员。它们包括除 GlobalMath对象以外的所有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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿