Some of summary js

Write a lot of code is a lump of feces before suddenly discovered recently ah ==

For example, in an array I use (for .. in) to traverse, only to find some of their own mistakes, the use of similar operations in the json.parse vue page. .

After learning to be good, ah, I can not repeat some of the low-level small mistakes.

First, an array of 15 kinds of common operations

1. iterate

(1) Method a:

for ... of loop

const numbers = [1, 3, 5];

for (const num of numbers) {
  console.log(num);
}
// 1
// 3
// 5

You can use the break statement to stop the walk

(2) Method II:

for loop

const numbers = [1, 3, 5];

for (let i; i < numbers.length; i++) {
  console.log(numbers);
}
// 1
// 3
// 5

You can always use the breakstatement to stop the walk.

(3) Method III:

array.forEach () method

array.forEach(callback)By calling the method on each array item callbackto traverse an array entry function.

In each iteration, the following parameters are invoked callback(item [, index [, array]]): the current through the items, the current traversing the index and the array itself.

const numbers = [1, 3, 5];

numbers.forEach(function callback(item, index) {
  console.log(value, index);
});
// 1, 0
// 2, 1
// 5, 2

It can not be interrupted array.forEach()iteration.

2. mapping the array, a new array obtained, without changing the original voxel group

(1) Array.map()Method

array.map(callback) Methods used on each array item callbackto create a new array result of the call.

In each traversal callback(item[, index[, array]])using a parameter called: the current item, index, and the array itself, and should return the new item.

Example: Each array element plus 1

const numbers = [1, 3, 5];

const newNumbers = numbers.map(function increment(number) {
  return number + 1;
});

newNumbers; // => [2, 4, 6]

array.map()Create a new mapping array, without altering the original array.

(2) Array.from Method

Array.from(arrayLike[, callback])Methods used on each array item callback to create a new array result of the call.

In each traversal callback(item[, index[, array]])using a parameter called: the current item, index, and the array itself and should return the new item.

Example:

const numbers = [1, 3, 5];

const newNumbers = Array.from(numbers,
  function increment(number) {
    return number + 1;
  }
);

newNumbers; // => [2, 4, 6]

Array.from()Create a new mapping array, without altering the original array.
Array.from()More suitable mapping from an array-like object.

3. simplify array

Array.reduce() method

array.reduce(callback[, initialValue])By calling callback to reduce the array as a function value.

In each iteration of callback(accumulator, item[, index[, array]])using a parameter called: the accumulator, the current item, index, and the array itself and should return accumulator.

Example: an array of summing

const numbers = [2, 0, 4];

function summarize(accumulator, number) {
  return accumulator + number;
}

const sum = numbers.reduce(summarize, 0);

4. The data connection

(1) array.concat() Method

array.concat(array1[, array2, ...])The array is connected to one or more of the original array.

const arr1 = ['1', '2'];
const arr2 = ['3', '4'];

const newArr = arr1.concat(arr2);

newArr; // => ['1', '2', '3', '4']

Expand operator (2) by using the array to obtain a new array

[...array1, ...array2]

const arr1 = ['1', '2'];
const arr2 = ['3', '4'];

const numbers = [...arr1, ...arr2];

numbers; // => ['1', '2', '3', '4']

The acquisition fragment array

array.slice() method

array.slice([fromIndex [，toIndex]])Returns an array of fragments, the segment from the fromIndexbeginning to toIndexend (not including toIndexitself). fromIndexOptional parameter defaults 0, toIndexoptional parameter defaultsarray.length。

const numbers = [1, 2, 3, 4];

const arr1 = names.slice(0, 2);
const arr2 = names.slice(2);

arr1; // => [1, 2]
arr2; // => [3, 4]

array.slice () to create a new array, without altering the original array.

Guess you like