javascript 배열 배열 공통 방법_javascript 기술

(1) 기본 배열 방법

1.join()

Array.join() 메서드는 배열의 모든 요소를 ​​문자열로 변환하고 이를 연결하여 최종 생성된 문자열을 반환합니다. 구분 기호를 직접 지정할 수 있습니다. 지정하지 않으면 기본적으로 쉼표

가 사용됩니다.

var arr = [1,2,3];
console.log(arr.join());//"1,2,3"
console.log(arr.join("-"));//"1-2-3"

var a = new Array(10); //长度为10的空数组 组成下边字符串
console.log(a.join("-"));//"---------"

2.reverse()
Array.reverse() 메서드는 배열 요소의 순서를 반대로 바꾸고 역순으로 배열을 반환합니다. (반환된 배열은 그 자체이며 원래 배열은 변경되었습니다.)

var arr = [1,2,3];
arr.reverse();
console.log(arr.join());//"3,2,1"

문자열을 반대로 바꾸고 싶다면 이렇게 하면 됩니다

var str = "abcdefg";

console.log(str.split("").reverse().join(""));//"gfedcba" 返回的是新的值
console.log(str); //"abcdefg" 当然了，原始的是不会变的.

3.sort()
Array.sort() 메서드는 배열의 요소를 정렬하고 정렬된 배열을 반환합니다.

매개변수가 없는 경우 기본 정렬은 작은 것부터 큰 것 순으로 이루어집니다. 물론 비교 기능을 직접 추가하여 정렬할 수도 있습니다

var arr = [1,4,7];
arr.sort();
console.log(arr); //[1,4,7]

arr.sort(function(a,b){
 return a-b; //从小到大
});
console.log(arr); //[1,4,7]

arr.sort(function(a,b){
 return b-a; //从大到小
});
console.log(arr); //[7,4,1]


var num = new Array('one','three','Six','Five');
num.sort(); //区分大小写排序
console.log(num); // ["Five", "Six", "one", "three"]
num.sort(function(s,t){
 var a = s.toLowerCase();
 var b = t.toLowerCase();
 if(a<b) return -1;
 if(a>b) return 1;
 return 0;
});
console.log(num); // ["Five", "one", "Six", "three"]

4.concat()
Array.concat() 메서드는 concat()가 호출된 원본 배열의 요소와 concat()의 각 매개 변수를 요소에 포함하는 새 배열을 생성하고 반환합니다.

이러한 매개변수 중 하나라도 배열인 경우 배열 자체가 아닌 배열의 요소가 연결됩니다.

그러나 concat()은 배열의 배열을 재귀적으로 평면화하지 않는다는 점에 유의하세요. concat()도 호출 배열을 수정하지 않습니다.

var arr = [1,2,3];
console.log(arr.concat(4,5)); // [1, 2, 3, 4, 5]
console.log(arr);       // [1, 2, 3]
console.log(arr.concat([4,5])); // [1, 2, 3, 4, 5]
console.log(arr.concat([4,5],[6,7])); // [1, 2, 3, 4, 5,6,7]
console.log(arr.concat([4,[5,[6,7]]])); // [1, 2, 3, 4, [5, [6, 7]]]
console.log(arr.concat(4,[5,[6,7]])); // [1, 2, 3, 4, 5,[6,7]]

5.slice()
Array.slice() 메서드는 지정된 배열의 슬라이스 또는 하위 배열을 반환합니다. 두 매개변수는 각각 세그먼트(a,b)의 시작 위치와 끝 위치를 지정합니다. 반환되는 것은 b를 제외한 a부터 b까지의 배열 요소입니다.
매개변수(a)가 하나만 있는 경우 a부터 배열 끝까지의 요소를 나타냅니다.
매개변수에 음수(-a)가 나타나면 이는 배열의 마지막 요소를 기준으로 한 위치를 나타냅니다. 예를 들어 (-3)은 마지막 요소부터 끝까지 세 번째 요소를 나타냅니다. 음수가 나타나면 먼저 변환한 후 범위 규칙에 따라 알아보세요
또한 새 배열을 반환하고 원래 배열을 수정하지 않습니다

