지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > 프런트엔드 Q&A > JavaScript 배열 작업을 위한 클래식 기술(구성 및 공유)

JavaScript 배열 작업을 위한 클래식 기술(구성 및 공유)

WBOY
풀어 주다： 2022-01-13 17:56:07
앞으로
1434명이 탐색했습니다.

이 기사에서는 주로 Array 객체 프로토타입 메서드와 중복 제거, 평면화, 정렬 등과 ​​같은 일반적인 작업을 포함하여 JavaScript의 배열 관련 작업을 소개합니다. 도움이 되기를 바랍니다.

JavaScript 배열 작업을 위한 클래식 기술(구성 및 공유)

주로 Array 객체 프로토타입 방법과 중복 제거, 병합, 정렬 등과 ​​같은 일반적인 작업을 포함하는 JavasScript 배열 작업

Array.prototype

forEach

arr.forEach ( callback(( currentValue [, index [, array]])[, thisArg])

  • callback은 배열의 각 요소에 대해 실행되는 함수입니다. 이 함수는 1~3개의 매개변수를 받습니다

  • 배열의 현재 요소가 처리 중입니다. Index

  • array option [작업 중인 배열을 나타냄]

  • thisArg option [콜백 함수 실행 시 this의 값으로 사용, 화살표 함수 사용 시 이 매개변수 무시됩니다]

forEach()는 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행합니다

let arr = [1, 2, 3, 4, 5];
let obj = {a: 1};
arr.forEach(function(currentValue, index, array) {
  console.log("当前值：", currentValue);// 1
  console.log("当前值索引：", index);// 0
  console.log("当前处理数组：", array); // (5)[1, 2, 3, 4, 5]
  console.log("当前this指向：", this);// {a: 1}
  console.log("结束一次回调, 无需返回值");
  console.log("");
}, obj);
console.log(arr);// [1, 2, 3, 4, 5]不改变原数组
로그인 후 복사

map

arr.map(callback(currentValue [, index [, array]])[, thisArg])

  • 콜백은 배열의 각 요소에 대해 실행되는 함수입니다. 이 함수는 1~3개의 매개변수를 받습니다.

  • currentValue 배열에서 처리 중인 현재 요소

  • index 선택 사항 [인덱스 배열에서 현재 처리 중인 요소]

  • array option [배열이 연산 중인 경우]

  • thisArg option [콜백 함수 실행 시 this의 값으로 사용되며 화살표 함수 사용 시 이 함수는 무시됩니다.]

map()은 배열의 각 요소에 대해 한 번 호출되는 제공된 함수의 반환 값이 결과인 새 배열을 생성합니다

let arr = [1, 2, 3, 4, 5];
let obj = {a: 1};
let newArr = arr.map(function(currentValue, index, array) {
  console.log("当前值：", currentValue);// 1
  console.log("当前值索引：", index);// 0
  console.log("当前处理数组：", array); // (5)[1, 2, 3, 4, 5]
  console.log("当前this指向: ", this); // {a: 1}
  console.log("");
  return crrentValue + 10;
}, obj);
console.log(newArr);// [11, 12, 13, 14, 15]
console.log(arr);// [1, 2, 3, 4, 5]不改变原数组
로그인 후 복사

push

arr.push(element1[,.. ., elementN])

elementN은 배열의 끝에 추가되는 요소입니다.

push()는 배열의 끝에 하나 이상의 요소를 추가하고 배열의 길이를 반환합니다. 

let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.push('f', 'g'));// 7
console.log(arr);// ["a", "b", "c", "d", "e", "f", "g"] 改变原数组
로그인 후 복사

pop

pop()은 배열에서 마지막 요소를 제거하고 해당 요소의 값을 반환하며, 배열이 비어 있으면 undefind를 반환합니다. 이 메서드는 배열의 길이를 변경합니다.

