题目一：
需要的出结果：
解法一分析： 利用 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.给出一个名字找出数组中 与 ‘名字’ 处于统一领导下的同事
解题思路：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 code const 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-2 let b = page+2 const 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]
