지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > jquery는 배열과 배열 요소를 어떻게 정의하고 작동합니까?

jquery는 배열과 배열 요소를 어떻게 정의하고 작동합니까?

伊谢尔伦
풀어 주다： 2017-06-17 10:19:07
원래의
1715명이 탐색했습니다.

먼저 javascript jquery에서 배열 정의와 연산에 대한 관련 지식을 소개하겠습니다. 구체적인 내용은 다음과 같습니다.

1. 배열의 이해

배열은 특정 항목의 집합입니다. 데이터 유형이며 데이터 유형은 정수, 문자열 또는 객체일 수 있습니다
Javascript는다차원 배열을 지원하지 않지만 배열은 객체를 포함할 수 있으므로(배열도 객체임) 배열은 다차원 배열과 유사한 기능을 달성할 수 있습니다. 서로 중첩하여 배열

1.1 배열 정의

10개의 요소가 있는 배열 선언

var a = new Array(10);
로그인 후 복사

이제 10개의 요소가 포함된 a에 대한 메모리 공간이 열렸습니다. 배열 이름과 [아래 첨자]를 사용하여 호출하세요. a[2]와 같지만 이때 요소가 초기화되지 않은 경우 호출은 정의되지 않은 값을 반환합니다

다음 코드는 변수 배열을 정의하고 값을 할당합니다

var a = new Array();
a[0] = 10;
a[1] = "aaa";
a[2] = 12.6;
로그인 후 복사

위에서 언급한 것처럼 객체는 배열, 예를 들어 다음 코드

var a =  new Array();
a[0]  = true;
a[1]  = document.getElementByIdx_x("text");
a[2]  = {x:11, y:22};
a[3]  = new Array();
로그인 후 복사

배열은 인스턴스화될 때 직접 할당될 수 있습니다. 예를 들어

var a = new Array(1, 2, 3, 4, 5);
var b = [1, 2, 3, 4, 5];
로그인 후 복사

a와 b는 모두 배열이지만 b는 암시적 선언을 사용하여 다른 인스턴스를 생성합니다. (a==b)를 사용하면 false가 뜹니다

1.2 다차원 배열

사실 자바스크립트는 다차원 배열이 지원되지 않는다면, Dim a(10,3)을 이용해 정의하면 됩니다. ASP의 다차원 배열. Javascript에서 var a = new Array(10,3)를 사용하면 오류가 보고됩니다.
하지만 앞서 언급한 것처럼 배열에서는 객체를 포함할 수 있으므로 예를 들어, 

var a = new Array();
a[0] = new Array();
a[0][0] = 1;
alert(a[0][0]); //弹出 1
로그인 후 복사

에 

var a = new Array([1,2,3], [4,5,6],  [7,8,9]);
var b = [[1,2,3], [4,5,6], [7,8,9]];
로그인 후 복사

값이 할당되면 a는 일반 인스턴스화를 사용하고 b는 암시적 선언이 됩니다. 1.3 배열 리터럴

이것을 중국어로 무엇이라고 하는지 정말 모르겠어요, 리터럴 배열이라고요? 배열 얘기가 나와서 말인데, 배열 리터럴은 실제로 특별한 개체입니다. 개체에는 고유한

속성 및 메서드

가 있습니다. 값과 호출은 개체 이름.property, object.method()를 통해 얻어집니다. 다음 Mark를 통해 값을 얻습니다. 배열 리터럴은 여러 면에서 배열과 유사합니다. 둘 다 특정 데이터 유형의 컬렉션입니다. 그러나 배열 리터럴은 기본적으로 배열과 다릅니다.
간단한 객체를 생성합니다. 일반적으로 호출은 aa.x를 통해 이루어지지만, 배열 리터럴로 사용하면 Alert(aa["x"])가 팝업됩니다. cat

var aa = new Object();
aa.x = "cat";
aa.y = "sunny";
alert(aa.x);  //弹出cat
로그인 후 복사
이것은 객체를 생성하는 또 다른 방법입니다

, 결과는 같습니다

2. 배열 요소의 연산

위에서 언급한 것처럼 배열을 통해 요소를 읽고 쓸 수 있습니다. [첨자]아래 첨자의 범위는 0 – (23(위 첨자 2)) -1), 아래 첨자는 음수, 부동 소수점 또는 부울 값을 사용하는 경우 배열이 자동으로 객체 유형으로 변환됩니다. 예를 들어 

var a = {x:"cat",  y:"sunny"};
alert(a["y"]); //弹出sunny
로그인 후 복사

이것은 b["2.2"]와 동일합니다. = "XXXXX"

