Introduce
Today I will introduce you a data type in Javascript, which is Array . It will help you be able to represent complex data and make it easier to manage and process the data
So what is Array?
Arrays , or arrays , are data types whose values contain many other values. Each value of an array is called an element .
There are 2 ways to declare Array in Javascript:
- Using Array literals – Represented by square brackets and followed by empty values or one or more values separated by commas
1 2 3 | var foo = []; var number = [1, 2, 3, 4, 5]; |
- Using Array constructor – Created using the keyword ‘new’
1 2 3 | var foo = new Array() var number = new Array(1, 2, 3, 4, 5); |
Properties
length — The property that specifies the length of the array. If you use a negative integer, a real number or a string as an index, the length of the array is also the highest positive integer.
For example:
1 2 3 4 5 6 7 8 9 10 | var foo = []; console.log(foo.length) // 0 var number = [1, 2, 3]; number[9] = 9; number[-3] = 'so am'; number['string'] = 'String'; console.log(number.length); // 10 console.log(number); // [ 1, 2, 3, empty * 6, 9, '-3': 'so am', string: 'String'] |
Method
There are many methods related to arrays. Some methods are used to change the original array ( Mutator Methods ), some are used to access values, return some necessary values and do not change the existing array ( Accessor Methods ), methods used. to iterate the elements in the array ( Iterator Methods ), … And now we will learn some of the methods above.
Mutator Methods
Array.prototype.push()– Method to add an element to the end of the array and return the length of the array.
1 2 3 4 | const number = [1, 2, 3]; number.push(5); // 4 console.log(number) // [1, 2, 3, 5] |
Array.prototype.pop()– Method to delete the last element of the array and return the deleted element.
1 2 3 4 | const number = [1, 2, 3]; number.pop(); // 3 console.log(number); // [1, 2] |
Array.prototype.shift()– Like pop , this method removes the first element of the array and returns that element.
1 2 3 4 | const number = [1, 2, 3]; number.shift(); // 1 console.log(number); // [2, 3] |
Array.prototype.splice()– A method used to insert or delete one or more elements. splice can have multiple number changes, the first is the starting index, the second is the number of elements to be deleted from the first argument (if zero, there is no deleting element), followed by possible arguments or no, if so, they will be but the element is inserted immediately after the starting position.
1 2 3 4 5 6 7 8 9 10 | Syntax array.splice(start, deleteCount, item1, item2, ...) var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; days.splice(2,1); //["Tuesday"] console.log(days); //["Sunday", "Monday", "Wednesday", "Thursday", "Friday"] days.splice(2,0,'Tuesday'); console.log(days) //["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"] |
Accessor Methods
Array.prototype.includes()– Returns true or false , checking for the existence of elements in the array.
1 2 3 4 | const number = [1, 2, 3, 4]; console.log(number.includes(1)); // true console.log(number.includes(5)); // false |
Array.prototype.indexOf()– Returns the first index found. If not found returns -1 . It also takes the 2nd argument (optional) as the starting position.
1 2 3 4 5 | var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; days.indexOf('Tuesday'); //2 days.indexOf('Tuesday', 4); //-1 days.indexOf('March'); //-1 |
Array.prototype.join()– A method of concatenating array elements into a string. It takes the argument that is the connection point between the elements.
1 2 3 4 | var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; days.join('-'); // Sunday-Monday-Tuesday-Wednesday-Thursday-Friday |
Iteration methods
Array.prototype.filter()– Repeats elements in the given array and returns a new array with elements that satisfy the filter condition. The following example uses the ‘arrow function’ :
1 2 3 4 | var numbers = [1, 34, 5, 2, 67, 46, 24]; number.filter(number => number % 2 === 0) // [34, 2, 46, 24] |
Array.prototype.map()– Create a new array with the change of elements in the array.
1 2 3 4 | var numbers = [1, 2, 3, 4, 5]; number.map(number => number * 2) // [2, 4, 6, 8, 10] |
Array.prototype.find()– Returns the first element in the array that matches the search criteria.
1 2 3 4 | var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; days.find(day => day.length === 6) // 'Sunday' |
Array.prototype.reduce()– A more complex method than the other methods. It browses through the elements in the array and invokes a callback on each element, the values returned from one callback to another, and finally returns the value after browsing to the end of the array.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var frui = [ { name: 'apple', price: 10 }, { name: 'orange', price: 50 }, { name: 'tomato', price: 150 }, { name: 'coconut', price: 80 }, { name: 'pear', price: 200 }, ]; frui.reduce((total, item) => { if (item.price > 50) { return total + item.price; } return total; }, 0) |
map() , filter() , find() , reduce() are very powerful methods for searching, transforming and processing data. They make your code easy to understand, not lengthy, easier to maintain.
Conclude
There are many methods and properties of arrays that I have not yet been able to mention. Hopefully the above article will help you getting started with arrays in Javascript more accessible.
Reference : Array In JavaScript