Краткое изложение использования массивов JavaScript (подробности см. в MDN)

Массив в JavaScript — это объект особого типа.Поскольку свойства объекта должны быть в виде строк, числовой индекс массива внутренне преобразуется в строковый тип.

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

1.0 Создать напрямую с помощью []

Элементы массива могут иметь разные типы данных.

var arr1 = [1,2,3,4,"hello","adf",false]; // 数组中的元素可以是不同的数据类型
console.log(arr1) //[ 1, 2, 3, 4, 'hello', 'adf', false ]

2.0 Создание с помощью объектов массива

var arr2 = new Array(1,2,4,5,"abc",true)
console.log(arr2) //[ 1, 2, 4, 5, 'abc', true ]

ArrayУ конструктора есть большой недостаток, то есть разные параметры приведут к непоследовательному поведению.

// 无参数时，返回一个空数组
new Array() // []

// 单个正整数参数，表示返回的新数组的长度
new Array(1) // [ empty ]
new Array(2) // [ empty x 2 ]

// 非正整数的数值作为参数，会报错
new Array(3.2) // RangeError: Invalid array length
new Array(-3) // RangeError: Invalid array length

// 单个非数值（比如字符串、布尔值、对象等）作为参数，
// 则该参数是返回的新数组的成员
new Array('abc') // ['abc']
new Array([1]) // [Array[1]]

// 多参数时，所有参数都是返回的新数组的成员
new Array(1, 2) // [1, 2]
new Array('a', 'b', 'c') // ['a', 'b', 'c']

3.0 Создание массива с помощью метода split() строки

var s = "i am a web coder i can say hello world!";
var arr3 = s.split(" "); // split()函数的参数是指定分隔符，然后通过分隔符分割字符串形成数组
console.log(arr3) //[ 'i', 'am', 'a', 'web', 'coder', 'i', 'can', 'say', 'hello', 'world!' ]

4.0 Создание массива из существующего массива

4.0.1 Объединение массивов

использоватьconcatОбъединение массивов заключается в создании нового массива, а исходный массив не изменяется.

var a1 = [1,2,3];
var a2 = [4,5,6];
var a3 = a1.concat(a2); // 将a2中的元素按顺序拼接到a1的元素后面并生成两者拼接的新数组
console.log(a1); //[ 1, 2, 3 ] a1没有发生变化
console.log(a2); //[ 4, 5, 6 ] a2没有发生变化
console.log(a3); //[ 1, 2, 3, 4, 5, 6 ] a1和a2的顺序拼接

4.0.2 Перехват по массиву

использоватьspliceПерехватить массив, исходный массив изменится, что можно использовать для удаления элементов в массиве

var b1 = [1,2,3,4,5];
var b2 = b1.splice(3,3); // 将b1数组中的从索引3开始截取最多3个元素，然后将截取的子数组赋值给b2
console.log(b1); // [ 1, 2, 3 ] b1数组会发生改变，截去splice的部分
console.log(b2); // [ 4, 5 ] b2数组获取splice(3,3)截取的子数组

5.0 Два API ES6 для создания массивов

5.0.1 Array.of

Возвращает массив значений всех параметров или пустой массив, если параметры отсутствуют.

var a = Array.of(1,2,3,4,5) // [1,2,3,4,5]
var b = Array.of(7) // [7]

5.0.2 Array.from

Определение: используется для преобразования двух типов объектов в настоящие массивы (не изменять исходные объекты, возвращать новый массив).
параметр:
Первый параметр (обязательный): объект, который нужно преобразовать в реальный массив.
Второй параметр (необязательный): метод карты, подобный массиву, который обрабатывает каждый элемент и помещает обработанное значение в возвращаемый массив.
Третий параметр (необязательный): используется для привязки этого.

// 类数组是索引是 0 1 2 3... 并且有length属性的对象
let obj = {0: 'a', 1: 'b', 2:'c', length: 3};
let arr = Array.from(obj); // ['a','b','c'];