let arr = [1, 2, 3, 4, 5];
console.log(arr.pop());// 5
console.log(arr);// [1, 2, 3, 4] 改变原数组
로그인 후 복사

shift

shift( )는 배열에서 첫 번째 요소를 제거하고 요소의 값을 반환합니다. 이 메서드는 원래 배열을 변경합니다

let arr = [1, 2, 3, 4, 5]
console.log(arr.shift());// 1
console.log(arr);// [2, 3, 4, 5] 改变原数组
로그인 후 복사

unshift

arr.unshift(element1[, ..., elementN])

unshift()는 배열의 시작 부분에 하나 이상의 요소를 추가하고 배열의 길이를 반환합니다. 이 메서드는 원래 배열을 수정합니다

let arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(-1, 0));// 7
console.log(arr);// [-1, 0, 1, 2, 3, 4, 5] 改变原数组
로그인 후 복사

splice

arrar.splice(start[, deleteCount[, item1 [, item2[, ...]]]])

start는 요소의 시작 위치 수정을 지정하며 array.length-1과 동일합니다);

deleteCount는 제거할 배열 요소 수를 나타내는 선택 사항인 [정수]입니다. deleteCount가 시작 후 총 요소 수보다 크면 statr 뒤의 모든 요소가 삭제됩니다. (시작 비트 포함) deleteCount가 생략되거나 해당 값이 array.length-start보다 크거나 같은 경우(즉, 시작 후의 모든 요소 수보다 크거나 같은 경우) 모든 요소는 시작 후 배열이 삭제됩니다

item1, item2, ...선택 사항 [배열에 추가할 요소, 시작 위치부터 시작합니다. 지정하지 않으면 splice()는 배열 요소만 삭제합니다.]

splice ()는 기존 요소를 삭제 또는 교체하거나 새 요소를 제자리에 추가하여 배열을 수정하고 수정된 내용을 배열 형태로 반환합니다. ([begin[, end]])

begin 선택 사항 [추출 시작 부분의 인덱스] 이 인덱스에서 원래 배열 요소 추출을 시작합니다. 이 매개변수가 음수인 경우, 이는 인덱스의 마지막 몇 요소부터 추출을 시작한다는 의미입니다. 시작이 생략되면 조각은 인덱스 0에서 시작됩니다. 시작이 원래 배열의 길이보다 크면 빈 배열이 반환됩니다. end는 선택 사항입니다. 이 인덱스에서 원래 배열의 요소를 추출합니다. Slice는 시작을 포함하여 원본 배열의 시작부터 끝까지 모든 요소를 ​​추출합니다. 하지만 end가 생략되면 슬라이스는 원본의 끝까지 추출됩니다. 배열의 길이보다 크면 슬라이스도 배열의 끝까지 추출됩니다. slice()는 다음과 같이 결정된 원본 배열의 얕은 복사본을 반환합니다. 시작 및 끝(시작 포함, 끝 제외) 및 원본 배열은 변경되지 않습니다

let arr = [1, 2, 3, 4, 5]
console.log(arr.splice(1, 1));// [2]
console.log(arr);// [1, 3, 4, 5] 改变原数组
로그인 후 복사

concat

let new_array = old_array.concat(value[, value2[, ...[, valueN]] ])

valueN 선택적[], 배열 또는 값을 연결하여 새 배열로 변환합니다. valueN 매개변수가 생략되면 concat은 호출되는 기존 배열의 얕은 복사본을 반환합니다

concat()用于合并两个或多个数组, 此方法不会更改现有数组, 而是返回一个新数组

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3);// [1, 2, 3, 4, 5, 6]
console.log(arr1);// [1, 2, 3] 不改变原数组
로그인 후 복사

join

arr.join([separator])

separator可选 指定一个字符串来分隔数组的每个元素

join()将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串. 如果数组只有一个项目, 那么将返回该项目而不使用分隔符

