양식은 실제 배열로 변환됩니다
사용 시나리오에 대해 먼저 이야기 해 봅시다. JS에서는 모든 페이지의 입력 태그를 얻고 유형의 요소를 찾은 다음이 버튼에 대한 클릭 이벤트를 등록하는 등 DOM을 자주 작동해야합니다. 우리는 이것을 할 수 있습니다.
var inputoBjs = document.getElementsByTagName ( 'input'); for (var i = 0; i <inputoBjs.length; i ++) {if (inputoBjs [i] .type === 'button') {inputObjs [i] .onclick = function () {return;}}}}이런 식으로 쓰는 데 아무런 문제가 없지만, 우리는 ES5의 Foreach 방법이 매우 유용하다는 것과 같이 많은 작동 방법이 루프보다 훨씬 낫다는 것을 알고 있습니다. 그러나 직접 사용할 수 있습니까? 할 수 없어! DOM Object Collection은 진정으로 배열 배열 유형이 아니기 때문에 직접 사용하면 오류가 발생합니다.
var inputobjs = document.getElementsByTagName ( 'input'); inputObjs.foreach (); //inputObjs.foreach는 함수가 아닙니다
그럼에도 불구하고, 우리는 여전히 그것을 사용할 수 있습니다. 직간접 적으로 사용할 수 없습니다. 강력한 JS 객체 가장를 사용하십시오.
var inputoBjs = document.getElementsByTagName ( 'input'); console.info (inputoBjs); // [] 길이 : 0__proto__ : htmlcollectionConsole.info ([]. slice.call (inputobjs)); // [] 길이 : 0__proto__ : 배열 [0]
이런 식으로, 실제 배열로 변환 한 후에는 배열 메소드를 마음대로 호출 할 수 있습니다. 이 방법은 확실히 실현 가능하지만 이해하기 쉽지 않으며 너무 "돌리기"입니다. ES6은 더 간단하고 직접적인 방법 인 양식을 제공하며 사용하기가 매우 간단합니다.
var inputoBjs = document.getElementsByTagName ( 'input'); console.info (inputoBjs); // [] 길이 : 0__proto__ : htmlcollectionConsole.info (array.from (inputobjs)); // [] 길이 : 0__proto__ : 배열 [0]
결과는 동일하지만 의미 적으로 적절하고 이해하기 쉽습니다. 사용하기 쉽지 않습니까? 물론 이것들은 충분하지 않습니다. 클래스 배열의 데이터 유형을이 방법을 사용하여 배열로 변환 할 수있을뿐만 아니라 다른 유형의 효과가 다릅니다. 테스트는 다음과 같습니다.
str = 'google'; console.log (array.from (str)); // [ "g", "o", "o", "o", "g", "l", "e"] let num = 234; console.log (array.frat (num)); // [] let bol = false; console.log (array.from (bol)); let obj = {foo : 'foo', bar : 'bar'}; console.log (array.from (obj)); // [] let superObj = {0 : 'foo', 1 : 'bar', length : 2}; console.log (array.from (superObj)); // [ "foo", "bar"]다음은 다른 데이터 유형 으로이 방법을 호출 한 결과입니다. 문자열과 일부 특수 객체는 컨텐츠가있는 배열로 변환 될 수 있습니다. 특수 객체는 숫자 키 값 쌍에 따라 컨텐츠가 배열되고 길이 속성이있는 객체를 나타냅니다. 이러한 종류의 객체는 루프에 사용될 수 있으며 문자열은 각 문자를 얻기 위해 루프에 사용할 수도 있으므로 한 문장으로 요약됩니다. For Loop을 사용하여 출력 컨텐츠를 사용할 수있는 From 메소드를 사용하는 것은 빈 배열이 아닙니다. 여기서 jQuery를 사용한 친구들이 선택기를 사용하여 요소를 선택할 때 jQuery 객체가 반환되는 구조에주의를 기울일 수 있음을 상기시키고 싶습니다. 실제로, 그것은 우리 예에서 마지막 구조입니다. 자세한 내용은 jQuery 소스 코드 분석 시리즈 기사를 참조하십시오.
값을 배열로 변환합니다
배열을 만드는 방법에는 두 가지가 있습니다. 하나는 생성자입니다.
arr = 배열 (1,2,3);
다른 하나는 가장 일반적으로 사용되는 문자 그대로의 창조물입니다.
arr = [1,2,3];
메소드의 배열은 실제로 첫 번째 방법에 대한 보충제이며, 사용법은 다음과 같습니다.
Console.log (Array.of (1,2,3)); // [1,2,3]
시공 방법과 동일한 영향을 미치는 것 같습니다. 왜이 방법이 여전히 필요한가요? 이해하려면 다음 예제를보십시오.
Console.log (Array ()); //] console.log(1)); // [undefined and onsole.log(Array(1,2)); // [1,2]
이 예에서는 매개 변수 수가 그 의미에서 다릅니다. 매개 변수가 하나만 있으면 매개 변수는 길이로 표시되는 요소를 나타냅니다. 1 매개 변수보다 큰 경우 혼란을 유발합니다. 그러나 매개 변수로 표시되는 요소가 항상 표시되기 때문에 Array.of 메소드 에이 문제가 없습니다.
console.log (array.of ()); //] console.log (array.of(1)); // 1] console.log (array.of(1,2)); // [1,2]
내부 데이터 사본 교체를 배열 한 Copywithin
Copywithin 방법의 주요 기능은 배열의 내부 값을 대체하는 것입니다. 이 메소드는 세 가지 매개 변수를 수용하여 시작 복사 위치, 끝 복사 위치 및 삽입 위치를 나타냅니다. 예제는 다음과 같습니다.
[1, 2, 3, 4, 5] .copywithin (0, 3) // [4, 5, 3, 4, 5] // 비트 3에서 비트 0 [1, 2, 3, 4, 5] .copywithin (0, 3, 4) // [4, 2, 2, 3, 4, 5] // -1은 비트 3, 4, 4와 동일합니다. 5] .copywithin (0, -2, -1) // [4, 2, 3, 4, 5] // 비트 3에서 비트를 복사합니다. [{length : 5, 3 : 1}, 0, 3) // {0 : 1, 3 : 1, 길이 : 5} // (0 비트) (0 비트 V var i32a = new32a). 2, 3, 4, 5]); i32a.copywithin (0, 2); // int32array [3, 4, 5, 4, 5] // typedarray의 카피 방법이없는 플랫폼의 경우 // 다음 쓰기 방법이 필요합니다 []. copywithin.call ([1, 2, 3, 4, 5]), 0, 4, 4, 5]). 2, 3, 4, 5]위는 ES6의 배열 확장 메소드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!