집 > 기사 > 배열 방법에 대한 가장 포괄적인 요약

배열 방법에 대한 가장 포괄적인 요약

小云云원래의: 2017-12-13 15:35:112016검색

소위 배열은 순서가 지정되지 않은 요소의 시퀀스입니다. 동일한 유형의 제한된 변수 컬렉션에 이름이 지정되면 이름은 배열 이름입니다. 배열을 구성하는 개별 변수는 배열의 구성 요소라고도 하며 배열 요소라고도 하며 때로는 아래 첨자 변수라고도 합니다. 배열의 개별 요소를 구별하는 데 사용되는 숫자를 아래 첨자라고 합니다. 프로그래밍에서 배열은 처리의 편의를 위해 동일한 유형의 여러 요소를 순서 없이 구성하는 형태입니다. 유사한 데이터 요소의 정렬되지 않은 컬렉션을 배열이라고 합니다. 이 기사에서는 모든 사람에게 도움이 되기를 바라며 기본 자바스크립트 메서드를 사용하여 가장 완전한 배열 메서드 요약을 주로 공유합니다.

배열 만들기

var colors = [];
var colors = ['red', 'blue'];

배열 감지

if(arr instanceof Array) {}

웹 페이지에 여러 프레임이 포함된 경우 다음 방법을 사용하여 배열을 감지해야 합니다.

if(Array.isArray(arr)) {}

`arr.valueOf()arr.valueOf()`

var colors = ['red', 'yellow'];
colors.valueOf();
// > ['red', 'yellow']

`arr.toString()`

var colors = ['red', 'yellow'];
colors.toString();
// > "red,yellow"

`arr.push(item)`

从数组末尾添加元素，并返回新数组的长度

var colors = ['red', 'yellow'];
colors.push('pink');
// > 3

`arr.pop()`

从数组末尾删除元素，并返回被删除的元素

var colors = ['red', 'yellow'];
colors.pop();
// > 'yellow'

`arr.unshift(item)`

从数组头部添加元素，并返回新数组的长度

var colors = ['green', 'pink'];
colors.unshift('pink');
// > 3

`arr.shift()`

从数组头部删除元素，并返回被删除的元素

var colors = ['yellow', 'orange'];
colors.shift();
// > 'yellow'

`arr.reverse()`

反转数组的顺序，并返回重新排序之后的数组，原数组会被改变

[1, 2, 3, 'reer', 'game', 2, 5].reverse();
// > [5, 2, "game", "reer", 3, 2, 1]

`arr.sort(fn)`

如果不传参数，默认情况下数组内的元素会被转换为字符串进行比较，因此一般不推荐直接使用默认的arr.sort()进行排序。
返回值为排序后的新数组。原数组会被改变

将数组内数值元素从小到大排序。

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc'];
demo.sort(function(a, b)) {
    return a - b;
}
// > [1, 2, 4, "reee", "name", "9", "doc"]

将数组内数值元素从大到小排序

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc'];
demo.sort(function(a, b) {
    return b - a;
})
// > [4, 2, 1, "reee", "name", "9", "doc"]

`arr.concat(otherArr)`

参数中传入元素或者数组，会将该参数合并到arr中，返回合并后新的数组，原数组不会改变

var arr = [1, 3, 'jake'];
arr.concat('rose', [2, 'fi']);
// > [1, 3, 'jake', 'rose', 2, 'fi']

`arr.slice()`

剪切数组，返回剪切之后的数组，元素不会改变

传入一个参数，表示起始位置，结束位置为最末尾

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2);
// > [1, "reee", "name", "9", "doc"]

传入2个参数，表示起始位置与结束位置，但不包括结束位置所在的元素

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2, 4);
// > [1, "reee"]

`arr.splice()`

根据参数的不同，可以分别实现删除，插入，替换元素的作用，会改变原始数组

删除

传入2个参数，分别表示起始位置与要删除元素的个数，返回被删除掉的元素组成的数组

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.splice(2, 3);
// > [1, "reee", "name"]
// arr: [4, 2, 1, "9", "doc"]

插入

