上周面试,被问处理数组的函数,我只能说出一个isArray……好菜。
所以这两天补天,就记录一下新学的函数吧。一定要注意函数的大小写!JS语言真的对大小写很敏感!!!
【em,先理清楚两个概念,一个是数组,一个是对象。
数组是用大括号[],对象使用花括号{}。一个数组里面可以有对象。
①数组和对象创建格式不同。数组就是:var 数组名 = [a,b,c,d,e,f]; 对象就是:var 对象 = {属性1:属性值,属性2:属性值}; 注:对象里面可以有函数
数组里的对象:var 数组名 = [{属性1:属性值,属性2:属性值,函数(){....}},{属性1:属性值,属性2:属性值,函数(){....}}];
②使用方法不同。数组是:数组名[下标号] 对象是:对象名.属性名 (对象使用函数格式:对象名.函数名();)
③识别变量是数组还是对象,用:typeof 变量名;
】
1、输出数组内容:toString()和直接输出
ex:输出的结果:apple,banana,pear,peach,orange
var a = ['apple','banana','pear','peach','orange'];
document.getElementById('init').innerHTML = a;
document.getElementById('init1').innerHTML = a.toString();
(其他:输出第一个元素:数组名[0] 输出最后一个元素:数组名[数组名.length - 1] 修改数组内容:数组名[下标] = “修改的数据”)
2、在数组中添加新内容:splice(),push(),用长度添加,用下标添加
①splice(开始下标,0,添加的数据) ex:document.getElementById('splice1').innerHTML = "添加的新数据:" + a.splice(2,0,'watermelon');
其实这个函数的功能并不是用来添加数据到数据的,但是可以这么用而已。上面的那个代码是说在下标为2的位置后面,删除0个元素,用watermelon来代替。
(补充一下:splice函数主要是用来删除数据的
ex:document.getElementById('splice3').innerHTML = "删除的数据:" + a.splice(1,2,'blueberry'); //删除数组a中下标为1开始的2个元素,并用一个新的元素blueberry来代替,这个输出的是你删除掉的两个元素。
)
②push("要添加的数据")
ex:在数组a中添加一个数据moto,在id为pu1的位置中输出整个数组
a.push("moto"); //push方法里面加双引号
document.getElementById('pu1').innerHTML=a;
③用长度添加
ex:因为数组下标是从0 开始,而数组长度是从1 开始,那就是说数组长度就是一个没有数据的空位,所以可以把新数据插入进去。(和下面的方法意思是一样的)
a[a.length] = "walk"; //最后的位置又长度确定
document.getElementById('pu2').innerHTML=a;
④用下标添加
ex:这个方法你要知道最后一个元素所在的下标,然后这个下标加一就是一个没存放数据的空位,就相当于添加了一个新数据。
a[6] = "train"; //这个最后的位置要自己确定,我这个数组是有6个元素了。
document.getElementById('pu3').innerHTML=a;
3、遍历数组:for,forEach()
①for循环输出
ex:输出数组a的内容。就是直接用for循环就好了,循环之后输出就行。
var text = "<ul>";
for(var i = 0;i < a.length ;i++){
text += "<li>" + alt[i] + "</li>";
}
text += "</ul>";
document.getElementById('bianli').innerHTML=text;
②forEach()输出。(这个有点复杂的感觉,重点是格式要记住一下)
ex:输出数组a,forEach函数括号里的参数是自己定义的函数。使用这个就是:数组名.forEach(自定义输出函数)
其中自定义输出函数里面就是你想以什么格式输出这个数组。比如我这个就是一个表单。
var text2 = "<ul>";
a.forEach(myfun);
text2 += "</ul>";
document.getElementById("bianli2").innerHTML=text2;
function myfun(s){
text2 += "<li>" + s + "</li>";
}
4、创建新数组:map()、filter()
①map()函数:修改原有的数组数据,而且是全部都会做出一样的修改。
ex:数组num全部元素加1。如果数组是字符串,就是在后面加一个字符串1的样子。
var num2 = num.map(demo_2); //使用方法就是:原数组名.map(自定义函数);
document.getElementById('demo2').innerHTML = num2;
function demo_2(value){ //自定义函数就是你需要对这个数组进行的操作。
return value + 1;
}
②filter()函数:对原来的数组进行筛选,然后把一些数据过滤掉之后,剩下的数据就成为新的数组。
ex:过滤掉原来数组num中小于等于7的数据,剩下的数据就组成了新的数组num3。
var num3 = num.filter(demo_3); //使用方法就是:原数组名.filter(自定义函数);
document.getElementById('demo3').innerHTML = num3;
function demo_3(value){ //自定义函数里面是保留数据的条件,就是新数组里面的数据都满足这个条件
return value > 7;
}
5、求和函数reduce().....其实不算是求和吧,如果数组全是数字,就会全部相加,输出最后的总数。如果是字符串,就把字符串连成一串输出。
ex:
var num4 = num.reduce(demo_4); //原数组名.reduce(自定义函数);
document.getElementById('demo4').innerHTML = num4;
function demo_4(total,value) { //这个函数有四个值(总数,项目值,项目索引,数组本身),如果后面的两个没有用到就可以不写,但是一定要有value。——我也是不是很明白这个项目索引是啥。
return total + value;
}
6、检测数组内容:every(),some() ---------->这两个返回的数据都是bool类型,如果满足条件就true,不满足就false
①every()函数:就是需要数组里面的元素都满足这个条件,否则就false
ex:判断原来的num数组是否满足都小于20的条件
var num5 = num.every(demo_5); //原数组名.reduce(自定义函数);
document.getElementById('demo5').innerHTML = num5;
function demo_5(value){ //自定义的函数里面就是条件
return value < 20;
}
②some()函数:只要数组里面有一个满足条件就返回true,否则就是false
ex:判断原来的数组num里面是都有小于7的数据,有则true,否则false
var num6 = num.some(demo_6); //原数组名.reduce(自定义函数);
document.getElementById('demo6').innerHTML = num6;
function demo_6(value){ //自定义的函数里面就是条件
return value < 7;
}
7、查找内容在数组中的位置:indexOf(),lastIndexOf(),findIndex()-------->都是直接从数组前端开始查找,有符合的就返回数组下标,否则就返回-1
有一个例外:find()
①indexOf(查找内容,开始位置)
ex:在num数组中查找8这个数字
var num7 = num.indexOf(8);
document.getElementById('demo7').innerHTML = num7;
②lastIndexOf():这个是在一个有重复数据的数组里面,然后查找这个数据最后一次出现的位置,返回下标。还是在数组头部开始数,不是从后面开始数!!!
ex:1在这个数组中有重复,现在输出最后的1所在位置的下标。
var num8 = num.lastIndexOf(1);
document.getElementById('demo8').innerHTML = num8;
③findIndex():在数组中找第一个满足条件的数据下标
ex:在数组num中找第一个大于5的数的下标
var num10 = num.findIndex(demo_10);
document.getElementById('demo10').innerHTML = num10;
function demo_10(value){
return value > 5;
}
④find():这个函数不是返回下标,是返回符合条件的第一个数!是返回这个数!
ex:在数组num中找到第一个大于7的数,返回的是数
var num9 = num.find(demo_9);
document.getElementById('demo9').innerHTML = num9;
function demo_9(value){
return value > 7;
}
8、一些和排序功能结合的:sort(),reverse(),random(),比值函数。。。。比值函数应该不算是一个独立函数
①sort():数组是数字,就是升序排列。如果是字符串,就是a-z的升序。(注意:这里的数字是按第一位1-9的排序,所以会出现一种100比21小的情况,需要用到比值函数来矫正数值大小)
ex:对数组a进行排序
a.sort();
document.getElementById('sor').innerHTML = "排序之后的:" + a;
②reverse():对排列好的数组进行反转,就是把升序的数组变成降序
ex:(最好结合上面的排序函数一起用)
a.reverse();
document.getElementById('re').innerHTML = "反转之后的:" + a;
③random():这个是随机排序。
ex:把这个用在button上,就相当于每次按按钮都会把原来的数组顺序打乱。
var ran_b = b.sort(function(a,b){return 0.5 - Math.random()}); //必须是小数减去一个随机数才能有随机排序,减整数没效果
document.getElementById('rand').innerHTML = ran_b;
④比值函数:就是为了解决上面那个sort造成一些数值排序不对的问题
ex:
var b = [1,5,78,90,3,45,2];
document.getElementById('num_sor').innerHTML = b;
function sort_num(){
b.sort(function(a,b){return a - b;}); //比值函数,a-b是升序,改成b-a就会是降序
document.getElementById('num_sor').innerHTML = b;
}
(补充:数组里面有对象的话,可以根据对象的属性来排序
ex:
var c = [{name:"bill",year:2001},
{name:"Lucy",year:2009},
{name:"find",year:1997}
];
function sor_y(){ //根据年份来排序
c.sort(function(a,b){return a.year - b.year});
display();
}
function sor_n(){ //根据名字来排序
c.sort(function(a,b){
var x = a.name.toLowerCase(); //a.字段名.toLowerCase(),对字符升序,注:.toLowerCase()是将字符串转换为小写
var y = b.name.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
display();
}
function display(){ //这个是我输出这个对象的函数,可以自定义输出格式的
document.getElementById('sor_year').innerHTML =
c[0].name + " " + c[0].year + "<br>" +
c[1].name + " " + c[1].year + "<br>" +
c[2].name + " " + c[2].year;
}
)
9、最值函数:Math.max.apply(),Math.min.apply()。没啥好说的,就是最大值最小值。
ex:用法就是:Math.max.apply(null,数组名) ————>这个null我不清楚,可是需要。
var n_ma = Math.max.apply(null,b); //最大值
document.getElementById('max_n').innerHTML = n_ma;
var n_min = Math.min.apply(null,b); //最小值
document.getElementById('min_n').innerHTML = n_min;
好吧,这是我自己的学习笔记。有什么不对的和不懂的。后期补。或者我直接在评论里补回来。