JavaScript Array Tricks

внешний интерфейс JavaScript
JavaScript Array Tricks

«Это первый день моего участия в ноябрьском испытании обновлений, ознакомьтесь с подробностями события:Вызов последнего обновления 2021 г."

Учитывая, что он часто используется в повседневной разработке, эта статья организована для удобства поиска и просмотра.

Стартер блога:Общие методы работы с массивами 丨 Личный блог Чун Чуна

Основы

метод описывать
concat() Объединяет два или более массива и возвращает копию объединенных массивов.
copyWithin() Копирует элемент массива в указанную позицию или из нее.
entries() Возвращает итерируемый объект для массива пар ключ/значение.
every() Проверяет, проходит ли тест каждый элемент массива.
fill() Заполняет элементы массива статическими значениями.
filter() Создает новый массив с каждым элементом массива, прошедшим тест.
find() Возвращает значение первого элемента массива, прошедшего проверку.
findIndex() Возвращает индекс первого элемента массива, прошедшего проверку.
forEach() Вызовите функцию для каждого элемента массива.
from() Создать массив из объекта.
includes() Проверяет, содержит ли массив указанный элемент.
indexOf() Ищите элемент в массиве и верните его позицию.
isArray() Проверьте, является ли объект массивом.
join() Объединяет все элементы массива в строку.
keys() Возвращает объект Array Iteration, содержащий ключи исходного массива.
lastIndexOf() Поиск элемента в массиве, начиная с конца и возвращая его позицию.
map() Создает новый массив с результатом вызова функции для каждого элемента массива.
pop() Удаляет последний элемент массива и возвращает этот элемент.
push() Добавляет новый элемент в конец массива и возвращает новую длину.
reduce() Вычитает значения массива до одного значения (слева направо).
reduceRight() Вычитает значения массива до одного значения (справа налево).
reverse() Обратный порядок элементов в массиве.
shift() Удаляет первый элемент массива и возвращает этот элемент.
slice() Выбирает часть массива и возвращает новый массив.
some() Проверяет, проходит ли тест любой элемент массива.
sort() Отсортируйте элементы массива.
splice() Добавить/удалить элементы из массива.
toString() Преобразуйте массив в строку и верните результат.
unshift() Добавьте новый элемент в начало массива и верните новую длину.
valueOf() Возвращает исходное значение массива.
at() В новом предложении 2021.1, чтобы устранить ограничение квадратных скобок, можно вводить отрицательные числа.

1.1 суммирование

Метод 1: Array.prototype.forEach()

var total = 0;
[1, 2, 3].forEach(function (num) {
  total += num;
});

Метод 2: Array.prototype.reduce()

var total = [1, 2, 3].reduce(function (sum, current) {
  return sum + current;
}, 0);

1.2 Сортировка

Способ 1: сортировка()

// 默认是升序
[1, 2, 3, 4].sort((a, b) => a - b); // [1, 2, 3, 4]
// 降序
[1, 2, 3, 4].sort((a, b) => b - a); // [4, 3, 2, 1]

Метод 2: Алгоритм сортировки

排序算法对比

использованная литература

1.3 Берем максимальное значение

Метод 1: Math.max()

Math.max() // -Infinity，即 -∞

Math.max(Infinity, -Infinity) // Infinity，即 ∞

Math.max(...[1, 2, 3, 4]) // 4

Math.max.apply(this, [1, 2, 3, 4]) // 4

[1, 2, 3, 4].reduce( (prev, cur,curIndex,arr)=> {
 return Math.max(prev,cur);
},0) // 4

1.4 Определить, содержит ли он значение

Способ 1: Array.includes()

[7, 8, 9].includes(4) // false

Способ 2: Array.indexOf()

[7, 8, 9].indexOf(4) // -1 如果存在返回索引
[7, 8, 9].indexOf(9) // 2

Метод три: array.find ()

Возвращает неопределенное значение, если в массиве нет значения

[7, 8, 9].find((item) => item === 4) // undefined
[7, 8, 9].find((item) => item === 9) // 9

Метод 4: Array.findIndex()

Возвращает -1, если в массиве нет значения

[7, 8, 9].findIndex((item)=> item === 4) // -1
[7, 8, 9].findIndex((item)=> item === 9) // 2

