A brief analysis of some operating methods of Array objects in JS (with code)

In the previous article "This article explains some operating methods of Object objects in JS (share)", we learned about some operating methods of Object objects in JS. The following article will help you understand some operating methods of Array objects in JS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

##javascriptArraySome efficient operation methods

Array.from()

Method creates a new array instance from an array-like or iterable object.

console.log(Array.from("foo"));
// expected output: Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], (x) => x + x));
// expected output: Array [2, 4, 6]

Array.isArray()

is used to determine whether the passed value is an

Array.

Array.isArray([1, 2, 3]);
// true
Array.isArray({ foo: 123 });
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

Array.obsolete()

Used to asynchronously monitor changes in the array

has been deprecated Syntax: Array.observe( arr, callback)

Array.of()

method creates a new array instance with a variable number of arguments, regardless of the number or type of arguments.

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
//es5
if (!Array.of) {
  Array.of = function () {
    return Array.prototype.slice.call(arguments);
  };
}

Array.concat()

The method is used to merge two or more arrays. This method does not change the existing array, but returns a new array.

var array1 = ["a", "b", "c"];
var array2 = ["d", "e", "f"];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]

Array.copyWithin()

The method shallowly copies a portion of an array to another location in the same array and returns it without modifying its size. The

var array1 = [1, 2, 3, 4, 5];

// place at position 0 the element between position 3 and 4
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array [4, 2, 3, 4, 5]

// place at position 1 the elements after position 3
console.log(array1.copyWithin(1, 3));
// expected output: Array [4, 4, 5, 4, 5]

Array.entries()

method returns a new

Array Iterator object that contains the key/value pairs for each index in the array.

var array1 = ["a", "b", "c"];

var iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "a"]

console.log(iterator1.next().value);
// expected output: Array [1, "b"]

Array.every()

The method tests whether all elements of the array pass the test of the specified function.

var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every((x) => x < 40));
//out true

Array.fill()

The method fills all elements in an array from the starting index to the ending index with a fixed value. Excluding termination

var array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]
// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]
console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

Array.filter()

The method creates a new array containing all elements of the test implemented by the provided function.

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];

const result = words.filter((word) => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Array.find()

The method returns the value of the first element in the array that satisfies the provided test function. Otherwise

undefined is returned.

var array1 = [5, 12, 8, 130, 44];

var found = array1.find((x) => x > 10);

console.log(found);
// expected output: 12

Array.findIndex()

The method returns the index of the first element in the array that satisfies the provided test function. Otherwise return

-1.

var array1 = [5, 12, 8, 130, 44];

var index = array1.findIndex((x) => x > 10);

console.log(index);
// expected output: 1

Array.flat()

The method will recurse to the specified depth to connect all sub-arrays and return a new array.

var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

Array.flatMap()

The method first maps each element using a mapping function and then compresses the result into a new array. It's almost identical to

flat with map and depth value 1, but flatMap is usually slightly more efficient when combined into one method.

var arr1 = [1, 2, 3, 4];

arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]

Array.forEach()

The method executes the provided function once for each element of the array.

var array1 = ["a", "b", "c"];

array1.forEach((value, index, arr) => console.log(value));
// output 'a'
// output 'b'
// output 'c'

Array.includes(value,index)

method is used to determine whether an array contains a specified value. Depending on the situation, if it does, it will return

true, otherwise Return false.

var array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

var pets = ["cat", "dog", "bat"];

console.log(pets.includes("cat"));
// expected output: true

console.log(pets.includes("at"));
// expected output: false

Array.indexOf()

The method returns the first index where a given element can be found in the array, or

-1 if it does not exist.

/var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

Array.join()

The method joins all elements of an array (or an array-like object) into a string and returns this character

var elements = ["Fire", "Wind", "Rain"];

console.log(elements.join());
// expected output: Fire,Wind,Rain

console.log(elements.join(""));
// expected output: FireWindRain

console.log(elements.join("-"));
// expected output: Fire-Wind-Rain

//数组[1,2,3,3,4,5]求和
eval([1, 2, 3, 3, 4, 5].join("+")) = 18;

