Data Structure and Array Set

Data Structure and Array Set

First, what is the Set and Array

• Set a new data structure ES6 provided. Set of elements only once, namely Set in the element is unique. Set is a collection of values.

• Array elements can be of primitive or object types. Array is an ordered set of data.

Two, Set of use

Set similar Array, there are similarities with the Array method. Set a feature that no members of the same (fully equal members).

1. Therefore, without the need to duplicate elements of the data structure can be used instead of Set Array.

2. Meanwhile, since this feature can be used to convert the data structure Set no duplicate array.

Third, the data structures generated and Array Set

• Set Set data structures used to generate the constructor.

const s = new Set();

console.log(s)   // Set []

• Array Array Array constructor may be used to generate.

const arr = new Array();

console.log(arr)  // Array[]​

Four, Set contrast with Array

Properties Comparison

1. Get the number of data structure elements

• Set data structure to obtain the number of members by size. You can not change the value of size.

const s = new Set();

s.add(1).add(2);
console.log(s.size);   // 2

s.size = 3;           // 3
console.log(s.size);  // 2, size 值不可以改变

• Array array to get the number of members by length. Value length can be changed.

const arr1 = new Array(2);

console.log(arr1.length)   // 2(如果用 Array 构造函数创建的数组，其值只有一个，且该值为数字，则该值表示的是该数组的长度)
console.log(arr1)          // [empty × 2]

const arr2 = new Array(1, 2, 3);
console.log(arr2.length)   // 3

arr2.length = 2;
console.log(arr2.length);  // 2，lenght 值可以改变

Methods Comparison

1. Adding elements

• Set data structure by add () method adds a specified value at the end, returns the object itself. You can not add duplicate values.

const s = new Set();
console.log(s)     //  Set []

s.add(1);
console.log(s)     // Set [ 1 ]

s.add(2).add('hello');  // 可以链式调用
console.log(s)     // Set(3) [ 1, 2, 'hello' ]

s.add(2); // 试图添加一个重复的值 2
console.log(s)     // Set(3) [ 1, 2, 'hello' ]

• Array Array () method of one or more elements to the end of the array by push, and returns the new length of the array.

const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');

console.log(count)     // 4
console.log(animals)   // Array ["pigs", "goats", "sheep", "cows"]

• Array Array () method of one or more elements to the beginning of the array by unshift, and returns the new length of the array (which modify the original array).

const arr1 = [1, 2, 3];

console.log(arr1.unshift(4, 5));  // 5
console.log(arr1);                // Array [4, 5, 1, 2, 3]

• Array through the array splice () method is modified by deleting or replacing an existing array of elements or adding new elements in place, and return the content is modified in an array (this method changes the original array).

const months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');     // 在索引为 1 的位置删除 0 个元素，添加 'Feb' 元素
console.log(months);            // Array ["Jan", "Feb", "March", "April", "June"]

2. Removing elements

• Set data structure by delete () method removes the specified element (deleted successfully return true, otherwise returns false).

const s9 = new Set();

s9.add(1).add(2).add(3);  // Set(3) [ 1, 2, 3 ]
s9.delete(4)              // false
s9.delete(3)              // true

• Array Array delete the last element from an array by pop () method, and returns the value of the element (This method changes the length of the array).

const team = ["前端产品组", "前端产品组", "前端产品组", "军工算法组"];
const popped = team.pop();

console.log(team)       // ["前端产品组", "前端产品组", "前端产品组"]
console.log(popped)     // "军工算法组"

• Array through the array shift () method removes the first element from an array, and returns the value of the element (This method changes the length of the array).

const fruits = ['banana', 'apple', 'orange'];
const shifted = fruits.shift();

console.log(shifted)       // "banana"
console.log(fruits)        // Array ["apple", "orange"]

• Array through the array splice () method is modified by deleting or replacing an existing array of elements or adding new elements in place, and return the content is modified in an array (this method changes the original array).

const years = ['1919', '2008', '2018', '2020'];
const spliced = years.splice(1, 1);     // 在索引为 1 的位置删除 1 个元素

console.log(spliced);     // "2008"
console.log(years);       // Array ["1919", "2018", "2020"]

3. Empty elements

• Set data structure by clear () method emptying element members. The return value undefined.

let s = new Set();
s.add(1);
s.add("foo");

s.size;       // 2
s.has("foo"); // true

