关于js数组方法的题目整理 6.24更新至题目5
2024-04-25 00:15:20
目录
题目一：
题目二 把问题1变回去
题目三
要求：1.给出一个名字找出数组中 与 ‘名字’ 处于统一领导下的同事
2.给出一个名字找出数组中 与 ‘名字’ 下的下属
题目四：
解法一：
解法二：
题目5 关于冒泡和捕获的题
*题目6 数组转树【…递归】
题目一：
需要的出结果：
解法一分析： 利用 for of 里面的项是值，这里就是对象
1 定义空对象
2 遍历数组 每一个 item都是一个对象 item.value item.label 就是 需要的
3 将item.value item.label 作为键值对存入新对象中
解法二分析：利用reduce 和 ...运算符 这个更加巧妙些。
需要注意两个点：
1.首先是初始值如果你打印 就会发现 最开始的逗号后的{}其实就是prev（第一个参数）的值，同时他也是累加器。
2.因为我们最终是要对象，所以格式为键值对。同时对象等复杂数据不能直接相加，用...拓展剩余运算符
代码：
const arr = [{ label: '男', value: 0 },{ label: '女', value: 1 },]解法1： function f(arr) {let b = {} //定义空对象接受for (var item of arr) {//将item.value item.label 作为键值对存入新对象中b[item.value] = item.label }return b}
解法2： var b = arr.reduce(function(prev, item) {return { ...prev, [item.value]: item.label } [item.value] 是属性名，属性名是动态的需要加【中括号】}, {})console.log(b) // 1.先传入一个空数组（是初始值）2...prev算是累加器 3.[item.value]: item.label 这个是每次相加的值，这里的意思是吧对象的label值当每次相加的东西 4。最后返回结果
总结：[item.value]: item.label 最巧妙地地方！const obj = f(arr)console.log(obj)题目二 把问题1变回去
要求变成这样：
let obj = { 0: '男', 1: '女' }let arr = [] //1.定义空数组，用于接收新的值for (let item in obj) {// console.log(item, obj[item]) arr.push({label: obj[item],// 2. 利用数组方法push，把数据添加进去value: item,}) //3. 此方法太朴素，一点也不花里胡哨，回头想想怎么玩点骚的}console.log(arr)题目三
要求：1.给出一个名字找出数组中 与 ‘名字’ 处于统一领导下的同事
2.给出一个名字找出数组中 与 ‘名字’ 下的下属
解题思路：1. 根据给出的姓名，遍历查找姓名所在的对象，返回这个对象
2.找谁身上有pid和小刘一样的属性，做判断，最后将遍历的结果添加到数组中。
var data = [{ id: '01', name: '张大大', pid: '', job: '项目经理' },{ id: '02', name: '小亮', pid: '01', job: '产品leader' },{ id: '03', name: '小美', pid: '01', job: 'UIleader' },{ id: '04', name: '老马', pid: '01', job: '技术leader' },{ id: '05', name: '老王', pid: '01', job: '测试leader' },{ id: '06', name: '老李', pid: '01', job: '运维leader' },{ id: '07', name: '小丽', pid: '02', job: '产品经理' },{ id: '08', name: '大光', pid: '02', job: '产品经理' },{ id: '09', name: '小高', pid: '03', job: 'UI设计师' },{ id: '10', name: '小刘', pid: '04', job: '前端工程师' },{ id: '11', name: '小华', pid: '04', job: '后端工程师' },{ id: '12', name: '小李', pid: '04', job: '后端工程师' },{ id: '13', name: '小赵', pid: '05', job: '测试工程师' },{ id: '14', name: '小强', pid: '05', job: '测试工程师' },{ id: '15', name: '小涛', pid: '06', job: '运维工程师' },]// 问题1. 找出 与 小刘 处于统一领导下的同事//步骤：//第一步：先找到小刘，找到小刘的pid 就知道他的领导是谁//第二步： 找谁身上有pid和小刘一样的属性，做判断// function f(data, oo) {// let res = data.find(function(item) {// if (item.name == oo) return item// })// let arr = []// // 完成代码// for (let item in data) {// // console.log((data[item]. = oo))// if (data[item].pid == res.pid)// //&& data[item].name != res.name 要是不要小刘写这句// arr.push(data[item])// }// console.log(arr)// }// f(data, '小刘')// const arr = f(data, '小刘')// console.log(arr) //// // [{id:"10", name: "小刘", pid:"04", job: "前端工程师"},// // {id:"11", name: "小华", pid:"04", job: "后端工程师"},// // {id:"12", name: "小李", pid:"04", job: "后端工程师"}]// // 问题2. 找出 小亮 的所有下属function f2(data, oo) {// 完成代码let res = data.find(function(item) {if (item.name == oo) return item})let arr = [] //问题2和问题1一样，我就删除了一个字母。// 完成代码 //让id = pid查找for (let item in data) {// console.log((data[item]. = oo))if (data[item].pid == res.id)//&& data[item].name != res.name 要是不要小刘写这句arr.push(data[item])}console.log(arr)}const arr = f2(data, '小亮')// console.log(arr) //// [{id:"07", name: "小丽", pid:"02", job: "产品经理"},// {id:"08", name: "大光", pid:"02", job: "产品经理"}]最终效果如下：
题目四：
["b", "c","b", "c","a", "b", "c"] 统计每个元素出现的次数,结果是： {a：1， b: 3, c: 3}
const arr = ["b", "c","b", "c","a", "b", "c"] const obj = {}
// 你的代码 ...console.log(obj) // ==> {a：1， b: 3, c: 3}思路：1.先解构，得到数组A 2.求出重复次数，放入新数组B 3.
解法一：
let obj = {}let oop = [...new Set(arr)] //去重后的新数组 oop let numA = 0; 定义 用于计数a , b , c 次数的三个变量let numB = 0;let numC = 0;arr.forEach((item,index)=>{// 遍历原数组，此循环目的是得到a，b，c出现的次数if(item == 'a'){numA++ //保存a的次数}else if(item == 'b'){numB++ //保存b的次数}else if(item == 'c'){numC++ //保存c的次数} })let arr2 = [numA,numB,numC] //将次数放进数组//目前是我有 键值 但是怎么拼成一个对象呢？// 对oop遍历oop.forEach((item)=>{ //遍历去重后的新数组，目的：设置新对象的键值对if(item == 'a'){obj[item] = numA //将a的次数当做属性a 的 值 存进新对象 obj 中} else if(item == 'b'){obj[item] = numB //将b的次数当做属性b 的 值 存进新对象 obj 中}else if(item == 'c'){obj[item] = numC //将c的次数当做属性c 的 值 存进新对象 obj 中}else{console.log(err);}})console.log(obj) // ==> {a：1， b: 3, c: 3}解法二：
思路：利用reduce，初始传入一个对象，进行判断：如果遍历的每一个项在oop对象中，那么这个项（item在对象oop中是属性）的值加一；如果不在，那么设置属性值初始为1
const arr = ["b", "c","b", "c","a", "b", "c"] var obj = {} //定义空对象准备接受最后的结果obj = arr.reduce((oop,item)=>{if( item in oop){ //数组中每一项在不在oop这个对象中oop[item] = oop[item] +1 //相当于：{a:2}--只是举例理解这句代码}else{oop[item] =1 //相当于： {a:1}--只是举例理解这句代码}console.log(oop);return oop //返回的是reduce的第一个参数，是一个对象},{}) //oop的初始是个空对象，用它进行累加console.log(obj) // ==> {a：1， b: 3, c: 3}题目5 关于冒泡和捕获的题
点击下面的标签，控制台打印效果？
<div id='div'> //为嵌套结构<ul id='ul'><li id='li'>li</li> 两条规则: 1.先捕获后冒泡2.冒泡是从内向外</ul>
</div>
前提：点li
解题1：假如div是true ul和li是false 答案：div(捕获)、li(冒泡从内向外)、ul
解题2：假如div是false ul和li是false 答案：li ul div 没有捕获，执行冒泡，从内向外
解题3：假如ul是true div和li是false 答案：ul(捕获)li(冒泡最里面)div(冒泡最外)
document.getElementById('div').addEventListener('click',function(){console.log('div')},true)
document.getElementById('ul').addEventListener('click',function(){console.log('ul')},false)
document.getElementById('li').addEventListener('click',function(){console.log('li')})解题之前：addEventListener事件监听有三个参数，依次是事件类型、处理函数、布尔值
其中第三个是布尔值，默认false。代表默认冒泡。如果是true代表默认捕获。
一条规则：先捕获后冒泡
谷歌浏览器都支持两种类型
*题目6 数组转树【…递归】
let data = [{ 'id': '3129', 'pid': '', 'name': '总裁办' },{ 'id': '312a', 'pid': '', 'name': '行政部' },{ 'id': '312b', 'pid': '', 'name': '人事部' },{ 'id': '312c', 'pid': '', 'name': '财务部' },{ 'id': '312d', 'pid': '312c', 'name': '财务核算部'},{ 'id': '312e', 'pid': '312c', 'name': '税务管理部'},{ 'id': '312f', 'pid': '312c', 'name': '薪资管理部'},{ 'id': '00d2', 'pid': '', 'name': '技术部'},{ 'id': '00d3', 'pid': '00d2', 'name': 'Java研发部' },{ 'id': '00d4', 'pid': '00d2', 'name': 'Python研发部'},{ 'id': '00d5', 'pid': '00d2', 'name': 'Php研发部'},{ 'id': '00d6', 'pid': '', 'name': '运营部' },{ 'id': '00d7', 'pid': '', 'name': '市场部'},{ 'id': '00d8', 'pid': '00d7', 'name': '北京事业部'},{ 'id': '00d9', 'pid': '00d7', 'name': '上海事业部'}]//此处省略list转数组的方法 *未完成，有bug
optionData(data) {console.log('开始转换为树形数据');let cloneData = JSON.parse(JSON.stringify(data)); // 对源数据深度克隆return cloneData.filter(father => { // 循环所有项，并添加children属性let branchArr = cloneData.filter(child => father.value == child.parentId); // 返回每一项的子级数组branchArr.length > 0 ? father.children = branchArr : ''; //给父级添加一个children属性，并赋值return father.parentId == 0; //返回第一层});
}, //将查询到的list转为树形
let treedata = this.optionData(data);
7. 按钮数组
题目：
// 创建分页组件需要的 按钮数组
// btnCount: 最多能看到几个按钮
// total: 总条数
// size: 每页几条
// page: 当前第几页
function f(total, size, page，btnCount=5) {// show me your codeconst arr = [] // 能看到的页码集合return arr
}
// 在可能的情况下，让page处于正中间
f(100, 10, 1, 5) // ==> [1, 2, 3, 4, 5]
f(100, 10, 7, 5) // ==> [5, 6, 7, 8, 9]
f(100, 10, 2, 5) // ==> [1, 2, 3, 4, 5]
f(100, 10, 5, 5) // ==> [3, 4, 5, 6, 7]
解题：使用的是for循环+判断
function f(total, size, page,btnCount) {let a = page-2let b = page+2const arr = [] // 能看到的页码集合for(let i = 1; i<= btnCount;i++){if( a<=1){a=1}arr.push(a++)}return arr //验证了5条数据，均正常输出结果
}
// 在可能的情况下，让page处于正中间
// 总共10条数据，每页2条数据，当前是第三页，最多能看到5个按钮
//我要的效果是 让3在最中间
// 总数10 5页 page就是最中间的 前后各有两个数
const res = f(100, 10, 1, 5) // ==> [1, 2, 3, 4, 5]
console.log(res);
// f(100, 10, 7, 5) // ==> [5, 6, 7, 8, 9]
// f(100, 10, 2, 5) // ==> [1, 2, 3, 4, 5]
// f(100, 10, 5, 5) // ==> [3, 4, 5, 6, 7]关于js数组方法的题目整理 6.24更新至题目5相关推荐
- 22个超详细的 JS 数组方法
22个超详细的 JS 数组方法 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响. 一.创建数组 1.使用数组 ...
- 前后端交互必备之js数组方法大全
CSDN写作新手,写的不妥之处,请大佬纠正且多多包涵. 文章目录 数组简介 一.js数组方法 二.js数组方法的使用 1.基础方法 2.进阶方法 数组简介 数组,就是将多个元素(通常是同一类型)按一定 ...
- android给数组添加新元素_重磅！超详细的 JS 数组方法整理出来了
作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...
- JS数组方法中哪些会改变原数组，哪些不会？
前言 作为一名前端开发人员,我们每天都会与数组打交道.JS 也提供了很多操作数组的原生 API 供我们调用.在这些方法里面,有的方法会改变原数组,有些不会改变原数组.别看这一点小小的区别,往往会造成巨 ...
- 给数组倒序_22个超详细的 JS 数组方法
作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...
- js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
1.给对象添加属性:使用 object.prop 或object['prop'] 给对象添加属性 let obj={};obj.name="zhangsan";obj[" ...
- JS的组成-JS数组方法-JS函数-系统化学习
JS Day01 什么是js的组成? ECMAScript(es) 其实就是js的规范(规则) DOM 文档对象模型 div span BOM 浏览器对象模型 JS的使用方式 行内样式的书写(不经常使 ...
- 几个关于js数组方法reduce的经典片段
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
- js数组方法-改变原数组和不改变原数组的方法整理
改变原数组: pop(): 删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值.如果数组已经为空,则 pop() 不 改变数组,并返回 undefined ...
最新文章
- appscan基本功能
- 使用vb6绿色版做一个简易图片浏览器
- 直播预告丨深耕用户价值，实战保险业数字化升级
- 其他-私人♂收藏（比赛记录 Mar, 2019)
- eclipse加速之禁用JS、jsp等文件的语法验证
- java定时任务设置为每天执行一次，首次还是好的，到第二天就不执行了的原因
- 机器学习实战系列（五）：SVM支持向量机
- mysql linux查看配置文件my.cnf位置
- linux下查看mysql配置文件位置
- python小波图像去噪_小波去噪
- MySQL高级学习(一) (吾爱破解）
- 计算几何——判断点是否在多边形内
- （待填坑）【数据结构】笛卡尔树
- Introduction to Wireless LAN Measurements From 802.11a to 802. 11 ac
- Can‘t locate XXX/XXX.pm in @INC (you may need to install the XXX::XXX module)
- JavaScript数组方法slice()
- ch341a编程器写操作超时失败
- maya加载不了arnold的mtoa可能是这个低级错误！
- JAVA检验密码复杂度+随机生成6位密码
- 「应用架构」六边型架构：三个原则和一个实现示例