JavaScript 数组

 本文内容学习于：后盾人 (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]