Восемнадцать боевых искусств массивов JavaScript

внешний интерфейс переводчик JavaScript функциональное программирование

множество

Массив представляет собой упорядоченный набор значений, каждое значение называется элементом, и каждый элемент имеет позицию в массиве, представленную числом, называемым индексом.

  • Индекс массива JavaScript представляет собой 32-битное значение, отсчитываемое от нуля, индекс первого элемента равен 0, а массив может содержать максимум 4294967295 (т.е. 2^32-1) элементов.
  • Массивы JavaScript являются динамическими, они увеличиваются или уменьшаются по мере необходимости, и нет необходимости объявлять фиксированный размер при создании массива или перераспределять пространство при изменении размера массива.
  • Массивы JavaScript могут быть разреженными, индексы элементов массива не обязательно должны быть последовательными, между ними могут быть промежутки.
  • Каждый массив JavaScript имеет свойство длины, которое для неразреженных массивов представляет собой количество элементов в массиве. Для разреженных массивов длина больше, чем индекс всех элементов.

создать массив

1. Проще всего использовать литерал массива (литерал) для создания массива.

var empty = [];     //没有元素的数组
var arr = [1.1, true, "a",];    //3个不同类型的元素和结尾的逗号

Значения в литералах массива также не обязательно должны быть константами, они могут быть произвольными выражениями:

var number = 1;
var list = [number, number+1, number+2];

Если значение в литерале массива опущено, пропущенный элемент представлен пустым (то есть такого элемента нет), и при доступе будет возвращено значение undefined.

var count = [1,,3];     // 数组打印出来是(3) [1, empty, 3], count[1] === undefined是true。
var undefs = [,,];      // 数组直接量语法允许有可选的结尾的逗号，顾[,,]只有两个元素而非三个，undefs.length 是 2

2. Конструктор Array() создает массив

Вызывается без аргументов, эквивалентно [], создает пустой массив без элементов

var arr = new Array();

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

var arr = new Array(10)     // (10) [empty × 10]

Явно укажите два или более элемента массива или нечисловой элемент элемента массива

var arr = new Array(1,2,3,"one");

3. Некоторые методы ES6

(1)Array.of()Возвращает массив всех аргументов, независимо от количества или типов аргументов, или пустой массив, если аргументов нет.(Новое в ES6)

параметр:

elementN — любое количество параметров, которые будут элементами в возвращаемом массиве по порядку.

Уведомление:

of() может решить проблему, связанную с тем, что приведенный выше конструктор ведет себя по-разному из-за разного количества параметров (когда параметр имеет только одно значение, конструктор будет рассматривать его как длину массива).

Array.of(1,2,3); // [1,2,3]
Array.of(1,{a:1},null,undefined) // [1, {a:1}, null, undefined]

// 只有一个数值参数时
let B = new Array(3);   // (3) [empty × 3]
let C = Array.of(3);    // [3]

возвращаемое значение:Новый экземпляр массива.


(2)Array.from()Создайте новый массив из массивоподобного или итерируемого объекта(Новое в ES6)

параметр:

  • Первый параметр: подобный массиву или итерируемый объект, который вы хотите преобразовать в массив.
  • Второй параметр (необязательный): функция обратного вызова, массивоподобный метод сопоставления, который обрабатывает каждый элемент и помещает обработанное значение в возвращаемый массив.
  • Третий параметр (необязательный): объект this, к которому привязана функция обратного вызова.
// 有length属性的类数组
Array.from({length：5},(v,i) => i)     //[0, 1, 2, 3, 4]

// 部署了Iterator接口的数据结构 比如:字符串、Set、NodeList对象
Array.from('hello')    // ['h','e','l','l','o']
Array.from(new Set(['a','b']))   // ['a','b']

// 传入一个数组生成的是一个新的数组，引用不同，修改新数组不会改变原数组
let arr1 = [1,2,3]
let arr2 = Array.from(arr);
arr2[1] = 4;
console.log(arr1,arr2)
//[1, 2, 3] [1, 4, 3]

возвращаемое значение:Новый экземпляр массива.

Точка знаний

//数组合并去重
function combine(){
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组，之后用Set数据结构的特性来去重
    return Array.from(new Set(arr));
}

var m = [1, 2, 2], n = [2,3,3];
console.log(combine(m,n));

метод массива

1. Метод, который изменит исходный массив

1. Метод push() добавляет один или несколько элементов в конец массива иВозвращает длину массива

Параметры: item1, item2, ..., itemX , элемент, добавляемый в конец массива.

let arr = [1,2,3];
let length = arr.push('末尾1','末尾2');     // 返回数组长度
console.log(arr,length)
// [1, 2, 3, "末尾1", "末尾2"] 5

возвращаемое значение:длина массива


2. Метод pop() удаляет последний элемент массива, уменьшает длину массива ивозвращает значение, которое было удалено.

Параметры: нет

//组合使用push()和pop()能够用JavaScript数组实现先进后出的栈
let stack = [];
stack.push(1,2) // 返回长度2，这时stack的值是[1,2]
stack.pop()     // 返回删除的值2，这时stack的值是[1]

возвращаемое значение:Элемент, который необходимо удалить из массива (возвращает неопределенное значение, если массив пуст).


3. Метод unshift() добавляет один или несколько элементов в начало массива и перемещает существующие элементы в позицию с более высоким индексом, чтобы получить достаточно места, и, наконец,Возвращает новую длину массива.

Параметры: item1, item2, ..., itemX , элемент, добавляемый в начало массива.

let arr = [3,4,5];
let length = arr.unshift(1,2);  // 返回长度是5
console.log(arr, length)
//[1, 2, 3, 4, 5] 5

Уведомление:При вызове unshift() для добавления нескольких параметров параметры вставляются по одному, а не по одному. Как и при добавлении 1 и 2 в приведенном выше примере, они вставляются в массив в том же порядке, что и в списке параметров, а не [2,1,3,4,5].

возвращаемое значение:Возвращает новую длину массива.


4. Метод shift() удаляет первый элемент массива и возвращает его, затем сдвигает все последующие элементы вниз на одну позицию, чтобы заполнить пробел в начале массива, возвращаемое значение равноудаленный элемент

Параметры: Нет.

let arr = [1,2,3];
let item = arr.shift(); // 返回删除的值1
console.log(arr, item)
// [2, 3] 1

возвращаемое значение:Элемент, который нужно удалить из массива; возвращает неопределенное значение, если массив пуст.


5. Метод splice() — это общий метод для вставки или удаления элементов в массиве.

грамматика array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

параметр:

start