let arr = ['a', 'b', 'c'];
console.log(arr.join("&"));// a&b&c
console.log(arr);// ["a", "b", "c"] 不改变数组
로그인 후 복사

sort

arr.sort([compareFunction])

compareFunction可选 用来指定按某种顺序进行排列的函数. 如果省略, 元素按照转换为第字符串的各个字符的Unicode进行排序

firstEl第一个用于比较的元素

secondEl第二个用于比较的元素

sort()用原地算法对数组的元素进行排序, 并返回数组. 默认排序顺序是在将元素转换为字符串, 然后比较它们的UTF-16代码单元值序列时构建的

let arr = [1, 2, 3, 4, 5];
console.log(arr.sort((a, b) => b - a));// [5, 4, 3, 2, 1]
console.log(arr);// [5, 4, 3, 2, 1] 改变原数组
로그인 후 복사

reverse

reverse()将数组中元素的位置颠倒, 并返回该数组, 该方法会改变原数组

let arr = [1, 2, 3, 4, 5];
console.log(arr.reverse());// [5, 4, 3, 2, 1]
console.log(arr);// [5, 4, 3, 2, 1] 改变原数组
로그인 후 복사

every

every()测试一个数组内的所有元素是否都能通过某个指定函数的测试, 返回一个布尔值

let arr = [1, 2, 3, 4, 5];
console.log(arr.every(currentValue => currentValue > 1));// false
console.log(arr);// 不改变原数组
로그인 후 복사

some

some()测试数组中是不是至少有1个元素通过了提供的测试函数, 返回一个Boolean类型的值

let arr = [1, 2, 3 ,4 ,5];
console.log(arr.some(currentValue => currentValue > 1));// true
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组
로그인 후 복사

filter

filter()创建一个新数组, 其包含通过所提供的测试函数的所有元素

let arr = [1, 2, 3, 4, 5];
console.log(arr.filter(currentValue => currentValue > 2));// [3, 4, 5]
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组
로그인 후 복사

find

find()返回数组中满足提供的测试函数的第一个元素的值, 否则返回undefined

let arr = [1, 2, 3, 4, 5];
console.log(arr.find(currentValue => currentValue > 2));// 3
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组
로그인 후 복사

findIndex

findIndex()返回数组中满足提供的测试函数的第一个元素的索引, 否则返回-1

let arr = [1, 2, 3, 4, 5];
console.log(arr.findIndex(currentValue => currentValue > 2));// 2
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组
로그인 후 복사

includes

includes()用来判断一个数组是否包含一个指定的值, 如果包含则返回true, 否则返回false

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2));// true
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组
로그인 후 복사

indexOf

indexof()返回指定元素在数组中的第一个索引, 否则返回-1

let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(2));// 1
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组
로그인 후 복사

lastIndexOf

lastIndexOf()返回指定元素在数组中的的最后一个索引, 如果不存在则返回-1

let arr = [1, 2, 3, 2, 1];
console.log(arr.lastIndexOf(2));// 3
console.log(arr);// [1, 2, 3, 2, 1] 不改变原数组
로그인 후 복사

fill

fill()用一个固定值填充一个数组从起始索引到终止索引到全部元素, 不包括终止索引

let arr = [1, 2, 3, 4, 5];
console.log(arr.fill(0, 0, 5));// [0, 0, 0, 0, 0]
console.log(arr);// [0, 0, 0, 0 ,0] 改变数组
로그인 후 복사

flat

flat()会按照一个可指定的深度递归遍历数组, 并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

let arr = [1, 2, [3, 4, [5]]];
console.log(arr.flat(2));// [1, 2, 3, 4, 5]
console.log(arr);// [1, 2, [3, 4, [5]]] 不改变原数组
로그인 후 복사

keys

keys()返回一个包含数组中每个索引键的Array Iterator对象

let arr = [1, 2, 3, 4, 5];
let iterator = arr.keys();
for (const key of iterator) {
  console.log(key);
  // 0
  // 1
  // 2
}
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组
로그인 후 복사

