数组过滤__牛客网

HTML/CSS/JavaScript

HGHGHG

// 补全代码
select.onchange = function(){
    ul.innerHTML = cups.filter(item=>{
        switch(select.value+''){
            case '0':
                return true
                break
            case '1':
                return item.sales<100
                break
            case '2':
                return item.sales>=100&&item.sales<=500
                break
            case '3':
                return item.sales>500
                break
        }
    }).map(item=>{
        return `<li>${item.name}</li>`
    }).join('')

应该是销售量，不是价格

发表于 2021-12-03 17:42:19 回复(6)

HTML/CSS/JavaScript

小文同学在努力

需要注意的是：在判断对象的属性是否存在时，必须用“==”而不是“===”

        <script>
            var cups = [
                { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
                { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
            ]
            var select = document.querySelector('select');
            var ul = document.querySelector('ul');
            // 补全代码
            // 渲染ul的方法
            function selectLi(ul,cups) {
                ul.innerHTML = '';
                // 遍历cups
                cups.forEach(item => {
                    let li = document.createElement('li');
                    li.innerHTML = item.name;
                    ul.append(li);
                })
            }
            
            // 监听 下拉选择框的变化事件
            select.onchange = function(e) {
                // 获取当前选择的销售范围条件
                let value = this.value;
                if(value == 1) {
                    let newcups = cups.filter(cup =>cup.sales<100);
                    selectLi(ul,newcups);
                }else if(value ==2) {
                    let newcups = cups.filter(cup =>cup.sales>= 100 && cup.sales <=500);
                    selectLi(ul,newcups);
                }else if(value == 3) {
                    let newcups = cups.filter(cup =>cup.sales>500);
                    selectLi(ul,newcups);
                }else{
                    selectLi(ul,cups);
                }
            }
        </script>

发表于 2022-03-21 17:53:27 回复(1)

__sgf__

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <select name="" id="" onchange="onSelectChange()">
            <option value="0">请选择价格范围</option>
            <option value="1">&lt100</option>
            <option value="2">100~500</option>
            <option value="3">&gt500</option>
        </select>
        <ul>
            <li>牛客logo马克杯</li>
            <li>无盖星空杯</li>
            <li>老式茶杯</li>
            <li>欧式印花杯</li>
        </ul>

        <script>
            var cups = [
                { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
                { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
            ]
            var select = document.querySelector('select');
            var ul = document.querySelector('ul');            
            // 补全代码
            function onSelectChange(){
                //清空写死的四个li标签
                while(ul.children.length > 0){
                    ul.removeChild(ul.children[0]);
                }
                cups.forEach((item,index) => {
                    if(select.value == 0 ||
                       (select.value == 1 && item.sales < 100)||
                       (select.value == 2 && item.sales <= 500 && item.sales >= 100)||
                       (select.value == 3 && item.sales > 500)){
                        let li=document.createElement('li')
                        li.innerHTML = item.name;
                        ul.appendChild(li);
                    }
                })
            }
        </script>
    </body>
</html>

<!-- 
请补全JavaScript代码，要求根据下拉框选中的条件变换重新渲染列表中展示的商品，且只展示符合条件的商品。
注意：
1. 必须使用DOM0级标准事件（onchange）
2. 建议使用ES6的filter方法 -->

发表于 2021-12-23 14:50:43 回复(4)

HTML/CSS/JavaScript

小谷围做题家

var cups = [
    { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
    { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
    { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
    { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
]
var select = document.querySelector('select');
var ul = document.querySelector('ul');
// 补全代码
function render(ul,cups){
    ul.innerHTML=''
    cups.forEach(item=>{
        let li=document.createElement('li')
        li.innerHTML=item.name
        ul.append(li)
    })
}

select.onchange=function(e){
    let value=this.value
    if(value==1){
        let _cups=cups.filter(cup=>cup.sales<100)
        render(ul,_cups)
    }else if(value==2){
        let _cups=cups.filter(cup=>cup.sales>=100&&cup.sales<=500)
        render(ul,_cups)
    }else if(value==3){
        let _cups=cups.filter(cup=>cup.sales>500)
        render(ul,_cups)
    }else{
        render(ul,cups)
    }
}

发表于 2021-12-11 15:06:41 回复(0)

HTML/CSS/JavaScript

牛客218999293号

 我是不是想复杂了；我直接判断多选的大于号、小于号、~去了，还用了正则匹配

select.addEventListener('change', () => {
            let index = select.selectedIndex;
            let text = select.options[index].innerText
            let num = text.match(/\d+(?:\.\d+)?/g)
            let str = text.match(/[^\d\.\*]+/g, "")
            let icon = str[0]
            let min = ''
            let max = ''
            var childs = ul.childNodes;
            for (var i = childs.length - 1; i >= 0; i--) {
                ul.removeChild(childs[i]);
            }
            if (index == 0) {
                cups.forEach(item => {
                    let li = document.createElement('li')
                    li.innerHTML = item.name
                    ul.appendChild(li)
                })
            }
            switch (icon) {
                case '<':
                    min = ''
                    max = Number(num[0])
                    for (let item of cups) {
                        if (item.sales < max) {
                            let li = document.createElement('li')
                            li.innerHTML = item.name
                            ul.appendChild(li)
                        }
                    }
                    break;
                case '~':
                    min = Number(num[0])
                    max = Number(num[1])
                    for (let item of cups) {
                        if (item.sales <= max && item.sales >= min) {
                            let li = document.createElement('li')
                            li.innerHTML = item.name
                            ul.appendChild(li)
                        }
                    }
                    break;
                case '>':
                    min = Number(num[0])
                    max = ''
                    for (let item of cups) {
                        if (item.sales > min) {
                            let li = document.createElement('li')
                            li.innerHTML = item.name
                            ul.appendChild(li)
                        }
                    }
                    break
            }

发表于 2022-10-24 18:24:25 回复(0)

HTML/CSS/JavaScript

牛客722503979号

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <select name="" id="">
            <option value="0">请选择销量范围</option>
            <option value="1">&lt100</option>
            <option value="2">100~500</option>
            <option value="3">&gt500</option>
        </select>
        <ul>
            <li>牛客logo马克杯</li>
            <li>无盖星空杯</li>
            <li>老式茶杯</li>
            <li>欧式印花杯</li>
        </ul>

        <script>
            var cups = [
                { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
                { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
            ]
            var select = document.querySelector('select');
            var ul = document.querySelector('ul');
            // 补全代码
                select.onchange = function(){
            	var index = select.selectedIndex;

            	function show(arr){
                	let list = ''; 
                	arr.forEach(function(v){
                		list += `<li>${v.name}</li>`
                	})
                	ul.innerHTML = list;
            	}
            	function choice(cups,index){
                	let resArr = cups.filter(function(v){
                    	if(index == 1){
                        	return v.sales < 100;
                    	}else if(index == 2){
                        	return v.sales >=100 && v.sales <=500;
                    	}else if(index == 3){
                        	return v.sales >500;
                    	}
                	})
                	return resArr;
           		}
           		show(choice(cups,index));

            }
        </script>
    </body>
</html>

发表于 2022-03-28 13:08:08 回复(0)

HTML/CSS/JavaScript

零樲

我人麻了，选择的价格范围为什么用的是sales字段啊。。。。。

编辑于 2024-03-28 10:02:31 回复(0)

Nealinge

请选择《价格》范围，，

编辑于 2024-03-01 00:45:56 回复(0)

俊朗的祖国花朵希望奇迹发生

<!DOCTYPE html>

<head>

</head>

<body>

<option value="0">请选择价格范围</option>

</select>

<ul>

<li>牛客logo马克杯</li>

<li>无盖星空杯</li>

<li>欧式印花杯</li>

</ul>

var cups = [

{ type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },

{ type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },

{ type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },

{ type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }

]

var select = document.querySelector('select');

var ul = document.querySelector('ul');

select.onchange = function() {

var index = select.selectedIndex;

var value = select.options[index].value;

// 补全代码

if (value == 0) {

const str = cups.map((item, index) => {

return `

`

})

ul.innerHTML = str.join('')

} else if (value == 1) {

const str = cups.filter(item => item.sales < 100).map((item, index) => {

return `

`

})

ul.innerHTML = str.join('')

} else if (value == 2) {

const str = cups.filter(item => item.sales >= 100 && item.sales <= 500).map((item, index) => {

return `

`

})

ul.innerHTML = str.join('')

} else if (value == 3) {

const str = cups.filter(item => item.sales > 500).map((item, index) => {

return `

`

})

ul.innerHTML = str.join('')

}

</script>

</body>

</html>

发表于 2024-01-05 15:04:58 回复(0)

HTML/CSS/JavaScript

疯不皮

  let li = ul.querySelectorAll('li');
  select.onchange = function (event) {
    let result = [];
    switch (parseInt(this.value)) {
      case 0:
        // 代码块1
        console.log("请选择价格范围");
        break;
      case 1:
        // 代码块1
        // console.log(cups);
        result = cups.filter((element) => element.sales < 100);
        // console.log(result);
        break;
      case 2:
        // 代码块2
        result = cups.filter((element) => element.sales >= 100 && element.sales <= 500);
        break;
      case 3:
        // 代码块3
        result = cups.filter((element) => element.sales > 500);
        break;
    }
    ul.innerHTML = '';
    result.forEach((element) => {
      console.log(element);
      ul.insertAdjacentHTML('beforeend', `<li>${element.name}</li>`);
    });
  }

我这个没问题啊，为什么不行捏？？？

发表于 2023-12-22 20:31:43 回复(0)

王应鹏

服了，题目写了请选择价格范围，但是只有判断销量才会通过。

发表于 2023-11-19 16:50:51 回复(0)

中意你的小白菜在努力

是销量范围不是价格范围

发表于 2023-10-15 09:29:08 回复(0)

阿梨er

select.onchange = function (e){
        let resArr  = cups.filter(item =>{
            if (e.target.value === '1'){
                return item.sales < 100
            }else if (e.target.value === '2'){
                return item.sales >=100 && item.sales <= 500
            }else if (e.target.value === '3'){
                return  item.sales > 500
            }
        })
        // console.log(resArr)
        let show = (resArr) =>{
         let list = ''
            resArr.forEach(item =>{
                list += `<li>${item.name}</li>`
            })
            ul.innerHTML = list
        }
           show(resArr)
    }

来个大佬看看为什么这个方法过不了？

发表于 2023-10-10 14:27:39 回复(0)

HTML/CSS/JavaScript

萨加羽

为什么不用 price，而是用 sales呢？？

发表于 2023-09-15 10:50:46 回复(0)

HTML/CSS/JavaScript

Fortaro

select.onchange = function(e){

let fn;

let v = select.value;

switch(v){

case '1':fn = (o)=>o.sales<100;break;

case '2':fn = (o)=>o.sales>=100 && o.sales<=500;break;

case '3':fn = (o)=>o.sales>500;break;

}

ul.innerHTML = '';

cups.filter(fn).forEach(item=>{

ul.innerHTML += `<li>${item.name}</li>`

})

}

发表于 2023-08-14 11:14:29 回复(0)

千舟已过万重山

        
            var select = document.querySelector('select');
            var ul = document.querySelector('ul');
			
            // 补全代码
			select.onchange=function(e){
				var cups = [
				     { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
			{ type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
			{ type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
			{ type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
				]
				let str=''
				if(select.value==1){
				cups=cups.filter((item)=>{
						// console.log(item.price);
						return item.sales<100
					})
					console.log(cups);
				}
				else if(select.value==2){
					cups=cups.filter((item)=>{
							// console.log(item.price);
							return (item.sales>=100)&&(item.sales<=500)
						})
						console.log(cups);
					}
				
				else if(select.value==3){
					cups=cups.filter((item)=>{
							// console.log(item.price);
							return item.sales>500
						})
						console.log(cups);
					}
					if(cups.length){
						cups.forEach(item=>{
							str+=`<li>${item.name}</li>`
						})
					}
				ul.innerHTML=str
			}

发表于 2023-08-12 15:48:24 回复(0)

达拉崩吧、

第一种采用模板字符串，innerHTML插入

const listRender = (list) => {
    let str = "";
    list.forEach((item) => {
        str += `<li>${item.name}</li>`;
    });
    ul.innerHTML = str;
};

第二种，使用文档片段documentFragment，createElement（‘li’）

const createList = (list) => {
    ul.innerHTML = "";
    const frag = document.createDocumentFragment(); // 文档片段，添加元素时不会引起回流
    for (let i = 0; i < list.length; i++) {
        const li = document.createElement("li");
        li.innerText = `${list[i].name}`;
        frag.appendChild(li);
    }
    ul.appendChild(frag);
};

发表于 2023-08-06 09:26:39 回复(0)

牛客264970141号

这题不是选择价格范围嘛，为什么要用sales去判断？？？

发表于 2023-08-02 10:10:31 回复(0)

KeKeMars

很奇怪，为什么不是 item.price 而是 item.sales，我的理解 price 是售价，而 sales 是卖了多少个……

select.onchange = function(e) {
    const result = cups.filter(v => {
        switch(this.value) {
            case '1':
                return v.sales < 100;
            case '2':
                return v.sales >= 100 && v.sales <= 500;
            case '3':
                return v.sales > 500;
            return true;
        }
    }).map(v => `<li>${v.name}</li>`).join('');
    ul.innerHTML = result;
}

发表于 2023-07-25 11:22:13 回复(0)

优秀的阿二

 let obj = {
                0:()=>[].concat(cups),
                1:()=>cups.filter(item=>item.sales<100),
                2:()=>cups.filter(item=>item.sales>=100&&item.sales<=500),
                3:()=>cups.filter(item=>item.sales>500)
            }
            select.onchange = function(e){
                let srr = obj[select.value]();
                let len = srr.length;
                ul.innerHTML = '';
                if(!len)return;
                let fragment = document.createDocumentFragment();
                for(let i = 0; i<len;i++){
                    let li = document.createElement('li');
                    li.innerText = srr[i].name;
                    fragment.appendChild(li)
                }
                ul.appendChild(fragment)
                
            }

发表于 2023-07-21 14:53:43 回复(0)

数组过滤

问题信息

热门推荐

通过挑战的用户

相关试题