1.5 Определенное значение настройки

Метод 1: Array.splice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr.splice(3, 0, 3)
arr // ['aaa', 'bbbb', 'cccc', 3, 'dddd']

1.6 Каждое значение настройки

Метод 1: Array.fill()

[7,8,9,10,11,12].fill() // [undefined, undefined, undefined, undefined, undefined, undefined]
[7,8,9,10,11,12].fill(7) // [7, 7, 7, 7, 7, 7]
[7,8,9,10,11,12].fill(3, 2, 4) // [7, 8, 3, 3, 11, 12]

Метод два: array.map ()

[7, 8, 9].map((item, idx) => item % 2) // [1, 0, 1]
[7, 8, 9].map((item, idx) => idx) // [0, 1, 2]

1.7 Удовлетворен ли каждый пункт

Метод 1: Array.every()

[1,2,3].every(item=>{return item>2}) //false

1.8 Есть тот, который удовлетворяет

Метод 1: Array.some()

[1,2,3].some(item=>{return item>2}) //true

два. Дополнительно

2. Ревонное массив. Прототип. AT ()

// 兼容老浏览器的 MDN polyfill
// 注释：Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。
if (Array.prototype.at) {
    Array.prototype.at = function (idx) {
        return this[this.length + idx]
    }
}
arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr.at(-1) // 'dddd'
arr.at(-3) // 'bbbb'

2.2 Пустой массив

Способ 1: Массив.длина

самый быстрый

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr
arr // ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']

arr.length = 0 // 0

arr // []
// 被引用的数组，也会被清空
arr1 // []

Способ 2: Array.splice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr

arr.splice(0) // ['aaa', 'bbbb', 'cccc', 'dddd']

arr // []
// 同上，被引用的也会被清空
arr1 // []

Способ 3: прямое назначение нового массива []

самый медленный и занимает память

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr

arr = [] // []

arr // []
// 被引用的数组，不会被清空
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']

2.3 Сглаживание

const arr = [1, [2, [3, [4, 5]]], 6];
// => [1, 2, 3, 4, 5, 6]

Метод 1: Array.prototype.flat()

const res1 = arr.flat(Infinity);

Способ 2: новое регулярное выражение()

// 缺点：都会变成字符串
const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');
// 改良版
const res3 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');

Способ 3: Array.prototype.reduce()

const flatten = arr => {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, [])
}
const res4 = flatten(arr);

Способ 4: рекурсия функций

const res5 = [];
const fn = arr => {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      fn(arr[i]);
    } else {
      res5.push(arr[i]);
    }
  }
}
fn(arr);

Метод 5: в то время как () + некоторые ()

function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}

2.4 Слияние

Метод 1: Array.push()

const arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr.push(1, 2, 3,[4, 5, 6]) // 8
arr // ['aaa', 'bbbb', 'cccc', 'dddd', 1, 2, 3, Array(3)]

Метод 2: Array.concat()

arr.concat([1, 2, 3],[4, 5, 6]) // ['aaa', 'bbbb', 'cccc', 'dddd', 1, 2, 3, 4, 5, 6]
arr // ['aaa', 'bbbb', 'cccc', 'dddd']

Способ 2: Оператор спреда

[...[1, 2, 3, 4],...[4, 5]] //[1,2,3,4,5,6]

2.5 Дедупликация

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
// => [1, '1', 17, true, false, 'true', 'a', {}, {}]

Способ 1: новый набор()

const arr1 = Array.from(new Set(arr));
// 或
const arr1 = [...new Set(arr)];

// 是 Set 类型，不是 Array 类型
Object.prototype.toString.call(new Set(arr)) // '[object Set]'

Способ 2: фильтр() + indexOf()

const arr2 = arr => {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index;
  });
}

Способ 3: новая карта()

const arr3 = arr => {
  const map = new Map();
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!map.has(arr[i])) {
      map.set(arr[i], true)
      res.push(arr[i]);
    }
  }
  return res;
}

Способ 4: включает()

const arr4 = arr => {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!res.includes(arr[i])) res.push(arr[i]);
  }
  return res;
}

2.6 Перекресток

Способ 1: новый набор()