добавить элемент массива

1.0 Добавить непосредственно по нижнему индексу

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

var a = [1,2,3];
a[a.length] = 4; //在末尾增加一个元素
console.log(a); // [ 1, 2, 3, 4 ]
a[10] = 10; //索引超过 a.length 也是可以插入的，数组会保留前面没有数据的位置
console.log(a); //[ 1, 2, 3, 4, <6 empty items>, 10 ]
console.log(a[8]); // undefined 保留的数据位置会设置为 undefined

2.0 Добавить в конце нажатием

pushВы можете добавить один или несколько элементов в конец массива и вернуть количество элементов в массиве после завершения добавления.

var b = [1,2,3];
var b_length = b.push(4);
console.log(b_length); // 4 push的返回值是添加完元素之后的数组长度
b.push(5,6); //可以一次插入一个或者多个
console.log(b); // [ 1, 2, 3, 4, 5, 6 ]

3.0 Вставить в начало массива без сдвига

unshiftВы можете вставить один или несколько элементов в начало массива и вернуть количество элементов в массиве после завершения добавления.

var c = [1,2,3];
var c_length = c.unshift(4);
console.log(c_length); // 4 unshift返回的值是添加玩元素之后的数组长度
c.unshift(5,6);
console.log(c); //[ 5, 6, 4, 1, 2, 3 ]

4.0 Свободно вставляйте элементы через стык

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

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

var d = ['a','b','c']
d.splice(3,0,4); // splice有3个元素， 第一个是索引，删除或者添加的位置， 第二个是删除的元素个数，第三个是添加的元素
console.log(d); // [ 'a', 'b', 'c', 4 ]

Удалить элемент массива

1.0 Удалить элементы в конце с POP

popУдалить последний элемент массива и вернуть его

var a = [1,2,3];
var tmp = a.pop(); // 返回值为删除的元素
console.log(tmp); // 3
console.log(a); // [1,2]

2.0 Удаление элементов головы по смещению

shiftудалить первый элемент массива и вернуть его

var b = [1,2,3]; 
var tmp = b.shift(); // 返回值为删除的元素
console.log(tmp); // 1
console.log(b); // [2,3]

3.0 Удалить элементы в любом месте путем склеивания

spliceЕсть 3 элемента, первый — это индекс, позиция для удаления или добавления, второй — количество удаленных элементов, а третий — добавленный элемент
При удалении элементов массива обычно используются только первые два, указывая начальную позицию удаляемого индекса и количество удалений, а также возвращая удаленные элементы в виде подмассивов.

var c = [1,2,3,4,5,6];
var tmp = c.splice(3,3); // 从索引3开始删除最多3个元素,截取的元素按照数组的形式返回
console.log(tmp); //[4,5,6]
console.log(c); // [1,2,3]

элемент массива запросов

1.0 Поиск по indexOf

indexOfЗапросить, содержит ли указанный элемент указанный элемент, если он существует, вернуть индекс, если он не существует, вернуть -1

var a = ['a','b','c','d'];
var index1 = a.indexOf('a');
var index2 = a.indexOf('e');
console.log(index1); //0
console.log(index2); //-1

2.0 Поиск по включению

Найти, содержит ли массив элемент, вернуть, если он существуетtrue, возврата нетfalse

var index3 = a.includes("a");  // 存在返回true 不存在返回false
console.log(index3);

сортировка массива

использоватьsortфункция

Для массивов символьного типа вы можете использовать ** напрямуюsort()**Функция согласноUnicodeкод в порядке возрастания, если необходимо反序использоватьreverse()

var a = ['abc','hello','qwen','bob']; // 默认按照Unicode码的顺序排序
a.sort();
console.log(a); // [ 'abc', 'bob', 'hello', 'qwen' ]
console.log(a.reverse()); //[ 'qwen', 'hello', 'bob', 'abc' ]
var b = [1,100,12,3,4];
b.sort();
// sort()方法排序的时候默认排序的对象是字符串
// 所以在纯数字排序的时候会将number类型转成字符串类型进行排序
console.log(b); //[ 1, 100, 12, 3, 4 ]


