JavaScript 配列操作の古典的なテクニック (整理および共有)

この記事では、主に配列オブジェクトのプロトタイプ メソッドと、重複排除、フラット化、並べ替えなどの一般的な操作を含む、JavaScript での配列に対する関連操作をいくつか紹介します。お役に立てば幸いです。

JavasScript の配列操作。主に配列オブジェクトのプロトタイプ メソッドと、重複排除、フラット化、並べ替えなどの一般的な操作が含まれます。

Array.prototype

forEach

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

• callback は、配列内の各要素に対して実行される関数です。この関数は 1 ～ 3 つのパラメータを受け取ります

• currentValue は配列内で処理中 現在の要素のインデックスを待機中

• array オプション [操作対象の配列を示します]

• thisArg オプション [コールバック関数を実行するときは、 this の値として使用します。アロー関数を使用する場合、このパラメータは無視されます。]

forEach() は、配列の各要素に対して指定された関数を 1 回実行します

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])

• callback は、配列の各要素によって実行される関数です。この関数は、1 ～ 3 つのパラメータを受け取ります。

• currentValue配列内で処理されている現在の要素

• index オプション [配列内で処理されている現在の要素のインデックス]

• #array オプション [操作対象の配列]

• thisArg オプション [コールバック関数を実行するときに、this の値として使用します。アロー関数を使用する場合、この関数は無視されます] を選択します。

map() は、新しい配列。その結果は配列です。 関数の各要素が 1 回呼び出された後の戻り値は

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]不改变原数组

pusharr です。 Push(element1[,. .., elementN])

elementN は配列の末尾に追加される要素です。

push() は 1 つ以上の要素を配列の末尾に追加します。配列を取得し、配列の長さを返します。

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

poppop() は、配列から最後の要素を削除し、配列の値を返します。このメソッドは、配列の長さを変更する

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

shiftshift()を削除します。配列の最初の要素を取り出してその要素の値を返すと、このメソッドは元の配列を変更します

#

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() は、1 つ以上の要素を配列の先頭に追加し、配列の長さを返します。このメソッドは、元の配列を変更します

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 は、変更の開始位置を指定します。配列の長さを超える場合は、配列の末尾から内容を追加します。負の値の場合は、配列の末尾からの数を示します (先頭から数えて) -1、これは、-n が最後から n 番目の要素であり、array.length-1 と同等であることを意味します); 負の数の絶対値が配列の長さより大きい場合、開始位置が位置であることを意味します0. deleteCount はオプション [整数] で、削除する配列要素の数を示します。 deleteCount が start 後の要素の合計数より大きい場合、 statr 以降のすべての要素が削除されます (start 要素を含む) deleteCount が省略されている場合、またはその値が array.length-start 以上の場合 (つまり、開始数量以降のすべての要素以上の場合)、配列のすべての要素が削除されます。 after start

item1, item2, ...optional [開始位置から配列に追加される要素。指定されていない場合、splice() は配列要素のみを削除します]

splice() は、既存の要素を削除または置換するか、新しい要素を適切に追加することによって配列を変更し、変更された内容を配列の形式で返します。このメソッドは元の配列を変更します

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

#slice

arr.slice([begin[, end]])

beginoptional[抽出開始インデックス] このインデックスから元の配列要素を抽出します。パラメータが負の数である場合、元の配列の最後のいくつかの要素から抽出を開始することを意味します。begin が省略された場合、スライスはインデックス 0 から始まります。begin が元の配列の長さより大きい場合は、空の配列が返されます。 end はオプションです [抽出終了時のインデックス] で、元の配列要素の抽出はこのインデックスで終了します。スライスは、begin を含む、元の配列の先頭から末尾までのインデックスからすべての要素を抽出します。 , ただし、end は含まれません。end を省略した場合、スライスは元の配列の末尾まで抽出されます。end が配列の長さより大きい場合、スライスは配列の末尾まで抽出されます。

slice() は新しい Array オブジェクトを返します。このオブジェクトは、begin と end によって決定される元の配列の浅いコピーです (begin を含み、end を除く)。元の配列は変更されません

let arr = [1, 2, 3, 4, 5];
console.log(arr.sclice(1, 3));// [2, 3]
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组

concat

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

valueNooptional[], 連結配列または値を新しい配列に挿入する場合、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 中国語 Web サイトの他の関連記事を参照してください。