本文内容学习于：后盾人 (houdunren.com)
一、管理元素:
push()，压入元素，直接改变元数组，返回值为数组元素数量
unshift(),从数组前面添加元素
pop()，从末尾弹出元素，直接改变元数组，返回值为弹出的元素
shift(),从数组前面取出一个元素
fill(),使用fill 填充数组元素:
console.dir(Array(4).fill("后盾人")); //["后盾人"，"后盾人"，"后盾人"，"后盾人"]
指定填充位置 :
console.log([1，2，3，4].fill("后盾人"，1，2));//[1，"后盾人"，3，4]
slice()，从数组中截取部分元素组合成新数组(并不会改变原数组)，不传第二个参数时截取到数组的最后元素。(含头不含尾) splice()，可以添加、删除、替换数组中的元素，会对原数组进行改变，返回值为删除的元素。(含头含尾)
let arr = [0，1，2，3，4，5，6];
console.log(arr.splice(1，3));//返回删除的元素[1，2，3]
console.log(arr);//删除数据后的原数组[0，4，5，6]
通过指定第三个参数来设置在删除位置添加的元素let arr = [0， 1， 2，3，4，5，6];
console.log(arr.splice(1，3，'hdcms'，'后盾人'));//[1，2，3]
console.log(arr);//[0，"hdcms"，"后盾人"，4，5，6]
向末尾添加元素let arr = [0，1，2，3，4，5，6];
console.log(arr.splice(arr.length，o，'hdcms'，"后盾人'); //[]
console.log(arr); // [0，1，2，3，4，5，6，"hdcms"，"后盾人"]
向数组前添加元素let arr = [0，1，2，3，4，5，6];
console.log(arr.splice(0，o，'hdcms'，"后盾人')); //[
console.log(arr);//["hdcms"，"后盾人"，0，1，2，3，4，5，6]
清空数组:
1.将数组值修改为[]可以清空数组
2.将数组1ength设置为 o 也可以清空数组
3.使用splice方法删除所有数组元素
let user = [{ name: "hdcms"}，{ name:"后盾人"}];
user.splice(0, user.length);
console.log(user);
4.使用pop/shift删除所有元素，来清空数组
let user = [{ name: "hdcms" }，{ name:"后盾人"}];
while (user.pop()) {}
console.log(user);
二、合并拆分:
join(),连接成字符串(数组转字符串)
split(),将字符串分割成数组，类似join方法的反函数。(字符串转数组)
concat(),连接两个或多个数组，元素是值类型的是复制操作，如果是引用类型还是指向同一对象
let array = ["hdcms", "houdunren"];
let hd = [1, 2];
let cms = [3,4];
console.log(array.concat(hd,cms)); // ["hdcms", "houdunren",1,2, 3, 4]也可以使用扩展语法实现连接
console.log([...array, ...hd,...cms]);
copywithin(),从数组中复制一部分到同数组中的另外位置。
array.copywithin(target, start, end)
target 必需。复制到指定目标索引位置。
Start 可选。元素复制的起始位置。
end 可选。停止复制的索引位置(默认为 array.length)。如果为负值，表示倒数。
const arr = [1,2,3,4];
console.log(arr.copyWithin(2，0，2)); //[1，2，1,2]
三、查找元素
indexof()，从前向后查找元素出现的位置，如果找不到返回 -1，查到返回元素所在位置索引
ps:第二个参数用于指定查找开始位置
let arr = [7, 3, 2,8,2,6];//从第3个元素开始向后查找
console.log(arr.indexOf(2,3)); //4
lastIndexOf()，从后向前查找元素出现的位置，如果找不到返回 -1。
ps:第二个参数用于指定查找开始位置
let arr = [7, 3， 2，8，2,6];//从第5个元素向前查找
console.log(arr.lastIndexof(2,5));
//从最后一个字符向前查找console.log(arr.lastIndexof(2，-2));
includes()，判断数组中是否包含某个值(用于查找数字或字符串)，返回值是布尔类型更方便判断
let arr = [7，3，2，6];
console.log(arr.includes(6));//true
注意:使用includes等不能查找引用类型，因为它们的内存地址是不相等的
const user =[{ name:"李四"}，{ name:"张三"}，{name:"后盾人"}];
const find = user.includes({ name:"后盾人"});
console.log(find);
find(),方法找到后会把值返回出来,只返回第一次找到的值，找到就不继续查找，如果找不到返回值为undefined
注意:find 可以方便的查找引用类型
const user =[{ name: "李四"}，{name:"张三"}，{name:"后盾人"}];
const find = user.find(user => (user.name = "后盾人"));
console.log(find);
findIndex(),findIndex 与 find 的区别是返回索引值，参数也是 :当前值，索引，操作数组。查找不到时返回-1
四、数组排序
reverse(),反转数组顺序
sort(),每次使用两个值进行比较 Array.sort((a,b)=>a-b
返回负数 a排在 b前面，从小到大
返回正数 b排在a前面，从大到小
返回 0 时不动
五、循环遍历
for(),根据数组长度结合for 循环来遍历数组
for (let i = o; i< lessons.length; i++) {
lessons[i] ='后盾人:${lessons[i].title}`;
}
forEach(),使函数作用在每个数组元素上，但是没有返回值。
lessons.forEach((item, index,array)=> {
item.title = item.title.substr(0, 5);
});
for/in,遍历时的 key 值为数组的索引
let lessons = [
{title:'媒体查询响应式布局'category:'c33'}，{title:'FLEX 弹性盒模型',category:'css'},
{title:'MYSQL多表查询随意操作'，category:'mysq1'}
];
for (const key in lessons) {
console.log(`标题:${lessons[key].title}`);
}
for/of,与 for/in 不同的是 for/of 每次循环取其中的值,而不是索引。
for (const item of lessons) {
console.log(`
标题:${item.title}
栏目:${item.category =="css"?"前端":"数据库"}`
);
ps:其他Js库的forEach()
1、arr.forEach(function(item, index){})
2、 .forEach(arr, function(item, index){})
3、v-for="(item, index) in arr"
4、$.each(arr, function(index, item) {})
六、迭代器方法
keys()，通过迭代对象获取索引
var arr = ["a"，"b"，"c"，"后盾人"]; for (const key of arr.keys()) {
console.log(key);
}
values(),通过迭代对象获取值
var arr = ["a"，"b"，"c"，"后盾人"]; for (const value of arr.values(()) {
console.log(value);
}
entries(),返回数组所有键值对，下面使用解构语法循环
var arr = ["a"，"b"，"c"，"后盾人"];
for (const [key, value] of arr.entries()) {
console.log(key, value);
}
七、数组扩展方法
every(),用于递归的检测元素，要所有元素操作都要返回真结果才为真
var user = [{ name:"李四"，js:89 }，{ name:"马六"，js:55 }，{ name:"张三"，js:78 }];
// 执行1
var resust = user.every(user => user.js >= 60);
// 执行2
var resust = user.every(function(user) {
return user.is >= 60
});
console.log(resust);
some(),使用 some 函数可以递归的检测元素，如果有一个返回 true，表达式结果就是真。
第一个参数为元素，第二个参数为索引，第三个参数为原数组。
var words =['后盾'，"北京'，"武汉'];//设置的违规关键词
var title ='后盾人不断分享技术教程'//待检测的标题
var state = words.some(function (item, index, array){
return title.indexof(item) >= o;
} );
if (state) console.log('标题含有违规关键词');
filter(),可以过滤数据中元素。 ----> 返回新数组
//获取所有在 css 栏目的课程
var lessons = [
{title:"媒体查询响应式布局'category:'css'}，
{title:'FLEX 弹性盒模型'，category:'css'}，
{title:'MYSQL多表查询随意操作'，category:'mysq1'}
];
var cssLessons = lessons.filter(function (item, index, array) {
if (item.category.toLowerCase()== 'css') {
return true;
}
);
console.log(cssLessons);
map(),使用 map映射 可以在数组的所有元素上应用函数，用于映射出新的值。 ----> 返回新数组
第一个参数为元素，第二个参数为索引，第三个参数为原数组。
//获取数组所有标题组合的新数组
var lessons = [
{title:"媒体查询响应式布局'category:'cs'}，
{title:'FLEX 弹性盒模型',category:'css'}，
{title:'MYSQL多表查询随意操作，category:'mysq1'}
];
console.log(lessons.map(item => item.title));
reduce()与reduceRight(),使用 reduce 与 reduceRight 函数可以迭代数组的所有元素，reduce 从前开始 reduceRight 从后面开始。
第一个参数是执行函数，第二个参数为初始值//统计元素出现的次数
function countArrayELem(array, elem) {
return array.reduce((total, cur) => (total += cur == elem ? 1 : 0), 0);
}
var numbers = [1, 2，3，1,5];
console.log(countArrayELem(numbers, 1)); //2
//取价格最高的商品var cart = [
{ name: "iphone", price: 12000 },
{ name: "imac", price: 25000 },
{ name: "ipad", price: 3600 }
];
// fn1
function maxPrice(array) {
return array.reduce(
(goods,elem)=> (goods.price > elem.price ? goods : elem),
array[0]
);
}
// fn2
function maxPrice(arrav){
return array.reduce(
// 第一个参数--执行函数，会返回每次当前执行函数，代码执行完成后的结果作为第一个参数aoods，再用这个结果再和下一次迭代数据elem做比较
function(goods,elem){
console.log('111====>' + Json.stringify(goods));
console.log('222=--=>' + JsoN.stringify(elem));
return goods.price > elem.price ? goods : elem
},array[0]
);
console.log(maxPrice(cart));
}
//计算购物车中的商品总价var cart = [
{ name: "iphone", price: 12000 },
{ name: "imac", price: 25000 },
{ name: "ipad", price: 3600 }
];
const total = cart.reduce(
(total, goods) => total += goods.price, 0
);
console.log(total); //40600
//使用 reduce 实现数组去重var arr = [1, 2, 6,2,1];
var filterArr = arr.reduce((pre, cur, index, array) => {
if (pre.includes(cur) == false) {
pre = [...pre, cur];
}
return pre;
}，[])
console.log(filterArr); // [1,2,6]