Указывает начальную позицию модификации (считая с 0). Если она превышает длину массива, то содержимое будет добавляться с конца массива, если отрицательное значение, то это означает количество цифр с конца массива (считая с -1), если только параметр start используется без deleteCount и item, например: array.splice(start), что означает удаление элементов [start, end].

deleteCount(по желанию)

Целое число, представляющее количество удаляемых элементов массива. Если deleteCount равен 0, элемент не удаляется. В этом случае необходимо добавить хотя бы один новый элемент. Если deleteCount больше, чем общее количество элементов после начала, все элементы после начала будут удалены (включая начальный бит). Если deleteCount опущен, это эквивалентно (arr.length - start).

item1, item2, ...(по желанию)

Элемент, который нужно добавить в массив, начиная с начальной позиции. Если не указано, splice() удалит только элементы массива.

возвращаемое значение:Массив удаленных элементов. Если был удален только один элемент, возвращается массив, содержащий только один элемент. Если ни один элемент не был удален, возвращается пустой массив.

// start不超过数组长度(以下操作是连续的)
let arr = [1,2,3,4,5];
arr.splice(2)   // arr是[1,2]，返回值是[3,4,5]
arr.splice(1,1) // arr是[1]，返回值是[2]
arr.splice(0,3) // arr是[]，返回值是[1],因为此时数组从第0位开始不够3位，所以是删除从0开始到最后的所有元素。

// start大于数组长度(以下操作是连续的)
let arr = [1,2,3,4,5];
arr.splice(5)   // arr是[1,2,3,4,5]，返回值是[]
arr.splice(5,3,6) // arr是[1,2,3,4,5,6]，返回值是[]
arr.splice(5,3,7) // arr是[1,2,3,4,5,7] 返回值是[6]

// start是负数(以下操作是连续的)
let arr = [1,2,3,4,5];
arr.splice(-3,2); // arr是[1,2,5], 返回值是[3,4]
arr.splice(-4); // arr是[],返回值是[1,2,5]

// 插入数组时，是插入数组本身，而不是数组元素
let arr = [1,4,5];
arr.splice(1,0,[2,3])   // arr是[1,[2,3],4,5]，返回值是[]

6. Метод sort() сортирует элементы массива ивернуть отсортированный массив

параметр:

compareFunction(Необязательно) Используется для указания функции сортировки в определенном порядке. Если он опущен, элементы сортируются по положению Unicode каждого символа преобразованной строки. Если указано compareFunction, массив сортируется по возвращаемому значению вызова функции. т. е. a и b — два сравниваемых элемента:

  • Если compareFunction(a, b) меньше 0, то a будет отсортировано перед b;
  • Если compareFunction(a, b) равно 0 , относительные положения a и b не изменяются. Примечание. Такое поведение не гарантируется стандартом ECMAScript и не гарантируется всеми браузерами (например, Mozilla до 2003 г.);
  • Если compareFunction(a, b) больше 0, b будет отсортирован перед a.
  • compareFunction(a, b) всегда должна возвращать один и тот же результат сравнения для одних и тех же входных данных, иначе отсортированный результат будет неопределенным.
var stringArray = ["Blue", "Humpback", "Beluga"];
var numberArray = [40, 1, 5, 200];
function compareNumbers(a, b){
  return a - b;
}
console.log('stringArray:' + stringArray.join());
console.log('Sorted:' + stringArray.sort());

console.log('numberArray:' + numberArray.join());
// 没有使用比较函数时，数字并不会按照我们设想的那样排序
console.log('Sorted without a compare function:'+ numberArray.sort());
console.log('Sorted with compareNumbers:'+ numberArray.sort(compareNumbers));

//打印如下
// stringArray: Blue,Humpback,Beluga
// Sorted: Beluga,Blue,Humpback

// numberArray: 40,1,5,200
// Sorted without a compare function: 1,200,40,5
// Sorted with compareNumbers: 1,5,40,200

возвращаемое значение:Возвращает отсортированный массив. Исходный массив был заменен отсортированным массивом.


7. Метод reverse() меняет порядок элементов в массиве на обратный и возвращает массив в обратном порядке.

Параметры: нет

let arr = [1,2,3];
arr.reverse()   // arr是[3,2,1]，返回值是[3,2,1]

возвращаемое значение:Возвращает массив в обратном порядке. Исходный массив был заменен отсортированным массивом.


8. Метод copyWithin() неглубоко копирует часть массива в другое место в том же массиве и возвращает ее без изменения ее размера.(Новое в ES6)

грамматика: arr.copyWithin(target[, start[, end]])

параметр:

target

0 — это базовый индекс для копирования последовательности. Если отрицательный, цель будет отсчитываться с конца.

Если target больше или равен arr.length, копирование не произойдет. Если цель находится после начала, скопированная последовательность будет изменена, чтобы соответствовать длине обр.

start

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

Если start опущен, copyWithin начнет копирование с 0.

end

0 — это базовый индекс, с которого начинается копирование элемента в конце. copyWithin скопирует в это место,но не включает элемент в конечной позиции. Если отрицательный, конец будет считаться с конца.

Если end опущен, copyWithin скопирует в arr.length.

возвращаемое значение:изменил массив.

[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]


// copyWithin 函数是设计为通用的，其不要求其 this 值必须是一个数组对象。
[].copyWithin.call({length: 5, 3: 1}, 0, 3);
// {0: 1, 3: 1, length: 5}

9. Метод fill() заполняет все элементы от начального до конечного индекса в массиве фиксированным значением.(Новое в ES6)

грамматика: arr.fill(value[, start[, end]])

параметр:

valueЗначение, которым нужно заполнить элементы массива.

start(необязательно) начальный индекс, по умолчанию 0.

end(Необязательно) Индекс завершения, по умолчанию это this.length.

Если начало — отрицательное число, начальный индекс автоматически рассчитывается как длина+начало, где длина — значение свойства длины этого объекта.Если конец — отрицательное число, конечный индекс автоматически рассчитывается как длина+конец.

возвращаемое значение:модифицированный массив

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]

//fill 方法故意被设计成通用方法, 该方法不要求 this 是数组对象。
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

2. Метод, не изменяющий исходный массив

1. Метод slice() возвращает часть массива, выбранную от начала до конца (исключая конец)мелкая копияк новому объекту массива. И исходный массив не будет изменен.

параметр:

begin(по желанию)

Извлечь элементы исходного массива, начиная с этого индекса (начиная с 0).

Если параметр отрицательный, значит извлекать из предпоследнего элемента в исходном массиве, slice(-2) означает извлечение предпоследнего элемента исходного массива в последний элемент (включая последний элемент).

Если begin опущен, срез начинается с индекса 0.

end(по желанию)

