100 methods string and array es6
Tags: webdev, javascript, beginners, programming
Published: 2024-02-04 13:16:24

Certainly, here is a list of 100 terms related to ES6 array methods and string methods, along with brief explanations:

### ES6 Array Methods:

1. **forEach:** Iterates over array elements, invoking a callback for each.
2. **map:** Creates a new array by applying a function to each element.
3. **filter:** Returns a new array with elements that meet a specified condition.
4. **find:** Returns the first array element that satisfies a testing function.
5. **findIndex:** Returns the index of the first array element that satisfies a testing function.
6. **some:** Checks if at least one element satisfies a condition.
7. **every:** Checks if all elements satisfy a condition.
8. **reduce:** Applies a function to reduce the array to a single value.
9. **includes:** Checks if an array contains a specific element.
10. **indexOf:** Returns the index of the first occurrence of a specified element.

Certainly, let's compare the usage of these array methods in both ES6 (ECMAScript 2015) and traditional JavaScript.

1. **forEach:**
   
   - ES6:
     ```javascript
     const array = [1, 2, 3];
     array.forEach(element => console.log(element));
     ```

   - Traditional:
     ```javascript
     var array = [1, 2, 3];
     array.forEach(function(element) {
       console.log(element);
     });
     ```

2. **map:**

   - ES6:
     ```javascript
     const array = [1, 2, 3];
     const newArray = array.map(element => element * 2);
     ```

   - Traditional:
     ```javascript
     var array = [1, 2, 3];
     var newArray = array.map(function(element) {
       return element * 2;
     });
     ```

3. **filter:**

   - ES6:
     ```javascript
     const array = [1, 2, 3, 4, 5];
     const filteredArray = array.filter(element => element > 2);
     ```

   - Traditional:
     ```javascript
     var array = [1, 2, 3, 4, 5];
     var filteredArray = array.filter(function(element) {
       return element > 2;
     });
     ```

4. **find:**

   - ES6:
     ```javascript
     const array = [1, 2, 3, 4, 5];
     const foundElement = array.find(element => element > 2);
     ```

   - Traditional:
     ```javascript
     var array = [1, 2, 3, 4, 5];
     var foundElement = array.find(function(element) {
       return element > 2;
     });
     ```

5. **findIndex:**

   - ES6:
     ```javascript
     const array = [1, 2, 3, 4, 5];
     const foundIndex = array.findIndex(element => element > 2);
     ```

   - Traditional:
     ```javascript
     var array = [1, 2, 3, 4, 5];
     var foundIndex = array.findIndex(function(element) {
       return element > 2;
     });
     ```

6. **some:**

   - ES6:
     ```javascript
     const array = [1, 2, 3, 4, 5];
     const hasSome = array.some(element => element > 2);
     ```

   - Traditional:
     ```javascript
     var array = [1, 2, 3, 4, 5];
     var hasSome = array.some(function(element) {
       return element > 2;
     });
     ```

7. **every:**

   - ES6:
     ```javascript
     const array = [1, 2, 3, 4, 5];
     const allMeetCondition = array.every(element => element > 0);
     ```

   - Traditional:
     ```javascript
     var array = [1, 2, 3, 4, 5];
     var allMeetCondition = array.every(function(element) {
       return element > 0;
     });
     ```

8. **reduce:**

   - ES6:
     ```javascript
     const array = [1, 2, 3, 4, 5];
     const sum = array.reduce((accumulator, element) => accumulator + element, 0);
     ```

   - Traditional:
     ```javascript
     var array = [1, 2, 3, 4, 5];
     var sum = array.reduce(function(accumulator, element) {
       return accumulator + element;
     }, 0);
     ```

9. **includes:**

   - ES6:
     ```javascript
     const array = [1, 2, 3];
     const hasElement = array.includes(2);
     ```

   - Traditional:
     ```javascript
     var array = [1, 2, 3];
     var hasElement = array.indexOf(2) !== -1;
     ```

10. **indexOf:**

    - ES6 (Note: `indexOf` is the same in both ES6 and traditional):
      ```javascript
      const array = [1, 2, 3];
      const index = array.indexOf(2);
      ```

    - Traditional:
      ```javascript
      var array = [1, 2, 3];
      var index = array.indexOf(2);
      ```

// forEach
// ES6:
const array = [1, 2, 3];
array.forEach(element => console.log(element));
// Output: 1
//         2
//         3

