предисловие
В разработке много сценариев использования массивов, причем многие массивы задействованы и в будние дни.api/Связанные операции, я никогда не систематизировал и не резюмировал этот фрагмент контента, даже если во многих случаях использовал его несколько раз.api, его тоже легко забыть в разработке, или погуглить. Поэтому я надеюсь получить более систематизированное изложение этого контента. В этом контексте есть эта статья. Если она вам нравится, вы можете подписаться на нее и поддержать ее. Я надеюсь, что вы сможете что-то получить после прочтения этой статьи.
Эта статья длинная, перед прочтением рекомендуется поставить лайк и сохранить, а также ее легко читать в дальнейшем.
Создайте массив:
// 字面量方式:
// 这个方法也是我们最常用的，在初始化数组的时候 相当方便
var a = [3, 11, 8]; // [3,11,8];
// 构造器:
// 实际上 new Array === Array,加不加new 一点影响都没有。
var a = Array(); // []
var a = Array(3); // [,,]
var a = Array(3,11,8); // [ 3,11,8 ]
ES6 Array.of() возвращает массив всех значений параметров
Определение: возвращает массив значений всех параметров или пустой массив, если параметры отсутствуют.
Назначение: Целью Array.of() является решение проблемы, связанной с тем, что приведенные выше конструкторы ведут себя по-разному из-за разного количества параметров.
let a = Array.of(3, 11, 8); // [3,11,8]
let a = Array.of(3); // [3]
ES6 Array.from() преобразует два типа объектов в настоящие массивы.
Определение: используется для преобразования двух типов объектов в реальные массивы (не меняйте оригинальные объекты, верните новый массив).
параметр:
Первый параметр (обязательный): объект, который нужно преобразовать в реальный массив.
Второй параметр (необязательный): метод карты, подобный массиву, который обрабатывает каждый элемент и помещает обработанное значение в возвращаемый массив.
Третий параметр (необязательный): используется для привязки этого.
// 1. 对象拥有length属性
let obj = {0: 'a', 1: 'b', 2:'c', length: 3};
let arr = Array.from(obj); // ['a','b','c'];
// 2. 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象
let arr = Array.from('hello'); // ['h','e','l','l','o']
let arr = Array.from(new Set(['a','b'])); // ['a','b']
метод:
Прототип массива предоставляет множество методов, которые разделены на три категории: один меняет значение исходного массива, другой не меняет исходный массив и метод обхода массива.
Методы изменения исходного массива (9):
let a = [1,2,3];
ES5:
a.splice()/ a.sort() / a.pop()/ a.shift()/ a.push()/ a.unshift()/ a.reverse()
ES6:
a.copyWithin() / a.fill
Для этих методов, которые могут изменить исходный массив, обратите внимание, чтобы избежать изменения параметров исходного массива в обходе цикла, таких как: изменение длины массива, вызывающее проблемы с длиной обхода.
splice() добавить/удалить элементы массива
Определение: метод splice()добавить/удалить в/из массиваэлемент, затем возвращает элемент, который был удален
грамматика:array.splice(index,howmany,item1,.....,itemX)
параметр:
- индекс: требуется. Целое число, указывающее позицию для добавления/удаления элементов, используйте отрицательное число, чтобы указать позицию с конца массива.
- Сколько: необязательно. Количество элементов для удаления. Если установлено значение 0, элемент не будет удален.
- элемент1, ..., элементX: необязательно. В массив добавлен новый элемент.
Возвращаемое значение: если какие-либо элементы были удалены, вернуть новый массив, содержащий удаленные элементы.
eg1: удалить элемент
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0, 3); // [1,2,3]
console.log(a); // [4,5,6,7]
// 从数组下标0开始，删除3个元素
let item = a.splice(-1, 3); // [7]
// 从最后一个元素开始删除3个元素，因为最后一个元素，所以只删除了7
например 2: удалить и добавить
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,3,'添加'); // [1,2,3]
console.log(a); // ['添加',4,5,6,7]
// 从数组下标0开始，删除3个元素，并添加元素'添加'
let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-2,3,'添加1','添加2'); // [6,7]
console.log(b); // [1,2,3,4,5,'添加1','添加2']
// 从数组最后第二个元素开始，删除3个元素，并添加两个元素'添加1'、'添加2'
eg3: не удалять только добавить:
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,0,'添加1','添加2'); // [] 没有删除元素，返回空数组
console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]
let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-1,0,'添加1','添加2'); // [] 没有删除元素，返回空数组
console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素
Из приведенных выше трех каштанов можно сделать вывод, что:
- Если в массиве недостаточно элементов, он будет удаляться до последнего элемента
- элемент для работы, включая тот, который начинается с
- Можно добавить много элементов
- add добавляется перед элементом, который начинается
sort() сортировка массива
Определение: метод sort() сортирует элементы массива и возвращает этот массив.
Необязательные аргументы: функция сравнения, определяющая порядок сортировки.
По умолчанию, если метод sort() не передает функцию сравнения, он по умолчанию использует восходящий алфавитный порядок.Если это не элемент или строка, он вызоветtoString()Метод преобразует элемент в Unicode (универсальный код) сайта строки, а затем сравнивает символы.
// 字符串排列 看起来很正常
var a = ["Banana", "Orange", "Apple", "Mango"];
a.sort(); // ["Apple","Banana","Mango","Orange"]
// 数字排序的时候 因为转换成Unicode字符串之后，有些数字会比较大会排在后面 这显然不是我们想要的
var a = [10, 1, 3, 20,25,8];
console.log(a.sort()) // [1,10,20,25,3,8];
Сравните два аргумента функции:
Функция сравнения sort имеет два параметра по умолчанию, которые должны быть получены в функции.Эти два параметра представляют собой два элемента для сравнения в массиве.Обычно мы используем a и b для получения двух элементов для сравнения:
- Если функция сравнения возвращает значение
- Если возвращаемое значение функции сравнения = 0, то относительные положения a и b остаются неизменными;
- Если функция сравнения возвращает значение > 0, то b предшествует a;
Более глубокую внутреннюю реализацию и механизм обработки метода sort() см. в этой статье.Глубокое погружение в метод сортировки javascript
Сортировка общего использования:
-
Элементы массива расположены в порядке возрастания и убывания номеров:
var array = [10, 1, 3, 4,20,4,25,8]; // 升序 a-b < 0 a将排到b的前面，按照a的大小来排序的 // 比如被减数a是10，减数是20 10-20 < 0 被减数a(10)在减数b(20)前面 array.sort(function(a,b){ return a-b; }); console.log(array); // [1,3,4,4,8,10,20,25]; // 降序 被减数和减数调换了 20-10>0 被减数b(20)在减数a(10)的前面 array.sort(function(a,b){ return b-a; }); console.log(array); // [25,20,10,8,4,4,3,1]; -
Множественная сортировка массива
var array = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}]; array.sort(function(a,b){ if(a.id === b.id){// 如果id的值相等，按照age的值降序 return b.age - a.age }else{ // 如果id的值不相等，按照id的值升序 return a.id - b.id } }) // [{"id":2,"age":8},{"id":5,"age":4},{"id":6,"age":10},{"id":9,"age":6},{"id":10,"age":9},{"id":10,"age":2}] -
Настройте функцию сравнения, небо - ваш предел
похожий:Используя возвращаемое значение, мы можем написать любую функцию сравнения, которая соответствует нашим потребностям.
var array = [{name:'Koro1'},{name:'Koro1'},{name:'OB'},{name:'Koro1'},{name:'OB'},{name:'OB'}];
array.sort(function(a,b){
if(a.name === 'Koro1'){// 如果name是'Koro1' 返回-1 ，-1<0 a排在b的前面
return -1
}else{ // 如果不是的话，a排在b的后面
return 1
}
})
// [{"name":"Koro1"},{"name":"Koro1"},{"name":"Koro1"},{"name":"OB"},{"name":"OB"},{"name":"OB"}]
pop() удаляет последний элемент массива
Определение: метод pop() удаляет последний элемент массива и возвращает этот элемент.
Параметры: Нет.
let a = [1,2,3];
let item = a.pop(); // 3
console.log(a); // [1,2]
shift() удаляет первый элемент массива
Определение: метод shift() удаляет первый элемент массива и возвращает этот элемент.
Параметры: Нет.
let a = [1,2,3];
let item = a.shift(); // 1
console.log(a); // [2,3]
push() добавляет элемент в конец массива
Определение: метод push() добавляет один или несколько элементов в конец массива и возвращает новую длину.
Параметры: item1, item2, ..., itemX , элемент, добавляемый в конец массива.
let a = [1,2,3];
let item = a.push('末尾'); // 4
console.log(a); // [1,2,3,'末尾']
unshift()
Определение: метод unshift() добавляет один или несколько элементов в начало массива и возвращает новую длину.
Параметры: item1, item2, ..., itemX , элемент, добавляемый в начало массива.
let a = [1,2,3];
let item = a.unshift('开头'); // 4
console.log(a); // ['开头',1,2,3]
reverse() меняет порядок элементов в массиве на обратный
Определение: метод Reverse() используется для изменения порядка элементов в массиве на противоположный.
Параметры: нет
let a = [1,2,3];
a.reverse();
console.log(a); // [3,2,1]
ES6: copyWithin() копирует элемент из указанного места в другое место.
Определение: внутри текущего массива копирует элементы в указанной позиции в другие позиции и возвращает массив.
грамматика:
array.copyWithin(target, start = 0, end = this.length)
параметр:
Все три параметра являются числовыми значениями, в противном случае они будут автоматически преобразованы в числовые значения.
- цель (обязательно): Начать замену данных в этой позиции. Если отрицательно, значит взаимно.
- start (необязательно): начать чтение данных с этой позиции, по умолчанию 0. Если отрицательно, значит взаимно.
- конец (необязательно): прекратить чтение данных до достижения этой позиции, по умолчанию равно длине массива. Используйте отрицательные числа, чтобы указать позицию от конца массива.
Совместимость с браузерами (MDN): chrome 45, Edge 12, Firefox32, Opera 32, Safari 9, IE не поддерживается
eg:
// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
var a=['OB1','Koro1','OB2','Koro2','OB3','Koro3','OB4','Koro4','OB5','Koro5']
// 2位置开始被替换,3位置开始读取要替换的 5位置前面停止替换
a.copyWithin(2,3,5)
// ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"]
Из вышеуказанных каштанов:
- Первый параметр — это позиция элемента, с которой начинается замена
- Диапазон позиций для замены данных: со второго аргумента — элемент для начала чтения, и один элемент перед третьим аргументом — для прекращения чтения
- Длина массива не меняется
- Прочитав несколько элементов, замените несколько элементов с того места, где они были заменены в начале
ES6: fill() заполняет массив
Определение: заполняет массив заданными значениями.
параметр:
первый элемент (обязательно): значение для заполнения массива
Второй элемент (необязательный): начальная позиция заполнения, значение по умолчанию равно 0.
Третий элемент (необязательный): конечная позиция заполнения, по умолчаниюthis.length
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
Методы, не изменяющие исходный массив (8):
ES5：
slice、join、toLocateString、toStrigin、cancat、indexOf、lastIndexOf、
ES7：
includes
slice() поверхностно копирует элементы массива
Определение: метод возвращает неглубокую копию части выбранного массива от начала до конца (исключая конец) в новый объект массива, а исходный массив не изменяется.
Уведомление: Строки также имеют метод slice() для извлечения строк, не запутайтесь.
грамматика:
array.slice(begin, end);
параметр:
begin (необязательно): принимается значение индекса, отрицательные значения и элементы исходного массива извлекаются из индекса.Значение по умолчанию равно 0.
конец (необязательно): значение индекса (исключая), отрицательные значения принимаются, и извлечение исходных элементов массива завершается до индекса.Значением по умолчанию является конец массива (включая последний элемент).
let a= ['hello','world'];
let b=a.slice(0,1); // ['hello']
a[0]='改变原数组';
console.log(a,b); // ['改变原数组','world'] ['hello']
b[0]='改变拷贝的数组';
console.log(a,b); // ['改变原数组','world'] ['改变拷贝的数组']
Как указано выше: новый массив является мелкой копией,Элементы представляют собой простые типы данных и не мешают друг другу после изменения.
еслиДля сложных типов данных (объекты, массивы) измените один, и другой тоже изменится.
let a= [{name:'OBKoro1'}];
let b=a.slice();
console.log(b,a); // [{"name":"OBKoro1"}] [{"name":"OBKoro1"}]
// a[0].name='改变原数组';
// console.log(b,a); // [{"name":"改变原数组"}] [{"name":"改变原数组"}]
// b[0].name='改变拷贝数组',b[0].koro='改变拷贝数组';
// [{"name":"改变拷贝数组","koro":"改变拷贝数组"}] [{"name":"改变拷贝数组","koro":"改变拷贝数组"}]
Причина указана выше в определении: slice() — это неглубокая копия.Для неглубокой копии сложного типа данных копия является всего лишь указателем на исходный массив, поэтому независимо от изменения исходного массива или массива неглубокой копии он изменяет исходный массив.
массив join() в строку
Определение: метод join() используется для разделения всех элементов массива на строку с помощью указанного разделителя и возврата сгенерированной строки.
грамматика:
array.join(str)
параметр:
str (необязательно): указывает используемый разделитель, по умолчанию в качестве разделителя используется запятая.
let a= ['hello','world'];
let str=a.join(); // 'hello,world'
let str2=a.join('+'); // 'hello+world'
Что происходит при использовании метода соединения или метода toString, упомянутого ниже, когда элементы в массиве также являются массивами или объектами?
let a= [['OBKoro1','23'],'test'];
let str1=a.join(); // OBKoro1,23,test
let b= [{name:'OBKoro1',age:'23'},'test'];
let str2 = b.join(); // [object Object],test
// 对象转字符串推荐JSON.stringify(obj);
так,join()/toString()Когда элемент массива является массивом, метод также вызывает массив внутри.join()/toString(), если это объект, объект будет преобразован в[object Object]нить.
массив toLocaleString() в строку
Определение: возвращает строку, представляющую элементы массива. Строка состоит из возвращаемого значения toLocaleString() каждого элемента массива, объединенного (разделенного запятыми) путем вызова метода join().
грамматика:
array.toLocaleString()
Параметры: Нет.
let a=[{name:'OBKoro1'},23,'abcd',new Date()];
let str=a.toLocaleString(); // [object Object],23,abcd,2018/5/28 下午1:52:20
Как и вышеприведенный каштан: вызовите массивtoLocaleStringметод, каждый элемент массива вызывает свой собственныйtoLocaleStringметод, объект вызывает метод объектаtoLocaleString, Дата звонит ДатаtoLocaleString.
toString() Преобразование массива в строку Не рекомендуется
Определение: метод toString() преобразует массив в строку, связанную запятыми.
грамматика:
array.toString()
Параметры: Нет.
Действие этого метода такое же, как и у метода соединения: он используется для преобразования массива в строку, но не имеет преимуществ по сравнению с методом соединения и не может настроить разделитель строки, поэтому он не рекомендуется.
Стоит отметить, что: при манипулировании массивами и строками js вызывает этот метод для автоматического преобразования массива в строку.
let b= [ 'toString','演示'].toString(); // toString,演示
let a= ['调用toString','连接在我后面']+'啦啦啦'; // 调用toString,连接在我后面啦啦啦
cancat
Определение: метод используется для объединения двух или более массивов, возвращая новый массив.
грамматика:
var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)
параметр:
arrayX (обязательно): этот параметр может быть конкретным значением или объектом массива. Может быть любое число.
eg1:
let a = [1, 2, 3];
let b = [4, 5, 6];
//连接两个数组
let newVal=a.concat(b); // [1,2,3,4,5,6]
// 连接三个数组
let c = [7, 8, 9]
let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]
// 添加元素
let newVal3 = a.concat('添加元素',b, c,'再加一个');
// [1,2,3,"添加元素",4,5,6,7,8,9,"再加一个"]
// 合并嵌套数组 会浅拷贝嵌套数组
let d = [1,2 ];
let f = [3,[4]];
let newVal4 = d.concat(f); // [1,2,3,[4]]
Оператор спреда ES6...Объединить массивы:
Поскольку синтаксис ES6 более лаконичен и прост для понимания, теперь я в основном использую объединенный массив....иметь дело с,...оператор может реализоватьcancat, и является более кратким и имеет эффект высокой настройки положения элементов массива.
let a = [2, 3, 4, 5]
let b = [ 4,...a, 4, 4]
console.log(a,b); // [2, 3, 4, 5] [4,2,3,4,5,4,4]
Для получения более подробной информации о персонаже расширения перейдите к Ruan Yifeng God.Начало работы с ECMAScript 6
indexOf() определяет, существует ли элемент в массиве, и возвращает индекс
Определение: возвращает первый индекс в массиве, по которому можно найти данный элемент, или -1, если он не существует.
грамматика:
array.indexOf(searchElement,fromIndex)
параметр:
searchElement (обязательно): искомый элемент
fromIndex (необязательно): позиция для начала поиска (не может быть больше или равна длине массива, возвращает -1), принимает отрицательные значения, значение по умолчанию — 0.
Поиск строгого равенства:
Поиск indexOf массива не совпадает с indexOf строки, а indexOf массива использует строгое равенство===поисковый элемент, т.е.Элементы массива должны точно совпадатьдля успешного поиска.
Уведомление: indexOf() не распознанNaN
eg:
let a=['啦啦',2,4,24,NaN]
console.log(a.indexOf('啦')); // -1
console.log(a.indexOf('NaN')); // -1
console.log(a.indexOf('啦啦')); // 0
используемые сцены:
- Дедупликация массива
- Выполнять операции по полученному индексу массива, изменять значение в массиве и т.д.
- Определите, существует ли он, и выполните операцию.
lastIndexOf() находит последнюю позицию указанного элемента в массиве
Определение: метод возвращает индекс указанного элемента, последнего элемента в массиве или -1, если он не существует. (смотрим вперед с задней стороны массива)
грамматика:
arr.lastIndexOf(searchElement,fromIndex)
параметр:
searchElement (обязательно): искомый элемент
fromIndex (необязательно): Начальная позиция обратного поиска, значение по умолчанию — длина массива -1, то есть ищется весь массив.
Есть три правила относительно fromIndex:
-
положительное значение. Если значение больше или равно длине массива, поиск выполняется во всем массиве.
-
отрицательное значение. Думайте об этом как о смещении вперед от конца массива. (Например -2, поиск вперед от последнего второго элемента массива)
-
отрицательное значение. Если его абсолютное значение больше длины массива, метод возвращает -1, то есть поиск в массиве производиться не будет.
let a=['OB',4,'Koro1',1,2,'Koro1',3,4,5,'Koro1']; // 数组长度为10 // let b=a.lastIndexOf('Koro1',4); // 从下标4开始往前找 返回下标2 // let b=a.lastIndexOf('Koro1',100); // 大于或数组的长度 查找整个数组 返回9 // let b=a.lastIndexOf('Koro1',-11); // -1 数组不会被查找 let b=a.lastIndexOf('Koro1',-9); // 从第二个元素4往前查找，没有找到 返回-1
ES7 include() определяет, содержит ли массив элемент, возвращающий логическое значение
Определение: возвращает логическое значение, указывающее, содержит ли массив заданное значение.
грамматика:
array.includes(searchElement,fromIndex=0)
параметр:
searchElement (обязательно): искомый элемент
fromIndex (необязательно): значение по умолчанию — 0, параметр указывает начальную позицию поиска, допускаются отрицательные значения. Если положительное значение превышает длину массива, поиск в массиве не производится и возвращается false. Абсолютное значение отрицательных значений превышает степень длинного массива и сбрасывает поиск с 0.
Метод include компенсирует недостатки метода indexOf:
- Метод indexOf не распознан
NaN - Метод indexOf проверяет, содержит ли он значение, которое недостаточно семантично, и должен определить, не равно ли оно
-1, выражение недостаточно интуитивно
eg:
let a=['OB','Koro1',1,NaN];
// let b=a.includes(NaN); // true 识别NaN
// let b=a.includes('Koro1',100); // false 超过数组长度 不搜索
// let b=a.includes('Koro1',-3); // true 从倒数第三个元素开始搜索
// let b=a.includes('Koro1',-100); // true 负值绝对值超过数组长度，搜索整个数组
Совместимость (MDN): chrome47, Firefox 43, Edge 14, Opera 34, Safari 9, IE Не реализовано.
Методы обхода (12):
Всего существует 12 способов обхода массива в js без изменения исходного массива:
ES5：
forEach、every 、some、 filter、map、reduce、reduceRight、
ES6：
find、findIndex、keys、values、entries
Про обход:
- Для эффективности обхода вы можете прочитать этоПодробный обход JS
- Старайтесь не изменять значения, которые будут пройдены позже при прохождении
- Старайтесь не изменять длину массива при обходе (удалить/добавить)
forEach
Определение: Выполняет функцию обратного вызова один раз для каждого элемента в массиве, который имеет допустимое значение в порядке возрастания.
грамматика:
array.forEach(function(currentValue, index, arr), thisValue)
параметр:
функция (обязательно): функция, которая будет вызываться для каждого элемента массива.
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
thisValue (необязательно): значение этого привязанного объекта при выполнении функции обратного вызова, значение по умолчаниюundefined
Что вам нужно знать о forEach():
- Нет возможности выйти из цикла на полпути, можно только использовать
returnВыйдите из этого обратного вызова и перейдите к следующему обратному вызову. - Он всегда возвращает неопределенное значение, даже если вы возвращаете значение.
Подобный синтаксис ниже также применяет эти правила
1. 对于空数组是不会执行回调函数的
2. 对于已在迭代过程中删除的元素，或者空元素会跳过回调函数
3. 遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
4. 如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。
eg:
let a = [1, 2, ,3]; // 最后第二个元素是空的，不会遍历(undefined、null会遍历)
let obj = { name: 'OBKoro1' };
let result = a.forEach(function (value, index, array) {
a[3] = '改变元素';
a.push('添加到尾端，不会被遍历')
console.log(value, 'forEach传递的第一个参数'); // 分别打印 1 ,2 ,改变元素
console.log(this.name); // OBKoro1 打印三次 this绑定在obj对象上
// break; // break会报错
return value; // return只能结束本次回调 会执行下次回调
console.log('不会执行，因为return 会执行下一次循环回调')
}, obj);
console.log(result); // 即使return了一个值,也还是返回undefined
// 回调函数也接受接头函数写法
каждый проверяет, соответствуют ли все элементы массива условиям оценки
Определение: метод используется для проверки того, соответствуют ли все элементы массива условиям, заданным функцией
грамматика:
array.every(function(currentValue, index, arr), thisValue)
Параметры: (параметры этих методов, синтаксис аналогичен)
функция (обязательно): функция, которая будет вызываться для каждого элемента массива.
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
thisValue (необязательно): значение этого привязанного объекта при выполнении функции обратного вызова, значение по умолчаниюundefined
Правила возвращаемого значения метода:
- При обнаружении в массивеЕсли один элемент не удовлетворен, все выражение возвращает false, а остальные элементы не проверяются.
- если все элементыесли все условия соблюдены, вернуть true. знак равно
eg:
function isBigEnough(element, index, array) {
return element >= 10; // 判断数组中的所有元素是否都大于10
}
let result = [12, 5, 8, 130, 44].every(isBigEnough); // false
let result = [12, 54, 18, 130, 44].every(isBigEnough); // true
// 接受箭头函数写法
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true
Есть ли элементы в некотором массиве, которые удовлетворяют условиям оценки
Определение: есть ли в массиве элементы, удовлетворяющие условиям оценки.
грамматика:
array.some(function(currentValue, index, arr), thisValue)
Параметры: (параметры этих методов, синтаксис аналогичен)
функция (обязательно): функция, которая будет вызываться для каждого элемента массива.
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
thisValue (необязательно): значение этого привязанного объекта при выполнении функции обратного вызова, значение по умолчаниюundefined
Правила возвращаемого значения метода:
-
еслиВыражение возвращает true, если хотя бы один элемент удовлетворяет условию, остальные элементы проверяться не будут.
-
еслиВозвращает false, если нет элементов, удовлетворяющих условию.
function isBigEnough(element, index, array) { return (element >= 10); //数组中是否有一个元素大于 10 } let result = [2, 5, 8, 1, 4].some(isBigEnough); // false let result = [12, 5, 8, 1, 4].some(isBigEnough); // true
фильтр фильтрует исходный массив и возвращает новый массив
Определение: возвращает новый массив, содержащий все элементы теста, реализованного предоставленной функцией.
грамматика:
let new_array = arr.filter(function(currentValue, index, arr), thisArg)
Параметры: (параметры этих методов, синтаксис аналогичен)
функция (обязательно): функция, которая будет вызываться для каждого элемента массива.
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
thisValue (необязательно): значение этого привязанного объекта при выполнении функции обратного вызова, значение по умолчаниюundefined
eg:
let a = [32, 33, 16, 40];
let result = a.filter(function (value, index, array) {
return value >= 18; // 返回a数组中所有大于18的元素
});
console.log(result,a);// [32,33,40] [32,33,16,40]
map обрабатывает каждый элемент массива, возвращая новый массив
Определение: создает новый массив, результат которого является результатом вызова предоставленной функции для каждого элемента массива.
грамматика:
let new_array = arr.map(function(currentValue, index, arr), thisArg)
Параметры: (параметры этих методов, синтаксис аналогичен)
функция (обязательно): функция, которая будет вызываться для каждого элемента массива.
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
thisValue (необязательно): значение этого привязанного объекта при выполнении функции обратного вызова, значение по умолчаниюundefined
eg:
let a = ['1','2','3','4'];
let result = a.map(function (value, index, array) {
return value + '新数组的新元素'
});
console.log(result, a);
// ["1新数组的新元素","2新数组的新元素","3新数组的新元素","4新数组的新元素"] ["1","2","3","4"]
reduce предоставляет аккумуляторы для массивов, объединенных в одно значение
Определение: метод reduce() применяет функцию к аккумулятору и каждому элементу массива (слева направо), в конечном итоге объединяя их в одно значение.
грамматика:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
параметр:
функция (обязательно): функция, которая будет вызываться для каждого элемента массива.
// 回调函数的参数
1. total(必须)，初始值, 或者上一次调用回调返回的值
2. currentValue(必须),数组当前元素的值
3. index(可选), 当前元素的索引值
4. arr(可选),数组对象本身
InitialValue (необязательно): определяет первый параметр первого обратного вызова.
Когда обратный вызов выполняется в первый раз:
- Если при вызове сокращения предоставляется initialValue, то первая сумма будет равна initialValue, и в этом случае currentValue будет равна первому значению в массиве;
- Если initialValue не указано, то total равно первому значению в массиве, а currentValue равно второму значению в массиве. В этот момент, если массив пуст, будет выброшено исключение TypeError.
- Если массив имеет только один элемент и не указано значение initialValue, или если указано значение initialValue, но массив пуст, обратный вызов не будет выполнен и будет возвращено уникальное значение массива.
eg:
// 数组求和
let sum = [0, 1, 2, 3].reduce(function (a, b) {
return a + b;
}, 0);
// 6
// 将二维数组转化为一维 将数组元素展开
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
(a, b) => a.concat(b),
[]
);
// [0, 1, 2, 3, 4, 5]
reduceRight накапливается справа налево
Этот метод точно такой же, за исключением того, что он выполняется в направлении, противоположном сокращению.Пожалуйста, обратитесь к введению метода сокращения выше.
ES6: find() и findIndex() находят элементы массива на основе условий
Определение find (): используется для поиска первого квалифицированного члена массива и возврата члена, если нет квалифицированного члена, возвращается значение undefined.
findIndex() Определение: Возвращает позицию первого квалифицированного члена массива или -1, если все члены не удовлетворяют условию.
эти два метода
грамматика:
let new_array = arr.find(function(currentValue, index, arr), thisArg)
let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)
Параметры: (параметры этих методов, синтаксис аналогичен)
функция (обязательно): функция, которая будет вызываться для каждого элемента массива.
// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身
thisValue (необязательно): значение этого привязанного объекта при выполнении функции обратного вызова, значение по умолчаниюundefined
Оба метода позволяют определитьNaN, компенсироватьindexOfнедостатков.
eg:
// 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) => Object.is(NaN, n)); // 返回索引4
Совместимость с браузерами (MDN): Chrome 45, Firefox 25, Opera 32, Safari 8, Edge да,
ES6 keys()&values()&entries() Имена ключей перехода, значения ключей перехода, имена ключей перехода + значения ключей
Определение: все три метода возвращают новый объект Array Iterator, который содержит разные значения в зависимости от метода.
грамматика:
array.keys()
array.values()
array.entries()
Параметры: Нет.
Траверс каштаны (изНачало работы с ECMAScript 6):
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
существуетfor..ofЕсли вы хотите выйти в середине обхода, вы можете использоватьbreakВыйти из цикла.
если не использоватьfor...ofLoop, вы можете вручную вызвать следующий метод объекта обхода для обхода:
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
entry() Совместимость с браузерами (MDN): Chrome 38, Firefox 28, Opera 25, Safari 7.1
keys() Совместимость с браузерами (MDN): Chrome 38, Firefox 28, Opera 25, Safari 8,
Уведомление: В настоящее время поддерживается только Safari 9, другие браузеры не реализовали его, а транскодер babel еще не реализован.
Эпилог
Уф~ Наконец-то я его написал, с перерывами, и провел несколько дней на работе, хотя это было очень тяжело, но теперь общий метод работы с массивом стал намного понятнее, и различные API стали лучше понятны, и я приобрел много.Если артикул неверный, прошу всех поощрить! Я надеюсь, что вы сможете получить что-то после прочтения. Если вам это нравится, поторопитесь и нажмитеподпискаПодпишитесь/Нравится.
Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.
Передовое расширенное накопление,Нет публики,GitHub, wx:OBkoro1, Электронная почта: obkoro1@foxmail.com
Выше 2018.5.30
Использованная литература:
Начало работы с расширениями ECMAScript 6 для массивов
Резюме массивов массивов JavaScript
Глубокое погружение в метод сортировки javascript
[Подробная длинная статья] Все API-интерфейсы массивов JavaScript полностью расшифрованы