Завершить извлечение исходного элемента массива (начиная с 0) по этому индексу.

slice извлекает все элементы исходного массива с индексами от начала до конца (Включить начало, но не конец). slice(1,4) извлекает все элементы исходного массива, начиная со второго элемента до четвертого элемента (элементы с индексами 1, 2, 3).

Если этот параметр отрицательный, это означает, что извлечение заканчивается на предпоследнем элементе исходного массива.. slice(-2,-1) означает извлечение предпоследнего элемента в последний элемент в исходном массиве (не включает последний элемент, то есть только предпоследний элемент).

Если end опущен, срез будет извлечен до конца исходного массива.

Если конец больше длины массива, срез также будет извлечен в конец исходного массива..

возвращаемое значение:новый массив, содержащий извлеченные элементы

let arr = [1,2,3,4,5];
let arr1 = arr.slice(1,3); // arr是[1,2,3,4,5]， arr1是[2,3]
let arr2 = arr.slice(-2,-1);  // arr是[1,2,3,4,5], arr2是[4]
// 开始位置在结束位置后面，得到的数组是空
let arr3 = arr.slice(-2, -3); // arr是[1,2,3,4,5], arr3是[]
let arr4 = arr.slice(2, 1); // arr是[1,2,3,4,5], arr4是[]

//如果元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。
let arr = [{name: 'xiaoming'}];
let arr1 = arr.slice(); // arr是[{name: xiaoming}]，arr1是[{name: 'xiaoming'}]
arr1[0].name = 'xiaogang'; // arr是[{name: 'xiaogang'}]，arr1是[{name: 'xiaogang'}]

// 对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。
let arr = [1,2,3];
let arr1 = arr.slice(); // arr是[1,2,3]，arr1是[1,2,3]
arr1[1] = "two"; // arr是[1,2,3]，arr1是[1,"two",3]

// 当然，如果向两个数组任一中添加了新元素（简单或者引用类型），则另一个不会受到影响。

2. Метод join() преобразует все элементы массива (или массивоподобного объекта) в строки и объединяет их вместе, возвращая результирующую строку.

параметр:

separator(по желанию) Укажите строку для разделения каждого элемента массива. Если есть (разделитель), преобразуйте разделитель в строку. Если () опущено, элементы массива разделяются запятыми. По умолчанию ",". Если разделителем является пустая строка (""), между всеми элементами нет символов.

let num = [1,2,3];
let str1 = num.join(); // 1,2,3
let str2 = num.join(', ') // 1, 2, 3
let str3 = num.join('') // 123

//所有的数组元素被转换成字符串，再用一个分隔符将这些字符串连接起来。如果元素是undefined 或者null， 则会转化成空字符串。
let num = [1,null,3];
let str1 = num.join(); // 1,,3

//如果数组中的元素是数组，会将里面的数组也调用join()
let num = [[1,2],3];
let str1 = num.join('-'); // 1,2-3

// 如果数组中的元素是对象，对象会被转为[object Object]字符串
let num = [{num: 1},2,3];
let str1 = num.join('-'); // [object Object]-2-3

возвращаемое значение:Строка, объединяющая все элементы массива. Если arr.length равно 0, вернуть пустую строку

Точка знаний

// 扁平化简单的二维数组
const arr = [11, [22, 33], [44, 55], 66];
const flatArr = arr.join().split(','); // ["11", "22", "33", "44", "55", "66"]

3. Метод toString() преобразует каждый элемент массива в строку (при необходимости вызывая метод toString() элемента) и выводит список строк, разделенных запятыми. Возвращает строку, представляющую элементы массива

параметр:никто

[1,2,3].toString(); // 1,2,3
[1,[2,'c']].toString(); //1,2,c
// 以上与不使用任何参数调用join()方法返回的字符串是一样的。

// 以下的这个例子要跟下面的toLocaleString对照看
[{a:1},1,new Date()].toString() //"[object Object],1,Sat Jul 07 2018 18:43:45 GMT+0800 (中国标准时间)"

Уведомление:При операциях с массивом и строкой js вызовет этот метод для автоматического преобразования массива в строку.

[1,2,3]+'abc'  //1,2,3abc

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

Точка знаний

// 扁平化简单的二维数组
const arr = [11, [22, 33], [44, 55], 66];
const flatArr = arr.toString().split(','); // ["11", "22", "33", "44", "55", "66"]

4. Элементы в массиве toLocaleString() будут преобразованы в строки с использованием соответствующих методов toLocaleString, которые будут разделены строкой, зависящей от локали (например, запятой ",").

Параметры: (еще нужно проверить, пробовал, безрезультатно, посмотрел на официальном сайте ECMA, там действительно помечено два необязательных параметра)

locales(необязательно) строка или массив строк с языковыми тегами BCP 47

options(необязательно) объект с настраиваемыми свойствами

//数组中的元素将会使用各自的 toLocaleString 方法：
// Object: Object.prototype.toLocaleString()
// Number: Number.prototype.toLocaleString()
// Date: Date.prototype.toLocaleString()

let prices = ['￥7', 500, 8123, 12];

// 不带参数
prices.toLocaleString(); // "￥7,500,8,123,12"

//带参数
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); // "￥7,500,8,123,12"
//MDN上的举例中说是 "￥7,￥500,￥8,123,￥12"，在浏览器和Node中验证了返回的都是 "￥7,500,8,123,12" 啊！

// 以下的这个例子要跟上面的toString对照看
[{a:1},1,new Date()].toLocaleString() //"[object Object],1,2018/7/7 下午6:45:00"

возвращаемое значение:Строка, представляющая элемент массива.


5. Метод concat() используется для объединения двух или более массивов. Этот метод не изменяет существующий массив, а возвращает новый массив.

Его элементы включают в себя элементы исходного массива, для которого была вызвана функция concat(), и каждый аргумент функции concat(), но обратите внимание, что функция concat() не рекурсивно сглаживает массив массивов и не изменяет вызываемый массив.

параметр:

valueN(Необязательно) Объедините (несколько) массивов и/или значений в новый массив.

[1,2,3].concat([4,5,6],[7,8,9]) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

['a','b','c'].concat(1,[2,3],[[4,5]]) // ["a", "b", "c", 1, 2, 3, [4,5]]

// concat方法不会改变this或任何作为参数提供的数组，而是返回一个浅拷贝,所以原始数组和新数组都引用相同的对象。 如果引用的对象被修改，新数组和原始数组都会变。
let obj = {a: 1};
let arr1 = [2,obj];
let arr2 = [1].concat(arr1);
console.log(arr1,arr2) //[2,{a:1}],[1,2,{a:1}]