Array. The keys()

method returns a new

Array iterator containing the keys for each index in the array.

var array1 = ["a", "b", "c"];
var iterator = array1.keys();

for (let key of iterator) {
  console.log(key); // expected output: 0 1 2
}

Array.lastIndexOf(item, index)

method returns the index of the last element in the array (that is, a valid

JavaScript value or variable), If it does not exist, -1 is returned. Search forward from the back of the array, starting from fromIndex.

var animals = ["Dodo", "Tiger", "Penguin", "Dodo"];

console.log(animals.lastIndexOf("Dodo"));
// expected output: 3

console.log(animals.lastIndexOf("Tiger"));
// expected output: 1

Array.map()

The method creates a new array whose result is the result of calling a provided function on each element in the array.

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

Array.pop()

The method removes the last element from the array and returns the value of the element. This method changes the length of the array.

var plants = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"];
console.log(plants.pop());
// expected output: "tomato"
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

Array.push()

The method adds one or more elements to the end of the array and returns the length of the new array.

var animals = ["pigs", "goats", "sheep"];

console.log(animals.push("cows"));
// expected output: 4

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push("chickens");

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens"]

Array.reduce()

The method applies a function to the accumulator and each element in the array (from left to right), reducing it to a single value.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Array.reduceRight()

The method accepts a function as an accumulator (

accumulator) and each value of the array (from right to left) reduces it to single value.

const array1 = [
  [0, 1],
  [2, 3],
  [4, 5],
].reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));

console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]

Array.reverse()

The method reverses the position of the elements in the array.

var array1 = ["one", "two", "three"];
console.log("array1: ", array1);
// expected output: Array ['one', 'two', 'three']

var reversed = array1.reverse();
console.log("reversed: ", reversed);
// expected output: Array ['three', 'two', 'one']

/* Careful: reverse is destructive. It also changes
the original array */

console.log("array1: ", array1);
// expected output: Array ['three', 'two', 'one']

Array.shift()

The method removes the first element from the array and returns the value of the element. This method changes the length of the array.

var array1 = [1, 2, 3];

var firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

Array.slice()

The method returns a shallow copy of a portion of the selected array from start to end (excluding the end) to a new array object. And the original array will not be modified.

var animals = ["ant", "bison", "camel", "duck", "elephant"];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

Array.some()

The method tests whether some elements in the array pass a test implemented by the provided function.

var array = [1, 2, 3, 4, 5];

var even = function (element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));
// expected output: true

Array.sort()

方法用原地算法对数组的元素进行排序，并返回数组。排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

var months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21];
array1.sort();
console.log(array1);
// expected output: Array [1, 21, 30, 4]

Array.splice()

方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

var months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb");
// 增
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, "May");
// 改
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']
// 删
months.splice(4, 1);
console.log(months);
//output： ["Jan", "Feb", "March", "April"]

Array.toLocaleString()

返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

var array1 = [1, "a", new Date("21 Dec 1997 14:12:00 UTC")];
var localeString = array1.toLocaleString("en", { timeZone: "UTC" });

console.log(localeString);
// expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary
var prices = ["￥7", 500, 8123, 12];
prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" });

// "￥7,￥500,￥8,123,￥12"

Array.toSource()

返回一个字符串,代表该数组的源代码。

该特性是非标准的，请尽量不要在生产环境中使用它！

var alpha = new Array("a", "b", "c");

alpha.toSource(); //返回["a", "b", "c"]

Array.toString()

返回一个字符串，表示指定的数组及其元素。

var array1 = [1, 2, "a", "1a"];

console.log(array1.toString());
// expected output: "1,2,a,1a"

Array.unshift()

方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

var array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

Array.values()

方法返回一个新的Array Iterator对象，该对象包含数组每个索引的值。

const array1 = ["a", "b", "c"];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
  // expected output: "a" "b" "c"
}

推荐学习：JavaScript视频教程

The above is the detailed content of A brief analysis of some operating methods of Array objects in JS (with code). For more information, please follow other related articles on the PHP Chinese website!