JavaScript 배열 방법 요약

JavaScript의 배열은 전체 배열과 목록이 있는 C 또는 Java와 달리 JS의 배열은 4대 작업인 팝, 푸시, 큐로 사용할 수 있습니다. 변속, 변속 해제.

배열 방식의 경우 저희가 가장 우려하는 두 가지 문제가 있습니다. 반환 값은 무엇이며 원본 배열에 영향을 미칠까요 대표적인 예로는 스플라이스(splice)와 슬라이스(slice) 방식이 있습니다. 원래 배열을 반환하는 함수의 경우 호출을 배열에 직접 연결할 수 있습니다. 이는 매우 멋진 방법입니다(array.filter().sort().reverse()).

Array의 배열 방식을 이 두 가지 질문으로 요약하고 싶습니다.

Array

Array.length는 배열의 길이입니다. 각각의 새로운 배열 개체는 Array.prototype을 통해 수정할 수 있지만 기본 사용 및 작동은 다음과 같습니다. 배열은 오늘날의 것과 다릅니다. 집중해서 배열 방법을 살펴보겠습니다.

일반적으로 배열 메소드의 끝에는 내부 this 포인터를 지정하는 thisArg 매개변수가 있습니다. 매개변수에 폴백 함수가 있는 경우 이 폴백 함수는 일반적으로 값, 인덱스, 배열의 세 가지 매개변수를 허용합니다. 이는 각각 현재 전달된 값, 현재 전달된 값이 있는 인덱스 및 현재 처리된 배열을 나타냅니다.

디렉터리 인덱스:

concat

이 방법을 사용하여 배열을 연결할 수 있습니다. 매개변수는 하나 이상의 배열이고 반환된 결과는 연결된 배열입니다.

concat 메소드는 새 배열을 생성한 다음 객체(이것이 가리키는 객체, 원래 배열)의 요소와 배열 유형 매개변수 및 비배열 유형의 요소를 사용하여 이를 호출합니다. 모든 매개변수에서 매개변수 자체가 이 새 배열에 순서대로 입력되고 해당 배열이 반환됩니다. concat 메소드는 원래 배열과 매개변수 배열을 수정하지 않으며 배열이 아닌 객체에도 동일한 효과를 갖습니다.

1. 연결된 새 배열을 반환합니다.

2. 원래 배열과 매개변수 배열을 수정하지 않습니다. >

   매개변수는 배열이 아닐 수 있습니다.
every

var a1 = [1, 2, 3],
  a2 = [4, 5, 6],
  a3 = [7, 8, 9];
var newarr = a1.concat(a2, a3);
newarr //[1, 2, 3, 4, 5, 6, 7, 8, 9]
a1 //[1, 2, 3]
newarr = a1.concat(4, a3);//[1, 2, 3, 4, 7, 8, 9]
newarr = a1.concat('hello');//[1, 2, 3, "hello"]

every() 메서드는 배열의 모든 요소가 지정된 함수의 테스트를 통과하는지 여부를 테스트합니다.

arr.every(callback)은 콜백이 false를 반환할 때까지 각 요소에서 콜백 메서드를 실행합니다. forEach는 중지할 수 없지만 flase를 반환할 때 Every 메서드가 중간에 중지될 수 있기 때문에 때때로 Every 메서드는 forEach 메서드와 비교됩니다.

모든 테스트를 통과하면 함수는 true를 반환하고 중간에 종료되며, false를 반환하면

1. 은 원래 배열에 영향을 주지 않습니다.
filter