var arr = [1,2,3,4,5];
console.log(arr.slice(0,3)); // [1, 2, 3]
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr.slice(3));//[4, 5]
console.log(arr.slice(-3));// [3, 4, 5]
console.log(arr.slice(-3,-1));// [3, 4]
console.log(arr.slice(2,-1));// [3, 4]

6. 스플라이스()
Array.splice() 메서드는 배열에 요소를 삽입하거나 삭제하는 일반적인 메서드입니다. 원래 배열의 값을 수정하고 새 배열 시퀀스를 반환합니다.

splice()의 첫 번째 매개변수는 삽입 또는 삭제의 시작 위치를 지정하고, 두 번째 매개변수는 배열에서 삭제해야 하는 요소의 개수를 지정합니다. 두 번째 파라미터를 생략하면 기본적으로 끝까지 삭제됩니다.

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.splice(4)); //[5, 6, 7, 8]
console.log(arr); // [1, 2, 3, 4]
console.log(arr.splice(1,2));// [2, 3]
console.log(arr); // [1, 4]

splice()의 처음 두 매개변수는 삭제할 배열 요소를 지정합니다. 뒤에 오는 인수는 첫 번째 인수가 나타내는 위치부터 시작하여 배열에 삽입할 요소를 지정합니다.

위의 concat()과 다르게 splice()는 다음과 같이 배열을 직접 삽입합니다. [1,2]

var arr = [1,2,3,4,5];
console.log(arr.splice(2,0,'a','b')); // []
console.log(arr); // [1, 2, "a", "b", 3, 4, 5]
console.log(arr.splice(2,1,[1,2],3));// ["a"]
console.log(arr); // [1, 2, [1, 2], 3, "b", 3, 4, 5]

7.push() pop() unshift() Shift()
이러한 메서드를 스택 작업으로 생각하면 됩니다. 처음 두 개는 일반 스택 작업이고, 후자 두 개는 역방향 스택 작업입니다
push() 및 unshift()는 배열의 앞뒤 요소를 추가하고 새 배열의 길이를 반환합니다.
pop() 및 Shift()는 배열의 마지막 요소와 첫 번째 요소를 삭제하고 삭제된 요소를 반환합니다

var arr = [];

console.log(arr.push(1,2,3));//3
console.log(arr);//[1, 2, 3]

console.log(arr.pop());// 3
console.log(arr);//[1,2]

console.log(arr.push([4,5]));//3
console.log(arr);// [1, 2, [4, 5]]

var arr = [];

console.log(arr.unshift(1,2,3));//3
console.log(arr);//[1, 2, 3]

console.log(arr.shift());// 1
console.log(arr);// [2, 3]

console.log(arr.unshift([4,5]));//3
console.log(arr);//[[4, 5], 2, 3]

(2) ECMAScript5의 배열 메소드

이러한 유형의 배열 방법에는 대부분 균일하고 일반적인 규칙이 있습니다. 그들 중 누구도 원래 배열을 수정하지 않습니다.
대부분의 메소드는 함수를 첫 번째 인수로 받고 배열의 각 요소(들)에 대해 함수를 한 번씩 호출합니다.

희소 배열인 경우 존재하지 않는 요소에 대해 전달된 함수가 호출되지 않습니다. 대부분의 경우 호출되는 함수는 배열 요소, 요소 인덱스, 배열 자체라는 세 가지 매개 변수를 사용합니다. 일반적으로 마지막 두 매개변수는 입력할 필요가 없습니다.
여기에는 첫 번째 매개변수(함수) 외에 두 번째 매개변수(선택 사항)가 있습니다. 두 번째 매개변수가 있으면 호출된 함수는 두 번째 매개변수를 갖는 메서드로 처리됩니다.
즉, 함수 호출 시 전달된 두 번째 매개변수가 this 키워드의 값으로 사용됩니다.


1.forEach()