// 数字排序的方法 通过给sort()传入一个比较函数

function compare(num2,num1){
    /**
     * 升序排序
     * 返回值大于0 表示交换位置
     * 返回值小于0 表示不用交换
     * 等于0 相等
     */
    return num2 - num1;
}
b.sort(compare)
console.log(b) // [ 1, 3, 4, 12, 100 ]

Расширенные операции с массивами

1.0 join

использоватьjoin()Объединить массивы для создания строки и вернуть строку. Среди них соединение может принимать символ для сплайсинга строк.По умолчанию для прямой конкатенации не добавляются сплайсинговые строки.

var arr = [1,'a',true,'hello'];
var string1 = arr.join('-');
var string2 = arr.join();
console.log(string1) // 1-a-true-hello
console.log(string2); // 1atruehello

2.0 slice

slice(start,end)Часть, полученная из исходного массива, возвращается как подмассив, а исходный массив не изменяется. При перехвате следуйте принципу: слева закрыто, справа открыто.

var a = [1,2,3,4,5,6,7];
var b = a.slice(0,5); // 包含start，不包含end 左闭右开
console.log(a); // [ 1, 2, 3, 4, 5, 6, 7 ] 原数组不发生改变
console.log(b); // [ 1, 2, 3, 4, 5 ]

3.0 map

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

var a = [1,2,3,4,5,6];

function twoSize(item){
    return item * 2; //放大两倍
}
var b = a.map(twoSize);
console.log(a); // [ 1, 2, 3, 4, 5, 6 ]
console.log(b); // [ 2, 4, 6, 8, 10, 12 ]

// 使用匿名函数

var c = a.map(function(item){
    return item * 3; // 放大三倍
});

console.log(c); //[ 3, 6, 9, 12, 15, 18 ]

4.0 every

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

var a = [2,4,6,8,10];
var res1 = a.every(function(item){
    return item % 2 == 0;//判断是否偶数
});
console.log(res1); //true

var res2 = a.every(function(item){
    return item % 2 != 0; //判断是奇数
});// 在判断第一个元素是否奇数的时候就返回了false，后面的不再执行
console.log(res2); //false

могуevery(func)Функция рассматривается как оценивающая, удовлетворяются ли элементы массива.funcУказанные правила, если все выполнены, возвращаютtrue, если кто-то не удовлетворен, он не осудит и не вернетfalse
Операция аналогична операции усечения ниже

var tmp3 = func(a[0])&&func(a[1])&&...&&func(a[n])

5.0 some

Выполняет указанную функцию обратного вызова один раз для каждого элемента в массиве, пока функция обратного вызова не вернетсяtrue,В настоящее времяsome()вернутьtrueи не продолжать. Если функция обратного вызова возвращается для каждого элементаfalse,Такsome()вернусьfalse.

var a = [1,2,3,4,5];
var res1 = a.some(function(item){
    return item % 2 == 0;//只要有一个为偶数就返回true
});

console.log(res1); //true

могуsome(func)Функция рассматривается как оценивающая, существуют ли элементы в массиве для удовлетворенияfuncЭлемент указанного правила, если есть элемент, удовлетворяющий возвратуtrue, и больше не судите задом наперёд, если всех не устраивает, вернитеfalse
операция похожа на

var tmp3 = func(a[0]) || func(a[1]) ||...|| func(a[n])

6.0 filter

Создает новый массив, содержащий все элементы тестов, реализованных всеми предоставленными функциями. Отфильтруйте массив. Исходный массив не меняется

var a = [1,2,3,4,5,6]
/*
item:当前的遍历值
index:当前的索引
self:数组对象
*/
var res = a.filter(function(item,index,self){
    return item % 2 == 0;//返回所有偶数
});

console.log(res); // [ 2, 4, 6 ]