2.1 배열의 루프

var b  = new Array();
b[2.2]  = "XXXXX";
alert(b[2.2]); //-> XXXXX
로그인 후 복사

이것이 가장 일반적으로 사용되는 것으로, 배열을 순회할 때 코드가 1부터 6까지 순서대로 나타납니다

자주 사용하는 것도 있습니다

var a = [1,2,3,4,5,6];
for(var i =0; i<a.length; i++){
alert(a[i]);
}
로그인 후 복사

여전히 1부터 6까지 순서대로 팝업됩니다. for...in은 배열에 사용되는 순회 객체(배열은 특수 객체) 객체입니다. 배열에 속성 이름이 없기 때문에 값이 직접 출력됩니다. 예를 들어 아래 

var a = [1,2,3,4,5,6];
for(var e in a){
alert(e);
}
로그인 후 복사

이때 e는 속성 이름, 즉 x, y, x를 가져오므로 배열 이름 [속성]을 사용하므로 a[e]는 다음과 같습니다. a["x"], a["y"], a["z"]

2.2 Array

Common function

concat

과 동일 기존 배열 뒤에 배열을 추가하고 새 배열을 반환합니다. 기존 배열에 영향을 주지 않는 배열

var a = {x:1,y:2,z:3};
for(var e in a){
alert(e  + ":" + a[e]);
}
로그인 후 복사
배열이나 문자열에만 사용할 수 있다는 점에 유의해야 합니다. 연결된(이전 a)이 숫자 값, 부울 값 또는 객체인 경우 오류가 보고됩니다. 문자열이 배열로 연결되면 문자열은 배열의 첫 번째 요소와 이어져 새 요소를 형성하고 배열 연결 문자열은 새 요소를 추가합니다. (이유는 모르겠습니다. 공개해 주세요. 알고 계신다면), 배열과 객체가 포함된 배열의 경우 연결 후 그대로 유지하세요

join

지정된 구분 기호를 사용하여 배열을 문자열로 연결하세요

var a = [123];
var b = "sunnycat";
var c =  ["www",21,"ido"];
var d = {x:3.14, y:"SK"};
var e = [1,2,3,4,[5,6,[7,8]]];
alert(a.concat(b));   // -> 123,sunnycat
alert(a); //  -> 123
alert(b.concat(c, d));    // -> sunnycatwww,21,ido[object  Object]
alert(c.concat(b));   // -> www,21,ido,sunnycat
alert(e.concat(11,22,33).join(" #  "));    // -> 1 # 2 # 3  # 4 # 5,6,7,8 # 11 # 22 # 33
로그인 후 복사

이해하기 쉽지만 변환만

1차원 배열

에서 배열에 배열이 있으면 Join으로 지정한 문자열 연결은 사용되지 않고 기본 toString()이 사용됩니다. 

var a = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;];
lert(a.join(","));  // -> a,b,c,d,e,f,g 相当于a.toString()
alert(a.join(" x ")); // -> a x b x c x d x e x f x g
로그인 후 복사
배열은 * pop

배열의 마지막 요소를 삭제하고 요소를 반환합니다.

var a =  [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;,[11,22,33]];
alert(a.join(" * ")); // -> a * b * c * d * e * f * g *  11,22,33
로그인 후 복사

배열이 비어 있으면 정의되지 않은 반환

push

배열 추가 concat의 차이점은 concat은 원래 배열에 영향을 주지 않고 직접 새 배열을 반환하는 반면, push는 원래 배열을 직접 수정하여 새 길이를 반환한다는 점입니다. 배열

sort

数组排序，先看个例子

var a = [11,2,3,33445,5654,654,"asd","b"];
alert(a.sort()); // -> 11,2,3,33445,5654,654,asd,b
로그인 후 복사

结果是不是很意外，没错，排序并不是按整型大小，而是字符串对比，就是取第一个字符的ANSI码对比，小的排前面，相同的话取第二个字符再比，如果要按整型数值比较，可以这样

var a = [11,2,3,33445,5654,654];
a.sort(function(a,b) {
return a - b;
});
alert(a); //  -> 2,3,11,654,5654,33445
로그인 후 복사

sort()方法有个可选参数，就是代码里的function，这是个简单的例子，不可对非数字进行排序，非数字需要多做判断，这里就不多讲

reverse

对数组进行反排序跟，sort()一样，取第一字符ASCII值进行比较

var a = [11,3,5,66,4];
alert(a.reverse()); // -> 4,66,5,3,11
로그인 후 복사

如果数组里面还包含数组，则当为对象处理，并不会把元素解出来