function isBigEnough(element, index, array) {
  console.log(index);
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// 0
// 1
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// 0 1 2 3 4
// passed is true

filter() 메서드는 지정된 함수를 사용하여 모든 요소를 ​​테스트하고 테스트를 통과한 모든 요소를 ​​포함하는 새 배열을 만듭니다.

사실 이 방법은 필터링 방법입니다. 이전의 모든 방법은 판단만 하고 조건에 맞지 않는 일부를 필터링하고 새 배열을 반환합니다.

은 필터링 조건을 충족하는 새 배열을 반환합니다.

1. 은 원래 배열을 변경하지 않습니다.
forEach

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var a1 = [19, 22, 6, 2, 44];
var a2 = a1.filter(isBigEnough);
a1 //[19, 22, 6, 2, 44]
a2 //[19, 22, 44]

forEach() 메서드는 배열의 각 요소에 대해 제공된 함수(콜백 함수)를 한 번씩 실행합니다.

함수에는 반환 값이 없습니다. 즉,

1. 은 원래 배열에 영향을 주지 않습니다.
indexOf

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳过了，因为在数组的这个位置没有项
var result = [2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9
result //underfined

indexOf() 메서드는 주어진 요소에 대해 배열에서 찾은 첫 번째 인덱스 값을 반환하고, 그렇지 않으면 -1을 반환합니다.

반환 값은 발견된 요소의 인덱스 값이거나 -1입니다.

1. 는 원래 배열에 영향을 주지 않습니다.

2. var array = [1, 2, 5];
   array.indexOf(5); // 2
   array.indexOf(7); // -1

   join

join() 메서드는 배열의 모든 요소를 ​​문자열로 결합합니다.

사실 조인하면 가장 먼저 떠오르는 것이 문자열의 분할 연산입니다. 이 둘은 문자열 처리에 함께 사용되는 경우가 많습니다.

은 연결된 문자열을 반환합니다.

1. 은 원래 배열에 영향을 주지 않습니다.
lastIndexOf

var a1 = [1, 2, 3];
var a2 = a1.join();
a1 //[1, 2, 3]
a2 //"1,2,3"
a2 = a1.join("");//"123"
a2 = a1.join("-");//"1-2-3"

lastIndexOf() 메서드는 배열의 마지막 요소(즉, 유효한 JavaScript 값 또는 변수)의 인덱스를 반환합니다. 존재하는 경우 -1이 반환됩니다. fromIndex부터 배열의 뒤쪽부터 앞으로 검색합니다.

사실 이건 indexOf의 레플리카입니다.

은 발견된 첫 번째 요소의 인덱스를 반환합니다.

1. 은 원래 배열에 영향을 주지 않습니다.

2. map

   map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 

   map reduce 这两个函数在处理数组上一直都是一把手，带来很大的便捷性。

   1. 返回一个经过回掉函数处理的新数组；

   2. 不对原数组产生影响。

   var a1 = [1, 4, 9];
   var a2 = a1.map(Math.sqrt);
   a1 //[1, 4, 9]
   a2 //[1, 2, 3]

   reduce

   reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。 

   reduce 是一个合并的过程，从左到右，直到把所有元素合并到一起，并返回最终的结果。它接受两个参数，第一个参数是一个回掉函数，第二个参数是一个初始值，表示处理第一个元素时的前一个值。这个回掉函数接受四个参数，依次是 accumulator（上次处理的结果），currentValue（当前元素的值），index（当前元素索引），array（调用 reduce 的数组）。

   1. 返回最终合并的结果，即回掉函数的输出，可以为字符串，对象，数组等任意结果；

   2. 不对原数组产生影响。

   var getAdd = (pre, cur) => pre + cur;
   var a1 = [1, 2, 3];
   var a2 = a1.reduce(getAdd, 0);
   a1 //[1, 2, 3]
   a2 //6

   reduceRight

   reduceRight() 方法接受一个函数作为累加器（accumulator），让每个值（从右到左，亦即从尾到头）缩减为一个值。（与 reduce() 的执行方向相反）

   var toStr = (pre, cur) => '' + pre + cur;
   var a1 = [1, 2, 3];
   var a2 = a1.reduce(toStr, '');
   a2 //"123"
   a2 = a1.reduceRight(toStr, '');
   a2 //"321"

   push

   push() 方法添加一个或多个元素到数组的末尾，并返回数组新的长度（length 属性值）。

   如果把数组当作栈，push pop 操作是栈进和出，而往往很多人会忽略函数执行后的返回值。

   1. 返回 push 操作执行之后数组的长度；

   2. 肯定改变。

   var a1 = [1, 2, 3];
   var a2 = a1.push(4);
   a1 //[1, 2, 3, 4]
   a2 //4

   pop

   pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。 

   1. 返回删除的这个元素；

   2. 肯定改变。

   var a1 = [1, 2, 3];
   var a2 = a1.pop();
   a1 //[1, 2]
   a2 //3

   unshift

   unshift() 方法在数组的开头添加一个或者多个元素，并返回数组新的 length 值。

   1. 返回 length 值；

   2. 肯定改变。

   var a1 = [1, 2, 3];
   var a2 = a1.unshift(4);
   a1 //[4, 1, 2, 3]
   a2 //4

   shift

   shift() 方法删除数组的 第一个 元素，并返回这个元素。该方法会改变数组的长度。 

   shift 方法和 push 方法可以组成一个队列的操作啦。

   1. 返回删除的这个元素；

   2. 肯定改变。

   reverse

   reverse() 方法颠倒数组中元素的位置。第一个元素会成为最后一个，最后一个会成为第一个。 

   1. 函数返回值是修改了的原数组；

   2. 原数组会修改。

   var a1 = [1, 2, 3];
   var a2 = a1.reverse();
   a1 //[3, 2, 1]
   a1 === a2; //true

   slice

   slice() 方法会浅复制（shallow copy）数组的一部分到一个新的数组，并返回这个新数组。 

   slice 的参数包括拷贝的初识位置，结束位置（左闭右开），与 splice 有区别。由于不会改变原数组，这个数组可以用于前拷贝，比如经常看别人使用： arr.slice(0) ，表示拷贝数组。

   1. 返回浅拷贝后的新数组；

   2. 不会改变原数组。

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

   splice

   splice() 方法用新元素替换旧元素，以此修改数组的内容。 

   如其名，分割，会修改原数组的内容，返回一个新数组，而且它的参数也比较多，第一个参数表示初始位置，第二个参数表示分割长度，第三个参数及以后表示分割后在分割处添加新元素。

   1. 返回分割的元素组成的数组；

   2. 会对数组进行修改，原数组会减去分割数组。

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

   some

   some() 方法测试数组中的某些元素是否通过了指定函数的测试。 

   sort

   sort() 方法对数组的元素做原地的排序，并返回这个数组。 sort 排序可能是不稳定的。默认按照字符串的Unicode码位点（code point）排序。 

   sort 函数用于排序，比较常用，若没有制定排序函数，则按照 unicode 位点进行排序，而且数字会被转成字符串，所以 ‘123’ 要排在 ‘11’ 的后面。

   我们会用 sort 做一些有意思的排序，比如汉字按照拼音排序。

   1. 返回排序后的原数组；

   2. 会对数组进行修改。

   var big = function(a, b){
     return a - b;
   }
   var a1 = [2, 4, 77, 1];
   var a2 = a1.sort(big);
   a1 //[1, 2, 4, 77]
   a1 === a2; //true

   localeCompare 可以对汉字进行排序，当同时出现汉字和字母的时候会有 bug：

   var sort_py = function(a, b){
     return a.localeCompare(b);
   }
   var a1 = ["北京", "上海", "南京", "合肥"];
   a1.sort(sort_py);
   //["北京", "合肥", "南京", "上海"]

   toString

   toString() 返回一个字符串，表示指定的数组及其元素。 

   显然，这个方法和 join 方法比较一下。

   1. 返回拼接的字符串；

   2. 不会改变原数组。

   var a1 = [1, 2, 3];
   var a2 = a1.toString();
   a2 //"1,2,3"

   ES6 中新添的数组方法

   上面的这些方法都是 ES5 的，来看看 ES6 添加了哪些新方法。

   copyWithin

   copyWithin() 方法会浅拷贝数组的部分元素到同一数组的不同位置，且不改变数组的大小，返回该数组。 

   接受三个参数，分别是要拷贝到的位置 target，拷贝开始位置 start 和结束位置 end。

   1. 返回修改了的原数组；

   2. 会对数组进行修改，且是浅拷贝；

   3. 参数可负，负值时倒推，且 end 为空表示数组长度。

   var a1 = [1, 2, 3, 4, 5];
   var a2 = a1.copyWithin(0, 2, 4);
   a1 //[3, 4, 3, 4, 5]
   a2 //[3, 4, 3, 4, 5]
   a1 === a2; //true

   find

   如果数组中某个元素满足测试条件，find() 方法就会返回满足条件的第一个元素，如果没有满足条件的元素，则返回 undefined。 MDN array.find 。

   1. 返回找到的那个元素，若未找到，返回 underfined

   2. 不对原数组产生影响。

   function isBigEnough(element, index, array) {
     return (element >= 10);
   }
   var a1 = [8, 18, 14];
   var num = a1.find(isBigEnough); //18

   findIndex

   findIndex()方法用来查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1。 

   这个方法可以参考 find 方法，只是返回值是元素的索引而非元素本身。

   fill

   使用 fill() 方法，可以将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值。 

   fill 方法接受三个参数，第一个参数 value 表示要填充到值，后面两个 start 和 end 表示开始和结束位置，可选，且左闭右开。

   1. 函数返回值是修改了的原数组；

   2. 可对数组产生影响。

   var a1 = [1, 2, 3, 4, 5];
   var a2 = a1.fill(6, 1, 4);
   a1 //[1, 6, 6, 6, 5]
   a2 //[1, 6, 6, 6, 5]
   a1 === a2; //true

   keys

   数组的 keys() 方法返回一个数组索引的迭代器。 

   这个方法会返回一个数组索引的迭代器，迭代器在 ES6 中有特殊的用途。

   1. 函数返回一个迭代器对象；

   2. 不会改变原数组。

   var arr = ["a", "b", "c"];
   var iterator = arr.keys();
   
   console.log(iterator.next()); // { value: 0, done: false }
   console.log(iterator.next()); // { value: 1, done: false }
   console.log(iterator.next()); // { value: 2, done: false }
   console.log(iterator.next()); // { value: undefined, done: true }

   entries

   entries() 方法返回一个 Array Iterator 对象，该对象包含数组中每一个索引的键值对。 

   var arr = ["a", "b", "c"];
   var eArr = arr.entries();
   
   console.log(eArr.next().value); // [0, "a"]
   console.log(eArr.next().value); // [1, "b"]
   console.log(eArr.next().value); // [2, "c"]

   includes

   includes() 方法用来判断当前数组是否包含某指定的值，如果是，则返回 true，否则返回 false。 

   该函数接受两个参数，第二个参数表示开始查找位置，起始位置为 0。这个方法与 indexOf 方法最大的区别不仅在于返回值一个是索引，一个是布尔值，indexOf 方法使用的是 === 来判断，无法判断 NaN 情况，而 includes 可以判断。

   1. 返回 true 或 false；

   2. 不会改变原数组。

   var a1 = [1, NaN];
   a1.indexOf(NaN);//-1
   a1.includes(NaN);//true