Отфильтруйте массив и верните элементы, соответствующие функции обратного вызова, как истинные.

7.0 forEach

Выполняет предоставленную функцию для каждого элемента. Изменит исходный массив, не вернет результат выполнения, вернетundefined.

var a = [1,2,3,4,5];
a.forEach(function(item, index){
    // return item * 2; //无法直接扩大扩大两倍
    a[index] = item * 2;
});

8.0 reduce

Множествоreduce()применить функцию к этомуArrayиз[x1, x2, x3...]выше, эта функция должна получать два параметра,reduce()Продолжайте накапливать результат со следующим элементом последовательности, и эффект будет следующим:

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

Случай 1: найти кумулятивную сумму

var a = [1,2,3,4,5];
function add(total,next){
    return total + next; // 每次的返回值会作为下次调用add的total
}
var b = a.reduce(add);
console.log(b); // 15

Случай 2: найти количество вхождений элемента

var words = ["apple","hello","orange","apple"];

var wordCount = function(prev,next){
    prev[next] = (prev[next] + 1) || 1; // 如果存在就加1，否则设置为1
    return prev;
}

var obj = words.reduce(wordCount,{});
console.log(obj); // { apple: 2, hello: 1, orange: 1 }

Думая о сокращении:
reduce(callback,initiaValue)Будут переданы две переменные, функция обратного вызова (callback) и начальное значение (initiaValue). Если начальное значение не задано, при первом его выполненииcallbackПервый параметр — это первый элемент массива, а второй параметр — второй элемент массива. с начальным значениемprev— начальное значение, next — первый элемент массива.

обход массива

1.0 длина + петля

for(let i =0;i<arr.length;i++){
    console.log(i+":"+arr[i]);
}

2.0 Использование forEach

Значение двух параметров функции обратного вызова в forEach находится впереди, а индекс — сзади.

arr.forEach(function(val,index){
    console.log(index+":"+val);
});

3.0 for ... in

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

for(let index in arr){
    console.log(index+":"+arr[index]);
}

Первые три значения печати обхода

/*
    0:a
    1:b
    2:c
    3:d
*/

4.0 for ... of

for ... ofИтерация непосредственно по значениям в массиве

for(let val of arr){
    console.log(val);
}
/*
    a
    b
    c
    d
*/

5.0 Разница между for...in и for...of

for … inцикл, который фактически перебирает имена свойств объекта.
Массив на самом деле тоже является объектом, и индекс каждого его элемента рассматривается как свойство.
Когда мы вручную добавляем дополнительные свойства к объекту Array,for … inЦикл будет иметь неожиданные неожиданные эффекты:

var arr = ['a','b','c'];
arr.k = "hello";

for(let i in arr){
    console.log(i+":"+arr[i]); //遍历的是属性值
}
/*
    0:a
    1:b
    2:c
    k:hello
 */
console.log(arr); // [ 'a', 'b', 'c', k: 'hello' ]

for ... ofПри выполнении он проходит только по значению, но не по вновь добавленномуk

var arr = ['a','b','c'];
arr.k = "hello";

for(let val of arr){
    console.log(val);
}
/*
    a
    b
    c
*/

Смотрите подробно:developer.Mozilla.org/this-cn/docs/…

Объедините два возрастающих числа в возрастающий массив

var arr1 = [1,6,7,8,9]
var arr2 = [2,3,4,5]

// 1.0 合并成一个数组然后排序
function compare(num1,num2){
    return num1 - num2;
}
var res = arr1.concat(arr2)
res.sort(compare);
console.log(res); //[ 1, 2, 3, 4, 5, 6, 7, 8, 9]


// 2.0 用两个指针 i j 指向两个数组的头部依次比较插入

var i = 0;
var j = 0;
tmp = [];
while(i<arr1.length&&j<arr2.length){
    if(arr1[i]<=arr2[j]){
        tmp.push(arr1[i]);
        i++;
    }else{
        tmp.push(arr2[j]);
        j++;
    }
}
var res = tmp.concat(arr1.slice(i)).concat(arr2.slice(j)); //拼接没有遍历完的数组
console.log(res)