이 메서드는 배열을 처음부터 끝까지 순회하며 각 배열에 대해 지정된 함수를 호출합니다.

var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value){ //只使用了第一个参数（函数），调用的函数也只使用了第一个参数数组元素
 sum += value;
});

console.log(sum);//15
console.log(data);// [1, 2, 3, 4, 5]

var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value,item,data){ //调用的函数具有了三个参数
  data[item] = value*value; //取平方
});

console.log(data);// [1, 4, 9, 16, 25]

2.map()
이 메서드는 호출된 배열의 각 요소를 지정된 함수에 전달하고 이 함수의 반환 값이 포함된 배열을 반환합니다.

var data = [1,2,3,4,5];
var data1 = data.map(function(value){
 return ++ value;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// [2, 3, 4, 5, 6]

3.필터()
이 메서드에서 반환된 배열 요소는 호출 배열의 하위 집합입니다. 전달된 함수는 논리적 판단에 사용되며, 함수는 true 또는 false를 반환합니다.

반환 값이 true이거나 true로 변환할 수 있는 값인 경우 판단 함수에 전달된 요소는 이 하위 집합의 구성원이며 반환 값으로 배열에 추가됩니다.

var data = [1,2,3,4,5];
var data1 = data.filter(function(value){
 return value <= 3;
});

var data2 = data.filter(function(value){
 return value > 3;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// [1,2,3]
console.log(data2);// [4,5]

4.every()和some()
顾名思义，every()就是数组中所以元素都满足函数指定的条件时 返回true; some()就是某一项满足时就返回 true

var data = [1,2,3,4,5];
var data1 = data.every(function(value){
 return value < 4;
});

var data2 = data.some(function(value){
 return value >4;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// false
console.log(data2);// true

5.reduce()和reduceRight()
这两个方法使用指定的函数将数组元素进行组合，生成单个值。

reduce()有两个参数。第一个是执行化简操作的函数，就是说用某种方法把两个值化简为一个值，并返回化简后的值。

　　　　　　　　　　第二个参数可选，用来传递给第一个参数函数作为初始值。如果第二个参数没有，则初始值就使用数组的第一个元素值。

var data = [1,2,3,4,5];
var sum = data.reduce(function(a,b){
 return a+b;
});

var sum1 = data.reduce(function(a,b){
 return a+b;
},5);

var min = data.reduce(function(a,b){
 return (a<b)?a:b;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(sum);// 15
console.log(sum1);// 20
console.log(min);// 1

sum中没有第二个参数，所以初始值为第一个数组元素，第一步1+2=3，第二步3+3=6... 最后得15
sum1中有第二个参数，所以初始值为5，第一步5+1=6，第二步6+2=8... 最后得20

reduceRight()和reduce()差不多，不同的是它按照数组索引从高到低（从右到左）处理数组，而不是正常的从低到高。

var data = ['a','b','c']; 
var str = data.reduce(function(x,y){ //顺序
 return x+y;
});

var str1 = data.reduceRight(function(x,y){ //逆序
 return x+y;
});

console.log(data);// [1, 2, 3]
console.log(str);//"abc"
console.log(str1);//"cba"

6.indexOf()和lastIndexOf()
这个方法搜索整个数组中具有给定值的元素，返回找到的元素的索引（找到了一个就退出了），没有找到则返回-1.

一个从头至尾，一个从尾至头

var data = ['a','b','a','c','a']; 

console.log(data.indexOf('a')); //0
console.log(data.indexOf('d')); //-1
console.log(data.lastIndexOf('a'));//4

console.log(data.lastIndexOf('a',-2));//2 从倒数第二个开始
console.log(data.lastIndexOf('a',1));//0  从顺序第二个往前

7.数组类型 isArray()
判断一个对象是不是数组

console.log(Array.isArray([]));//true
console.log(Array.isArray({}));//false

//模拟上边的
var isArray1 = Function.isArray||function(o){
 return typeof o === "object" &&
  Object.prototype.toString.call(o) === "[object Array]";
};

console.log(isArray1([]));//true
console.log(isArray1({}));//false

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.