传入3个参数， [起始位置 | 要删除的项数为0 | 要插入的元素]，最终返回删除掉的元素组成的数组，因为这里删除项数为0，因此会返回空数组

var arr = [2, 4, 6];
arr.splice(2, 0, 'red', 'green'); 
// > []
// arr: [2, 4, "red", "green", 6]

替换

传入三个参数， [ 起始位置 | 要删除的项数为1 | 要插入的元素 ]，最终返回被删除掉的元素组成的数组

var arr = [2, 4, 9];
arr.splice(1, 1, ['tim', 'tom']);
// > [4]
// arr: [2, ['tim', 'tom'], 9]

总结因此，这个方法会因为参数的不同而实现不同的功能，所有的参数从头到尾依次为

[ 起始位置 | 要删除元素的个数 | 要插入元素的值，可以写入多个值 ]

`arr.indexOf(item)`

验证数组中是否含有某个元素，返回第一个匹配到的元素在数组中所在的位置，如果没有，则返回 -1

var arr = [2, 'tim', 4, 5, 2];
arr.indexOf('tim');
// > 1
arr.indexOf('jake');
// > -1

`arr.lastIndexOf(item)`

验证数组中是否含有某个元素，不过是从数组尾部开始查找，返回第一个匹配到的元素所在的位置，如果没有，则返回-1

var arr = [2, 'tim', 4, 5, 2];
arr.lastIndexOf('tim');
// > 1
arr.indexOf('jake');
// > -1

IE6, 7, 8 不支持indexOf与lastIndexOf方法

`arr.every()`

对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。会有一个函数作为every的参数，该函数也有3个参数，分别为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.every(function(item, index, array) {
    return item > 2;
})
// > false

`arr.some()`

对数组中的每一项运行给定函数，如果该函数对其中一项返回true，则返回true。会有一个函数作为every的参数，该函数也有3个参数，分别为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.some(function(item, index, array) {
    return item > 2;
})
// > true

arr.filter(fn)

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.filter(function(item, index, array) {
    return item > 2;
})
// > [ 3, 4, 5, 4, 3 ]

arr .toString()

var numbers = [1, 2, 3, 3, 2, 1];
var everyRes = numbers.map(function(item, index, array) {
    return item > 2;
})
// >[false, false, true, true, false, false]

arr.push(item)배열의 끝에서 요소를 추가하고 새 배열의 길이를 반환합니다

numbers.forEach(function(item, index) {
    // do something
})

🎜

arr.pop()🎜🎜배열 끝에서 요소를 제거하고 삭제된 요소를 반환합니다🎜<pre class="brush:php;toolbar:false">var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
})
// &gt; 15 
//每一次迭代之后的结果分别为
// [3, 3, 4, 5]
// [6, 4, 5]
// [10, 5]
// 15</pre>🎜<code>arr.unshift(item)

🎜🎜배열의 헤드에서 요소 추가 배열을 만들고 새 배열의 길이를 반환🎜

var arr = [1, 2, 3];
$.each(arr, function(key, value) {
    // do something
});

🎜arr.shift()🎜🎜배열의 헤드에서 요소를 제거하고 삭제된 요소를 반환🎜

var arr = [ 1, 3, 6, 4 ];
$.grep(arr, function(val, key) {
    return val >= 3;
});
// > [3, 6, 4]
// arr : [ 1, 3, 6, 4 ] 不会改变

🎜arr.reverse() 🎜🎜배열의 순서를 반대로 바꾸고 재정렬된 배열을 반환하면 원래 배열이 변경됩니다🎜

var arr = [1, 2, 5, 3];
$.map(arr, function(val, key) {
    return val * 10;
})
// > [10, 30, 30, 20, 10]
// 原数组不受影响

🎜arr.sort(fn)🎜🎜매개변수가 전달되지 않으면 배열의 요소는 기본적으로 문자열로 변환됩니다. 비교를 위해 정렬을 위해 기본 arr.sort()를 직접 사용하는 것은 일반적으로 권장되지 않습니다. 🎜반환값은 정렬 후의 새로운 배열입니다. 원래 배열이 변경됩니다🎜