//记录下上面的打印结果之后修改obj
obj.a = 2;
console.log(arr1,arr2) ////[2,{a:2}],[1,2,{a:2}]

// 说了是浅拷贝，而且原数组也不改变，那我们就可以用它来实现数组的浅拷贝功能
let num1 = [1,2,3];
//第一种
let num2 = num1.concat();
//第二种
let num2 = [].concat(num1);
num2[0] = 'a';
console.log(num1,num2); // [1, 2, 3] ["a", 2, 3]

возвращаемое значение:новый экземпляр массива

Точка знаний

// concat 和扩展运算符可以快速扁平化数组
const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); // [11, 22, 33, 44, 55, 66]

6. isArray() используется для определения того, является ли переданное значение массивом.

параметр:

objЗначение для проверки.

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 这里注意：Array.prototype 也是一个数组,一个属性值不是索引的数组。[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]
Array.isArray(Array.prototype);

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

возвращаемое значение:Значение true, если объект является массивом, в противном случае — значение false.

Точка знаний

//判断数组的历程
// step one: 使用constructor
var a = [1];
console.log(a.constructor === Array) // true
// 但是原型的contructor属性是可以被改写的，例如在原型继承的时候，我们都是要把继承过来的prototype的constructor改写成我们当前的
var a = [1];
a.__proto__.constructor = '1';
console.log(a.constructor === Array) // false

// step two : 使用instanceof
var a = [1];
console.log(a instanceof Array) // true
//但是instanceof不能检测iframes的数组
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

arr instanceof Array; // false

// step three :万无一失的Object.prototype.toString.call
Array.isArray = function(arg) {
  return Object.prototype.toString.call(arg) === '[object Array]';
};

// step four : Array.isArray()

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

Array.isArray(arr);  // true,也可以检测iframes的数组

3. Обход массива, отображение, фильтрация, обнаружение, упрощение и т. д.

Прежде чем представить методы, давайте дадим обзор этих методов массива:

  • Во-первых, большинство методов получают функцию в качестве первого параметра, и функция вызывается один раз для каждого элемента (или некоторых элементов) массива. В случае разреженного массива эта функция не вызывается для несуществующих элементов. В большинстве случаев вызов предоставленной функции принимает три аргумента: элемент массива, индекс элемента и сам массив. Обычно требуется только значение первого параметра, а последние два параметра можно игнорировать.

  • Для большинства методов второй параметр является необязательным. Если есть второй параметр, первый вызываемый параметр функции обрабатывается как метод второго параметра, то есть значение, используемое как this (ссылочный объект) при выполнении первого параметра функции.

  • Возвращаемое значение метода важно, и разные методы обрабатывают возвращаемое значение по-разному.

Следующие правила для времени выполнения этих методов:

  1. Функция обратного вызова не будет выполняться для пустого массива
  2. Для элементов, которые были удалены во время итерации, или пустых элементов функция обратного вызова пропускается.
  3. Количество обходов определяется перед первым циклом, и элементы, добавляемые в массив, обходиться не будут.
  4. Если существующие значения изменены, значение, переданное в callback, является значением на момент перехода к ним.
  5. Удаленные элементы не просматриваются. Если посещенный элемент удаляется во время итерации (например, с помощью shift()), последующие элементы будут пропущены.

1. Метод forEach() обходит массив от начала до конца, вызывая указанную функцию для каждого элемента.

параметр:

callbackФункция, выполняемая для каждого элемента массива, которая принимает три аргумента:

  1. currentValue(当前值)Текущий элемент обрабатываемого массива.
  2. index(索引)Индекс текущего элемента в обрабатываемом массиве.
  3. arrayМассив, с которым работает метод forEach().

thisArg(Необязательно) Значение (ссылочный объект), используемое в качестве этого при выполнении функции обратного вызова. Значение по умолчанию не определено

Уведомление:

  1. forEach не может выйти из цикла в середине. Вы можете использовать return только для выхода из этого обратного вызова и выполнения следующего обратного вызова. Если вы хотите завершить работу досрочно, вы можете поместить метод forEach в блок try и выдать исключение, но этот метод не рекомендуется. .
  2. Он отличается от нескольких описанных ниже методов, которые всегда возвращают неопределенное значение, даже если вы возвращаете значение.
// 1、 空元素不遍历,undefined和null是会遍历的。
let numberArr = [1,2,,3];
numberArr.forEach(function (value,index,array) {
  console.log(value,index,array)
})
//打印信息如下，可见空元素是不会遍历的
//1 0 [1, 2, empty, 3]
//2 1 [1, 2, empty, 3]
//3 3 [1, 2, empty, 3]

let nullArr = [1,2,null,3];
nullArr.forEach(function (value,index,array) {
  console.log(value,index,array)
})
//打印信息如下，null是会遍历的
//1 0 (4) [1, 2, null, 3]
//2 1 (4) [1, 2, null, 3]
//null 2 (4) [1, 2, null, 3]
//3 3 (4) [1, 2, null, 3]

//2、已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了,之后的元素将被跳过
let numberArr = [1,2,3];
numberArr.forEach(function (value,index,array) {
  if(index === 0) {
    delete numberArr[2]; //删除第三项
    //或者numberArr.pop()
  }
  console.log(value,index,array)
})
//打印信息如下：
// 1 0 (3) [1, 2, empty]
// 2 1 (3) [1, 2, empty]


let numberArr1 = [1,2,3,4];
numberArr1.forEach(function (value,index,array) {
  if(index === 1) {
    numberArr1.shift() //遍历到第二项的时候，删除第一项
  }
  console.log(value,index,array)
})
// 打印信息如下,遍历到第二项的时候，删除第一项，会跳过第三项
// 1 0 (4) [1, 2, 3, 4]
// 2 1 (3) [2, 3, 4]
// 4 2 (3) [2, 3, 4]

// 3、forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。
let arr = [1,2,3];
arr.forEach(function (value,index,array) {
  if(index === 0) {
    arr.push('新增的不会被遍历到')
    arr[2] = 4;
  }
  console.log(value,index,array)
})
// 1 0 (4) [1, 2, 4, "新增的不会被遍历到"]
// 2 1 (4) [1, 2, 4, "新增的不会被遍历到"]
// 4 2 (4) [1, 2, 4, "新增的不会被遍历到"]

// 4、使用thisArg参数 和 箭头函数使用thisArg
let arr = [1,2,3];
let obj = {arr: 'thisArg'}
arr.forEach(function () {
  console.log(this.arr)
},obj)
// 打印三次 'thisArg'

let arr = [1,2,3];
let obj = {arr: 'thisArg'}
arr.forEach(() => {
  console.log(this.arr)
},obj)
// 打印三次 undefined

