// [‘a’, 7, ‘c’]
不改变原数组的方法(8个):ES5：
join、toLocateString、toStrigin、slice、cancat、indexOf、lastIndexOf、ES7：
includesjoin() 数组转字符串定义: join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串。
语法:array.join(str)参数:str(可选): 指定要使用的分隔符，默认使用逗号作为分隔符。
let a= [‘hello’,‘world’];
let str=a.join(); // ‘hello,world’
let str2=a.join(‘+’); // ‘hello+world’
使用join方法或者下文说到的toString方法时，当数组中的元素也是数组或者是对象时会出现什么情况？
let a= [[‘OBKoro1’,‘23’],‘test’];
let str1=a.join(); // OBKoro1,23,test
let b= [{name:‘OBKoro1’,age:‘23’},‘test’];
let str2 = b.join(); // [object Object],test
// 对象转字符串推荐JSON.stringify(obj);
所以，join()/toString()方法在数组元素是数组的时候，会将里面的数组也调用join()/toString(),如果是对象的话，对象会被转为[object Object]字符串。
toLocaleString() 数组转字符串定义: 返回一个表示数组元素的字符串。
该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接（由逗号隔开）组成。
语法:array.toLocaleString()参数：
无。
let a=[{name:‘OBKoro1’},23,‘abcd’,new Date()];
let str=a.toLocaleString(); // [object Object],23,abcd,2021/12/3 下午1:52:20
如上述栗子：
调用数组的toLocaleString方法，数组中的每个元素都会调用自身的toLocaleString方法，对象调用对象的toLocaleString,Date调用Date的toLocaleString。
toString() 数组转字符串 不推荐定义: toString() 方法可把数组转换为由逗号链接起来的字符串。
语法:array.toString()参数: 无。
该方法的效果和join方法一样，都是用于数组转字符串的，但是与join方法相比没有优势，也不能自定义字符串的分隔符，因此不推荐使用。
值得注意的是：
当数组和字符串操作的时候，js 会调用这个方法将数组自动转换成字符串
let b= [ ‘toString’,‘演示’].toString(); // toString,演示
let a= [‘调用toString’,‘连接在我后面’]+‘啦啦啦’; // 调用toString,连接在我后面啦啦啦
slice() 浅拷贝数组的元素定义：
方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。
注意：
字符串也有一个slice() 方法是用来提取字符串的，不要弄混了。
语法:array.slice(begin, end);参数:begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。
end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。
let a= [‘hello’,‘world’];
let b=a.slice(0,1); // [‘hello’]
a[0]=‘改变原数组’;
console.log(a,b); // [‘改变原数组’,‘world’] [‘hello’]
b[0]=‘改变拷贝的数组’;
console.log(a,b); // [‘改变原数组’,‘world’] [‘改变拷贝的数组’]
如上：
新数组是浅拷贝的，元素是简单数据类型，改变之后不会互相干扰。
如果是复杂数据类型(对象,数组)的话，改变其中一个，另外一个也会改变。
let a= [{name:‘OBKoro1’}];
let b=a.slice();
console.log(b,a); // [{“name”:“OBKoro1”}] [{“name”:“OBKoro1”}]
// a[0].name=‘改变原数组’;
// console.log(b,a); // [{“name”:“改变原数组”}] [{“name”:“改变原数组”}]
// b[0].name=‘改变拷贝数组’,b[0].koro=‘改变拷贝数组’;
// [{“name”:“改变拷贝数组”,“koro”:“改变拷贝数组”}] [{“name”:“改变拷贝数组”,“koro”:“改变拷贝数组”}]
原因在定义上面说过了的：
slice()是浅拷贝，对于复杂的数据类型浅拷贝，拷贝的只是指向原数组的指针，所以无论改变原数组，还是浅拷贝的数组，都是改变原数组的数据。
cancat定义：
方法用于合并两个或多个数组，返回一个新数组。
语法：
var newArr =oldArray.concat(arrayX,arrayX,…,arrayX)参数：
arrayX（必须）：
该参数可以是具体的值，也可以是数组对象。
可以是任意多个。
eg1:
let a = [1, 2, 3];
let b = [4, 5, 6];
//连接两个数组
let newVal=a.concat(b); // [1,2,3,4,5,6]
// 连接三个数组
let c = [7, 8, 9]
let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]
// 添加元素
let newVal3 = a.concat(‘添加元素’,b, c,‘再加一个’);
// [1,2,3,“添加元素”,4,5,6,7,8,9,“再加一个”]
// 合并嵌套数组 会浅拷贝嵌套数组
let d = [1,2 ];
let f = [3,[4]];
let newVal4 = d.concat(f); // [1,2,3,[4]]
ES6扩展运算符…合并数组：
因为ES6的语法更简洁易懂，所以现在合并数组我大部分采用…来处理，…运算符可以实现cancat的每个栗子，且更简洁和具有高度自定义数组元素位置的效果。
let a = [2, 3, 4, 5]
let b = [ 4,…a, 4, 4]
console.log(a,b); // [2, 3, 4, 5] [4,2,3,4,5,4,4]
更多关于扩展符的详细内容移步阮一峰大神的ECMAScript 6 入门indexOf() 查找数组是否存在某个元素，返回下标定义: 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
语法:array.indexOf(searchElement,fromIndex)参数:searchElement(必须):被查找的元素fromIndex(可选):开始查找的位置(不能大于等于数组的长度，返回-1)，接受负值，默认值为0。
严格相等的搜索:数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素，即数组元素要完全匹配才能搜索成功。
注意：
indexOf()不能识别NaNeg:
let a=[‘啦啦’,2,4,24,NaN]
console.log(a.indexOf(‘啦’)); // -1
console.log(a.indexOf(‘NaN’)); // -1
console.log(a.indexOf(‘啦啦’)); // 0
使用场景：
数组去重
根据获取的数组下标执行操作，改变数组中的值等。
判断是否存在，执行操作。
lastIndexOf() 查找指定元素在数组中的最后一个位置定义: 方法返回指定元素,在数组中的最后一个的索引，如果不存在则返回 -1。
（从数组后面往前查找）语法:arr.lastIndexOf(searchElement,fromIndex)参数:searchElement(必须): 被查找的元素fromIndex(可选): 逆向查找开始位置，默认值数组的长度-1，即查找整个数组。
关于fromIndex有三个规则:
正值。如果该值大于或等于数组的长度，则整个数组会被查找。
负值。将其视为从数组末尾向前的偏移。(比如-2，从数组最后第二个元素开始往前查找)
负值。
其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。
let a=[‘OB’,4,‘Koro1’,1,2,‘Koro1’,3,4,5,‘Koro1’]; // 数组长度为10
// let b=a.lastIndexOf(‘Koro1’,4); // 从下标4开始往前找 返回下标2
// let b=a.lastIndexOf(‘Koro1’,100); // 大于或数组的长度 查找整个数组 返回9
// let b=a.lastIndexOf(‘Koro1’,-11); // -1 数组不会被查找
let b=a.lastIndexOf(‘Koro1’,-9); // 从第二个元素4往前查找，没有找到 返回-1
ES7 includes() 查找数组是否包含某个元素 返回布尔定义：
返回一个布尔值，表示某个数组是否包含给定的值语法：
array.includes(searchElement,fromIndex=0)参数：
searchElement(必须):被查找的元素fromIndex(可选):默认值为0，参数表示搜索的起始位置，接受负值。
正值超过数组长度，数组不会被搜索，返回false。
负值绝对值超过长数组度，重置从0开始搜索。
includes方法是为了弥补indexOf方法的缺陷而出现的:
indexOf方法不能识别NaN
indexOf方法检查是否包含某个值不够语义化，需要判断是否不等于-1，表达不够直观
eg:
let a=[‘OB’,‘Koro1’,1,NaN];
// let b=a.includes(NaN); // true 识别NaN
// let b=a.includes(‘Koro1’,100); // false 超过数组长度 不搜索
// let b=a.includes(‘Koro1’,-3); // true 从倒数第三个元素开始搜索
// let b=a.includes(‘Koro1’,-100); // true 负值绝对值超过数组长度，搜索整个数组
兼容性(MDN): chrome47, Firefox 43,Edge 14,Opera 34, Safari 9,IE 未实现。
遍历方法(12个):js中遍历数组并不会改变原始数组的方法总共有12个:ES5：
forEach、every 、some、 fliter、map、reduce、reduceRight、ES6：
find、findIndex、keys、values、entries关于遍历：
尽量不要在遍历的时候，修改后面要遍历的值
尽量不要在遍历的时候修改数组的长度（删除/添加）
forEach定义: 按升序为数组中含有效值的每一项执行一次回调函数。
语法：
array.forEach(function(currentValue, index, arr), thisValue)参数:function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数1. currentValue(必须),数组当前元素的值2. index(可选), 当前元素的索引值3. arr(可选),数组对象本身hisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined关于forEach()你要知道：
无法中途退出循环，只能用return退出本次回调，进行下一次回调。
它总是返回 undefined值,即使你return了一个值。
下面类似语法同样适用这些规则1. 对于空数组是不会执行回调函数的2. 对于已在迭代过程中删除的元素，或者空元素会跳过回调函数3. 遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
4. 如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。
eg:
let a = [1, 2, ,3]; // 最后第二个元素是空的，不会遍历(undefined、null会遍历)
let obj = { name: ‘OBKoro1’ };
let result = a.forEach(function (value, index, array) {
a[3] = ‘改变元素’;
a.push(‘添加到尾端，不会被遍历’)
console.log(value, ‘forEach传递的第一个参数’); // 分别打印 1 ,2 ,改变元素
console.log(this.name); // OBKoro1 打印三次 this绑定在obj对象上
// break; // break会报错
return value; // return只能结束本次回调 会执行下次回调
console.log(‘不会执行，因为return 会执行下一次循环回调’)
}, obj);
console.log(result); // 即使return了一个值,也还是返回undefined
// 回调函数也接受接头函数写法
every 检测数组所有元素是否都符合判断条件定义: 方法用于检测数组所有元素是否都符合函数定义的条件语法：
array.every(function(currentValue, index, arr), thisValue)参数:(这几个方法的参数，语法都类似)function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数1. currentValue(必须),数组当前元素的值2. index(可选), 当前元素的索引值3. arr(可选),数组对象本身thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined方法返回值规则:
如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。=
eg:
function isBigEnough(element, index, array) {
return element >= 10; // 判断数组中的所有元素是否都大于10
}
let result = [12, 5, 8, 130, 44].every(isBigEnough); // false
let result = [12, 54, 18, 130, 44].every(isBigEnough); // true
// 接受箭头函数写法
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true
some 数组中的是否有满足判断条件的元素定义：
数组中的是否有满足判断条件的元素语法：
array.some(function(currentValue, index, arr), thisValue)参数:(这几个方法的参数，语法都类似)function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数1. currentValue(必须),数组当前元素的值2. index(可选), 当前元素的索引值3. arr(可选),数组对象本身thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined方法返回值规则：
如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
function isBigEnough(element, index, array) {
return (element >= 10); //数组中是否有一个元素大于 10
}
let result = [2, 5, 8, 1, 4].some(isBigEnough); // false
let result = [12, 5, 8, 1, 4].some(isBigEnough); // true
filter 过滤原始数组，返回新数组定义: 返回一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法：
let new_array = arr.filter(function(currentValue, index, arr), thisArg)参数:(这几个方法的参数，语法都类似)function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数1. currentValue(必须),数组当前元素的值2. index(可选), 当前元素的索引值3. arr(可选),数组对象本身thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefinedeg:
let a = [32, 33, 16, 40];
let result = a.filter(function (value, index, array) {
return value >= 18; // 返回a数组中所有大于18的元素
});
console.log(result,a);// [32,33,40] [32,33,16,40]
map 对数组中的每个元素进行处理，返回新的数组定义：
创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法：
let new_array = arr.map(function(currentValue, index, arr), thisArg)参数:(这几个方法的参数，语法都类似)function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数1. currentValue(必须),数组当前元素的值2. index(可选), 当前元素的索引值3. arr(可选),数组对象本身thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefinedeg:
let a = [‘1’,‘2’,‘3’,‘4’];
let result = a.map(function (value, index, array) {
return value + ‘新数组的新元素’
});
console.log(result, a);
// [“1新数组的新元素”,“2新数组的新元素”,“3新数组的新元素”,“4新数组的新元素”] [“1”,“2”,“3”,“4”]
reduce 为数组提供累加器，合并为一个值定义：
reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，最终合并为一个值。
语法：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数：
function(必须): 数组中每个元素需要调用的函数。
// 回调函数的参数1. total(必须)，初始值, 或者上一次调用回调返回的值2. currentValue(必须),数组当前元素的值3. index(可选), 当前元素的索引值4. arr(可选),数组对象本身initialValue(可选): 指定第一次回调 的第一个参数。
回调第一次执行时:
如果 initialValue 在调用 reduce 时被提供，那么第一个 total 将等于 initialValue，此时 currentValue 等于数组中的第一个值；
如果 initialValue 未被提供，那么 total 等于数组中的第一个值，currentValue 等于数组中的第二个值。此时如果数组为空，那么将抛出 TypeError。
如果数组仅有一个元素，并且没有提供 initialValue，或提供了 initialValue 但数组为空，那么回调不会被执行，数组的唯一值将被返回。
eg:
// 数组求和
let sum = [0, 1, 2, 3].reduce(function (a, b) {
return a + b;
}, 0);
// 6
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
结尾
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
3U-1711702878172)]
[外链图片转存中…(img-8HTq9fGC-1711702878172)]
[外链图片转存中…(img-d2LramAy-1711702878173)]
[外链图片转存中…(img-eHMhDKFP-1711702878173)]
[外链图片转存中…(img-oNAYC2ci-1711702878174)]
[外链图片转存中…(img-5rrNA18p-1711702878175)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-z7v3PNWd-1711702878175)]
结尾
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