🎜 배열의 숫자 요소가 작은 것부터 큰 것 순으로 정렬됩니다. 🎜

$.inArray(3, [1, 2, 3]);
// > 2

🎜 배열의 숫자 요소를 큰 것부터 작은 것 순으로 정렬하세요🎜

var arr = [1, 3, 4];
var arr2 = [4, 3, 1];
$.merge(arr, arr2);
// > [1, 3, 4, 4, 3, 1]
// 为了防止第一个数组被改变，可以使用下面的方式来写
$.merge($.merge([], arr), arr2);

🎜 arr.concat(otherArr)🎜🎜요소나 배열을 매개변수로 전달하면 매개변수가 arr로 병합되고 병합된 새 배열이 반환됩니다. 원래 배열은 변경되지 않습니다.🎜rrreee🎜arr.slice ()🎜🎜배열을 잘라낸 후 배열을 반환합니다. 요소는 변경되지 않습니다.🎜

🎜시작 위치를 나타내는 매개변수를 전달합니다. 끝 위치는 끝🎜

rrreee

🎜시작 위치와 끝 위치를 나타내지만 끝은 포함하지 않는 2개의 매개변수를 전달하세요. position 🎜

rrreee🎜arr.splice()🎜🎜각 요소에 따라 요소를 삭제, 삽입, 교체할 수 있습니다. 원본 배열🎜

🎜🎜Delete🎜🎜

🎜각각 시작 위치와 추가할 요소 수를 나타내는 2개의 매개변수를 전달합니다. 삭제하고, 삭제된 요소로 구성된 배열을 반환합니다🎜rrreee

🎜🎜Insert🎜🎜

🎜3개의 매개변수를 전달하고, [시작 위치 | 삭제된 항목 개수는 0 | 삽입할 요소], 최종적으로 삭제된 항목의 개수가 0이므로 빈 배열이 반환됩니다.🎜rrreee

🎜🎜replace🎜🎜

🎜세 개의 매개변수를 전달하고 [시작 위치 | 삭제할 항목 수는 1 | 삽입할 요소]를 입력하고 마지막으로 삭제된 요소를 반환합니다. 구성 🎜rrreee

🎜의 배열 요약 따라서 이 방법은 다른 매개변수로 인해 다른 기능을 수행합니다. 처음부터 끝까지 모든 매개변수는 🎜

arr.indexOf(item)

arr.lastIndexOf(item)

🎜IE6, 7, 8은 indexOf를 지원하지 않습니다. 🎜

arr.every()

arr.some()

arr.filter(fn)

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.filter(function(item, index, array) {
    return item > 2;
})
// > [ 3, 4, 5, 4, 3 ]

`arr.map(fn)`

对数组的每一项进行计算等处理，返回处理结果组成的数组，fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 3, 2, 1];
var everyRes = numbers.map(function(item, index, array) {
    return item > 2;
})
// >[false, false, true, true, false, false]

`arr.forEach(fn)`

遍历数组，没有返回值，fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

numbers.forEach(function(item, index) {
    // do something
})

`arr.reduce(fn)`

缩减方法。fn的参数为
[ 前一个元素 | 当前元素，从1开始 | 后一个元素的序列，从1开始计数 | 表示该数组 ]

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
})
// > 15 
//每一次迭代之后的结果分别为
// [3, 3, 4, 5]
// [6, 4, 5]
// [10, 5]
// 15

`arr.reduceRight(fn)`

与reduce一模一样，只是方向相反。

jQuery相关方法

`$.each(arr, fn)`

遍历数组或者对象，fn有2个参数，分别为，比原生的for in 更加健壮
[ 数组的索引或者对象的key值 | 索引或者key值对应的value值 ]

var arr = [1, 2, 3];
$.each(arr, function(key, value) {
    // do something
});

跳过一次循环 return | return true
终止循环 return false

`$.grep(arr, fn)`

过滤方法，功能类同原生中的arr.filter(fn)。此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [ 1, 3, 6, 4 ];
$.grep(arr, function(val, key) {
    return val >= 3;
});
// > [3, 6, 4]
// arr : [ 1, 3, 6, 4 ] 不会改变