// 5、forEach无法中途退出循环，只能用return退出本次回调，进行下一次回调
let arr = [1,2,3];
let result = arr.forEach((value) => {
  if(value == 2) {
    return value;
  }
  console.log(value)
})
console.log(result) // undefined ，即使中间return vlaue，也还是undefined
//打印value的值如下，说明return 并不能终止循环
// 1
// 3

возвращаемое значение: undefined


2. Метод map() создает новый массив, результатом которого является результат вызова callback-функции для каждого элемента массива.

параметр:(Как я уже говорил, большинство методов будут иметь такие параметры)

callbackФункция, которая генерирует новый элемент массива, используя три параметра.Эта функция отличается от функции forEach() тем, что функция, переданная в map(), должна иметь возвращаемое значение.

  1. currentValueПервый параметр обратного вызова, текущий элемент обрабатываемого массива.
  2. indexВторой параметр обратного вызова, индекс текущего элемента в обрабатываемом массиве.
  3. arrayТретий параметр обратного вызова, массив, для которого вызывается метод карты.

thisArg(Необязательно) Это значение для использования при выполнении функции обратного вызова.

Уведомление:map() возвращает новый массив, он не изменяет вызываемый массив. Если это разреженный массив, он возвращает разреженный массив таким же образом: он имеет ту же длину, отсутствующие элементы с тем же индексом (поскольку функция не будет вызываться для нулевого значения)

let number = [1,2,3];
let doubles = number.map(function (value) {
  return value * 2;
})
console.log(number, doubles)
// [1,2,3] [2,4,6]

возвращаемое значение:новый массив, каждый элемент которого является результатом функции обратного вызова

Точка знанийНе используйте карту вместо forEach, карта создаст новый массив и займет память. Если вы не используете возвращаемое значение карты, вам следует использовать forEach


3. Элементы массива, возвращаемые методом filter(), являются подмножеством вызываемого массива. Передаваемая функция используется для логической оценки. Функция возвращает значение true или false. Если возвращаемое значение равно true или значение, которое может быть преобразовано в true, то элемент, переданный функции оценки, является членом этого подмножества, и оно будет добавлено в обратном порядке в массив как возвращаемое значение.

параметр:

callbackФункция для проверки каждого элемента массива. Вызывается с параметрами (элемент, индекс, массив). Верните true, чтобы сохранить элемент (прохождение теста), и false, чтобы не сохранить его. Он принимает три параметра:

  1. elementЭлемент, который в данный момент обрабатывается в массиве
  2. index(необязательно) индекс обрабатываемого элемента в массиве
  3. array(необязательно) массив фильтров, называемый filter

thisArg(Необязательно) Необязательно. Значение, используемое для этого при выполнении обратного вызова.

Уведомление:

  1. Обратный вызов будет вызываться только для индексов, которые были назначены, и не будет вызываться для индексов, которые были удалены или никогда не назначались. То есть filter() будет пропускать недостающие элементы в разреженном массиве, а его возвращаемый массив всегда будет плотным, и этот метод можно использовать для сжатия вакансий разреженного массива.
  2. filter не изменяет исходный массив, он возвращает новый отфильтрованный массив.
let number = [1,2,3,4,5,6];
let small = number.filter((value) => {
  return value < 4;
})
console.log(number,small)
// 打印 [1, 2, 3, 4, 5, 6] [1, 2, 3]


//压缩稀疏数组的空缺
let arr = [1,2,3,,5];
let arr1 = arr.filter(() => true);
console.log(arr,arr1)
// 打印 [1, 2, 3, empty, 5] [1, 2, 3, 5]

возвращаемое значение:Новый массив коллекций элементов, прошедших тест, или пустой массив, если тест не пройден.


4. Метод Every() проверяет, все ли элементы массива проходят тест указанной функции. Он возвращает true тогда и только тогда, когда вызов функции предиката возвращает true для всех элементов массива.

параметр:

callbackФункция для проверки каждого элемента.

thisArgЗначение this для использования при выполнении обратного вызова.

Уведомление:

  1. Каждый метод выполняет функцию обратного вызова один раз для каждого элемента в массиве, обратный вызов будет вызываться только для тех индексов, которым уже присвоено значение. Не вызывается для индексов, которые удалены или которым никогда не присваивалось значение. Каждый метод возвращает false после того, как обратный вызов возвращает false в первый раз, а затем завершает обход. Но если обратный вызов продолжает возвращать значение true, он пройдет по всему массиву и в конечном итоге вернет значение true.
  2. Вызовите метод each для пустого массива и верните true, потому что в пустом массиве нет элементов, поэтому все элементы в пустом массиве удовлетворяют заданным условиям.
  3. каждый не изменяет исходный массив
let arr = [12,34,5,23,44];
let num = 0;
let result = arr.every(function (element, index, array) {
  num++;
  return element > 10;
})
console.log(result,num) // 打印 false 3
// 可见发现5这个小于10的元素后，遍历立即终止，num为3

let arr = [12,34,,23,44];
let num = 0;
let result = arr.every(function (element, index, array) {
  num++;
  return element > 10;
})
console.log(result,num) // 打印 true 4
// 不会遍历没有赋值的索引位置，所以num为4

let result = [].every(function (element, index, array) {
  return element > 10;
})

console.log(result) // 打印 true

возвращаемое значение:Логическое значение, которое возвращает true, если все элементы удовлетворяют условию, иначе false.


5. Метод some() проверяет, проходят ли некоторые элементы массива проверку, реализованную предоставленной функцией. Он возвращает true, когда хотя бы один элемент в массиве вызывает функцию предиката и возвращает true, и возвращает false тогда и только тогда, когда все элементы в массиве вызывают функцию предиката и возвращают false.

параметр:

callbackфункция для проверки каждого элемента

thisArgнеобязательный Это значение для использования при выполнении обратного вызова.

Уведомление:

  1. некоторые выполняют функцию обратного вызова один раз для каждого элемента в массиве, пока не найдут тот, который заставляет обратный вызов возвращать «истинное значение», после чего некоторые немедленно возвращают истину. В противном случае некоторые возвращают false. обратный вызов будет вызываться только для индексов, которые «имеют значение», а не для индексов, которые удалены или которым никогда не присваивалось значение.
  2. Массив не изменяется, когда вызывается some.
  3. Вызов some с пустым массивом возвращает false
// 一个简单的例子说明
function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

// 实现一个跟includes方法类似的功能
let arr = [1,2,3];
function include(value) {
  return arr.some((element) => {
    return element === value;
  })
}
include(2) // true
include(4) // false

let result = [].some(function (element, index, array) {
  return element > 10;
})

console.log(result) // 打印 false

