Array operations are commonly used in JS

How to change the original array:

1. push: add elements to the end of the array and return the new length

2. pop: delete last and returns the removed element

3. unshift: adds an element to the beginning of the array and returns the new length

4. shift: shifts the first Delete elements and return deleted elements. If empty, it is undefined

5. reverse: reverse the order of the array

6. sort: sort the array

7. splice: delete, add, replace array elements, return the deleted array, if there is no deletion, it will not return

will not change the original array Operation method:

1. concat: concatenate multiple arrays and return a new array

2. join: separate all elements in the array with parameters Put a character

3. slice: Return the selected element

4. map(es6): Array mapping is new Array

5. filter(es6): Array filtering, returns all new arrays generated after judging by the method (when judged to be true)

6. forEach: Array traversal, no return value

7. every(es6): For each item in the array Run the given function, return true if each item is true, otherwise return false

8. some(es6): Run the given element on the array Function, if one of the items is true, it returns true. At this time, the remaining elements will not be tested again. If all of them are false, it returns false

9. find(es6) : Find the first element in the array that meets the conditions of the test method (function), and return the element

10. reduce(es6): The method receives a The function acts as an accumulator, and each value in the array (from left to right) starts to decrease, eventually counting to one value.

11. indexOf: The method returns the first index where a given element can be found in the array, or -1 if it does not exist.

12. includes(es7): The method is used to determine whether an array contains a specified value. Depending on the situation, it will be returned if it contains true, otherwise false is returned.

Use

// 连接数组
//concat方法
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
array1.concat(array2); // ["a", "b", "c", "d", "e", "f"]
// 展开运算符方法
[...array1, ...array2] // ["a", "b", "c", "d", "e", "f"]



//循环
var arr = ['a', 'b', 'c'];
arr.forEach(function(element, index) {
  console.log(element + ',' + index);
});
// a , 0
// b , 1
// c , 2

// 箭头函数写法
arr.forEach((element,index) => console.log(element,index));



//循环映射(map)
var numbers = [1, 5, 10, 15];
let doubles = numbers.map((item, index) => item * 2);
// [2, 10, 20, 30]

// 数组是否元素包含(includes)
let a = [1, 2, 3];
a.includes(2);
// true
a.includes(4);
// false



//查找元素(find)
//查找数组中大于等于15的元素，并且返回第一个元素
var ret = [12, 5, 8, 130, 44].find(function(element) {
    return element >= 15; // 方法需要有返回值，判断得出true或者false，返回为true的元素
  }
);
// 130



// 过滤数组(filter)
// 过滤数组中大于等于10的元素并且返回新数组
var filtered = [12, 5, 8, 130, 44].filter(function(value) {
    return value >= 10; // 方法需要有返回值，判断得出true或者false，返回为true的元素
  }
);
// [12, 130, 44]



// 循环判断(every) 为每个元素都执行
var passed = [12, 5, 8, 130, 44].every(function (element, index, array) {
  return (element >= 10);
});
// false


// 循环判断(some) 遇到返回值为true的就停止执行
var passed = [12, 5, 8, 130, 44].some(function (element, index, array) {
  return (element >= 10);
});
// true



// 数组截取(slice) 不改变原数组
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
animals.slice(2)  // ["camel", "duck", "elephant"]  返回数组从下标2开始直到结尾的一个新数组
animals.slice(2, 4)  //["camel", "duck"]  返回数组从下标2到4之间到一个新数组



// 数组减接(splice)  改变原数组
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
myFish.splice(2, 0, 'drum'); // ["angel", "clown", "drum", "mandarin", "sturgeon"]    0为删减个数，在索引为2的位置不删减并且插入'drum'
myFish.splice(2, 1); //  ["angel", "clown", "mandarin", "sturgeon"]       从索引为2的位置删除1项（也就是'drum'这一项）



// 使用 lastIndexOf
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2); // index === 3
var index = array.lastIndexOf(8); // index === -1



// 数组转字符串(join)
let a = ['Wind', 'Rain', 'Fire'];
a.join() //默认为逗号分隔
// 'Wind,Rain,Fire'
a.join("-") // 用 - 分隔
// 'Wind-Rain-Fire'



// es6 数组去重
let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
let set = new Set(array);
let newarr = Array.from(set);
// newarr === [1, 2, 3, 4, 5]

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to set cookies in the front-end

How to prevent event propagation in the front-end

The above is the detailed content of Array operations are commonly used in JS. For more information, please follow other related articles on the PHP Chinese website!