怎么做网站导航条,成都全屋定制十大名牌,网站建设 软文,中国知名网站排名##JavaScript中的数组方法总结详解 用来总结和学习#xff0c;便于自己查找 文章目录 一、数组是什么? 二、改变原数组的api方法#xff1f; 2.1 push#xff08;#xff09; 在末端添加 2.2 pop#xff0…##JavaScript中的数组方法总结详解 用来总结和学习便于自己查找 文章目录 一、数组是什么? 二、改变原数组的api方法 2.1 push 在末端添加 2.2 pop 在末端删除 2.3 unshift头部添加 2.4 shift 在头部删除 2.5 reverse反转数组 2.6 sort 排序 2.7 splice 截取数组 三、不改变原数组的方法 3.1 concat 合并数组 3.2 slice截取数组的一部分数据 3.3 indexOf 从左检查数组中有没有这个数值 3.4 lastIndexOf 从右检查数组中有没有这个数值 四、Es6新增的api方法(不改变原数组) 4.1 forEach() 用来循环遍历的 for 4.2 map 映射数组的 4.3 filter 过滤数组 4.4 every 判断数组是不是满足所有条件 4.5 some 数组中有没有满足条件的 4.6 find用来获取数组中满足条件的第一个数据 4.7 reduce叠加后的效果 五、常用的和实战使用 一、数组是什么
数组Array是编程中常用的一种数据结构用来存储多个元素通常是相同类型的元素,JavaScript 数组是可调整大小的并且可以包含不同的数据类型,正常包含json。
数组可以容纳多个值并通过索引index来访问这些值。
索引通常是从0开始的整数表示数组中元素的位置。
重要的是知道数据结构这个词面试可能问你数据结构常用的有什么数组就是一个。二、改变原数组的api方法 2.1 push() push() 方法向数组末尾添加新项目并返回新长度。count 所以是4打印出来原数组也是会改变的。 const animals [pigs, goats, sheep];
const count animals.push(cows);
console.log(count);
// Expected output: 4
console.log(animals);
// Expected output: Array [pigs, goats, sheep, cows]
animals.push(chickens, cats, dogs);
console.log(animals);
// Expected output: Array [pigs, goats, sheep, cows, chickens, cats, dogs]2.2 pop pop() 方法从数组中删除最后一个元素并返回该元素的值。此方法会更改数组的长度。 const plants [broccoli, cauliflower, cabbage, kale, tomato];console.log(plants.pop());
// Expected output: tomatoconsole.log(plants);
// Expected output: Array [broccoli, cauliflower, cabbage, kale]plants.pop();console.log(plants);
// Expected output: Array [broccoli, cauliflower, cabbage]2.3 unshift unshift() 方法将指定元素添加到数组的开头并返回数组的新长度。 const array1 [1, 2, 3];console.log(array1.unshift(4, 5));
// Expected output: 5console.log(array1);
// Expected output: Array [4, 5, 1, 2, 3] 2.4 shift 从数组中删除第一个元素并返回该元素的值。此方法更改数组的长度。 const array1 [1, 2, 3];const firstElement array1.shift();console.log(array1);
// Expected output: Array [2, 3]console.log(firstElement);
// Expected output: 12.5 reverse和 toReversed 就地反转数组中的元素并返回同一数组的引用。数组的第一个元素会变成最后一个数组的最后一个元素变成第一个。换句话说数组中的元素顺序将被翻转变为与之前相反的方向。要在不改变原始数组的情况下反转数组中的元素使用 toReversed()。 const array1 [one, two, three];
console.log(array1:, array1);
// Expected output: array1: Array [one, two, three]const reversed array1.reverse();
console.log(reversed:, reversed);
// Expected output: reversed: Array [three, two, one]// Careful: reverse is destructive -- it changes the original array.
console.log(array1:, array1);
// Expected output: array1: Array [three, two, one]
const items [1, 2, 3];
console.log(items); // [1, 2, 3]const reversedItems items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]2.6 sort 对数组的元素进行排序并返回对相同数组的引用。默认排序是将元素转换为字符串然后按照它们的 UTF-16 码元值升序排序。 const months [March, Jan, Feb, Dec];
months.sort();
console.log(months);
// Expected output: Array [Dec, Feb, Jan, March]const array1 [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]
March:M: 77a: 97r: 114c: 99h: 104
Jan:J: 74a: 97n: 110
Feb:F: 70e: 101b: 98
Dec:D: 68e: 101c: 99 排序的依据是从每个字符串的第一个字符开始进行比较若第一个字符相同则继续比较第二个字符依此类推。所以按 Unicode 码点排序的过程如下 Dec: ‘D’ 的 Unicode 码是 68 Feb: ‘F’ 的 Unicode 码是 70 Jan: ‘J’ 的 Unicode 码是 74 March: ‘M’ 的 Unicode 码是 77 排序结果就是 [“Dec”, “Feb”, “Jan”, “March”]。 2.6.1 哪里查询unicode码? 1、 unicode码在线查询地址 2、charCodeAt() const char A; console.log(char.charCodeAt()); // 输出 65 2.7 splice 移除或者替换已存在的元素和/或添加新的元素返回被删除的项目 1、在索引 1 处插入 Feb
const months [Jan, March, April, June];
months.splice(1, 0, Feb);
// Inserts at index 1
console.log(months);
// Expected output: Array [Jan, Feb, March, April, June]months.splice(4, 1, May);
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array [Jan, Feb, March, April, May]不删除任何元素因为第二个参数为 02、 在索引 3 处移除 1 个元素const myFish [angel, clown, drum, mandarin, sturgeon];
const removed myFish.splice(3, 1);3、从索引 0 处移除 2 个元素并插入“parrot”、“anemone”和“blue”
const myFish [angel, clown, trumpet, sturgeon];
const removed myFish.splice(0, 2, parrot, anemone, blue);// myFish 是 [parrot, anemone, blue, trumpet, sturgeon]
// removed 是 [angel, clown]4、在索引 3 处移除 1 个元素const myFish [angel, clown, mandarin, sturgeon];
const removed myFish.splice(2);// myFish 是 [angel, clown]
// removed 是 [mandarin, sturgeon]三、不改变原数组的方法 3.1 concat concat() 方法用于合并两个或多个数组。此方法不会更改现有数组而是返回一个新数组。 const array1 [a, b, c];
const array2 [d, e, f];
const array3 array1.concat(array2);console.log(array3);
// Expected output: Array [a, b, c, d, e, f]3.2 slice 返回一个从开始到结束不包括结束选择的数组的一部分。原数组不会被修改。 const 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]console.log(animals.slice(-2));
//表示从数组末尾倒数第二个元素开始提取
// Expected output: Array [duck, elephant]console.log(animals.slice(2, -1));
// Expected output: Array [camel, duck]console.log(animals.slice());
// Expected output: Array [ant, bison, camel, duck, elephant] 3.3 indexOf() 返回数组中第一次出现给定元素的下标如果不存在则返回 -1。 const beasts [ant, bison, camel, duck, bison];console.log(beasts.indexOf(bison));
// Expected output: 1// Start from index 2
console.log(beasts.indexOf(bison, 2));
//从索引 2 开始搜索 bison
所以第一次出现的bison是最后一个所以返回索引4
// Expected output: 4console.log(beasts.indexOf(giraffe));
// Expected output: -13.4 lastIndexOf () 返回数组中给定元素最后一次出现的索引如果不存在则返回 -1。该方法从 fromIndex 开始向前搜索数组。 const animals [ant, bison, camel, duck, bison];
console.log(animals.lastIndexOf(bison)); // 输出 4const animals [ant, bison, camel, duck, bison];
console.log(animals.lastIndexOf(bison, 3)); // 输出 1
//从索引 3 处向前查找 bison找到的最后一个 bison 出现在索引 1
const animals [ant, bison, camel, duck, bison];
console.log(animals.lastIndexOf(bison, -2)); // 输出 1
//从数组末尾向前数 2 个位置开始向前查找 bison找到的最后一个 bison 出现在索引 1。 四、Es6新增的api方法 4.1 forEach() 对数组的每个元素执行一次指定的函数没有返回值或者说返回 undefined。 const array1 [a, b, c];array1.forEach((element) console.log(element));// Expected output: a
// Expected output: b
// Expected output: c
const array2 [one, two, three];array2.forEach(function(element, index, array) {console.log(Element ${element} is at index ${index} in array ${array});
});// 输出:
// Element one is at index 0 in array one,two,three
// Element two is at index 1 in array one,two,three
// Element three is at index 2 in array one,two,three 4.2 map() 创建一个新数组其结果是该数组中的每个元素调用一个提供的函数后返回的结果。 const numbers [1, 2, 3, 4, 5];const doubled numbers.map(function(num) {return num * 2;
});console.log(doubled); // 输出 [2, 4, 6, 8, 10] 4.3 filter () 筛选出符合特定条件的元素并返回一个新的数组而不改变原始数组。 const numbers [1, 2, 3, 4, 5, 6];
const evenNumbers numbers.filter(num num % 2 0);console.log(evenNumbers); // 输出: [2, 4, 6] 4.4 every () 它的作用是帮助我们判断一个数组里的每个成员是否都符合某个条件如果所有的数字都符合我们的规则都是偶数,下面这个例子那么 every 方法会返回 true如果有任何一个数字不符合规则不是偶数它就会立即返回 false。 const numbers [2, 4, 6, 8, 10];
const allEven numbers.every(num num % 2 0);console.log(allEven); // Output: true 4.5 some() 判断数组中是否至少有一个元素满足指定的条件如果对于任何一个元素回调函数返回 true则 some 方法立即返回 true。如果数组中所有元素都不满足条件那么 some 方法最终返回 false。有一个就行返回true const numbers [1, 3, 5, 7, 8, 9];
const hasEvenNumber numbers.some(num num % 2 0);console.log(hasEvenNumber); // Output: true 4.6 find() 查找满足条件的第一个元素并返回该元素。如果没有找到符合条件的元素则返回 undefined。 const users [{ id: 1, name: Alice },{ id: 2, name: Bob },{ id: 3, name: Charlie }
];const user users.find(obj obj.id 2);console.log(user); // Output: { id: 2, name: Bob } 4.7 reduce() 从左到右对数组中的元素进行累积计算最终返回一个值 const numbers [1, 2, 3, 4, 5];const sum numbers.reduce((accumulator, currentValue) {return accumulator currentValue;
}, 0);console.log(sum); // Output: 15
//再来个例子求平均值
const values [10, 20, 30, 40, 50];const average values.reduce((accumulator, currentValue, currentIndex, array) {accumulator.sum currentValue;if (currentIndex array.length - 1) {accumulator.average accumulator.sum / array.length;}return accumulator;
}, { sum: 0, average: 0 }); // 这里传入了初始值对象 { sum: 0, average: 0 }console.log(average.average); // 输出计算得到的平均值
//sum: 0, average: 0 这个就是默认的初始值
1、accumulator
这是累加器它累积回调函数每次执行时的返回值。它是 reduce() 方法中的第一个参数也就是用来存储累加结果的变量或对象。
在第一次调用回调函数时如果提供了 reduce() 的第二个参数作为初始值则 accumulator 的初始值为这个参数如果没有提供初始值则 accumulator 的初始值为数组的第一个元素。
在每次迭代中accumulator 的值会根据回调函数的返回值更新传递给下一次回调函数调用。
2、currentValue
当前的数组的值
3、currentIndex
这是当前元素在数组中的索引。
在每次迭代时reduce() 方法会将当前元素的索引传递给回调函数作为 currentIndex。
第一次调用回调函数时如果提供了初始值则 currentIndex 是 0如果没有提供初始值则 currentIndex 是 1。
4、array
这是调用 reduce() 方法的数组本身。
在每次迭代时reduce() 方法会将原始数组传递给回调函数作为 array 参数。
这个参数是可选的如果你的回调函数不需要使用原始数组则可以省略。
注意
如果没有初始值那么累加器的第一个就是数组的第一项currentValue就是数组的第二项currentIndex就是为1五、常用的和实战使用 首先一个就是push方法100%会使用但是一添加的不是简单的字符串一般添加json这样的格式{name:“猪猪”gender:“男”}splice一般也会用到删除数据array.splice(-1, 1);concat这个也会用到合并数组indexOf这个用来查找也会用到map这个也经常用到遍历还有filter过滤也经常使用还有find查找满足第一个条件的最后一个reduce一般购物车会用到。