// Traditional:
var array = [1, 2, 3];
array.forEach(function(element) {
  console.log(element);
});
// Output: 1
//         2
//         3

// map
// ES6:
const array = [1, 2, 3];
const newArray = array.map(element => element * 2);
// Output: newArray: [2, 4, 6]

// Traditional:
var array = [1, 2, 3];
var newArray = array.map(function(element) {
  return element * 2;
});
// Output: newArray: [2, 4, 6]

// filter
// ES6:
const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(element => element > 2);
// Output: filteredArray: [3, 4, 5]

// Traditional:
var array = [1, 2, 3, 4, 5];
var filteredArray = array.filter(function(element) {
  return element > 2;
});
// Output: filteredArray: [3, 4, 5]

// find
// ES6:
const array = [1, 2, 3, 4, 5];
const foundElement = array.find(element => element > 2);
// Output: foundElement: 3

// Traditional:
var array = [1, 2, 3, 4, 5];
var foundElement = array.find(function(element) {
  return element > 2;
});
// Output: foundElement: 3

// findIndex
// ES6:
const array = [1, 2, 3, 4, 5];
const foundIndex = array.findIndex(element => element > 2);
// Output: foundIndex: 2

// Traditional:
var array = [1, 2, 3, 4, 5];
var foundIndex = array.findIndex(function(element) {
  return element > 2;
});
// Output: foundIndex: 2

// some
// ES6:
const array = [1, 2, 3, 4, 5];
const hasSome = array.some(element => element > 2);
// Output: hasSome: true

// Traditional:
var array = [1, 2, 3, 4, 5];
var hasSome = array.some(function(element) {
  return element > 2;
});
// Output: hasSome: true

// every
// ES6:
const array = [1, 2, 3, 4, 5];
const allMeetCondition = array.every(element => element > 0);
// Output: allMeetCondition: true

// Traditional:
var array = [1, 2, 3, 4, 5];
var allMeetCondition = array.every(function(element) {
  return element > 0;
});
// Output: allMeetCondition: true

// reduce
// ES6:
const array = [1, 2, 3, 4, 5];
const sum = array.reduce((accumulator, element) => accumulator + element, 0);
// Output: sum: 15

// Traditional:
var array = [1, 2, 3, 4, 5];
var sum = array.reduce(function(accumulator, element) {
  return accumulator + element;
}, 0);
// Output: sum: 15

// includes
// ES6:
const array = [1, 2, 3];
const hasElement = array.includes(2);
// Output: hasElement: true

// Traditional:
var array = [1, 2, 3];
var hasElement = array.indexOf(2) !== -1;
// Output: hasElement: true

// indexOf
// ES6 (Note: indexOf is the same in both ES6 and traditional):
const array = [1, 2, 3];
const index = array.indexOf(2);
// Output: index: 1

// Traditional:
var array = [1, 2, 3];
var index = array.indexOf(2);
// Output: index: 1

   
These examples demonstrate the usage of array methods in both ES6 and traditional JavaScript syntax. ES6 introduces arrow functions and enhanced syntax for better readability and conciseness.

11. **lastIndexOf:** Returns the index of the last occurrence of a specified element.
12. **sort:** Sorts array elements based on a compare function.
13. **reverse:** Reverses the order of array elements.
14. **slice:** Extracts a portion of an array into a new array.
15. **splice:** Changes the contents of an array by removing or replacing existing elements.
16. **concat:** Combines two or more arrays.
17. **isArray:** Checks if an object is an array.
18. **from:** Creates a new array from an iterable object.
19. **of:** Creates a new array with variable arguments.
20. **entries:** Returns an iterable containing key/value pairs for array entries.

Certainly, let's provide example code for each of the additional array methods you've listed in both ES6 and traditional JavaScript.

