В этой статье мы изучим некоторые методы JavaScript по умолчанию.
1. splice() 2. forEach() 3. map() 4. filter()
Хорошо, давайте начнем наше путешествие.
Тема 1: splice ()
В основном мы используем этот метод splice () для массива. Мы можем удалять определенные элементы, добавлять элементы, заменять элементы из массива с помощью этого метода splice ().
Syntax: array.splice(start, deleteCount, items)
Здесь "start" и "deleteCount" являются обязательными, а "items" - необязательными. Возможно, вы не знаете о параметрах метода splice (). Не волнуйся.
Сначала посмотрим на этот пример:
Const arr = [10, 20, 30, 40, 50] arr.splice(1,2) console.log(arr) //[ 10, 40, 50 ]
Что там происходит? Сначала мы объявили массив. После этого мы используем метод splice () для этого массива. Как это работает? Мы используем два параметра в методе splice (). Первый параметр - это начальный индекс, а второй параметр - сколько элементов мы хотим удалить из массива. Мы используем 1 для первого элемента и 2 для второго элемента, это означает, что мы хотим удалить 2 элемента из индекса 1. Таким образом, он удалит индексы 1 и 2. Наш ожидаемый результат - [10, 40, 50], потому что при сращивании удаляются 2-й и 3-й элемент массива.
Как насчет того, чтобы использовать третий параметр метода splice ()? Теперь посмотрим на этот пример:
const arr = [10, 20, 30, 40, 50, 60, 70, 80] arr.splice(2, 3, 4) console.log(arr) //[ 10, 20, 4, 60, 70, 80 ]
Здесь мы хотим удалить 3 элемента из индекса 2. Это означает, что метод splice () удалит 30, 40 и 50 из массива. Но что делает 3-й параметр сварки? 3-й параметр будет вставлен в позицию индекса 2. Итак, наш ожидаемый результат будет [10, 20, 4, 60, 70, 80].
Вот еще один экзамен, чтобы вы узнали больше о методе splice ():
const arr = [10, 20, 30, 40, 50, 60, 70] arr.splice(2, 3, 4, 5, 6, 7, 8) console.log(arr) //[ 10, 20, 4, 5, 6, 7, 8, 60, 70 ]
Какие? Подожди, подожди ... Не волнуйся. Я это объясняю. Для 3-го параметра метода splice () ограничений нет. Вы можете передать значение, сколько хотите. Здесь мы передаем 5 значений. Итак, значения будут вставлены из индекса 2 в массив.
Может быть, у вас есть четкое представление о методе splice (). Теперь попробуйте самостоятельно заменить значение из массива с помощью метода splice ().
Тема 2: forEach ()
forEach () - это цикл. Мы можем перемещаться по элементам коллекции. Этот цикл в основном используется вместо стандартных операторов цикла. В JavaScript мы используем функцию обратного вызова внутри цикла forEach ().
Syntax: array.forEach(callback)
Пример:
const myColors = ['red', 'blue', 'green', 'yellow']
myColors.forEach(func)
function func(color){
console.log(color)
}
// red
// blue
// green
// yellow
В этом примере мы вызываем функцию «func» внутри forEach (). Что делает forEach ()? Он передает элементы массива myColors один за другим. Цикл forEach () выполняется до тех пор, пока элемент не завершится.
Мы также можем вызвать анонимную функцию внутри forEach ().
Мы также можем сделать это в ближайшее время в JavaScript ES6. Взгляните на этот пример:
const myColors = ['red', 'blue', 'green', 'yellow'] myColors.forEach(color => console.log(color))
Мы использовали здесь функцию стрелки (= ›). «Цвет» - это параметр функции, а возврат функции - «console.log (цвет)».
Это хорошо? Вы понимаете эту концепцию forEach ()? Если у вас возникнут сомнения, вы можете задать свой вопрос в комментарии ниже.
Тема 3: карта ()
Мы можем создать новый массив на основе другого массива, используя функцию map ().
Давайте посмотрим на пример:
const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1.map(func)
function func() {
return 'A'
}
console.log(arr2) //[ 'A', 'A', 'A', 'A', 'A' ]
Здесь мы определили массив с именем arr1. Мы создаем еще один массив с именем arr2, используя функцию map (). Мы передаем функцию внутри функции map (). Мы можем позвонить, это функция обратного вызова. Мы вызываем функцию и получаем строку в качестве возврата, а возвращаемое значение будет вставлено в массив с именем arr2. Итак, наш окончательный результат arr2 - [‘A’, ‘A’, ‘A’, ‘A’, ‘A’]. А выходной массив состоит из 5 элементов, поскольку массив с именем arr1 имеет 5 элементов. Мы также можем определить функцию как анонимную внутри функции map ().
Как выглядит указанная выше программа в стрелочной функции ES6?
const arr1 = [1, 2, 3, 4, 5] const arr2 = arr1.map(() => 'A') console.log(arr2)
А теперь давайте посмотрим на другой пример:
const arr1 = [
{name: 'A', age: 20, gender: 'male'},
{name: 'B', age: 30, gender: 'female'},
{name: 'C', age: 40, gender: 'male'},
]
const arr2 = arr1.map( x => x.name)
const arr3 = arr1.map( x => x.age)
console.log(arr2) // [ "A", "B", "C" ]
console.log(arr3) //[ 20, 30, 40 ]
Это хорошая особенность JavaScript, не так ли?
Тема 4: filter ()
Это похоже на map (). Мы можем отфильтровать значение функции map (), используя условие в функции filter ().
Пример:
const arr1 = [
{name: 'A', age: 20, gender: 'male'},
{name: 'B', age: 30, gender: 'female'},
{name: 'C', age: 40, gender: 'male'},
]
const arr4 = arr1.filter( x => x.name=='C')
const arr5 = arr1.filter( x => x.age>=30)
const arr6 = arr1.filter( x => x.gender=='male')
console.log(arr4)
// [ { name: 'C', age: 40, gender: 'male' } ]
console.log(arr5)
// [
// { name: 'B', age: 30, gender: 'female' },
// { name: 'C', age: 40, gender: 'male' }
// ]
console.log(arr6)
// [
// { name: 'A', age: 20, gender: 'male' },
// { name: 'C', age: 40, gender: 'male' }
// ]
console.log(arr4[0].gender) //male
Посмотрите на пример. Попытаться понять. Если после просмотра примера вы поняли основную концепцию фильтра, хочу вас поздравить. Вы поняли идею.
Не волнуйтесь, если не понимаете. Мы создали массив, и внутри него есть три объекта. Какова наша цель? Мы хотим использовать функцию filter () в массиве с именем arr1. Итак, мы написали arr1.filter (). Внутри функции filter () мы также используем функцию (стрелочную функцию). Мы можем проверить параметр функции с помощью условного оператора JavaScript (например, ==, ===, ›==,‹ ==,! == и т. Д.). Вы можете получить эту концепцию после просмотра вывода новых массивов с именами arr4, arr5, arr6.
Хорошо, теперь попробуйте какую-нибудь программу самостоятельно.
Увидимся позже в моей следующей статье.