возвращаемое значение:Возвращает true, если любой элемент массива возвращает true в функции обратного вызова, иначе false


6. Два метода reduce() и reduceRight() используют указанную функцию для объединения элементов массива в одно значение. Это обычная операция в функциональном программировании, которую также можно назвать «внедрение» и «свертывание». reduceRight() и reduce() работают одинаково, за исключением того, что reduceRight() обрабатывает массив от старшего к младшему (справа налево) по индексу массива, а не от младшего к старшему.

параметр:

callbackФункция, которая выполняет каждое значение в массиве с четырьмя аргументами:

  1. accumulatorАккумулятор накапливает возвращаемое значение обратного вызова; это накопленное значение, возвращенное при последнем вызове обратного вызова, или initialValue (см. ниже).
  2. currentValueЭлемент массива, который обрабатывается.
  3. currentIndex(необязательно) Индекс текущего элемента в обрабатываемом массиве. Если указано initialValue, номер индекса равен 0, в противном случае индекс равен 1.
  4. array(необязательно) массив, для которого вызывается сокращение

initialValue(необязательно) Значение для использования в качестве первого параметра первого вызова обратного вызова. Если начальное значение не указано, будет использован первый элемент массива. Вызов сокращения для пустого массива без начального значения вызовет ошибку.

Уведомление:

  1. reduce выполняет функцию обратного вызова для каждого элемента массива по очереди, исключая элементы массива, которые были удалены или которым никогда не было присвоено значение.При первом выполнении функции обратного вызова значения аккумулятора и У currentValue есть два случая: вызывается значение, предоставленное при сокращении. второе значение в массиве. То есть: если начальное значение не указано, сокращение начнет выполнение метода обратного вызова с индекса 1, пропуская первый индекс. Если указано initialValue, оно начинается с индекса 0.

  2. Если массив пуст и не указано начальное значение, будет выброшено исключение TypeError. Если массив имеет только один элемент (независимо от позиции) и не указано значение initialValue, или если предоставлено значение initialValue, но массив пуст, то будет возвращено уникальное значение.и обратный вызов не будет выполнен.

let arr = [1,2,3,4,5];
let sum = arr.reduce((x,y) => x + y,0);
console.log(sum) // 15

// 看一下initialValue传和不传的区别
let arr = [1,2,3,4,5];
arr.reduce(function (accumulator,currentValue,currentIndex,arr) {
  console.log(currentIndex)
  return accumulator + currentValue;
})
// 1,2,3,4,5 没传入initialValue，索引是从1开始
arr.reduce(function (accumulator,currentValue,currentIndex,arr) {
  console.log(currentIndex)
  return accumulator + currentValue;
},10)
// 0,1,2,3,4,5 传入initialValue，索引从0开始

// 应用到二维数组展开
let arr = [[0, 1], [2, 3], [4, 5]].reduce(
  (a, b) => a.concat(b)
);
console.log(arr)
// [0, 1, 2, 3, 4, 5]

возвращаемое значение:Результат совокупной обработки функции


7. Метод indexof() возвращает первый индекс в массиве, по которому можно найти данный элемент, или -1, если он не существует.

параметр:

searchElementэлемент, который нужно найти

fromIndex(Необязательно) С чего начать поиск. Если значение индекса больше или равно длине массива, это означает, что массив не будет искаться и вернет -1.

Если значение индекса отрицательное, оно представляет собой смещение относительно конца массива, то есть -1 означает поиск с последнего элемента, -2 означает начало со второго до последнего элемента,Обратите внимание, что это не меняет порядок поиска, который по-прежнему представляет собой массив от начала до конца.

Если значение индекса отрицательное и его абсолютное значение больше длины массива, будет запрошен весь массив. Его значение по умолчанию равно 0.

Уведомление:indexOf сравнивает searchElement и элементы в массиве, используя строгое равенство (т.е. ===). И indexOf() не распознаетNaN

let array = [2, 5, 9];
array.indexOf(2)     // 0
array.indexOf(7)     // -1
array.indexOf(9, 2)  // 2
array.indexOf(9, 3)  // -1
array.indexOf(2, -1) // -1
array.indexOf(2, -3) // 0
array.indexOf(2, -4) // 0

let array1 = [1,2,NaN];
array1.indexOf(NaN) // -1

возвращаемое значение:Позиция индекса в массиве первого найденного элемента; -1, если не найден


8. lastIndexOf() является противоположностью indexOf(), метод возвращает последний индекс указанного элемента в массиве или -1, если он не существует. Поиск вперед с конца массива, начиная с fromIndex

параметр:

Элемент searchElement для поиска

fromIndex (необязательно) Позиция, с которой следует начать поиск. По умолчанию длина массива минус 1, т. е. ищется весь массив. Если значение больше или равно длине массива, поиск выполняется во всем массиве. Если отрицательный, рассматривайте его как смещение вперед от конца массива. Даже если значение отрицательное, поиск в массиве все равно будет выполняться в обратном направлении. Если значение отрицательное и его абсолютное значение больше длины массива, метод возвращает -1, то есть поиск в массиве производиться не будет.

Уведомление:lastIndexOf сравнивает searchElement и элементы в массиве, используя строгое равенство (т.е. ===). И lastIndexOf() не распознаетNaN

let array = [2,5,9,2];
array.lastIndexOf(9) // 2
array.lastIndexOf('9') // -1 严格相等
array.lastIndexOf(7) // -1
array.lastIndexOf(2,4) // 3
array.lastIndexOf(2,3) // 3
array.lastIndexOf(2,2) // 0
array.lastIndexOf(2,-1) // 3
array.lastIndexOf(2,-2) // 0
array.lastIndexOf(2,-4) // 0
array.lastIndexOf(2,-5) // -1

возвращаемое значение:Индекс последнего совпадающего элемента в массиве или -1, если он не найден


9. Метод include() используется для определения того, содержит ли массив заданное значение, в зависимости от ситуации, если содержит, возвращает true, иначе возвращает false.ES7 новый

параметр:

searchElementЗначение элемента для поиска.

fromIndex(Необязательно) Начните искать searchElement по этому индексу. По умолчанию 0. Если отрицательный, поиск начинается с индекса array.length + fromIndex в порядке возрастания. Абсолютное значение отрицательных значений превышает степень длинного массива, и поиск начинается с 0.

Возвращает false, если fromIndex больше или равен длине массива. Массив не будет искаться.

Уведомление:

include решает две проблемы indexOf:

  1. Метод indexOf не распознает NaN
  2. Метод indexOf проверяет, содержит ли он определенное значение, недостаточно семантичен, ему нужно судить, не равно ли оно -1, выражение недостаточно интуитивно понятно
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, 3].includes(3, -4); // true
[1, 2, NaN].includes(NaN); // true