`$.map(arr, fn)`

对每项进行处理，返回处理结果组成的数组，此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [1, 2, 5, 3];
$.map(arr, function(val, key) {
    return val * 10;
})
// > [10, 30, 30, 20, 10]
// 原数组不受影响

`$.inArray(item, array)`

检测某一个元素item是否存在与数组之中，返回其所在的位置，如果不在，则返回-1

$.inArray(3, [1, 2, 3]);
// > 2

`$.merge(arr1, arr2)`

合并数组，会改变第一个参数的数组为合并之后的数组，返回合并之后的数组

var arr = [1, 3, 4];
var arr2 = [4, 3, 1];
$.merge(arr, arr2);
// > [1, 3, 4, 4, 3, 1]
// 为了防止第一个数组被改变，可以使用下面的方式来写
$.merge($.merge([], arr), arr2);

`$.unique(arr)`

过滤DOM数组中重复的元素

`$.makeArray(obj)`

将类数组对象转换为数组

`$(elem).toArray()`

将jQuery对象集合恢复成DOM数组

배열 방법에 대한 가장 포괄적인 요약

배열 만들기

배열 감지

`arr.valueOf()arr.valueOf()`

`arr.toString()`

`arr.push(item)`

`arr.pop()`

`arr.unshift(item)`

`arr.shift()`

`arr.reverse()`

`arr.sort(fn)`

`arr.concat(otherArr)`

`arr.slice()`

`arr.splice()`

`arr.indexOf(item)`

`arr.lastIndexOf(item)`

`arr.every()`

`arr.some()`

`arr.filter(fn)`
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; var everyRes = numbers.filter(function(item, index, array) { return item > 2; }) // > [ 3, 4, 5, 4, 3 ]

`arr.map(fn)`

`arr.forEach(fn)`

`arr.reduce(fn)`

`arr.reduceRight(fn)`

jQuery相关方法

`$.each(arr, fn)`

`$.grep(arr, fn)`

`$.map(arr, fn)`

`$.inArray(item, array)`

`$.merge(arr1, arr2)`

`$.unique(arr)`

`$.makeArray(obj)`

`$(elem).toArray()`

관련 기사

배열 방법에 대한 가장 포괄적인 요약

배열 만들기

배열 감지

arr.valueOf()arr.valueOf()

arr.toString()

arr.push(item)

arr.pop()

arr.unshift(item)

arr.shift()

arr.reverse()

arr.sort(fn)

arr.concat(otherArr)

arr.slice()

arr.splice()

arr.indexOf(item)

arr.lastIndexOf(item)

arr.every()

arr.some()

arr.filter(fn)var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; var everyRes = numbers.filter(function(item, index, array) { return item > 2; }) // > [ 3, 4, 5, 4, 3 ]

arr.map(fn)

arr.forEach(fn)

arr.reduce(fn)

arr.reduceRight(fn)

jQuery相关方法

$.each(arr, fn)

$.grep(arr, fn)

$.map(arr, fn)

$.inArray(item, array)

$.merge(arr1, arr2)

$.unique(arr)

$.makeArray(obj)

$(elem).toArray()

관련 기사

`arr.valueOf()arr.valueOf()`

`arr.toString()`

`arr.push(item)`

`arr.pop()`

`arr.unshift(item)`

`arr.shift()`

`arr.reverse()`

`arr.sort(fn)`

`arr.concat(otherArr)`

`arr.slice()`

`arr.splice()`

`arr.indexOf(item)`

`arr.lastIndexOf(item)`

`arr.every()`

`arr.some()`

`arr.filter(fn)`
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; var everyRes = numbers.filter(function(item, index, array) { return item > 2; }) // > [ 3, 4, 5, 4, 3 ]

`arr.map(fn)`

`arr.forEach(fn)`

`arr.reduce(fn)`

`arr.reduceRight(fn)`

`$.each(arr, fn)`

`$.grep(arr, fn)`

`$.map(arr, fn)`

`$.inArray(item, array)`

`$.merge(arr1, arr2)`

`$.unique(arr)`

`$.makeArray(obj)`

`$(elem).toArray()`