```javascript
// lastIndexOf
// ES6:
const array = [1, 2, 3, 4, 2, 5];
const lastIndex = array.lastIndexOf(2);
// Output: lastIndex: 4

// Traditional:
var array = [1, 2, 3, 4, 2, 5];
var lastIndex = array.lastIndexOf(2);
// Output: lastIndex: 4

// sort
// ES6:
const array = [3, 1, 4, 1, 5, 9, 2, 6];
const sortedArray = array.sort((a, b) => a - b);
// Output: sortedArray: [1, 1, 2, 3, 4, 5, 6, 9]

// Traditional:
var array = [3, 1, 4, 1, 5, 9, 2, 6];
var sortedArray = array.sort(function(a, b) {
  return a - b;
});
// Output: sortedArray: [1, 1, 2, 3, 4, 5, 6, 9]

// reverse
// ES6:
const array = [1, 2, 3, 4, 5];
const reversedArray = array.reverse();
// Output: reversedArray: [5, 4, 3, 2, 1]

// Traditional:
var array = [1, 2, 3, 4, 5];
var reversedArray = array.reverse();
// Output: reversedArray: [5, 4, 3, 2, 1]

// slice
// ES6:
const array = [1, 2, 3, 4, 5];
const slicedArray = array.slice(1, 4);
// Output: slicedArray: [2, 3, 4]

// Traditional:
var array = [1, 2, 3, 4, 5];
var slicedArray = array.slice(1, 4);
// Output: slicedArray: [2, 3, 4]

// splice
// ES6:
const array = [1, 2, 3, 4, 5];
const splicedArray = array.splice(2, 2, 6, 7);
// Output: splicedArray: [3, 4]

// Traditional:
var array = [1, 2, 3, 4, 5];
var splicedArray = array.splice(2, 2, 6, 7);
// Output: splicedArray: [3, 4]

// concat
// ES6:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = array1.concat(array2);
// Output: concatenatedArray: [1, 2, 3, 4, 5, 6]

// Traditional:
var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var concatenatedArray = array1.concat(array2);
// Output: concatenatedArray: [1, 2, 3, 4, 5, 6]

// isArray
// ES6:
const isArrayES6 = Array.isArray([1, 2, 3]);
// Output: isArrayES6: true

// Traditional:
var isArrayTraditional = Array.isArray([1, 2, 3]);
// Output: isArrayTraditional: true

// from
// ES6:
const iterable = 'hello';
const arrayFromIterable = Array.from(iterable);
// Output: arrayFromIterable: ['h', 'e', 'l', 'l', 'o']

// Traditional:
var iterable = 'hello';
var arrayFromIterable = Array.from(iterable);
// Output: arrayFromIterable: ['h', 'e', 'l', 'l', 'o']

// of
// ES6:
const arrayOf = Array.of(1, 2, 3);
// Output: arrayOf: [1, 2, 3]

// Traditional (Note: No direct equivalent in traditional JavaScript, Array.of is an ES6 feature):
var arrayOfTraditional = [1, 2, 3];
// Output: arrayOfTraditional: [1, 2, 3]

// entries
// ES6:
const array = ['a', 'b', 'c'];
const entriesIterator = array.entries();
// Output: entriesIterator: Object [Array Iterator] {}

// Traditional (Note: No direct equivalent in traditional JavaScript, entries is an ES6 feature):
var array = ['a', 'b', 'c'];
var entriesIteratorTraditional = array.entries();
// Output: entriesIteratorTraditional: Object [Array Iterator] {}
```

These examples demonstrate the usage of the additional array methods in both ES6 and traditional JavaScript syntax.
21. **keys:** Returns an iterable containing keys for array entries.
22. **values:** Returns an iterable containing values for array entries.
23. **copyWithin:** Copies a sequence of array elements within the array.
24. **fill:** Fills array elements with a static value.
25. **flat:** Flattens nested arrays.
26. **flatMap:** Maps each element using a function and flattens the result.
27. **Symbol.iterator:** Symbol used to define an iterator method.
28. **Array.from:** Creates a new array from an array-like or iterable object.
29. **Array.of:** Creates a new array with the given elements.
30. **Array.prototype[@@unscopables]:** Symbol used to exclude array methods from the 'with' statement.
31. **ArrayBuffer:** A binary data buffer.
32. **TypedArray:** An array-like view for handling binary data with specific data types.
33. **ArrayBuffer.prototype.slice:** Creates a new ArrayBuffer with a portion of the original.
34. **ArrayBuffer.isView:** Checks if an object is a TypedArray view.
35. **ArrayBuffer.prototype.byteLength:** Returns the length (in bytes) of an ArrayBuffer.
36. **ArrayBuffer.prototype.byteOffset:** Returns the byte offset of a TypedArray from the start of its ArrayBuffer.
37. **ArrayBuffer.prototype.constructor:** Returns the function that created an object's prototype.
38. **ArrayBuffer.prototype.toString:** Returns a string representation of an ArrayBuffer.
39. **ArrayBuffer.prototype.slice:** Extracts a portion of an ArrayBuffer into a new ArrayBuffer.

### ES6 String Methods:

40. **charAt:** Returns the character at a specified index.
41. **charCodeAt:** Returns the Unicode value of the character at a specified index.
42. **concat:** Combines two or more strings.
43. **includes:** Checks if a string contains another string.
44. **endsWith:** Checks if a string ends with a specified value.
45. **startsWith:** Checks if a string starts with a specified value.
46. **indexOf:** Returns the index of the first occurrence of a specified value.
47. **lastIndexOf:** Returns the index of the last occurrence of a specified value.
48. **match:** Searches a string for a specified pattern and returns the matches.
49. **matchAll:** Returns an iterator of all matches for a specified pattern.
50. **replace:** Replaces a specified value or pattern with another value.
51. **search:** Searches a string for a specified value or pattern.
52. **slice:** Extracts a portion of a string and returns it as a new string.
53. **split:** Splits a string into an array of substrings based on a specified delimiter.
54. **substring:** Extracts characters between two specified indices.
55. **toLowerCase:** Converts a string to lowercase.
56. **toUpperCase:** Converts a string to uppercase.
57. **trim:** Removes whitespace from both ends of a string.
58. **padStart:** Pads a string with a specified character until it reaches a specified length.
59. **padEnd:** Pads a string's end with a specified character until it reaches a specified length.
60. **repeat:** Returns a new string by repeating the original string a specified number of times.
61. **normalize:** Returns the Unicode Normalization Form of a string.
62. **String.raw:** Returns a raw string representation of a template literal.
63. **String.fromCharCode:** Returns a string created by using the specified sequence of Unicode values.
64. **String.fromCodePoint:** Returns a string created by using the specified Unicode code points.
65. **String.prototype.codePointAt:** Returns a non-negative integer representing the Unicode code point at a given position.
66. **String.prototype.includes:** Checks if a string contains another string.
67. **String.prototype.endsWith:** Checks if a string ends with a specified value.
68. **String.prototype.startsWith:** Checks if a string starts with a specified value.
69. **String.prototype.repeat:** Returns a new string repeated a specified number of times.
70. **String.prototype.trimStart:** Removes whitespace from the beginning of a string.
71. **String.prototype.trimEnd:** Removes whitespace from the end of a string.
72. **String.prototype.trimLeft:** Removes whitespace from the beginning of a string.
73. **String.prototype.trimRight:** Removes whitespace from the end of a string.
74. **String.prototype[@@iterator]:** Returns a new Iterator object that iterates over the code points of a string.
75. **String.prototype.toLocaleLowerCase:** Returns the calling string converted to lowercase, according to any locale-specific case mappings.
76. **String.prototype.toLocaleUpperCase:** Returns the calling string converted to uppercase, according to any locale-specific case mappings.
77. **String.prototype.padStart:** Pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length.
78. **String.prototype.padEnd:** Pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length.
79. **String.prototype.slice:** Extracts a section of a string and returns it as a new string.
80. **String.prototype.substring:** Returns a subset of a string between one index and another.
81. **String.prototype.substr:** Returns the characters in a string beginning at the specified location through the specified number of characters.
82. **String.prototype.link:** Creates an HTML anchor element for the specified URL.
83. **String.prototype.fontcolor:** Returns an HTML string with a <font> element using the specified color.
84. **String.prototype.fontsize:** Returns an HTML string with a <font> element using the specified font size.
85. **String.prototype.anchor:** Creates an HTML anchor element for the specified URL.
86. **

String.prototype.small:** Returns an HTML string with a <small> element.
87. **String.prototype.blink:** Returns an HTML string with a <blink> element.
88. **String.prototype.bold:** Returns an HTML string with a <b> element.
89. **String.prototype.fixed:** Returns an HTML string with a <tt> element.
90. **String.prototype.strike:** Returns an HTML string with a <strike> element.
91. **String.prototype.sup:** Returns an HTML string with a <sup> element.
92. **String.prototype.sub:** Returns an HTML string with a <sub> element.
93. **String.prototype.big:** Returns an HTML string with a <big> element.
94. **String.prototype.italics:** Returns an HTML string with an <i> element.
95. **String.prototype.small:** Returns an HTML string with a <small> element.
96. **String.prototype.sup:** Returns an HTML string with a <sup> element.
97. **String.prototype.sub:** Returns an HTML string with a <sub> element.
98. **String.prototype.link:** Creates an HTML anchor element for the specified URL.
99. **String.prototype.fontcolor:** Returns an HTML string with a <font> element using the specified color.
100. **String.prototype.fontsize:** Returns an HTML string with a <font> element using the specified font size.