возвращаемое значение:Логическое значение, которое возвращает true, если включено, и false в противном случае, если это необходимо.


10. find() и findIndex() Метод find возвращает значение первого элемента массива, удовлетворяющего заданной тестовой функции. В противном случае вернуть неопределенное значение. Метод findIndex возвращает индекс первого элемента в массиве, который удовлетворяет предоставленной тестовой функции. В противном случае вернуть -1.(Новое в ES6)

параметр:Эти два метода аналогичны другим методам

callbackФункция, выполняемая для каждого элемента массива, с тремя аргументами:

  1. elementТекущий пройденный элемент.
  2. indexИндекс, к которому в настоящее время осуществляется переход.
  3. arrayсам массив.

thisArgНеобязательно, укажите этот параметр обратного вызова.

Уведомление:

  1. Эти два метода выполняют функцию обратного вызова один раз для каждого элемента массива, пока один из этих методов не вернет значение true.В разреженном массиве функция обратного вызова вызывается даже для индексов, которых нет в массиве.Это означает, что для разреженных массивов этот метод менее эффективен, чем те, которые обходят только индекс со значением.
  2. При нахождении элемента, обратный вызов которого имеет значение true, метод find немедленно вернет значение элемента, в противном случае он вернет неопределенное значение. findIndex немедленно возвращает индекс элемента. Если обратный вызов никогда не возвращает true или если длина массива равна 0, findIndex возвращает -1.
  3. Ни один из методов не изменяет массив, называемый
// find
let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5
let b = [1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n));  // 返回元素NaN
// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
let b = [1, 4, -5, 10,NaN].findIndex((n) => isNaN(n));  // 返回索引4

// 稀疏数组
let a =[1,,3,4];
let index = 0;
a.find((n) => {
  console.log(index++) //0,1,2 第二次是empty也会调用一次，而且返回为true，立即退出 
  return n === 3;
})
**возвращаемое значение:**
  1. Метод find, когда элемент проходит проверку обратного вызова, возвращает значение в массиве, в противном случае возвращает неопределенное значение.
  2. Метод findIndex возвращает индекс первого элемента в массиве, который удовлетворяет предоставленной тестовой функции. В противном случае вернуть -1.

Точка знанийНе используйте find() вместо some(). Обычно такого рода сценарии носят смешанный характер. find возвращает первое значение, которое удовлетворяет условию, и напрямую использует это значение как если, чтобы судить, существует ли оно, но удовлетворяет условию, может быть ровно 0. find — найти значение в массиве и затем обработать его дальше, что обычно используется в случае массива объектов; some — проверить существование; эти две функции нельзя смешивать.


11. Метод keys() возвращает новый итератор Array, содержащий ключи для каждого индекса в массиве.(Новое в ES6)

12. Метод values() возвращает новый итератор Array, который содержит значение для каждого индекса в массиве.(Новое в ES6)

13. Начальное значение свойства @@iterator и свойства values() является одним и тем же функциональным объектом. Метод итератора массива, который совпадает с возвращаемым значением values() по умолчанию, синтаксис вызоваarr[Symbol.iterator]() (Новое в ES6)

14. Метод entry() возвращает новый итератор Array, который содержит пары ключ/значение для каждого индекса в массиве.(Новое в ES6)

параметр:Все нет.

Оба являются новым объектом итератора Array.

for (let key of ['a', 'b'].keys()) {
  console.log(key);
}
// 0
// 1

for (let value of ['a', 'b'].values()) {
  console.log(value);
}
// 'a'
// 'b'

for (let value of ['a', 'b'][Symbol.iterator]()) {
  console.log(value);
}
// 'a'
// 'b'

for (let [key, value] of ['a', 'b'].entries()) {
  console.log(key, value);
}
// 0 "a"
// 1 "b"

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

1. Какая связь между индексом массива и ключом объекта?

Массивы представляют собой особую форму объектов, и использование квадратных скобок для доступа к элементам массива аналогично использованию квадратных скобок для доступа к свойствам объекта. JavaScript преобразует указанное числовое значение индекса в строку — индекс 1 становится «1» — и использует его в качестве имени свойства. Массивы отличаются тем, что они автоматически сохраняют свои свойства длины при использовании неотрицательных целых чисел меньше 2^32 в качестве имен свойств.

// 索引到属性名的转化
let arr = [1,2,3];
console.log(arr[1]) // 2
console.log(arr["1"]) // 2

Все массивы являются объектами, и для них могут быть созданы свойства с произвольными именами, однако, только если неотрицательные целые числа меньше 2^32 являются индексами, массивы будут обновлять свою длину по мере необходимости. Тот факт, что индекс массива — это просто особый тип имени свойства объекта, означает, что массивы JavaScript не имеют концепции ошибок «за пределами». При запросе свойства, которое не существует ни в одном объекте, не будет сообщено об ошибке, только неопределенное

let arr = [];
arr["a"] = 1;
console.log(arr,arr.length) // arr是[a:1] length是0

В случае отрицательных или нецелых чисел значение преобразуется в строку, и строка используется в качестве имени свойства, которое можно использовать только как обычное свойство объекта, а не как индекс массива.

let arr = [];
arr[-1.23] = 0;
console.log(arr,arr.length) // arr是[-1.23: 0] length是0

При использовании неотрицательной целочисленной строки или числа с плавающей запятой, равного целому числу, оно рассматривается как индекс массива, а не как свойство объекта.

let arr = [];
arr["100"] = 'a';
console.log(arr,arr.length) // arr 是[empty × 100, "a"]，length 是101

let arr1 = [];
arr1[1.0000] = 'b';
console.log(arr1,arr1.length) // arr 是[empty, "b"]，length 是2

2. Разреженный массив

Разреженный массив — это массив, содержащий дискретные индексы, начинающиеся с 0. Обычно значение свойства длины массива представляет количество элементов в массиве. Если массив разреженный, значение свойства length больше, чем количество элементов

Достаточно разреженный массив обычно медленнее и требует больше памяти для реализации, чем плотный массив, и поиск элемента в таком массиве становится таким же длинным, как и обычный объект, что приводит к потере преимущества в производительности.

let a1 = [,,]; // 数组直接量，该数组是[empty × 2]
0 in a1 // false: a1在索引0处没有元素

let a2 = new Array(3); //[empty × 3],该数组根本没有元素
0 in a2 // false: a2在索引0处没有元素

let a3 = [undefined];
0 in a3 // true: a3在索引0处有一个值为undefined的元素

