1, the Object

Object is one of the most commonly used types in ECMAScript.

create

There are two ways to explicitly create an instance of Object. The first is to use the new operator and Object constructor,

let person = new Object(a);Copy the code

Another approach is to use object literal notation.

let person = {
 name: "Nicholas".age: 29
};
Copy the code

Storage of attributes

Although attributes are generally accessed through point syntax, which is the convention of object-oriented languages, they can also be accessed using brackets. The main advantage of using brackets is that you can access properties through variables,

2, Array

An ECMAScript array is also an ordered set of data, but unlike other languages, each slot in the array can store any type of data.

create

One way is to use the Array constructor. Another way to create an Array is to use Array literals

detection

  • Use the instanceof operator
  • Array. The isArray () method

The iteration

In ES6, the Array prototype exposed three methods for retrieving the contents of an Array: keys(), values(), and entries().

  • Keys () returns an iterator to the array index
  • Values () returns an iterator for an array element
  • And entries() returns an iterator for index/value pairs:

The stack method

  • The push() method takes any number of arguments and adds them to the end of the array, returning the latest length of the array.

  • The pop() method removes the last item of the array, reducing the length value of the array and returning the deleted item.

Queue method

  • Shift (), which removes the first item in the array and then decreases the array length by one, returning the deleted item.
  • unshift()Do the opposite of shift(), add any number of values to the top of the array, andReturns the new array length.

Sorting method

  • Reverse () sorts the arrays backwards, returning a reference to the array that called them.

  • Sort () rearranges the array elements in ascending order, with the smallest value in front and the largest value behind. And returns a reference to the array that called them.

    Sort () calls the String() transformation function on each item and compares the strings to determine the order.

    let values = [0.1.5.10.15];
values.sort();
alert(values); / / 0,1,10,15,5
Copy the code

    The sort method can accept a comparison function to determine which value should come first.

    function compare(value1, value2) {
 if (value1 < value2) {
 return -1;
 } else if (value1 > value2) {
 return 1;
 } else {
 return 0; }}let values = [0.1.5.10.15];
values.sort(compare);
alert(values); / / 0,1,5,10,15
Copy the code

