JS、Array-Methods

push

提示：push() 方法将指定的元素添加到数组的末尾，并返回新的数组长度。
理解：在数组的末尾添加

例如：

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count); // 4

效果图：

unshift

提示：unshift() 方法将指定元素添加到数组的开头，并返回数组的新长度。
理解：在数组的开头添加

例如：

const array1 = [1, 2, 3];

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

效果图：

pop

提示：pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
理解：去除数组最后一个元素

例如：

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop()); // tomato

效果图：

shift

提示：shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。理解：删除数组的第一个

例如：

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1); // [2, 3]

效果图：

splice

提示：splice() 方法通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容。
理解：删除或替换存在的

例如：

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months); // Array ["Jan", "Feb", "March", "April", "June"]

效果图：

forEach

提示：forEach() 方法对数组的每个元素执行一次给定的函数。
理解：遍历，每次是数组对应的值

例如：

const array1 = ['a', 'b', 'c'];
array1.forEach((element) => console.log(element)); // a b c

效果图：

filter

提示：filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
理解：过滤符合条件的返回

例如：

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 6);
console.log(result); //  ['exuberant', 'destruction', 'present']

效果图：

join

提示：join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。
理解：将数组转换为字符串，默认是 ‘,’ 号连接，可以指定连接符

例如：

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join()); // Fire,Air,Water

console.log(elements.join('')); // FireAirWater

console.log(elements.join('-')); // Fire-Air-Water

效果图：

reverse

提示：reverse() 方法就地反转数组中的元素，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。换句话说，数组中的元素顺序将被翻转，变为与之前相反的方向。
理解：颠倒数组顺序

例如：

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

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

效果图：

findIndex

提示：findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
理解：返回匹配元素的第一个索引，不存在返回 -1

例如：

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

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber)); // 3

效果图：

indexOf

提示：indexOf() 方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。
理解：匹配元素返回第一次出现的索引，不存在返回 -1

例如：

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

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

console.log(beasts.indexOf('bison', 2)); // 从下标 2 开始 4

console.log(beasts.indexOf('giraffe')); // 没有返回 -1

效果图：

concat

提示：concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
理解：合并数组

例如：

const chars = ['a', 'b', 'c'];
const chars2 = ['d', 'e', 'f'];
const chars3 = chars.concat(chars2);
console.log(chars3); // Array ["a", "b", "c", "d", "e", "f"]

效果图：

find

提示：find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
理解：匹配元素返回第一个值

例如：

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

const found = array1.find((element) => element > 10);

console.log(found); // 12

效果图：

some

提示：some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。
理解：只有有大于等一1个匹配就返回 true，否则 false

例如：

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

const even = (element) => element % 2 === 0;

console.log(array.some(even)); // true

效果图：

every

提示：every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。
理解：每一个都匹配的话返回 true，否则 false

例如：

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold)); // true

效果图：

includes

提示：includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
理解：判断是否包含，返回 boolean

例如：

const array1 = [1, 2, 3];

console.log(array1.includes(2)); // true

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

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

console.log(pets.includes('at')); // false

效果图：

slice

提示：slice() 方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。
理解：分割，浅拷贝 (会影响操作对象) ，可指定索引 (start, end)

例如：

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

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

效果图：

map

提示：map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
理解：返回一个数组，数组里面存放调用的返回值组成，也就是用到啥数组存啥

例如：

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

const map1 = array1.map((x) => x * 2); // 每个值 * 2

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

效果图：

reduce

提示：reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
理解：可以用来判断最大值，最小值；第一个参数是初始值，第二个参数是数组指针对应的值，逐步增加，第四个参数指定初始值的大小，第三个来操作可以用于判断，来对第一个参数初始值加工

例如：

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

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue);

console.log(sumWithInitial); // 10

效果图：