JavaScript Array Includes

Admin   JAVASCRIPT   173  2020-08-13 07:38:31

In previous articles, I introduced you to the basic data types: numbers, strings, boolean. Today, I will talk about more advanced data types. That is the array. JavaScript array Includes make it possible to render complex data and make it easier to manage and process the data.

JavaScript Array

JavaScript Array

So what is array?

Array, also called array, is a data type whose value contains many other values. Each value in an array is called an element.

First, suppose you have a 6-digit sequence: 1, 2, 6, 7, 3, 4. To store these six numbers you can use 6 variables:

var num1 = 1;
var num2 = 2;
var num3 = 6;
var num4 = 7;
var num5 = 3;
var num6 = 4;

But if it's not 6 numbers but 100, 1000, 10000 numbers, ... then you probably won't be able to use this method.

Luckily, using JavaScript array, you can express these six numbers more succinctly:

var array1 = [1, 2, 6, 7, 3, 4];

In particular, array1 contains the same type elements as number.

Important feature of JavaScript array

Typically, in many programming languages ​​like C / C ++, Java, elements in an array will have the same data type. However, JavaScript array may contain elements with different data types.

Therefore, the following array is valid:

var array2 = [1, "hai", true, 4.5, -7, NaN, null, undefined];

Here, array2 contains elements with completely different types (number, string, boolean, NaN, null, ...).

In addition, an array may also contain other array.

var array1 = [1, 2, [6, 4, 8], 7, [3, 5], 4];

How to access elements in JavaScript array

To access an element in the JavaScript array, you need to use square brackets [], and a positive integer that identifies the index (ordinal number) of the element in the array.

Note: array index always starts at 0. And if you access index outside array or index is not a positive integer, the result will be undefined.

var arr = [1, 3, 5, 0];
console.log(arr[0]);   // => 1
console.log(arr[1]);   // => 3
console.log(arr[4]);   // => undefined
console.log(arr[-1]);  // => undefined
console.log(arr[1.4]); // => undefined

In this example, arr array has 4 elements, whose index starts at 0, so the valid indexes are: 0, 1, 2, 3. When accessing invalid indexes such as 4, -1 , 1.4, the result is undefined.

Properties of JavaScript Array

An important attribute of arrays in JavaScript is length. This property stores the length (number of elements) of the array.

var a = [];
console.log(a.length);
// => 0

var b = [1, 2, 3, 4, 5];
console.log(b.length);
// => 5

If we use the length attribute, we can easily access the last element of the array - the index is length - 1:

var a = ['cat', 'dog', 'fish', 'chicken'];
console.log(a[a.length - 1]);
// => chicken

Method of array

JavaScript provides many methods that can be used with arrays. Here are some common methods:

Array.isArray(obj)

Checks whether obj is an array or not. If true, returns true, otherwise returns false.

console.log(Array.isArray([1, 2, 3])); // => true
console.log(Array.isArray(1, 2, 3));   // => false
console.log(Array.isArray('hehe'));    // => false
console.log(Array.isArray({a:1, b:2}));// => false

Array.of([e1], [e2], ...)

Returns a new Array containing elements e1, e2 ..

var a = Array.of();
console.log(a);
// => []

var b = Array.of(1, 2, 3);
console.log(b);
// => [1, 2, 3]

var c = Array.of(1, 'hai', null, NaN);
console.log(c);
// => [1, 'hai', null, NaN]

array.fill(value, [start], [end])

Replace all elements in the array with index >= start and < end by value as value. With default start is 0 and the default end is the length of the array.

Note: start or end may be negative. Then we will understand that the start corresponds to the length + start and the end corresponds to the length + end index.

var a = [2, 4, 5, 10];
a.fill(6);
console.log(a);
// => [6, 6, 6, 6]

a.fill(3, 1);
console.log(a);
// => [6, 3, 3, 3]

a.fill(2, 2, 4);
console.log(a);
// => [6, 3, 2, 2]

a.fill(5, -4, -2);
console.log(a);
// => [5, 5, 2, 2]

array.push([e1], [e2], ...)

Add to the end of the array the values ​​e1, e2, ... and returns the new length of the array.

var a = [];
console.log(a);
// => []

var len = a.push(10);
console.log(len, a);
// => 1 [10]

len = a.push(2, 3);
console.log(len, a);
// => 3 [10, 2, 3];

len = a.push([4, 1], 'hihi');
console.log(len, a);
// => 5 [10, 2, 3, [4, 1], 'hihi']

array.pop()

Remove the last element of the array and return the value of that element. If the array is initially empty, the result is undefined.

var a = ['one', 'two', 'three'];
var t = a.pop();
console.log(t); // => three
console.log(a); // => ['one', 'two']

var e = [];
t = e.pop();
console.log(t); // => undefinded

array.reverse()

