ECMAScript5 표준은 2009 년 12 월 3 일에 릴리스되었으며 기존 배열 작업을 개선 할 수있는 몇 가지 새로운 방법을 제공합니다. 그러나이 새로운 배열 방법은 당시 시장에 ES5 지원 브라우저가 부족했기 때문에 실제로 인기가 없었습니다.
배열 "extras"
이러한 방법의 실용성에 대해 아무도 의심하지 않지만 PolyFill (PS : 오래된 브라우저와 호환되는 플러그인)은 그만한 가치가 없습니다. "구현"을 "최상의 구현"으로 바꿉니다. 어떤 사람들은 실제로이 배열 어레이 어레이를 "엑스트라"라고 부릅니다. 왜!
그러나 시간은 변하고 있습니다. GitHub에서 인기있는 오픈 소스 JS 프로젝트를 보면 트렌드가 바뀌고 있음을 알 수 있습니다. 모든 사람은 많은 의존성 (타사 라이브러리)을 줄이고 로컬 코드만으로 구현하려고합니다.
좋아, 시작하자.
내 5 배열
ES5에는 총 http://kangax.github.io/compat-table/es5/에는 9 개의 배열 방법이 있습니다.
참고* 9 가지 방법
Array.prototype.indexof
Array.prototype.lastindexof
Array.prototype
Array.prototype.some
Array.prototype.foreach
Array.prototype.map
array.prototype.filter
Array.prototype.reduce
Array.prototype.reguceright
개인적으로 가장 유용하다고 생각하는 5 가지 방법을 선택할 것입니다.
1) 지수
indexof () 메소드는 배열에서 발견 된 첫 번째 요소의 위치를 반환하고 존재하지 않는 경우 -1을 반환합니다.
indexof가 사용되지 않는 경우
var arr = [ 'Apple', 'Orange', 'Pear'], found = false; for (var i = 0, l = arr.length; i <l; i ++) {if (arr [i] === 'Orange') {found = true;}} console.log ( "found :", found);사용 후
var arr = [ 'Apple', 'Orange', 'Pear']; console.log ( "find :", arr.indexof ( "Orange")! = -1);
2) 필터
필터 () 메소드는 필터 기준과 일치하는 새로운 배열을 만듭니다.
필터 ()가 사용되지 않는 경우
var arr = [{ "name": "apple", "count": 2}, { "name": "orange", "count": 5}, { "name": "pear", "count": 3}, { "name": "Orange", "count": 16},]; var newarr = []; for (var i = 0, l = arr.length; i <l; i ++) {if (arr [i] .name === "Orange") {newarr.push (arr [i]);} console.log ( "필터 결과 :", newarr);필터 () 사용 :
var arr = [{ "name": "apple", "count": 2}, { "name": "orange", "count": 5}, { "name": "pear", "count": 3}, { "name": "Orange", "count": 16},]; var newarr = arr.filter (function (item) {return item.name === "Orange";}); console.log ( "필터 결과 :", newarr);3) foreach ()
foreach 각 요소에 대한 해당 메소드를 실행합니다
var arr = [1,2,3,4,5,6,7,8]; // // "roop to iteratefor (var i = 0, l = arr.length; i <l; i ++) {console.log (arr [i]);} console.log ("================================================================================================================================== iteratearr.foreach (function (item, index) {console.log (item);});foreach는 for 루프를 교체하는 데 사용됩니다
4)지도 ()
Map () 후 배열의 각 요소에서 특정 작업 (MAP)을 수행하면 새 배열이 반환됩니다.
지도를 사용하지 마십시오
var oldarr = [{first_name : "colin", last_name : "toh"}, {first_name : "addy", last_name : "osmani"}, {first_name : "yehuda", last_name : "katz"}]; function getnewarr () {var newarr = []; for (var i = 0, l = oldarr.length; i <l; i ++) {var item = oldarr [i]; item.full_name = [item.first_name, item.last_name] .join ( "); newarr [i] = item;} return newarr;} console.log (getNewarr ());지도를 사용한 후
var oldarr = [{first_name : "colin", last_name : "toh"}, {first_name : "addy", last_name : "osmani"}, {first_name : "yehuda", last_name : "katz"}]; function getNewarr () {return OndarR.map (function (item, index) {item.first_name, item.last_name] .join ( ""); return item;}); } console.log (getNewarr ());Map ()는 서버에서 반환 한 데이터를 처리 할 때 매우 실용적인 기능입니다.
5) 감소 ()
READE ()는 어큐뮬레이터의 함수를 구현하여 배열의 각 값 (왼쪽에서 오른쪽으로)을 값으로 줄일 수 있습니다.
솔직히 말해서, 처음 에이 문장을 이해하기가 약간 어려웠으며 너무 추상적이었습니다.
시나리오 : 통계 배열에 반복 할 수없는 단어 수
감소를 사용하지 않을 때
var arr = [ "Apple", "Orange", "Apple", "Orange", "Pear", "Orange"]; function getwordcnt () {var obj = {}; for (var i = 0, l = arr.length; i <l; i ++) {var item = arr [i]; obj [item] = (obj [항목] +1) || 1; } return obj;} console.log (getwordcnt ());READE ()를 사용한 후
var arr = [ "Apple", "Orange", "Apple", "Orange", "Pear", "Orange"]; 함수 getwordcnt () {return Ar먼저 감소에 대한 내 자신의 이해를 설명하겠습니다. READGE (Callback, InitialValue)는 두 가지 변수로 전달됩니다. 콜백 함수 (콜백) 및 InitialValue. 이 함수에 들어오는 매개 변수, 이전 및 다음, 인덱스 및 배열이 있다고 가정합니다. 이전과 다음을 이해해야합니다.
일반적으로 Prev는 배열의 첫 번째 요소로 시작하고 다음은 두 번째 요소입니다. 그러나 초기 값 (InitialValue)을 전달하면 첫 번째 이전은 InitialValue이며 다음은 배열의 첫 번째 요소가됩니다.
예를 들어:
/** 두 사람의 차이, 콘솔에서 실행하면*/var arr = [Apple ","Orange "]; function nopassValue () {return Ar arr.reduce(function(prev,next){ console.log("prev:",prev); console.log("next:",next); prev[next] = 1; return prev; },{});}console.log("No Additional parameter:",noPassValue());console.log("----------------");console.log("With {} as an additional 매개 변수 : ", passValue ());