Дедупликация массива

// 1.0 用set去重 然后用 Array.from转为list
var myset = Array.from(new Set(arr));
console.log(myset); // [ 1, 2, 3, 4 ]

// 2.0 用reduce
function compare(num1,num2){
    return num1 - num2;
}
arr.sort(compare);//先排序
var res = arr.reduce(function(init,current){
    if(init.length===0||init[init.length-1]!=current){
        init.push(current);
    }
    return init;
},[]);
console.log(res); // [ 1, 2, 3, 4 ]

// 3.0 filter

var res = arr.filter(function(item,index,self){
    return self.indexOf(item) === index; //从前往后查找对应元素的索引是否与当前索引相等，要是不相等说明之前出现过重复的元素
});
console.log(res);

найти пересечение двух массивов

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

var a = [1,2,3,4,4,5];
var b = [3,4,5,6,7];


// 1.0 用 indexOf
var res = []
for(let val of a){
    if(b.indexOf(val)!=-1){
        res.push(val);
    }
}
console.log(res); // [ 3, 4, 4, 5 ]

Найдите числа, которые появляются только один раз

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

// 1.0 用reduce
// 用 reduce统计出现次数
var res = a.reduce(function(init,current){
    init[current] = (init[current] + 1) || 1;
    return init;
},{});
// 遍历结果选出出现一次的元素
for(let i in res){
    if(res[i]==1){
        console.log(i);// 3
    }
}

сумма двух чисел

Учитывая массив целых чисел и целевое значение, найдите в массиве два числа, сумма которых равна целевому значению. Что нужно учитывать, так это то, что 4-2=2 В это время в массиве должно быть две двойки.
метод грубой силы

var arr = [1,2,3,5,9];
var target = 7;
// 暴力遍历 假设只有一组数相加为

for(let i=0;i<arr.length;i++){
    for(let j=i+1;j<arr.length;j++){
        if(arr[i]+arr[j]==target){
            console.log(arr[i],arr[j])
        }
    }
}

использовать карту

var arr = [1,2,5,2,9];
var target = 4;
// 使用map
var m = new Map();
var res = []; // 存放索引
for(let i=0; i<arr.length ;i++){
    if(m.has(target-arr[i])){
      // 第一次遇到就往里面存，这里若存在一定是之前存入的，不会与这次起冲突
        res.push(i,m.get(target-arr[i])); 
        break;
    }
    m.set(arr[i],i);
}
console.log(res);

Проверить, уникален ли элемент массива

Используйте набор, а затем сравните размер после преобразования в набор с исходным размером.

var a = [1,2,3,4]
var b = [1,2,1,3];

function judge(arr){
    let s = new Set(arr);
    if(s.size==arr.length){
        return true;
    }
    return false;
}
var flag1 = judge(a);
var flag2 = judge(b);

console.log(flag1); //true
console.log(flag2); //false

движущийся ноль

Переместите все элементы в массиве, значение элемента которого равно 0, в конец массива
1) Должен работать с исходным массивом и не может копировать дополнительные массивы
2) Минимизировать количество операций

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

var arr = [1,0,0,2,0,3,4,5];
var index = 0; //数组新的索引
const num = 0;//比较的对象

for(let i=0;i<arr.length;i++){
    if(arr[i]!=num){
        // 不为零就用新索引添加到原数组中
        arr[index] = arr[i];
        index += 1;
    }
}
for(let i=index;i<arr.length;i++){
    arr[i] = num;//补上之前没有添加的0
}
console.log(arr); //[ 1, 2, 3, 4, 5, 0, 0, 0 ]

Подводные камни в JavaScript

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

var a = [];
a["13"] = 1;
console.log(a.length); //14
console.log(a); //[ <13 empty items>, 1 ]