最近在撸码过程中,突然发现需要处理很多的js数组,但是对于处理数组的方法很多都想不起来了,所以作为大白的我趁这个时间果断复习并整理了一遍,内容相当通俗易懂,废话不多说,上干货!
一、数组对象的属性
来张w3cschool的官方图:
上面3个属性,是所有数组对象自带的,length大家经常用我就不多废话了,下面我来带大家实践一下constructor(构造器)和prototype(原型)这两个属性:
首先看看constructor什么鬼:
var test=new Array(1,2,3);
var test1 = new Object({
name:'zhangsan',
age:24
});
function employ(name,job,born){
this.name=name;
this.job=job;
this.born=born;
}
var test2=new employ("Bill Gates","Engineer",1985);
console.log(test.constructor); //ƒ Array() { [native code] }
console.log(test1.constructor);//ƒ Object() { [native code] }
console.log(test2.constructor);//ƒ employ(name,job,born){this.name=name;this.job=job;this.born=born;}
if(test.constructor==Array && test1.constructor==Object && test2.constructor==employ){
console.log(true);//true
}else{
console.log(false);
}
结论:可以返回该对象的构造器,不仅仅是数组对象;
再看prototype:
var obj = new Object({
type:'pc',
name:'computer'
});
console.log(obj.price);//undefined
Object.prototype.price = 1500;
console.log(obj.price);//1500
var arr = new Array(1,2,3);
Array.prototype.type = 'INT';
console.log(arr.type);//INT
结论:可以向对象添加属性,包括数组对象;
二、数组的方法
来张w3cschool的官方图:
下面带着大家实践一遍总共14个方法,见好就收藏:
//concat()
var arr1 = new Array(1,2,3);
var arr2 = new Array('zhangsan','lisi');
var arr3 = new Array(true,false);
console.log(arr1.concat(arr2,arr3));//[1, 2, 3, "zhangsan", "lisi", true, false]
//join()
var arr4 = new Array('c:','dir1','dir2','dir3','config.js');
console.log(arr4.join('/'));//c:/dir1/dir2/dir3/config.js
//pop()
var arr5 = new Array('ajax','vue','css3','html5','javascript');
console.log(arr5.pop());//javascript
console.log(arr5);//["ajax", "vue", "css3", "html5"]
//push()注意参数不能直接放数组名
var arr6 = new Array('ajax','vue','css3','htnl5','javascript');
console.log(arr6.push('nodejs','express'));//7
console.log(arr6);//["ajax", "vue", "css3", "htnl5", "javascript", "nodejs", "express"]
//reverse()
var arr7 = new Array(1,2,3,4,5);
console.log(arr7.reverse());//[5, 4, 3, 2, 1]
//shift()
var arr8 = new Array('start','content','end');
console.log(arr8.shift()); //start
console.log(arr8); //["content", "end"]
//slice()
var arr9 = new Array('one','two','three','four','five');
console.log(arr9.slice(2,4)); //["three", "four"]
console.log(arr9.slice(-2)); //["four", "five"] 如果参数为负,则最后位置为-1,倒数第二位置为-2
//sort()
var arr10 = new Array('George','John','Thomas','James','Adrew','Martin');
//splice()
var arr11 = new Array(1,2,3,4,5);
arr11.splice(1,1,22)
console.log(arr11); //[1, 22, 3, 4, 5]
//toSource()该方法返回对象内部的源代码,只有Firefox支持,略过
//toString()
var arr12 = new Array(1,2,3,4,5);
console.log(arr12.toString(arr12));//1,2,3,4,5
//toLocaleString() 使用地区特定的分隔符把生成的字符串连接起来,形成一个字符串。
var arr13 = new Array('one','two','three','four','five');
console.log(arr13.toLocaleString());//one,two,three,four,five
//unshift()
var arr14 = new Array('one','two','three','four','five');
console.log(arr14.unshift('zero')); //6
console.log(arr14);//["zero", "one", "two", "three", "four", "five"]
//valueOf()
var arr15 = new Array(1,2,3)
console.log(arr15.valueOf());//[1, 2, 3]