const one = [0, 2, 4, 6, 8, 8]
const two = [1, 2, 3, 4, 5, 6]
const duplicated = [...new Set(one)].filter(v => two.includes(v)) // [2, 4, 6]

2.7 Удаление фиктивных значений

Метод 1: Array.prototype.filter()

const arr = [0, 'blue', '', NaN, 9, true, undefined, 'while', false]
const real = arr.filter(Boolean) // ['blue', 9, true, 'while']

2.8 Реорганизация (изменяемый обмен)

Метод 1: деструктурирование присваивания

arr = ['aaa', 'bbbb', 'cccc', 'dddd', 'eee', 'fff']
[arr[1], arr[2]] = [arr[2], arr[1]] // ['cccc', 'bbbb']
arr // ['aaa', 'cccc', 'bbbb', 'dddd']

// 如果想获取单个值
[a, , , e, f] = arr
a // 'aaa'
e // 'dddd'
f // 'eee'

Способ 2: Array.splice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd', 'eee', 'fff', 'ggg', 'hhh', 'iii']
arr.splice(1, 3, ...arr.splice(4, 4, arr[1], arr[2], arr[3])) // ['bbbb', 'cccc', 'dddd']
arr // ['aaa', 'eee', 'fff', 'ggg', 'hhh', 'bbbb', 'cccc', 'dddd', 'iii']

Способ 3: ввести транзитные переменные

temp = arr[1]
arr[1] = arr[2]
arr[2] = temp

2.9 Массив-подобный --> Массив

// 类数组（包含 length 属性，比如 arguments、DOM 操作方法返回的结果等）
const asArr = { 0: 'aaa', '1': 'bbb', '二': 'ccc', 4: 'eee', length: 6 }

Метод 1: Array.prototype.from()

Array.from(asArr)
// => ['aaa', 'bbb', undefined, undefined, 'eee', undefined]
// undefined 可枚举

Способ 2: Array.prototype.slice.call()

Array.prototype.slice.call(asArr)
// => ['aaa', 'bbb', empty × 2, 'eee', empty]
// empty 不可枚举

PS: Другие случаи, которые приводят к пустым

// 也会产生 empty 空位，不会改变 length 属性
delete arr[2]
// 直接删掉元素，且改变 length 属性
arr.splice(2, 1)

Способ 3: Оператор спреда

[...document.querySelectorAll('div')]

2.10 Массив --> Объект

Метод 1: Оператор спреда

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
// ['aaa', 'bbbb', 'cccc', 'dddd']
{ ...arr }
// {0: 'aaa', 1: 'bbbb', 2: 'cccc', 3: 'dddd'}

Метод 2: пока()

i = 0
s = {}
arr = ['aaa', 'bbbb', 'cccc', 'dddd']

while (arr[i]) {
    s[i] = arr[i++]
}

s // {0: 'aaa', 1: 'bbbb', 2: 'cccc', 3: 'dddd'}

Способ 3: Object.fromEntries()

Object.keys({name:'张三',age:14}) // ['name','age']
Object.values({name:'张三',age:14}) // ['张三',14]
Object.entries({name:'张三',age:14}) // [[name,'张三'],[age,14]]
Object.fromEntries([name,'张三'],[age,14]) // ES10的api,Chrome不支持, firebox输出{name:'张三',age:14}

2.11 Поверхностное копирование

Метод 1: Array.slice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr.slice(0)
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']

Способ 2: оператор расширения

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = [...arr]
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']

Способ 3: Array.concat()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = [].concat(array)
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 'bbbb', 'cccc', 'dddd']

Способ 4: прямое назначение

arr = ['aaa', 'bbbb', 'cccc', 'dddd']
arr1 = arr
arr[1] = 2333 // 2333
arr // ['aaa', 2333, 'cccc', 'dddd']
arr1 // ['aaa', 2333, 'cccc', 'dddd']

2.12 Array.from достигает эффекта .map

arr = [
    { name: '张三', age: 18 },
    { name: '李四', age: 18 },
    { name: '王麻子', age: 18 },
    { name: '小六', age: 18 },
]
nameMap = arr.map(v => v.name) // ['张三', '李四', '王麻子', '小六']
nameMap = Array.from(arr, ({name}) => name) // ['张三', '李四', '王麻子', '小六']