s.clear();

s.size;       // 0
s.has("bar")  // false

• Array Array length property by setting 0, to empty array.

let arr = new Array(4, 5, 6);
arr.length = 0;

console.log(arr);         // Array []
console.log(arr.length);  // 0

• Array array by setting the value to an empty array to clear the array.

let arr = new Array(4, 5, 6);
arr = [];

console.log(arr);         // Array []
console.log(arr.length);  // 0

4. Determine whether there is an element

• Set data structure to indicate whether there is a value corresponding to the value of the object by Set has (). If the specified value value exists in the Set among objects, returns true; otherwise false.

const s = new Set();
s.add('foo');

console.log(s.has('foo'));  // true
console.log(s.has('bar'));  // false

• Array Array Includes by () method is used to determine whether an array contains a specified value, in some cases, if it contains returns true, otherwise returns false.

const pets = ['cat', 'dog'];

console.log(pets.includes('cat'));   // true
console.log(pets.includes('pig'));   // false

• Array Array () method returns a first index to find a given element in the array by indexOf. If not, it returns -1 if there is an index is returned.

const beasts = ['ant', 'camel', 'duck', 'ant'];

console.log(beasts.indexOf('ant'));       // 0
console.log(beasts.indexOf('ant', 2));    // 3
console.log(beasts.indexOf('dog'));       // -1

5. Interior elements

• Set can use the forEach () traversal members.

let s = new Set([1, 4, 9]);
s.forEach((value, key) => console.log(key + ' : ' + value))

// 1 : 1
// 4 : 4
// 9 : 9

The first parameter is the handler, the parameters of the function followed by "health value, Kin name, the collection itself." Set key value structure is the name of health, so the first parameter and the second parameter is always the same.

• Array can also use the forEach () traversal members.

let arr = new Array(1, 4, 9);
arr.forEach((value, index) => console.log(index + ' : ' + value));

// 0 : 1
// 1 : 4
// 2 : 9

Set the data structure is different, the name of health Array is an ordered array of integers from 0 began. Also known as the index.

• Set data structure further comprises keys (), values ​​(), entries () method to traverse healthy name, key value, key value pairs. Returns the corresponding walker. By for of walker to traverse.

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}

// red
// green
// blue

let set = new Set(['red', 'green', 'blue']);

for (let item of set.values()) {
  console.log(item);
}

// red
// green
// blue

let set = new Set(['red', 'green', 'blue']);

for (let item of set.entries()) {
  console.log(item);
}

// Array [ "red", "red" ]
// Array [ "green", "green" ]
// Array [ "blue", "blue" ]

Five, Set and Array Converter

• Set transfer Array

Array.from () method may be carried forward Set data array.

const setItems = new Set([1, 2, 3, 4, 5]);
const arrayItems = Array.from(setItems);

console.log(setItems);    // Set(5) [ 1, 2, 3, 4, 5 ]
console.log(arrayItems);  // Array(5) [ 1, 2, 3, 4, 5 ]

Because Set can be iterative, ie Set has Iterator interface. So ... Extended operator may also convert the data structures into a Set Array.

const setItems = new Set([1, 2, 3, 4, 5]);
const arrayItems = [...setItems];

console.log(setItems);    // Set(5) [ 1, 2, 3, 4, 5 ]
console.log(arrayItems);  // Array(5) [ 1, 2, 3, 4, 5 ]

• Array turn Set

Set constructor can accept an array as a parameter to initialize. Array achieve turn Set.

const srrayItems = ['hello', 'world'];
const setItems = new Set(srrayItems);

console.log(srrayItems);   // Array [ "hello", "world" ]
console.log(setItems);     // Set [ "hello", "world" ]

Sixth, the array deduplication

Set data structures can not be added because the repeating elements, the constructor Set very suitable for removing duplicate array elements.

1. Set constructor first use, remove duplicate elements in the array; then ... Extended operator into an array.

[...new Set([1, 2, 3, 3, 2])];   // Array [ 1, 2, 3 ]

Similarly, the string may be a method analogous to weight.

[...new Set('ababbc')].join('');   // "abc"

2. Another method is to re-use the Set constructor to remove repeated elements in the array; Array.from reuse extended operator () method into an array.

Array.from(new Set([1, 2, 3, 3, 2]));  // Array [ 1, 2, 3 ]