Operation method

  • The Contact () method is used to join array elements, first creating a copy of the current array, then adding its arguments to the end of the copy, and finally returning the newly constructed array.

  • The **slice() method ** is used to create a new array containing one or more elements of the original array.

    let colors = ["red"."green"."blue"."yellow"."purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1.4);
alert(colors2); // green,blue,yellow,purple
alert(colors3); // green,blue,yellow
Copy the code

  • **splice() ** The main purpose is to insert elements in the middle of an array, but there are three different ways to use this method. The splice() method always returns an array containing the elements that were deleted from the array (or an empty array if no element was deleted).

    • Delete it. Splice () needs to be passed two parameters: the location of the first element to delete and the number of elements to delete. You can remove any number of elements from an array, such as splice(0, 2), which removes the first two elements.

    • Insert. Splice () needs to be passed three arguments: the start position, 0 (number of elements to delete), and the element to insert, which can be inserted at the specified position in the array. The third argument can be followed by a fourth argument, a fifth argument, or any number of elements to be inserted. For example, splice(2, 0, “red”, “green”) inserts the strings “red” and “green” from array position 2.

    • Replacement. Splice () inserts new elements at specified positions while deleting elements, again passing in three arguments: the starting position, the number of elements to delete, and any number of elements to insert. The number of elements to be inserted is not necessarily the same as the number of elements to be deleted. For example, splice(2, 1, “red”, “green”) removes an element at position 2 and inserts “red” and “green” into the array starting at that position.

Search and location methods

ECMAScript provides two types of methods for searching arrays: by strict equality and by assertion functions.

Strictly equal

  • The indexOf() and lastIndexOf() methods both return the position of the element in the array. IndexOf() searches from an array, and lastIndexOf() searches from the end of the array
  • Includes () returns a Boolean value indicating whether at least one item matching the specified element was found.

Assertion functions

The assertion function takes ** three arguments: the element, the index, and the array itself. ** Where the element is the currently searched element in the array, the index is the index of the current element, and the array is the array being searched.

The find() and findIndex() methods use assertion functions. Both methods start with the smallest index of the array. Find () returns the first matched element, and findIndex() returns the index of the first matched element. Both methods also accept an optional second argument that specifies the value of this inside the assertion function.

const people = [
 {
 name: "Matt".age: 27
 },
 {
 name: "Nicholas".age: 29}]; alert(people.find((element, index, array) = > element.age < 28));
// {name: "Matt", age: 27}
alert(people.findIndex((element, index, array) = > element.age < 28));
/ / 0
Copy the code

After a match is found, neither method continues the search.

An iterative approach

ECMAScript defines five iterative methods for arrays. Each method takes two parameters: a function to run with each parameter, and an optional scoped object that serves as the context in which the function is run (affecting the value of this in the function).

The five iterating methods of an array are as follows :(none of these methods change the array from which they are called)

  • Every () : Runs the passed function on each item of the array. This method returns true if it returns true for each function.

  • Filter () : Runs the function passed in for each item in the array. Items that return true are returned as arrays.

  • ForEach () : Runs the passed function on each item of the array, with no return value.

  • Map () : Runs the passed function on each item of the array, returning an array of the results of each function call.

  • Some () : Runs the passed function on each item of the array, returning true if one of the functions returns true.

    The method name The main purpose The return value
    map() Creates a new array that corresponds to the elements of the original array Returns an array of the results of each function call
    every() Determines whether an element in an arrayThey all fit a certain criteria This method returns true if it returns true for each function
    some() Determines whether an element in an arrayThere are elements that meet certain conditions This method returns true if one of the functions returns true
    filter() Search through an arrayAn element that meets a condition The items that return true are returned as arrays.
    forEach() This is equivalent to using the for loop to iterate over the array No return value. 
    / / every some methods
let numbers = [1.2.3.4.5.4.3.2.1];
let everyResult = numbers.every((item, index, array) = > item > 2);
alert(everyResult); // false
let someResult = numbers.some((item, index, array) = > item > 2);
alert(someResult); // true
/ / filter method
let numbers = [1.2.3.4.5.4.3.2.1];
let filterResult = numbers.filter((item, index, array) = > item > 2);
alert(filterResult); / / 3,4,5,4,3
/ / the map method
let numbers = [1.2.3.4.5.4.3.2.1];
let mapResult = numbers.map((item, index, array) = > item * 2);
alert(mapResult); / / 2,4,6,8,10,8,6,4,2
/ / the forEach method
let numbers = [1.2.3.4.5.4.3.2.1];
numbers.forEach((item, index, array) = > {
 // Perform some operations
});
Copy the code

    Merge method

    Reduce () and reduceRight() both iterate over all the items in the array and build a final return value based on that. The reduce() method iterates from the first item of the array to the last. While reduceRight() traverses from the last item to the first item.

3, the Map

A new feature of ECMAScript 6, Map is a new collection type that brings true key/value storage to the language. Most of Map’s features can be implemented with the Object type, but there are some subtle differences. Which one to use in specific practice is still worth careful screening.

Basic API

Use the new keyword and the Map constructor to create an empty Map,

Initialize the

Unlike Object, which can only use numeric values, strings, or symbols as keys, Maps can use any JavaScript data type as keys.

// Use the new keyword and the Map constructor to create an empty Map,
const m = new Map(a);// Initialize the map with a nested array
const m1 = new Map([["key1"."val1"],
 ["key2"."val2"],
 ["key3"."val3"]]); alert(m1.size);/ / 3
// Initializes the map using a custom iterator
const m2 = new Map({[Symbol.iterator]: function* () {
 yield ["key1"."val1"];
 yield ["key2"."val2"];
 yield ["key3"."val3"]; }}); alert(m2.size);/ / 3
// Map expected key/value pairs, whether provided or not
const m3 = new Map([[]]);
alert(m3.has(undefined)); // true
alert(m3.get(undefined)); // undefined
Copy the code

Add, delete, query

After initialization, you can add key/value pairs using the set() method. In addition, you can use get() and has() for queries, the size attribute to get the number of key/value pairs in the map, and delete() and clear() to delete values.

const m = new Map(a); alert(m.has("firstName")); // false
alert(m.get("firstName")); // undefined
alert(m.size); / / 0

m.set("firstName"."Matt")
 .set("lastName"."Frisbie");

alert(m.has("firstName")); // true
alert(m.get("firstName")); // Matt
alert(m.size); / / 2

m.delete("firstName"); // Delete only one key/value pair

alert(m.has("firstName")); // false
alert(m.has("lastName")); // true
alert(m.size); / / 1

m.clear(); // Clears all key/value pairs in this mapping instance

alert(m.has("firstName")); // false
alert(m.has("lastName")); // false
alert(m.size); / / 0
Copy the code

Sequence and iteration

One major difference from the Object type is that Map instances maintain the insertion order of key-value pairs, so they can iterate based on the insertion order.

chooseObjectorMap

For most Web development tasks, the choice between Object and Map is a matter of personal preference, with little impact. However, for developers who care about memory and performance, there are significant differences between objects and maps.

  • Memory footprint: GIVEN a fixed size of memory, Map can store approximately 50% more key/value pairs than Object
  • Insert performance: Map has better performance.
  • Lookup speed The performance difference between a large Object and a Map for finding key/value pairs is minimal, but if only a small number of key/value pairs are included, Object is sometimes faster.
  • Deleting a performance Map improves performance.

4, the set

ECMAScript 6’s new Set is a new collection type that brings collection data structures to the language. Sets are in many ways like enhanced maps because most of their apis and behaviors are common.

Less used in the project, here temporarily not write ~