常用操作

数组去重

使用对象

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let obj = {};
let newArr = [];
arr.forEach(v => {
  if(!ogj[v]) {
    ogj[v] = 1;
    newArr.push(v);
  }
})
console.log(newArr);// [1, 2, 3, 5]
로그인 후 복사

使用Set

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let newArr = Array.from(new Set(arr));
// let newArr = [...(new Set(arr))];// 使用ES6解构赋值
console.log(newArr);// [1, 2, 3, 5]
로그인 후 복사

扁平化数组

使用flat

let arr = [1, 2, [3, 4, [5]]];
let newArr = arr.flat(2);
console.log(newArr);// [1, 2, 3, 4, 5]
로그인 후 복사

递归实现flat

function _flat(arr, maxN = 1, curN = 0) {
  let newArr = [];
  if (curN >= maxN) return arr;
  arr.forEach((v, i, array) => {
    if (Array.isArray(v)) {
      newArr.push(..._flat(v, maxN, curN + 1));
    } else newArr.push(v);
  })
  return newArr;
}
let arr = [1, 2, [3, 4, [5]]];
let newArr = _flat(arr, 1);// 扁平化一层
console.log(newArr);// [1, 2, 3, 4, [5]]
로그인 후 복사

统计一个字符串中出现最多的字符

使用数组将字符的ASCII码作为key制作桶

let s = "ASASRKIADAA";
let arr = [];
let base = 65;// A-Z 65-90 a-z 97-122
Array.prototype.forEach.call(s, (v) => {
  let ascii = v.charCodeAt(0) - base;
  if (arr[ascii]) {
    ++arr[ascii];
  } else arr[ascii] = 1;
})
let max = 0;
let maxIndex = 0;
arr.forEach((v, i) => {
  if (v > max) {
    max = v;
    maxIndex = i;
  }
})
console.log(String.fromCharCode(maxIndex + base), arr[maxIndex]);// A 5
로그인 후 복사

找出数组中的最大值

遍历数组

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let max = -Infinity;
arr.forEach(v => {
  if (v > max) max = v;
})
console.log(max);// 5
로그인 후 복사

使用Math

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let max = Math.max(...arr);
console.log(max);// 5
로그인 후 복사

使用reduce

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let max = arr.reduce((a, v) => {
  return a > v ? a : v;
})
console.log(max);// 5
로그인 후 복사

拷贝数组

遍历数组使用push

let arr = [1, 2, 3, 4, 5];
let newArr = [];
arr.forEach(v => newArr.push(v));
console.log(newArr);// [1, 2, 3, 4, 5]
로그인 후 복사

使用concat

let arr = [1, 2, 3, 4, 5];
let newArr = [].concat(arr);
console.log(newArr);// [1, 2, 3, 4, 5]
로그인 후 복사

使用slice

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(0);
console.log(newArr);// [1, 2, 3, 4, 5];
로그인 후 복사

随机打乱一个数组

随机交换N次

function randomInt(a, b) {
  return Number.parseInt(Math.random() * (b-a) + a);
}
let arr = [1, 2, 3, 4, 5];
let N = arr.length;
arr.forEach((v, i, arr) => {
  let ran = randomInt(0, N);
  [arr[i], arr[ran]] = [arr[ran], arr[i]];
})
console.log(arr);
로그인 후 복사

随机排序

let arr = [1, 2, 3, 4, 5];
arr.sort((v1, v2) => {
  return Math.random() >= 0.5 ? 1 : -1;
})
console.log(arr);
로그인 후 복사

【相关推荐：javascript学习教程】

위 내용은 JavaScript 배열 작업을 위한 클래식 기술(구성 및 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html javascript 프런트 엔드
원천：juejin.im
이전 기사：Ajax 동기화와 비동기의 차이점은 무엇입니까 다음 기사：양식 양식과 Ajax 제출의 차이점은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