Reverse the value of the array (the last element goes to the first and the first element goes to the end). Also returns the value of the newly reversed array.

var b = [9, 10, 11, 12];
var r = b.reverse();
console.log(b); // => [12, 11, 10, 9]
console.log(r); // => [12, 11, 10, 9]

array.shift()

Remove the first element of the array and return the value of that element.

var s = ['car', 'bike', 'train'];
var e = s.shift();
console.log(e); // => car
console.log(s); // => ['bike', 'train']

array.unshift([e1], [e2], ...)

Add one or more elements to the first of the array and the new length of the array.

var m = [1, 3, 5, 7];
var len = m.unshift(9, 8, NaN);
console.log(m);   // => [9, 8, NaN, 1, 3, 5, 7]
console.log(len); // => 7

array.splice(start, [deleteCount], [e1], [e2], ...)

Remove the number of elements as deleteCount at the start position and then add the elements e1, e2. The result is an array of omitted elements.

start: if start >= 0 then start is the index at the element that starts to change, whereas start < 0, start is the number of elements from the end of the array.

deleteCount: An integer that specifies the number of elements to be deleted. If deleteCount = 0, no elements are deleted. If you do not use deleteCount then deleteCount = (array.length - start) by default, means that elements from start to end of array will be deleted.

e1, e2, ...: Add the start position of elements e1, e2, ...

var a = [10, 11, 12, 13];
var b = a.splice(2, 0);
console.log(a); // => [10, 11, 12, 13]
console.log(b); // => []

var c = a.splice(2, 1);
console.log(a); // => [10, 11, 13]
console.log(c); // => [12]

var d = a.splice(2, 1, 15, 16, 17);
console.log(a); // => [10, 11, 15, 16, 17]
console.log(d); // => [13]

var e = a.splice(-2, 1);
console.log(a); // => [10, 11, 15, 17]
console.log(e); // => [16]

var f = a.splice(2);
console.log(a); // => [10, 11]
console.log(f); // => [15, 17]

array.concat([value1], [value2], ...)

Returns the new array by taking the current array connected to value1, value2, ... elements.

var c = ['a', 'b', 'c'];
var d = [1, 2, 3];

var e = c.concat(d);
console.log(c); // => ['a', 'b', 'c']
console.log(e); // => ['a', 'b', 'c', 1, 2, 3]

var f = c.concat(1, 2);
console.log(f); // => ['a', 'b', 'c', 1, 2]

var g = c.concat(['hello', 'hi'], 1);
console.log(g); // => ['a', 'b', 'c', 'hello', 'hi', 1]

array.includes(searchElement, [fromIndex])

Checks whether the current array from fromIndex contains the searchElement element. If exists, it returns true, otherwise returns false.

fromIndex: If not, the default is 0. If fromIndex < 0, the position to start searching is array.length + fromIndex.

var a = [0, 2, 4, 6, 8];
console.log(a.includes(1));    // => false
console.log(a.includes(2));    // => true
console.log(a.includes(4, 1)); // => true
console.log(a.includes(4, 3)); // => false
console.log(a.includes(6,-2)); // => true
console.log(a.includes(2,-2)); // => false

array.indexOf(searchElement, [fromIndex])

Returns the position of the first element in the array with the searchElement value, calculated from the position fromIndex. If not found then return -1.

fromIndex: If not, the default is 0. If fromIndex > array.length, the result is -1. If fromIndex <0, the position to start searching is array.length + fromIndex. If starting position search <0, the whole array will be searched.

var a = [0, 2, 3, 4];
console.log(a.indexOf(2));    // => 1
console.log(a.indexOf(2, 2)); // => -1
console.log(a.indexOf(3,-2)); // => 2
console.log(a.indexOf(4, 10));// => -1

array.lastIndexOf(searchElement, [fromIndex])

Similar to array.indexOf, but the result returned will be the first element to be found from the position fromIndex back to the beginning (search opposite of array.indexOf).

var x = [1, 2, 3, 4, 3, 2, 1];
console.log(x.lastIndexOf(2));   // => 5
console.log(x.lastIndexOf(3, 3));// => 2
console.log(x.lastIndexOf(3, 5));// => 2

array.toString()

Convert all elements in the array into strings and merge them into a new string. If an element is null or undefined, it will be converted to an empty string.

var a = [1, 2, [3, 4], 'hello', null, NaN, undefined];
var b = a.toString();
console.log(b);
// => 1,2,3,4,hello,,NaN,

array.join([seperator])

Similar to array.toString(), however you can customize the separator. At this point the elements will be separated by the seperator. If not declared, the default seperator is a comma ",".

var a = [1, 2, [3, 4], 'hello', null, NaN, undefined];
var b = a.join();
console.log(b);
// => 1,2,3,4,hello,,NaN,

var c = a.join('-');
console.log(c);
// => 1-2-3,4-hello--NaN-