>var a = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;,[4,11,33]];
alert(a.reverse()); // -> 4,11,33,g,f,e,d,c,b,a
alert(a.join(" * ")); // -> 4,11,33 * g * f * e * d * c * b * a
로그인 후 복사

按理应该是11排最后面，因为这里把 4,11,33 当做完整的对象比较，所以被排在第一位。看不明白的话，用join()串起来，就明了多

shift

删除数组第一个元素，并返回该元素，跟pop差不多

var a =  ["aa","bb","cc"];
document.write(a.shift());  // -> aa
document.write(a);    // -> bb,cc
로그인 후 복사

当数组为空时，返回undefined

unshift

跟shift相反，往数组最前面添加元素，并返回数组新长度

var a =  ["aa","bb","cc"];
document.write(a.unshift(11));  // -> 4 注：IE下返回undefined
document.write(a);    // -> 11,aa,bb,cc
document.write(a.unshift([11,22]));  // -> 5
document.write(a);    // -> 11,22,11,aa,bb,cc
document.write(a.unshift("cat")); // -> 6
document.write(a);    // -> cat,11,22,11,aa,bb,cc
로그인 후 복사

注意该方法，在IE下将返回undefined，貌似微软的bug，我在firefox下则能正确发挥数组新长度

slice

返回数组片段

var a = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;];
alert(a.slice(1,2)); // -> b
alert(a.slice(2));  // -> c,d,e,f,g
alert(a.slice(-4));  // -> d,e,f,g
alert(a.slice(-2,-6));  // -> 空
로그인 후 복사

a.slice(1,2)，从下标为1开始，到下标为2之间的数，注意并不包括下标为2的元素
如果只有一个参数，则默认到数组最后
-4是表示倒数第4个元素，所以返回倒数的四个元素
最后一行，从倒数第2开始，因为是往后截取，所以显然取不到前面的元素，所以返回空数组，如果改成 a.slice(-6,-2) 则返回b,c,d,e

splice

从数组删除某片段的元素，并返回删除的元素

var a = [1,2,3,4,5,6,7,8,9];
document.write(a.splice(3,2));  // -> 4,5
document.write(a);    // -> 1,2,3,6,7,8,9
document.write(a.splice(4)); // -> 7,8,9 注：IE下返回空
document.write(a);    // -> 1,2,3,6
document.write(a.splice(0,1));  // -> 1
document.write(a);    // -> 2,3,6
document.write(a.splice(1,1,["aa","bb","cc"]));  // -> 3
document.write(a);    // -> 2,aa,bb,cc,6,7,8,9
document.write(a.splice(1,2,"ee").join("#")); // -> aa,bb,cc#6
document.write(a);    // -> 2,ee,7,8,9
document.write(a.splice(1,2,"cc","aa","tt").join("#")); // -> ee#7
document.write(a);    // -> 2,cc,aa,tt,8,9
로그인 후 복사

注意该方法在IE下，第二个参数是必须的，不填则默认为0，例如a.splice(4)，在IE下则返回空，效果等同于a.splice(4,0)

toString

把数组转为字符串，不只数组，所有对象均可使用该方法

var a =  [5,6,7,8,9,["A","BB"],100];
document.write(a.toString());  // -> 5,6,7,8,9,A,BB,100
var b = new Date()
document.write(b.toString());  // -> Sat Aug 8 17:08:32 UTC+0800  2009
var c = function(s){
alert(s);
}
document.write(c.toString());  // -> function(s){ alert(s); }
로그인 후 복사

布尔值则返回true或false，对象则返回[object objectname]
相比join()方法，join()只对一维数组进行替换，而toString()则把整个数组（不管一维还是多维）完全平面化
同时该方法可用于10进制、2进制、8进制、16进制转换，例如

var a =  [5,6,7,8,9,"A","BB",100];
for(var i=0; i<a.length; i++){
document.write(a[i].toString()  + " 的二进制是 "  + a[i].toString(2) + " ，八进制是 " + a[i].toString(8) + " ，十六进制是 " + a[i].toString(16)); //  -> 4,5
}
로그인 후 복사

输出结果

5 的二进制是 101 ，八进制是 5 ，十六进制是 5
6 的二进制是 110 ，八进制是 6 ，十六进制是 6
7 的二进制是 111 ，八进制是 7 ，十六进制是 7
8 的二进制是 1000 ，八进制是 10 ，十六进制是 8
9 的二进制是 1001 ，八进制是 11 ，十六进制是 9
A 的二进制是 A ，八进制是 A ，十六进制是 A
BB 的二进制是 BB ，八进制是 BB ，十六进制是 BB
100 的二进制是 1100100 ，八进制是 144 ，十六进制是 64

