数组demo

最新推荐文章于 2023-12-19 14:10:06 发布
最新推荐文章于 2023-12-19 14:10:06 发布
阅读量156 收藏
点赞数
原文链接：https://my.oschina.net/u/2408700/blog/3026927
版权 

// data
var personArr = [
    {name:'张三',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
    {name:'刘赢',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
    {name:'王秀英',src:'./img/h3.jpg',des:'324',sex:'m',age:44},
    {name:'李四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
    {name:'王五',src:'./img/h5.jpg',des:'嘻嘻嘻',sex:'f',age:17},
    {name:'赵柳',src:'./img/h6.jpg',des:'呵呵呵',sex:'m',age:28},
    {name:'王二',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
    {name:'王可可',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
    {name:'张翠花',src:'./img/h3.jpg',des:'324',sex:'f',age:44},
    {name:'赵四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
    {name:'王四',src:'./img/h5.jpg',des:'biubiu~~',sex:'m',age:17},
    {name:'张起灵',src:'./img/h6.jpg',des:'哒哒哒',sex:'m',age:28}
];
// dom感受事件发生=>更改状态=>影响视图
// 需求的增加  时间越来越多 状态越来越多  管理状态  合并行为

// initial variable
var oUl = document.getElementsByTagName('ul')[0];
var oInput = document.getElementsByTagName('input')[0];

// 全局过滤器  状态
var state = {
    text:'',
    sex:'a'
}

var filterText = '';
var filterSex = 'a';
// 数据渲染页面
function RenderPage(data){
    var htmlStr = '';
    oUl.innerHTML = '';
    data.forEach(function(ele,index,self){
        htmlStr += '<li><img src="'+ele.src+'" alt=""/><p class="name">'+ele.name+'</p><p class="des">'+ele.des+'</p></li>'
    })
    oUl.innerHTML = htmlStr
}
RenderPage(personArr)
// 添加行为
oInput.oninput = function(){
    // 根据过滤条件 过滤会后的数组
    state.text = this.value;
    var newArr = filterArrByText(personArr,state.text)
    var newArr2 = filterArrBySex(newArr,state.sex)
    RenderPage(newArr2)
}

function filterArrByText(data,text){
    if(!text){
        return data;
    }else{
        return data.filter(function(ele,index){
            return ele.name.indexOf(text) != -1
        })
    }
}

// btn style
var oBtnArr = [].slice.call(document.getElementsByClassName('btn'),0);
var lastActiveBtn = oBtnArr[2];

oBtnArr.forEach(function(ele,index,self){
    ele.onclick = function(){
        changeActive(this);
        state.sex = this.getAttribute('sex')
        var newArr = filterArrBySex(personArr,state.sex);
        var newArr2 = filterArrByText(newArr,state.text);
        RenderPage(newArr2)
    }
})

function changeActive(curActiveBtn){
    curActiveBtn.className = 'btn active';
    lastActiveBtn.className = 'btn';
    lastActiveBtn = curActiveBtn
}

function filterArrBySex(data,sex){
    if(sex == 'a'){
        return data
    }else{
        return data.filter(function(ele,index,self){
            return ele.sex == sex;
        })
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="css/index.css">
</head>

<body>
	<div class="wrapper">
		<div class="sWrapper">
			<input type="text" class="sText"/>
			<span class="btn" sex='m'>Male</span>
			<span class="btn" sex='f'>Female</span>
			<span class="btn active" sex='a'>All</span>
		</div>
		<div class="flWrapper">
			<ul class="userList">
				<!-- <li>
					<img src="img/h1.jpg" alt=""/>
					<p class="name">张三</p>
					<p class="des">a</p>
				</li>-->
			</ul>
		</div>
	</div>
	<script src="js/combineFilter.js"></script>
	<script src="js/index.js"></script>
</body>
</html>
*{
    margin:0;
    padding:0;
    list-style: none;
}
.wrapper{
    width:500px;
    /* height:600px; */
    border:1px solid #ccc;
    border-radius:10px;
    margin:100px auto;
    position:relative;
}
.wrapper .sWrapper .btn{
    cursor: pointer;
    padding:5px;
    border-radius: 5px;
}
.wrapper .sWrapper .active{
    background: #3c8dff;
    color:#fff;
}
.search{
    margin:10px auto;    
    width:100%;
    height:60px;
    /* border:1px solid black; */
}
.wrapper input{
    height:30px;
    width:50%;
    border-radius:10px;
    border:1px solid #ccc;
    margin:15px 0 0 15px;
    padding:5px;
    outline: none;
}

.wrapper .search ul{
    position: absolute;
    right:0px;
    top:25px;
}
.wrapper .search li{
    float:left;
    height:30px;
    padding: 5px 10px;
    margin-right:10px;
    border:2px solid #ff8c00;
    background-color:#fff;
    border-radius:10px; 
    line-height: 30px;
    text-align: center;
    color:#ff8c00;
    font-weight:bolder;
    cursor: pointer;
}
.wrapper .search li:hover{
    border:2px solid #ccc;
}
.userList{
    width:100%;
    /* height:500px; */
    margin-top:25px;
    margin-bottom:30px;
    /* border:1px solid black; */
}
.userList li{
    width:90%;
    height:60px;
    padding:10px;
    border-bottom:1px solid #ccc;
 
}
.userList li img{
    width:60px;
    height:60px;
}
.userList li .name,
.userList li .des{
    display:inline-block;
    width:150px;
    height:60px;
    line-height:60px;
    vertical-align: top;
    margin-left:20px;
    text-align: center;
    font-size:18px;
}
.wrapper .search .active{
    color:#fff;
    background-color: #ff8c00;
}

js组件化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="css/index.css">
</head>

<body>
	<div class="wrapper">
		<div class="sWrapper">
			<input type="text" class="sText"/>
			<span class="btn" sex='m'>Male</span>
			<span class="btn" sex='f'>Female</span>
			<span class="btn active" sex='a'>All</span>
		</div>
		<div class="flWrapper">
			<ul class="userList">
				<!-- <li>
					<img src="img/h1.jpg" alt=""/>
					<p class="name">张三</p>
					<p class="des">a</p>
				</li>
				 -->
			</ul>
		</div>
	</div>
	<script src="js/filter/filterArrBySex.js"></script>
	<script src="js/filter/filterArrByText.js"></script>
	<script src="js/combineFilter.js"></script>
	<script src="js/index.js"></script>
</body>
</html>

index.js


// data
var personArr = [
    {name:'张三',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
    {name:'刘赢',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
    {name:'王秀英',src:'./img/h3.jpg',des:'324',sex:'m',age:44},
    {name:'李四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
    {name:'王五',src:'./img/h5.jpg',des:'嘻嘻嘻',sex:'f',age:17},
    {name:'赵柳',src:'./img/h6.jpg',des:'呵呵呵',sex:'m',age:28},
    {name:'王二',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
    {name:'王可可',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
    {name:'张翠花',src:'./img/h3.jpg',des:'324',sex:'f',age:44},
    {name:'赵四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
    {name:'王四',src:'./img/h5.jpg',des:'biubiu~~',sex:'m',age:17},
    {name:'张起灵',src:'./img/h6.jpg',des:'哒哒哒',sex:'m',age:28}
];
// dom感受事件发生=>更改状态=>影响视图
// 需求的增加  时间越来越多 状态越来越多  管理状态  合并行为

// initial variable
var oUl = document.getElementsByTagName('ul')[0];
var oInput = document.getElementsByTagName('input')[0];

// 全局过滤器  状态
var state = {
    text:'',
    sex:'a'
}

var filterText = '';
var filterSex = 'a';
// 数据渲染页面
function RenderPage(data){
    var htmlStr = '';
    oUl.innerHTML = '';
    data.forEach(function(ele,index,self){
        htmlStr += '<li><img src="'+ele.src+'" alt=""/><p class="name">'+ele.name+'</p><p class="des">'+ele.des+'</p></li>'
    })
    oUl.innerHTML = htmlStr
}
RenderPage(personArr)
// 添加行为
oInput.oninput = function(){
    // 根据过滤条件 过滤会后的数组
    state.text = this.value;
    RenderPage(lastFilterArr(personArr))
}

// btn style
var oBtnArr = [].slice.call(document.getElementsByClassName('btn'),0);
var lastActiveBtn = oBtnArr[2];

oBtnArr.forEach(function(ele,index,self){
    ele.onclick = function(){
        changeActive(this);
        state.sex = this.getAttribute('sex')
        RenderPage(lastFilterArr(personArr))
    }
})

function changeActive(curActiveBtn){
    curActiveBtn.className = 'btn active';
    lastActiveBtn.className = 'btn';
    lastActiveBtn = curActiveBtn
}

combineFilter.js

function combineFilter(config){
    return function(data){
        for(var prop in config){
            // console.log(prop,config[prop],state[prop])
            // text personArr text
            // sex arr sex
            data = config[prop](data,state[prop])
        }
        return data;
    }
}

var lastFilterArr = combineFilter({
    text:filterArrByText,
    sex:filterArrBySex
})

filterArrBySex.js

function filterArrBySex(data,sex){
    if(sex == 'a'){
        return data
    }else{
        return data.filter(function(ele,index,self){
            return ele.sex == sex;
        })
    }
}

filterArrByText.js

function filterArrByText(data,text){
    if(!text){
        return data;
    }else{
        return data.filter(function(ele,index){
            return ele.name.indexOf(text) != -1
        })
    }
}

优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="css/index.css">
</head>

<body>
	<div class="wrapper">
		<div class="sWrapper">
			<input type="text" class="sText"/>
			<span class="btn" sex='m'>Male</span>
			<span class="btn" sex='f'>Female</span>
			<span class="btn active" sex='a'>All</span>
		</div>
		<div class="flWrapper">
			<ul class="userList">
				<!-- <li>
					<img src="img/h1.jpg" alt=""/>
					<p class="name">张三</p>
					<p class="des">a</p>
				</li>
				 -->
			</ul>
		</div>
	</div>
	<script src="js/tool/debounce.js"></script>
	<script src="js/filter/filterArrBySex.js"></script>
	<script src="js/filter/filterArrByText.js"></script>
	<script src="js/combineFilter.js"></script>
	<script src="js/createStore.js"></script>
	<script src="js/index.js"></script>
</body>
</html>

index.js


// data
var personArr = [
    {name:'张三',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
    {name:'刘赢',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
    {name:'王秀英',src:'./img/h3.jpg',des:'324',sex:'m',age:44},
    {name:'李四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
    {name:'王五',src:'./img/h5.jpg',des:'嘻嘻嘻',sex:'f',age:17},
    {name:'赵柳',src:'./img/h6.jpg',des:'呵呵呵',sex:'m',age:28},
    {name:'王二',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
    {name:'王可可',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
    {name:'张翠花',src:'./img/h3.jpg',des:'324',sex:'f',age:44},
    {name:'赵四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
    {name:'王四',src:'./img/h5.jpg',des:'biubiu~~',sex:'m',age:17},
    {name:'张起灵',src:'./img/h6.jpg',des:'哒哒哒',sex:'m',age:28}
];
// dom感受事件发生=>更改状态=>影响视图
// 需求的增加  时间越来越多 状态越来越多  管理状态  合并行为

// initial variable
var oUl = document.getElementsByTagName('ul')[0];
var oInput = document.getElementsByTagName('input')[0];

store.subscribe(function(){
    RenderPage(lastFilterArr(personArr))
})
store.getState('sex')

var filterText = '';
var filterSex = 'a';
// 数据渲染页面
function RenderPage(data){
    var htmlStr = '';
    oUl.innerHTML = '';
    data.forEach(function(ele,index,self){
        htmlStr += '<li><img src="'+ele.src+'" alt=""/><p class="name">'+ele.name+'</p><p class="des">'+ele.des+'</p></li>'
    })
    oUl.innerHTML = htmlStr
}
RenderPage(personArr)
// 添加行为
// 输入行为
// filter folder 处理行为
oInput.oninput = debounce(function(){
    // 根据过滤条件 过滤会后的数组
    store.dispatch({type:'text',value:this.value}) 
},500)

// btn style
var oBtnArr = [].slice.call(document.getElementsByClassName('btn'),0);
var lastActiveBtn = oBtnArr[2];

oBtnArr.forEach(function(ele,index,self){
    ele.onclick = function(){
        changeActive(this);
        store.dispatch({type:'sex',value:this.getAttribute('sex')}) 
    }
})

function changeActive(curActiveBtn){
    curActiveBtn.className = 'btn active';
    lastActiveBtn.className = 'btn';
    lastActiveBtn = curActiveBtn
}

createStore.js

function createStore(initialState){
    var state = initialState || {};
    var list = []; 
    function getState(type){
        return state[type];
    }
    function dispatch(action){
        state[action.type] = action.value;
        // 调用之前订阅过的函数
        list.forEach(function(ele){
            ele();
        })
    }
    function subscribe(func){
        list.push(func)
    }
    return {
        getState:getState,
        dispatch:dispatch,
        subscribe:subscribe
    }
}
var store = createStore({text:'',sex:'a'})

combineFilter.js

function combineFilter(config){
    return function(data){
        for(var prop in config){
            // console.log(prop,config[prop],state[prop])
            // text personArr text
            // sex arr sex
            data = config[prop](data,store.getState(prop))
        }
        return data;
    }
}

var lastFilterArr = combineFilter({
    text:filterArrByText,
    sex:filterArrBySex
})

debounce.js

function debounce(handler,delay){
    var timer = null;
    return function(){
        var _self = this,_arg=arguments
        clearTimeout(timer);
        timer = setTimeout(function(){
            handler.apply(_self,_arg);
        },delay)
    } 
}

filterArrByText.js

function filterArrByText(data,text){
    if(!text){
        return data;
    }else{
        return data.filter(function(ele,index){
            return ele.name.indexOf(text) != -1
        })
    }
}

filterArrBySex.js

function filterArrBySex(data,sex){
    if(sex == 'a'){
        return data
    }else{
        return data.filter(function(ele,index,self){
            return ele.sex == sex;
        })
    }
}

 

转载于:https://my.oschina.net/u/2408700/blog/3026927

chubian7153
关注
打乱数组demo
CCC_B的博客
09-07 173
给定一个数组，返回打乱后的数组，每种打乱的结果要等可能的返回。这里使用到了洗牌算法。
数组Demo
weixin_30843605的博客
10-16 103
要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组 var newArray = []; // 空数组 for (var i = 0; i < numbers.length; i++) { if (numbers[i] !== 0) { //numbers[i]; //找到的非0元素，存储到新的数组中 newArray...
Java -数组实例（JavaArrayDemo）
该账号已迁移至-程序员菜鲲：https://blog.csdn.net/devcaikun
05-08 582
//package Main; public class ArrayDemo { public static void main(String[] args) { int array[]=new int []{8,2,4,7,9,5,6,3,1,0} ; utilArraySorting uas = new utilArraySorting() ; ...
filter(ele)过滤数组
04-02 250
filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。 例如，在一个Array中，删掉偶数，只保留奇数，可以这么写： function remove(arr) { let res = arr.filter(function (ele) { return ele % 2 !== 0; }...
Java中数组的定义与使用(一)
热门推荐
mrbacker的博客
09-01 96万+
如果说现在要求你定义100个整型变量，那么如果按照之前的做法，可能现在定义的的结构如下： int i1, i2, i3, ... i100; 但是这儿时候如果按照此类方式定义就会非常麻烦，...
【java】使用反射创建数组demo
weixin_73870547的博客
12-19 424
在这个示例中，我们使用了Java的反射机制来创建一个String类型的数组，并设置了数组的长度为5。通过Array.newInstance方法，我们可以动态地创建一个指定类型和长度的数组对象。接下来，我们使用Array.set方法来设置数组元素的值。在示例中，我们将数组的第一个元素设置为"李白"，第二个元素设置为"杜甫"。在示例中，我们获取了数组的第二个元素，并将其赋值给变量o1。通过使用反射，我们可以在运行时动态地创建和操作数组对象，这为我们提供了更大的灵活性和扩展性。
VBA提高篇_11 Split字符串拆分/动态数组Demo
pigerr的博客
02-01 881
【代码】VBA提高篇_11 Split字符串拆分/动态数组Demo。
循环动态数组demo
06-14
循环动态数组（Circular Dynamic Array）是一种特殊的动态数组实现，它在数组的尾部和头部之间建立了一种循环关联，使得插入和删除元素时，不需要像普通数组那样移动大量的元素。这样可以提高在频繁添加或删除元素的...
json-c解析数组demo
06-07
json-c解析获取数组 demo 网上基本没看到几个自己找的
【Intent传递】对象、数组 DEMO
06-02
本DEMO重点展示了如何通过Intent来传递对象和数组，这是一个非常实用且常见的技能点。下面我们将深入探讨Intent的使用以及如何在Intent中携带对象和数组。 1. **Intent的基本概念** Intent是一个消息对象，用来...
前端基础数组、对象数组去重demo
12-21
前端基础数组、对象数组去重demo
【LSTM回归预测】基于emd结合长短记忆神经网络lstm实现风速回归预测附Matlab源码.rar
10-28
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
SVM classifier train test result
10-28
SVM classifier train test result
奇迹书屋_24.08.10.apk
10-28
奇迹书屋_24.08.10.apk
Qt文件拷贝器（源码）
最新发布
10-28
Qt多线程文件拷贝器
【Unity顶点纹理烘焙插件】Vertex Texture Baker
10-28
文件名：Vertex Texture Baker v2024.1.unitypackage Vertex Texture Baker 是一个 Unity 插件，专为开发者提供将纹理数据烘焙到顶点颜色中的工具。这种技术对于优化模型或场景中的资源管理和渲染性能非常有帮助，特别是在不需要高分辨率纹理或希望减少内存占用的情况下。 主要功能： 纹理数据烘焙到顶点颜色： 该插件允许开发者将模型的纹理数据烘焙到其顶点颜色中，从而替代高分辨率的纹理贴图。这样可以有效减少材质贴图的使用，降低内存和显存的消耗。 支持多种纹理类型： 颜色纹理：将颜色信息直接烘焙到顶点数据。 法线纹理 (Normal Map)：将法线信息转换并存储到顶点中，用于光照和细节渲染。 高度纹理 (Height Map)：可以烘焙地形等物体的高度信息到顶点上，适用于低多边形模型的细节增强。 提高性能： 烘焙后的模型不再依赖高分辨率纹理，减少了材质和纹理的调用次数，从而提升整体渲染性能，尤其在移动端设备和低端硬件上表现突出。 优化内存占用： 通过减少纹理贴图的使用，插件可以显著减少 GPU 和内存的占用量......
技术资料分享0b-esp8266-system-description-cn-v1.4很好的技术资料.zip
10-28
技术资料分享0b-esp8266_system_description_cn_v1.4很好的技术资料.zip
115不同的子序列.zip
10-28
115不同的子序列.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值