文章的更新路线：JavaScript基础知识-Vue2基础知识-Vue3基础知识-TypeScript基础知识-网络基础知识-浏览器基础知识-项目优化知识-项目实战经验-前端温习题（HTML基础知识和CSS基础知识已经更新完毕）
正文
不想作小白？不懂算法？运用好这些数组操作方法，一样提升实力。
push
在数组最后新增，改变原数组
var arr = ["hello",true,45,{},"world"];
arr.push('!');
console.log(arr); // [ 'hello', true, 45, {}, 'world', '!' ]
unshift
在数组开头新增，改变原数组
var arr = ["hello",true,45,{},"world"];
arr.unshift('输出：');
console.log(arr); // [ '输出：', 'hello', true, 45, {}, 'world' ]
pop
在数组最后删除，改变原数组
var arr = [1,3,5,7,6];
arr.pop();
console.log(arr); // [ 1, 3, 5, 7 ]
shift
在数组开头删除，改变原数组
var arr = [1,3,5,7,6];
arr.shift();
console.log(arr); // [ 3, 5, 7, 6 ]
reverse
数组各元素倒序排列，改变原数组
var arr = [1,3,5,7,6];
arr.reverse();
console.log(arr); // [ 6, 7, 5, 3, 1 ]
concat
合并两个数组，返回新数组，不改变原数组
var arr1 = ["hello",true,45,{},"world"];
var arr2 = [3,6,1,8,12];
arr1.concat(arr2); // [ 'hello', true, 45, {}, 'world', 3, 6, 1, 8, 12 ]
console.log(arr1); // [ 'hello', true, 45, {}, 'world' ]
console.log(arr2); // [ 3, 6, 1, 8, 12 ]
slice
从已有的数组中返回选定的元素(新数组)，不改变原数组
// array.slice(start, end)
// start从0开始，不包含end
var arr = [34,"a",67,"b","vc","html","hello"];
console.log(arr.slice(2,5)); // [67, "b", "vc", "html"]
console.log(arr); // [34, "a", 67, "b", "vc", "html", "hello"]
splice
添加或删除数组中的元素，返回新数组，改变原数组，howmany为0时不删除，item为空时不替换
// array.splice(index,howmany,item1,.....,itemX)
var arr = [34,"a",67,"b","vc","html","hello"];
console.log(arr.splice(2,2,"html")); // [67, "b"]
console.log(arr); // [34, "a", "html", "vc", "html", "hello"]
sort
数组排序
// array.sort(sortfunction)
// 默认升序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.sort()); // [ 'Apple', 'Banana', 'Mango', 'Orange' ]
// 传入函数升序
var points = [40,100,1,5,25,10];
console.log(points.sort()); // [ 1, 10, 100, 25, 40, 5 ]
console.log(points.sort(function(a,b){return a-b})); // [ 1, 5, 10, 25, 40, 100 ]
// 传入函数降序
var points = [40,100,1,5,25,10];
console.log(points.sort(function(a,b){return b-a})); // [ 100, 40, 25, 10, 5, 1 ]
indexOf
检测数组中是否存在指定数据searchvalue，从索引start开始检测，存在返回索引，不存在返回-1
// string.indexOf(searchvalue,start)
var arr = ["a","45",67,true,"hello",67,45,25,13,89];
console.log(arr.indexOf(67)); // 2
console.log(arr.indexOf(67,3)); // 5 从索引3开始检测是否有67
console.log(arr.indexOf(67,6)); // -1
forEach
用于调用数组的每个元素，并将元素传递给回调函数，对于空数组是不会执行回调函数，不改变原数组
// array.forEach(function(currentValue, index, arr), thisValue)
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item, index, arr) {
console.log(item);
console.log(index);
console.log(arr);
});
find
1、返回通过测试（函数内判断）的数组的第一个元素的值 2、为数组中的每个元素都调用一次函数执行： a.当数组中的元素在测试条件时返回 true时, find() 返回符合条件的元素，之后的值不会再调用执行函数 b.如果没有符合条件的元素返回 undefined 3、对于空数组，函数是不会执行的 4、不会改变原始数组
// array.find(function(currentValue, index, arr),thisValue)
var arr = [1,2,3,4,5,6,7];
// 简写
var a=arr.find(v=>v===4); // 4
//
var b = arr.find(function (item, index, arr) {
return item === 4
}) // 4
findIndex
1、返回传入一个测试条件（函数）符合条件的数组第一个元素位置。 2、为数组中的每个元素都调用一次函数执行： a.当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。 b.如果没有符合条件的元素返回 -1 3、对于空数组，函数是不会执行的。 4、不会改变原始数组
// array.findIndex(function(currentValue, index, arr), thisValue)
var arr = [1,2,3,4,5,6,7];
// 简写
var a=arr.findIndex(v=>v===4); // 3
//
var b = arr.findIndex(function (item, index, arr) {
return item === 4
}) // 3
map
1、返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值 2、按照原始数组元素顺序依次处理元素 3、不会对空数组进行检测 4、不会改变原始数组
// array.map(function(currentValue,index,arr), thisValue)
var arr = ["a", "45", 67, true, "hello", 67, 45, 25, 13, 89];
var m = arr.map(function(item, index, arr){
// console.log(item, index, arr)
return item + "a";
})
console.log(arr); // ["a", "45", 67, true, "hello", 67, 45, 25, 13, 89]
console.log(m); // ["aa", "45a", "67a", "truea", "helloa", "67a", "45a", "25a", "13a", "89a"]
filter
1、创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 2、不会对空数组进行检测 3、不会改变原始数组
// array.filter(function(currentValue,index,arr), thisValue)
var arr = ["a", "45", 67, true, "hello", 67, 45, 25, 13, 89];
var f = arr.filter(function(item, index, arr){
return typeof item === 'string';
})
console.log(f); // ["a", "45", "hello"]
some
1、用于检测数组中的元素是否满足指定条件（函数提供） 2、依次执行数组的每个元素： a.如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测 b.如果没有满足条件的元素，则返回false 3、不会对空数组进行检测 4、不会改变原始数组
// array.some(function(currentValue,index,arr),thisValue)
var arr = ["a", "45", 67, true, "hello", 67, 45, 25, 13, 89];
var f = arr.some(function(item, index, arr){
if(val == 67){
return item;
}
})
console.log(f); // true
var f = arr.some(function(item, index, arr){
if(val == "cvb"){
return item;
}
})
console.log(f); // false
console.log(arr); // ["a", "45", 67, true, "hello", 67, 45, 25, 13, 89]
every
1、用于检测数组所有元素是否都符合指定条件（通过函数提供） 2、使用指定函数检测数组中的所有元素： a.如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测 b.如果所有元素都满足条件，则返回 true 3、不会对空数组进行检测 4、不会改变原始数组
// array.every(function(currentValue,index,arr), thisValue)
var arr = ["a", "45", 67, true, "hello", 67, 45, 25, 13, 89];
var f = arr.every(function(item, index, arr){
if(val == 67){
return item;
}
})
console.log(f); // false
console.log(arr); // ["a", "45", 67, true, "hello", 67, 45, 25, 13, 89]
reduce
1、接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值 2、作为一个高阶函数，用于函数的 compose 3、对于空数组是不会执行回调函数的 4、不改变原数组
// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// 1、求数组各项和
var arr = [1,2,3,0,4,5];
var sum = arr.reduce(function(pre,cur){
return pre + cur;
})
console.log(sum); // 15
//2、取最大值
var max = arr.reduce(function(pre,cur){
return Math.max(pre,cur);
})
console.log(max); // 5
//3.数组去重
var norepeat = arr.reduce(function(pre,cur){
pre.indexOf(cur) === -1 && pre.push(cur);
return pre;
},[])
console.log(norepeat); // [1,2,3,0,4,5,1]
//还可以求阶层（pre*cur），就幂次方（pre**cur）
//4.将二维数组转换成一维数组
var arr1 = [[1,2],[3,4]];
var str = arr1 .reduce(function(prev,cur){
return prev.concat(cur);
})
console.log(str); // [1,2,3,4]
reduceRight
1、功能和 reduce功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加
2、对于空数组是不会执行回调函数的
3、不改变原数组
array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
join
1、用于把数组中的所有元素转换一个字符串
2、元素是通过指定的分隔符进行分隔的
3、不改变原数组
// array.join(separator)
// 1、join方法的参数不传或者传入undefined会默认用逗号分隔。
var arr1 = [1,2,3,4];
var arr2 = [];
arr2 = arr1.join(undefined);
console.log(arr2); // 1,2,3,4
console.log(arr1); // [1, 2, 3, 4]
// 2、
arr2 = arr1.join("、");
console.log(arr2); //1、2、3、4
entries
返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)
var itemData = {
"一般情况及头颈部": [
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3753,
"dmi_name": "暖手和听诊器、准备各种检查用具，并告知患者意图",
"dmi_namespecial": "",
"dmi_order": 1,
"dmi_projectname": "一般情况及头颈部",
"dmi_score": 2,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2020-04-13 15:19:00.0",
"memo": ""
},
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3754,
"dmi_name": "眼：结膜（观察充血）、巩膜（观察黄染）、瞳孔对光反射",
"dmi_namespecial": "",
"dmi_order": 2,
"dmi_projectname": "一般情况及头颈部",
"dmi_score": 4,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:10:13.0",
"memo": ""
},
],
"腹部": [
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3764,
"dmi_name": "（视诊）腹部形态",
"dmi_namespecial": "",
"dmi_order": 12,
"dmi_projectname": "腹部",
"dmi_score": 2,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:24:51.0",
"memo": ""
},
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3765,
"dmi_name": "（听诊）肠鸣音",
"dmi_namespecial": "",
"dmi_order": 13,
"dmi_projectname": "腹部",
"dmi_score": 4,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:25:52.0",
"memo": ""
},
],
"重点查体": [
{
"dmi_ctime": "2017-06-14 17:03:36.0",
"dmi_dmtid": 238,
"dmi_id": 3773,
"dmi_name": "具体的重点查体步骤能体现诊断思路和鉴别关键点",
"dmi_namespecial": "",
"dmi_order": 22,
"dmi_projectname": "重点查体",
"dmi_score": 5,
"dmi_scorespecial": 0,
"dmi_stepscore": 0.5,
"dmi_utime": "2018-05-17 14:36:34.0",
"memo": ""
}
]
}
// 对象转换为数组
var examPaperDetails = Object.entries(itemData).map(([groupName, array]) => ({ groupName, array }));
console.log(examPaperDetails)
// 具体输出结果可在浏览器控制台验证
// [
// { groupName: '一般情况及头颈部', array: [ [Object], [Object] ] },
// { groupName: '腹部', array: [ [Object], [Object] ] },
// { groupName: '重点查体', array: [ [Object] ] }
// ]
Array的keys/values/entries方法
let arr = ['a', 'b', 'c']
for (let index of arr.keys()) {
console.log(index);
}
// 0
// 1
// 2
for (let item of arr.values()) {
console.log(item);
}
// 'a'
// 'b'
// 'c'
for (let [index, item] of arr.entries()) {
console.log(index, item);
}
// 0 'a'
// 1 'b'
// 2 'c'
Object的keys/values/entries方法
let obj = {
name:"张三",
sex:"男",
age:20
}
for ( let key of Object.keys(obj)){
console.log(key)
}
// name
// sex
// age
for ( let val of Object.values(obj)){
console.log(val)
}
// 张三
// 男
// 20
for ( let val of Object.entries(obj)){
console.log(val)
}
// (2) ["name", "张三"]
// (2) ["sex", "男"]
// (2) ["age", 20]
for ( let [key,val] of Object.entries(obj)){
console.log(key,val)
}
// name 张三
// sex 男
// age 20
结束语
JavaScript基础系列文章已经更新完毕，准备了一份思维导图以帮助更好的学习JavaScript知识，有需要的可以找我领取。接下来是Vue2基础系列文章，希望可以帮助前端同行和对前端有兴趣的朋友。
本文由 mdnice 多平台发布
780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