转换只能在元素进行，如果对整个数组进行转换，则原封不动返回该数组

toLocaleString

返回本地格式字符串，主要用在Date对象上

var a = new Date();
document.write(a.toString());  // -> Sat Aug 8 17:28:36 UTC+0800  2009
document.write(a.toLocaleString());  // -> 2009年8月8日 17:28:36
document.write(a.toLocaleDateString());  // -> 2009年8月8日
로그인 후 복사

区别在于，toString()返回标准格式，toLocaleString()返回本地格式完整日期（在【控制面板】>>【区域和语言选项】，通过修改[时间]和[长日期]格式），toLocaleDateString()跟toLocaleString()一样，只是少了时间

valueOf

根据不同对象返回不同原始值，用于输出的话跟toString()差不多，但是toString()是返回string类型，而valueOf()是返回原对象类型

var a = [1,2,3,[4,5,6,[7,8,9]]];
var b = new Date();
var c = true;
var d = function(){
alert("sunnycat");
};
document.write(a.valueOf());  // -> 1,2,3,4,5,6,7,8,9
document.write(typeof (a.valueOf())); // -> object
document.write(b.valueOf());  // -> 1249874470052
document.write(typeof(b.valueOf())); // -> number
document.write(c.valueOf());  // -> true
document.write(typeof(c.valueOf())); // -> boolean
document.write(d.valueOf());  // -> function () {  alert("sunnycat"); }
document.write(typeof(d.valueOf())); // -> function
로그인 후 복사

数组也是对象，所以typeof (a.valueOf())返回object，返回的依然是个多维数组

var a = [1,2,3,[4,5,6,[7,8,9]]];
var aa = a.valueOf();
document.write(aa[3][3][1]); // -> 8
로그인 후 복사

Date对象返回的是距离1970年1月1日的毫秒数，
Math和Error对象没有valueOf方法

Jquery 数组操作

在jquery中处理JSON数组的情况中遍历用到的比较多，但是用添加移除这些好像不是太多。
今天试过json[i].remove(),json.remove(i)之后都不行，看网页的DOM对象中好像JSON数据是以数组的形式出现的，查阅了下相关JS中数组的操作一试果然很爽。
记录下来。

1、数组的创建

var arrayObj = new Array();　//创建一个数组
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　创建一个数组并赋值
로그인 후 복사

要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

2、数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值
로그인 후 복사

3、数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""
로그인 후 복사

4、数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素
로그인 후 복사

5、数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组
로그인 후 복사

6、数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向
로그인 후 복사

7、数组元素的排序
arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort(); //对数组元素排序，返回数组地址

8、数组元素的字符串化

arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。
toLocaleString 、toString 、valueOf：可以看作是join的特殊用法，不常用
로그인 후 복사


jQuery操作对象数组元素的3种方法以及一种错误方法介绍

<div id="div1">
     <span>a</span>
     <span>b</span>
     <span>c</span>
 </div>
로그인 후 복사

1.错误方式:不能用[]方式取jquery对象数组,如下:

$(function() {
     var div_span = $("#div1 span");
     for( var i = 0; i < div_span.length; i++ ) {
         div_span.[i].html(i);
     }
 });
로그인 후 복사

这样无效.

2.可以用jquery的eq()方法来选择:

 for( var i = 0; i < div_span.length; i++ ) {
     div_span.eq(i).html(i);
 }
로그인 후 복사

3.可以用each()方法来遍历:

$(function() {
     var div_span = $("#div1 span");
     var i = 0;
     div_span.each( function(){
         $(this).html(i);
         i++;
     });
 });
로그인 후 복사

each()遍历的时候,如果用$(this)得到的是jquery对象,如果直接用this,得到的是DOM对象

4.纯js代码获取的DOM对象数组,可以用[]的方式获取数组元素

后面3种是正确的方法，第一种是错误的，把他放在第一个，是因为要强调下，以后不能再犯同样的错误了，小伙伴们可要看仔细哈。

위 내용은 jquery는 배열과 배열 요소를 어떻게 정의하고 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
jquery 어떻게 작동하다 정렬
원천：php.cn
이전 기사：Jquery 클래스 배열이란 무엇입니까? 어떻게 작동하나요? 다음 기사：jquery에서 parent()와 parent()의 사용법 차이
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...
에서 2024-04-05 09:26:49
0
1
1418
최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...
에서 2024-04-04 18:40:04
0
1
3528
북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...
에서 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...
에서 2024-04-04 12:53:48
0
1
303
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