2.13 Получить последние n элементов

Метод 1: Array.splice()

arr = ['aaa', 'bbbb', 'cccc', 'dddd']

arr.slice().splice(-1) // ['dddd']
arr.slice().splice(-3) // 'bbbb', 'cccc', 'dddd'

2.233 Рисование графики из двумерных массивов

Способ 1: Эммм

// Emmmm

бойня. Производительность циклов с небольшими оптимизациями

Оптимизация одна: оптимизация для петли

  • Когда циклическая сложностьO(n)час,减少每次迭代的工作量является наиболее эффективным методом.
  • Когда сложность превышаетO(n), рекомендуется сосредоточиться на减少迭代次数.

а. Уменьшайте количество раз, когда длина берется каждый раз

Это позволяет избежать необходимости найти Array.Length каждый раз, когда цикл выполняется

for (let i = 0; i < array.length; i++) {
    console.log(i) // 0 1 2
}

// 优化后
for (let i = 0, len = array.length; i < len; i++) {
    console.log(i) // 0 1 2
    // do sth...
}

б.Обратный цикл

for (let i = array.length; i > 0; i--) {
    console.log(i) // 3 2 1
}

// 优化后
for (let i = array.length - 1; i >= 0; i--) {
    console.log(i) // 2 1 0
}

// 优化后
for (let i = array.length; i--;) {
    console.log(i) // 2 1 0
    // do sth...
}

Оптимизация 2: не используйте for-in для обхода массива

JavaScript предоставляет тип цикла, только цикл for-in значительно медленнее, чем некоторые другие.

Каждая итерация цикла for-in влечет за собой больше накладных расходов, поскольку каждая операция итерации ищет свойства экземпляра или прототипа одновременно, поэтому она выполняется медленнее, чем циклы других типов.

Поэтому избегайте использования циклов for-in, если вам явно не нужно перебирать объект с неизвестным количеством свойств.

Оптимизация 3: используйте итерацию на основе функций с осторожностью

Например: по каждому

Итерация на основе функций обеспечивает более удобный метод итерации, но все же более эффективен, чем итерация на основе цикла.要慢一些.对每个数组调用外部方法所带来的开销является основной причиной низкой скорости. Во всех случаях итерация на основе цикла выполняется быстрее, чем итерация на основе функции.8倍, поэтому итерация на основе функций не лучший выбор, когда критична скорость работы.

Четвертая оптимизация: попробуйте использовать условный оператор switch-case

если только в非真既假При оценке других условий используйте оператор switch-case больше и меньше операторов if/else-if/else. Причины следующие:

  • Поддерживает ассоциативные операции, то есть не пишет операторы break
  • Суть в том, что таблица переходов генерируется во время сборки для указания адреса кейса, поэтому время выполнения каждого кейса в основном одинаково, и последовательность не будет влиять на эффективность выполнения.
  • Код чище, гораздо более читабелен и удобен в сопровождении

Оптимизация пятая: таблица поиска

Когда имеется много дискретных данных, использование таблицы поиска намного быстрее, чем использование if-else и switch-case.

// 将返回值集合存入数组
const results = [result0, result1, result2, result3, result4]

// 返回结果
return results[value]

"课外题

вывод стрелочной функции

var func1 = x => x
func1(2) // 2
var func2 = x => {x}
func2(2) // undefined
var func3 = x => ({x})
func3() // {x: undefined}
func3(2) // {x: 2}

Об авторе

Привет всем, я淳淳同学, если вы заинтересованы во мне, вы можете найти меня здесь:

О переиздании

Пожалуйста, удалите этот раздел при перепечатке

Данная статья может быть воспроизведена по желанию, при этом при перепечатке должны быть соблюдены следующие требования:

  1. Пожалуйста, удаляйте этот раздел при перепечатке и указывайте источник как эту ссылку
  2. Пожалуйста, сохраняйте исходную перепечатку и не удаляйте слова (без опечаток!)
  3. Пожалуйста, дайте мне знать при перепечатке. Например, оставьте комментарий под этой статьей или отправьте мне письмо по электронной почте.961150665@qq.comВсе в порядке, просто дайте мне знать. Не ждите моего ответа, просто переведите после приветствия

конец. Желаю вам без ошибок~

Категории