let a4 = [,undefined];
0 in a4 // fasle: a4在索引0处没有元素
1 in a4 // true: a4在索引1处有一个值为undefined的元素
console.log(a4[0],a4[1]) // undefined undefined,可见数组访问返回undefined,可能是稀疏数组，也可能是数组元素为undefined

3. Массивоподобные объекты

Объект с числовым свойством длины и соответствующим неотрицательным целочисленным свойством рассматривается как тип массива.

Массивы отличаются от массивов, подобных массивам, следующими способами:

  1. Автоматически обновлять свойство длины при добавлении новых элементов в массив.
  2. Установка длины на небольшое значение приведет к усечению массива
  3. Унаследовал некоторые методы от Array.prototype
  4. Его свойство класса — «Массив».

Массивы JavaScript имеют много методов, которые специально определены как универсальные, поэтому они корректно работают не только с реальными массивами, но и с массивоподобными объектами. В «Полном руководстве по JavaScript» говорится: «Все методы в ES5 являются универсальными, кроме ES3. Все методы toString( ) и toLocaleString() также являются универсальными.

Объекты, подобные массивам, очевидно, не наследуются от Array.prototype, поэтому они не могут вызывать методы массива напрямую, но их можно вызывать косвенно, используя методы Function.call.

// 类数组应用通用方法
let arrayLike = {0: 'name', 1: 'age', 2: 'address', length: 3 }
Array.prototype.join.call(arrayLike,'*') // "name*age*address"

// 还记得当初获取的DOM元素怎么转化成数组么？
functon toArray (DOM) {
  return Array.prototype.slice.call(DOM);
}

//对的，这样也可以的
let htmlCollection = document.getElementsByTagName('h2');
let arr1 = Array.prototype.map.call(htmlCollection,function (ele,index){return ele});
console.log(Array.isArray(arr1)) // true

// 还有这样
let arrayLike = {0: 'name', 1: 'age', 2: 'address', length: 3 }
let arr2  = Array.prototype.concat.apply([],arrayLike);
console.log(arr) //["name", "age", "address"]

// ES6现在这样
let arrayLike = {0: 'name', 1: 'age', 2: 'address', length: 3 }
let arr3 = Array.from(arrayLike);
console.log(arr3) // ["name", "age", "address"]

4. Эволюция массивов JavaScript — введение типизированных массивов

Давайте поговорим о массиве в целом, массив — это строканепрерывныйЯчейка памяти для хранения определенных значений. Массивы в JavaScript представляют собой хэш-карты и могут быть реализованы с использованием различных структур данных, таких как связанные списки, где предыдущий элемент содержит ссылку на следующий элемент. Таким образом, значение массива в других языках можно найти математическим расчетом на основе расположения в памяти, но в JavaScript необходимо обходить такие структуры, как связанные списки, Чем длиннее массив, тем медленнее обход связанного списка по сравнению с расчетами данных.

Современные движки JavaScript выделяют непрерывную память для массивов, если массив однородный (все элементы одного типа). Таким образом, это элегантный способ написать код, гарантирующий однородность массива, чтобы JIT (компилятор точно в срок) мог считывать элементы, используя вычисления в стиле компилятора C.

Однако, как только вы захотите вставить элемент другого типа в какой-нибудь однородный массив, JIT деконструирует весь массив и воссоздаст его по-старому.

ES6 добавляет ArrayBuffer, чтобы предоставить нам часть непрерывной памяти, которой мы можем манипулировать по своему желанию. Однако непосредственно манипулировать памятью пока слишком сложно и низкоуровнево. Итак, есть представление (View), которое обрабатывает ArrayBuffer.

ArrayBufferОбъекты используются для представления общих буферов фиксированной длины необработанных двоичных данных. ArrayBuffer нельзя манипулировать напрямую, но манипулировать им можно с помощью объектов типизированного массива или объектов DataView, которые представляют данные в буфере в определенном формате и используют эти форматы для чтения и записи содержимого буфера.

语法: new ArrayBuffer(length)

参数
length:要创建的 ArrayBuffer 的大小，单位为字节。

返回值:一个指定大小的 ArrayBuffer 对象，其内容被初始化为 0。

异常:如果 length 大于 Number.MAX_SAFE_INTEGER（>= 2 ** 53）或为负数，则抛出一个  RangeError  异常。

类型数组对象Объект TypedArray описывает представление в виде массива базового буфера двоичных данных. На самом деле нет ни глобального объекта с именем TypedArray, ни конструктора с именем TypedArray. Вместо этого существует множество различных глобальных объектов, и ниже перечислены конструкторы этих типизированных массивов для конкретных типов элементов.

new TypedArray(); // ES2017中新增
new TypedArray(length);
new TypedArray(typedArray);
new TypedArray(object);
new TypedArray(buffer [, byteOffset [, length]]);

TypedArray()指的是以下的其中之一：

Int8Array();//8位二进制带符号整数 -2^7~(2^7) - 1,大小1个字节
Uint8Array();//8位无符号整数 0~(2^8) - 1,大小1个字节
Int16Array();//16位二进制带符号整数 -2^15~(2^15)-1,大小2个字节
Uint16Array();//16位无符号整数 0~(2^16) - 1,大小2个字节
Int32Array();//	32位二进制带符号整数 -2^31~(2^31)-1,大小4个字节
Uint32Array();//32位无符号整数 0~(2^32) - 1,大小4个字节
Float32Array();//32位IEEE浮点数,大小4个字节
Float64Array(); //64位IEEE浮点数,大小8个字节

применение:

var buffer = new ArrayBuffer(8);
var view   = new Int32Array(buffer);
view[0] = 100;
console.log(view)// [100,0],一个八个字节，Int32Array一个元素大小是4个字节，所以只能放下两个元素

Ссылки и ссылки

  1. Раздел Массивы Полного руководства по JavaScript
  2. Подробный обход JS
  3. Для начинающих: заметки об операциях с массивами в JavaScript
  4. Освойте содержимое массива JavaScript ES5 в ES8 сразу
  5. [Галантерейные товары] js подробный метод работы массива и сбор анализа
  6. Глубокое погружение в массивы JavaScript: эволюция и производительность

разное

Поддерживается постоянно обновляемая заметка github, вы можете пойти и посмотреть, искренняя работа (изначально написанная для себя...), адрес ссылки:Front-End-Basics

Адрес этой статьи:Массивы JavaScript

Адрес github основных заметок:GitHub.com/issues книги…, вы можете смотреть, вы также можете звезды.

пасхальные яйца

Пасхальное яйцо - обратить внимание на Qiwu Weekly, статья хорошо написана, и студенты, которые хотят, чтобы ее увидело больше людей, могут попросить меня внести свой вклад.

Категории