S 28
S 28
/*
- Non-Mutator methods are functions that do not modify or change an array
after they're created
- These methods do not manipulate the original array performing various
tasks such as returning elements from an array and combining arrays and printing
the output
*/
let countries = ['US', 'PH', 'CAN', 'SG', 'TH', 'PH', 'FR', 'DE'];
// indexOf()
/*
- Returns the index number of the first matching element found in an array
- If no match was found, the result will be -1.
- The search process will be done from first element proceeding to the last
element
- Syntax
arrayName.indexOf(searchValue);
arrayName.indexOf(searchValue, fromIndex);
*/
let firstIndex = countries.indexOf('PH');
console.log('Result of indexOf method: ' + firstIndex);
// lastIndexOf()
/*
- Returns the index number of the last matching element found in an array
- The search process will be done from last element proceeding to the first
element
- Syntax
arrayName.lastIndexOf(searchValue);
arrayName.lastIndexOf(searchValue, fromIndex);
*/
// Getting the index number starting from the last element
let lastIndex = countries.lastIndexOf('PH');
console.log('Result of lastIndexOf method: ' + lastIndex);
// slice()
/*
- Portions/slices elements from an array AND returns a new array
- Syntax
arrayName.slice(startingIndex);
arrayName.slice(startingIndex, endingIndex);
*/
// toString()
/*
- Returns an array as a string separated by commas
- Syntax
arrayName.toString();
*/
let stringArray = countries.toString();
console.log('Result from toString method:');
console.log(stringArray);
// concat()
/*
- Combines two arrays and returns the combined result
- Syntax
arrayA.concat(arrayB);
arrayA.concat(elementA);
*/
let tasksArrayA = ['drink html', 'eat javascript'];
let tasksArrayB = ['inhale css', 'breathe sass'];
let tasksArrayC = ['get git', 'be node'];
// join()
/*
- Returns an array as a string separated by specified separator string
- Syntax
arrayName.join('separatorString');
*/
console.log(users.join());
console.log(users.join(''));
console.log(users.join(' - '));
// Iteration Methods
/*
- Iteration methods are loops designed to perform repetitive tasks on
arrays
- Iteration methods loops over all items in an array.
- Useful for manipulating array data resulting in complex tasks
- Array iteration methods normally work with a function supplied as an
argument
- How these function works is by performing tasks that are pre-defined
within an array's method.
*/
// forEach()
/*
- Similar to a for loop that iterates on each array element.
- For each item in the array, the anonymous function passed in the
forEach() method will be run.
- The anonymous function is able to receive the current item being iterated
or loop over by assigning a parameter.
- Variable names for arrays are normally written in the plural form of the
data stored in an array
- It's common practice to use the singular form of the array content for
parameter names used in array loops
- forEach() does not return anything.
- Syntax
arrayName.forEach(function(indivElement) {
statement
})
*/
allTasks.forEach(function(task) {
console.log(task);
});
// console.log(task)
// console.log(task)
}
});
// every()
/*
- Checks if all elements in an array meet the given condition
- This is useful for validating data stored in arrays especially when
dealing with large amounts of data
- Returns a true value if all elements meet the condition and false if
otherwise
- Syntax
let/const resultArray = arrayName.every(function(indivElement) {
return expression/condition;
})
*/
let allValid = numbers.every(function(number) {
return (number < 3);
});
console.log("Result of every method:");
console.log(allValid);
// some()
/*
- Checks if at least one element in the array meets the given condition
- Returns a true value if at least one element meets the condition and
false if otherwise
- Syntax
let/const resultArray = arrayName.some(function(indivElement) {
return expression/condition;
})
*/
let someValid = numbers.some(function(number) {
return (number < 2);
});
console.log("Result of some method:");
console.log(someValid);
// Combining the returned result from the every/some method may be used in
other statements to perform consecutive results
if (someValid) {
console.log('Some numbers in the array are greater than 2');
};
// filter()
/*
- Returns new array that contains elements which meets the given condition
- Returns an empty array if no elements were found
- Useful for filtering array elements with a given condition and shortens
the syntax compared to using other array iteration methods
- Mastery of loops can help us work effectively by reducing the amount of
code we use
- Several array iteration methods may be used to perform the same result
- Syntax
let/const resultArray = arrayName.filter(function(indivElement) {
return expression/condition;
})
*/
// No elements found
let nothingFound = numbers.filter(function(number) {
return (number = 0);
})
console.log("Result of filter method:");
console.log(nothingFound);
//includes()
/*
- includes() method checks if the argument passed can be found in the
array.
- it returns a boolean which can be saved in a variable.
- returns true if the argument is found in the array.
- returns false if it is not.
- Syntax:
arrayName.includes(<argumentToFind>)
*/
console.log(productFound1);//returns true
console.log(productFound2);//returns false
/*
- Methods can be "chained" using them one after another
- The result of the first method is used on the second method until all
"chained" methods have been resolved
- How chaining resolves in our example:
1. The "product" element will be converted into all lowercase letters
2. The resulting lowercased string is used in the "includes" method
*/
let filteredProducts = products.filter(function(product){
return product.toLowerCase().includes('a');
})
console.log(filteredProducts);