Array类拓展方法
2024-08-20 13:35:20
var arr=[
{name:'one',sex:'girl',handsome:true},
{name:'two',sex:'girl',handsome:false},
{name:'thr',sex:'boy',handsome:true}
]
我需要根据这个人帅不帅来决定，筛选后的结果
Array.prototype.removeItemByAttr=function (attr) {
var that=this;
var temp=[];
for(var i=0; i<that.length; i++){
if(that[i][attr]){
temp.push(that[i])
}
}
return temp;
}
var newArr=arr.removeItemByAttr('handsome');
console.log(newArr)
我需要只显示学生的姓名，组成的一维数组
Array.prototype.singleDimensionalByAttr=function (attr) {
var that=this;
var temp=[];
for(var i=0; i<that.length; i++){
temp.push(that[i][attr])
}
return temp;
}
var newArr=arr.singleDimensionalByAttr('name');
console.log(newArr)
我需要赛选几个我愿意显示的属性
Array.prototype.singleDimensionalByAttr=function (attrArr) {
var that=this;
var temp=[];
for(var i=0; i<that.length; i++){
var obj={};
for(var j=0; j<attrArr.length; j++){
obj[attrArr[j]]=that[i][attrArr[j]]
}
temp.push(obj)
}
return temp;
}
var newArr=arr.singleDimensionalByAttr(['name','sex']);
console.log(newArr)
重构数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{border-collapse:collapse ;}
td,th{border: red solid 1px; width: 80px; text-align: left;}
</style>
</head>
<body>
<div class="wrapp"></div>
<script>
//list转treeList，type表示根绝什么类型重构treeList
Array.prototype.creatTree=function(type){
var that=this;
var temp = {},
newTree = [];
for(var i = 0; i < that.length; i++){
var ai = that[i];
var aiType=ai[type];
if(!temp[aiType]){
var dt={};
dt.data=[ai];
dt[type]=aiType;
newTree.push(dt);
temp[aiType] = ai;
}else{
for(var j = 0; j < newTree.length; j++){
var dj = newTree[j];
if(dj[type] == aiType){
dj.data.push(ai);
break;
}
}
}
}
return newTree;
} function creatDom(){
//转换数据结构
var oldData=[
{id:201701,clas:1,name:'丁少',age:20},
{id:201702,clas:2,name:'王新',age:21},
{id:201703,clas:1,name:'张三',age:20},
{id:201704,clas:2,name:'李四',age:18}
];
var newData=oldData.creatTree('clas');
console.log(newData) //拼接渲染dom
var str1='';
for (let i=0; i<newData.length; i++) {
str1+= `<fieldset>
<legend>${newData[i].clas}年级</legend>
<table >
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
${
(function(){
var str2='';
for(let j=0; j<newData[i].data.length; j++){
str2+=`<tr>
<td>${newData[i].data[j].name}</td>
<td>${newData[i].data[j].age}</td>
</tr>`
}
return str2;
}())
}
</tbody>
</table>
</fieldset> ` ;
}
var dom=document.querySelector('.wrapp');
dom.innerHTML=str1; } creatDom() </script>
</body>
</html>
当然啊，如果你不想拼接字符串，你可以用vue、angular。如果你项目比较简单，不想用这些沉重的js框架，那你可以尝试字符串模板，我这里有介绍http://www.cnblogs.com/flyings/p/7639323.html
去重1
<script>
Array.prototype.unique=function(){
var that=this;
var temp={};
var tempArr=[]; for (let i=0; i<that.length; i++) {
let b=temp.hasOwnProperty(that[i]);//hasOwnProperty检测对象是否包含该属性
if(!b){
temp[that[i]]=true;
tempArr.push(that[i]);
}
} return tempArr;
} var oldArr=[2,8,5,6,5];
var newArr=oldArr.unique();
console.log(newArr)
</script>
去重2
<script>
Array.prototype.unique=function(){
let that=this; //set返回的是一个对象，为es6新增数据结构，Set不保存重复的元素
let temp=new Set(that);
//ES6为Array增加了from函数用来将其他对象转换成数组
let tempArr=Array.from(temp); return tempArr;
} var oldArr=[2,8,5,6,5];
var newArr=oldArr.unique();
console.log(newArr)
</script>
js的数据结构是在向java靠拢，而且本身js的数据结构也不完善，所以直接看java即可，一下是java的数据结构
移除指定元素
<script>
var arr=['123','456','789'];
Array.prototype.removeByVal=function(item){
var that=this;
for(var i=0; i<that.length; i++) {
if(that[i] == item) {
that.splice(i, 1);
break;
}
}
}
arr.removeByVal('456')
console.log(arr)
</script>
判断数组是否存在某个元素（对象）
Array.prototype.hasItem=function (attr,val) {
var that=this;
var temp=false;
for(var i=0; i<that.length; i++){
if(that[i][attr]==val){
temp=true;
break;
}
}
return temp;
}
var arr=[
{id:'123',name:'one',sex:'girl'},
{id:'456',name:'two',sex:'girl'},
{id:'789',name:'thr',sex:'boy'}
]
console.log(arr.hasItem('id','456'))//true
console.log(arr.hasItem('id','666'))//fasle
判断数组是否存在某个元素（元素简单类型）
<script>
Array.prototype.hasItem=function (val) {
var that=this;
var i=that.length;
var temp=false;
while (i--) {
if (that[i] == val) {
temp=true;
break;
}
}
return temp;
} var arr=[123,'one','girl',false]
console.log(arr.hasItem('456'))//false
console.log(arr.hasItem('one'))//true
</script>
最新文章
- JS常用方法记录
- java web(一) 使用sql标签库+tomcat+mysql手动创建一个jsp练习总结
- JAVA自定义注释(Target,Retention,Documented,Inherit)
- Loadrunner执行Java脚本
- 深入分析MFC文档视图结构（项目实践）
- [转]Mysql explain用法和性能分析
- Excel教程(4) - 数据库函数
- 日期插件-flatpickr
- vijos 1557:bzoj:1413: [ZJOI2009]取石子游戏
- JSP基础知识➣Cookie和Session（五）
- Practice| 流程控制
- MySQL crash-safe replication(2):
- 每日英语：Welcome to the Global Middle-Class Surge
- process_进程池_2
- mysql-connector-java升级到6.0以后启动tomcat报错
- 使用在线工具下载YouTube视频
- 钉钉 E应用 打开分享外链
- 探寻BTree 索引对sql 优化影响
- 用ActionBar的ActionProvider的时候报错：cannot be cast to android.view.ActionProvider
- 使用NSUserDefaults保存自定义对象（转）