前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣
题目
请补全JavaScript代码，要求将数组参数中的多维数组扩展为一维数组并返回该数组。
注意：
1. 数组参数中仅包含数组类型和数字类型示例1
输入：
[1,[2,[3,[4]]]] 输出： [1,2,3
编辑
核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组过滤</title>
</head>
<body>
<select name="" id="">
<option value="0">请选择销量范围</option>
<option value="1"><100</option>
<option value="2">100~500</option>
<option value="3">>500</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');
// 补全代码
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>
总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组过滤</title>
</head>
<body>
<select name="" id="">
<option value="0">请选择销量范围</option>
<option value="1"><100</option>
<option value="2">100~500</option>
<option value="3">>500</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');
// 补全代码
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>
总结
通过方法的调用实现数据的筛选操作 nice