#前端实习
前言:
依旧是自己在前端实习中的归纳点，主要好像老是看不到自己心仪的归纳文章，再加上自己对于这些的把控感觉是一盘散沙所以决定自己归纳一下啦，hhhhhh如果有错误希望大家可以帮我指出，这个文章我会在后续的遇到和追加中进行修改，后续也会添加对象的方法总结和归纳，会保持实时更新的，争取做到一天更新一篇文章的频率。主要之前在自己的日报中提到要今天更新数组的方法归纳来着，（内心os：不肝那破游戏也就没必要这么晚还在写文章了hhh）
屁话说了那么多该进入正题了:
如大家所知的数组的方法真的好多啊，在归纳的时候我也是感觉到眼花缭乱，最后想着一个数据最重要的还是增删改查把，我以这四部“基操”的情况下，又稍微微地添加了一点分类，具体的分类我分为一下几类:
数组的方法分类
看到想要的可以看右侧的目录点击进行快速跳转哦
增加方法（增）：
push() 栈方法
unshift() 队列方法
splice() 添加的方法
fill() 填充方法
删除方法（删）：
splice() 删除的方法
shift()队列方法
pop()栈方法
改方法（改）：
splice() 替换的方法
fillter() 过滤数组
reverse() 颠倒方法
sort() 排序方法
（其实我在进行这个分类的时候我是十分纠结的，但是后来考虑到后两个会改变原数组的值，还还是把他们添加到改这一类里面了）
查方法（查）:
indexOf() 根据元素返回索引 第一个
lastIndexOf() 根据元素返回索引 最后一个
find() 根据条件返回元素
findIndex() 根据条件返回满足条件的索引
(四大“基操”已经讲完啦，接下来是私货时间×)
遍历数组的方法归纳：
forEach() 根据参数返回给回调函数 有点像for
keys() 方法，迭代器 返回值为键
values() 方法 ，迭代器，返回值为值
判断数组的方法归纳：
Every() 检测是否都满足条件类似与
Some() 检测是否有满足条件的类似或
Includes() 检测是否包含
isArray() 用于判断传递值是否正确
转换方法归纳:
map() 可以批量处理函数
flatmap() 也可以批量处理，但是是以映射的形式
from() 拆分？(主要这个个人还是不是很熟悉后续会进行进一步的理解补充)
join() 给数组中的元素拼接
其他的方法：
copyWithin() 复制数组
of() 创建数组
entries() 把数组转换成键值对的对象
flat() 把数组展开，就好比把俄罗斯套娃里的娃娃一个一个全部展开
reduce() 把数组内的值进行累加操作
(这个其他方法就属于个人真的不知道应该怎么分类的范畴了)
接下来是实例Time !
数组的增加方法:
push()
分类：栈方法-增加
返回值为数组的长度
不改变原数组
//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
const ar2 = ['a','b','c'];
const newLength = ar2.push('d');
console.log(ar2); // ['a','b','c','d']
console.log(newLength); // 4 返回数组的长度unshift()
分类：队列方法-增加
返回值为数组的长度
不改变原数组
//unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
const ar5 = ['a','b','c'];
const newLength2 = ar5.unshift('d','e');
console.log(ar5); // ['d','e','a','b','c']
console.log(newLength2); // 5splice() 添加的方法
yysy我觉得这个方法很牛逼可以实现三个分别是增、删、改
返回值为新数组
不改变原数组
/splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
//用法: array.splice(index, howmany, item1, ....., itemX)
//解释: index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//添加
const ar12 = ['a','b','c','d','e'];
const removed3 = ar12.splice(2,0,'f'); // 从第三个元素开始删除0个元素,并添加f
console.log(ar12); // ['a','b','f','c','d','e']
console.log(removed3); // []fill()
分类-填充
返回值为新数组
改变原数组
//fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
//语法: array.fill(value, start, end)
//解释: value: 必需。填充的值。 start: 可选。起始索引，默认为 0。 end: 可选。终止索引，默认为 this.length
const ar42 = ['a','b','c','d','e'];
const ar43 = ar42.fill('f',1,3); // 从第二个元素开始到第三个元素结束填充f
console.log(ar43); // ['a','f','f','d','e']数组的删除方法:
splice() 删除的方法
这就是这个牛逼方法的第二个用法，yysy我感觉有点一鱼三吃的味道hhhhh
返回值为新数组
不改变原来的数组
//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
//用法: array.splice(index, howmany, item1, ....., itemX)
//解释: index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//删除
const ar10 = ['a','b','c','d','e'];
const removed = ar10.splice(2,1); // 从第三个元素开始删除一个元素
console.log(ar10); // ['a','b','d','e']
console.log(removed); // ['c']shift()
分类：队列方法-删除
返回值为删除的元素
不改变原数组
//shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
const ar4 = ['a','b','c'];
const first = ar4.shift();
console.log(ar4); // ['b','c']
console.log(first); // apop(）
分类：栈方法-删除
返回值为删除的元素
不改变原数组
//pop() 方法用于删除并返回数组的最后一个元素。
const ar3 = ['a','b','c'];
const last = ar3.pop();
console.log(ar3); // ['a','b']
console.log(last); // c
console.log(ar3); // ['a','b'] 原数组不变数组改的方法：
splice() 替换的方法
牛逼方法的第三个用法
返回值为新数组
不改变原来的函数
//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
//用法: array.splice(index, howmany, item1, ....., itemX)
//解释: index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//替换
const ar11 = ['a','b','c','d','e'];
const removed2 = ar11.splice(2,1,'f'); // 从第三个元素开始删除一个元素,并替换为f
console.log(ar11); // ['a','b','f','d','e']
console.log(removed2); // ['c']
fillter()
分类：过滤
返回值为新数组
不改变原数组
//filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
const ar23 = [1,2,3,4,5];
const ar24 = ar23.filter(item => item > 2); // 返回大于2的元素
console.log(ar24); // [3,4,5]reverse()
分类：颠倒
返回值为颠倒后的数组
改变原数组
//reverse() 方法用于颠倒数组中元素的顺序
console.log("reverse方法");
const ar16 = ['a','b','c','d'];
let array1 = [1,2,3,4,5];
console.log(array1.reverse()); // [5,4,3,2,1]
console.log(array1); // [5,4,3,2,1] 原数组被改变
console.log(ar16.reverse()); // ['d','c','b','a']
sort()
分类：排序
返回值为排序后的数组
改变原数组
//sort() 方法用于对数组的元素进行排序
//默认排序顺序是根据字符串Unicode码点
console.log("sort方法");
const ar13 = ['d','c','b','a'];
console.log("原数组");
console.log(ar13); // ['a','b','c','d'] 默认排序
console.log("进行排序");
console.log(ar13.sort()); // ['a','b','c','d'] 默认排序
console.log("数组排序之后");
console.log(ar13); // ['a','b','c','d'] 原数组被改变
const ar14 = [4,3,2,1];
console.log(ar14.sort()); // [1,2,3,4] 默认排序
//自定义排序
const ar15 = [4,3,2,1];
console.log(ar15.sort((a,b) => a - b)); // [1,2,3,4] 升序 => a-b 升序 => b-a 降序
console.log(ar15.sort((a,b) => b - a)); // [4,3,2,1] 降序
数组查找方法：
indexOf()
分类：查找
返回值为索引
不改变原数组
//indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
console.log("indexOf方法");
const ar17 = ['a','b','c','d', 5];
console.log(ar17.indexOf('c')); // 2
console.log("原数组");
console.log(ar17);// ['a','b','c','d', 5] 原数组不变
console.log(ar17.indexOf('e')); // -1 不存在
console.log(ar17.indexOf(5)); // 4
console.log(ar17.indexOf('5')); // -1 不存在,类型不同,并不会进行类型转换
console.log(ar17.indexOf(5, 2));// 4 从第三个元素开始查找lastIndexOf()
分类：查找
返回值为索引
不改变原数组
//lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。
//和indexOf()方法相反
console.log("lastIndexOf方法");
const ar18 = ['a','b','c','d','a'];
console.log(ar18.lastIndexOf('a')); // 4
console.log(ar18.lastIndexOf('e')); // -1 不存在
console.log(ar18.lastIndexOf('a', 3)); // 0 从第四个元素开始查找find()
分类：查找
返回值为查找到的元素
不改变原数组
//find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined
const ar29 = [1,2,3,4,5];
const find = ar29.find(item => item > 2); // 找到第一个大于2的元素
console.log(find); // 3
findIndex()
分类：查找
返回值为查找到的元素的索引
不改变原数组
//lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。
//和indexOf()方法相反
console.log("lastIndexOf方法");
const ar18 = ['a','b','c','d','a'];
console.log(ar18.lastIndexOf('a')); // 4
console.log(ar18.lastIndexOf('e')); // -1 不存在
console.log(ar18.lastIndexOf('a', 3)); // 0 从第四个元素开始查找遍历数组的方法
forEach()
分类：遍历
无返回值
不改变原数组
//forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
// forEach方法中的function回调有三个参数：
// 第一个参数是遍历的数组内容，
// 第二个参数是对应的数组索引，
// 第三个参数是数组本身
// item 是数组的元素，index 是数组的索引，array 是数组本身
const ar19 = ['a','b','c','d'];
ar19.forEach((item, index, array) => {
console.log(item, index, array); // a 0 ['a','b','c','d']
});
// 通过forEach实现求和
const ar20 = [1,2,3,4,5];
let sum = 0;
ar20.forEach(item => {
sum += item;
});
console.log(sum); // 15keys()
分类：遍历
返回值为迭代对象
不改变原数组
//keys() 方法返回一个包含数组中每个索引键的Array Iterator对象
const ar35 = ['a','b','c'];
const keys = ar35.keys();
for (const key of keys) {
console.log(key); // 0 1 2
}values()
分类：遍历
返回值为迭代器对象
不改变原数组
//keys() 方法返回一个包含数组中每个索引键的Array Iterator对象
const ar35 = ['a','b','c'];
const keys = ar35.keys();
for (const key of keys) {
console.log(key); // 0 1 2
}数组的判断方法
Every()
分类：判断
返回值为布尔值
不改变原数组
//every() 方法用于检测数组所有元素是否都符合指定条件 相当于”与”
const ar26 = [1,2,3,4,5];
const isAll = ar26.every(item => item > 2); // 是否所有元素都大于2
console.log(isAll); // false
const isAll2 = ar26.every(item => item > 0); // 是否所有元素都大于0
console.log(isAll2); // truesome()
分类：判断
返回值为布尔值
不改变原数组·
//some() 方法用于检测数组中的元素是否满足指定条件
//和every()方法相反,只要有一个元素满足条件就返回true 相当于”或”
const ar27 = [1,2,3,4,5];
const isSome = ar27.some(item => item > 2); // 是否有元素大于2
console.log(isSome); // true
includes()
分类：判断
返回值为布尔值
不改变原数组
//includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
const ar28 = [1,2,3,4,5];
const isInclude = ar28.includes(3); // 是否包含3
console.log(isInclude); // true
const isInclude2 = ar28.includes(6); // 是否包含6
console.log(isInclude2); // false
const isInclude3 = ar28.includes(3, 2); // 从第三个元素开始查找是否包含3
console.log(isInclude3); // falseisArray()
分类：判断
返回值为布尔值
不改变原数组
//isArray() 方法用于确定传递的值是否是一个 Array
console.log(Array.isArray([1,2,3])); // true
console.log(Array.isArray('hello')); // false
数组的转换方法归纳
map()
分类：转换
返回值为新数组
不改变原数组
//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
const ar21 = [1,2,3,4,5];
const ar22 = ar21.map(item => item * 2);
console.log(ar22); // [2,4,6,8,10]floatMap()
分类：映射
返回值为新数组
不改变原数组
//flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组
const ar33 = [1,2,3,4,5];
const ar34 = ar33.flatMap(item => [item * 2]);
console.log(ar34); // [2,4,6,8,10]
from()
分类：转换
返回值为新数组
不改变原数组
//from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组
const ar38 = Array.from('hello');
console.log(ar38); // ['h','e','l','l','o']join()
分类：转换
返回值为字符串
不改变原数组
//join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
//不改变原数组 会将里面的数据类型转换为字符串
//如果不指定分隔符，默认为逗号
//用于拼接数组使用
console.log("join方法");
const arr1 = [1,2,3,4,5];
console.log(arr1.join()); // 1,2,3,4,5
console.log(arr1.join('-')); // 1-2-3-4-5
console.log(arr1); // [1,2,3,4,5] 原数组不变数组的其他方法
copyWith()
分类：复制
返回值为新数组
不改变原数组
//copyWithin() 方法从数组的指定位置拷贝元素到数组的另一个指定位置中
//语法: array.copyWithin(target, start, end)
//解释: target: 必需。从该位置开始替换数据。如果为负值，表示倒数。 start: 可选。从该位置开始读取数据，默认为 0。如果为负值，表示倒数。 end: 可选。到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
const ar40 = ['a','b','c','d','e'];
const ar41 = ar40.copyWithin(0,3); // 从第四个元素开始复制到第一个元素
console.log(ar41); // ['d','e','c','d','e']of()
分类：创建
//of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型
const ar39 = Array.of(1,2,3,4,5);
console.log(ar39); // [1,2,3,4,5]flat()
分类：判断
返回值为布尔值
不改变原数组
//flat() 方法创建一个新数组，其中有任何嵌套数组的元素被展平为新数组
const ar31 = [1,2,[3,4]];
const ar32 = ar31.flat();
console.log(ar32); // [1,2,3,4]entries()
分类：迭代
返回值为迭代器对象
不改变原数组
//entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对
const ar37 = ['a','b','c'];
const entries = ar37.entries();
for (const entry of entries) {
console.log(entry); // [0,'a'] [1,'b'] [2,'c']
}reduce()
分类：累加
返回值为累加后的数值
不改变原数组
//reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
//语法: array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
//解释: total: 必需。初始值, 或者计算结束后的返回值。 currentValue: 必需。当前元素。 currentIndex: 可选。当前元素的索引。 arr: 可选。当前元素所属的数组对象。
//initialValue: 可选。传递给函数的初始值
const ar25 = [1,2,3,4,5];
const sum2 = ar25.reduce((total, item) => total + item, 0); // 0为初始值, total为累加器, item为当前元素, 0为初始值
console.log(sum2); // 15呃啊，我是罪人……是的，拖了很久，最终还是克服不了自己的玩心，唉。有点违背自己的初心了。还是会尽量去克服的！我之后应该会继续修改这篇文章，如果大家有什么好的意见欢迎提出，感谢！
扫一扫
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
