1. 将对象中null字段全部转为空字符串
var obj={a:null,b:[{c:null,d:'345'}]}
//第一种：类型判断并递归遍历所有对象
function changeNullTostring(obj){
if(!obj){
return ''
}
if(obj.constructor===Array || obj.constructor===Object){
for(let index in obj){
obj[index]=changeNullTostring(obj[index])
}
}
return obj
}
console.log(changeNullTostring(obj))
//第二种：先转成字符串替换所有null，再转换成对象
function changeNullTostring2(obj){
if(!obj){
return ''
}
var objStr=JSON.stringify(obj).replace(/null/g,'""')
return JSON.parse(objStr)
}
console.log(changeNullTostring2(obj))
2. 对象取值，如果没有值不报错返回undefined
console.log(getValue(obj,'obj.sayHello'));
//第一种
function getValue(obj,value,defa){
arrValue=value.split('.');
let valueKeys=obj;
for(let i=1;i<arrValue.length;i++){
if(valueKeys[arrValue[i]]){
valueKeys=valueKeys[arrValue[i]];
}else{
return defa?defa:undefined;
}
}
return valueKeys;
}
//第二种
function getValue2(obj){
let properties=[].slice.call(arguments,1)
try{
let result=obj
for(let index in properties){
let pro=properties[index]
result=result[pro]
}
return result
}catch(e){
return''
}
}
console.log(getValue2(obj,'name','d'))
3. 对下列json获取name去重，并且price取最大值。
var obj=[{name:'简述',age:3,price:8},{name:'哈哈',age:5,price:1},{name:'来吧',age:6,price:23},{name:'哈哈',age:7,price:5},{name:'简述',age:8,price:90}]
function getDeReprocessing(arr){
let arrResult=[];
for(let i=0;i<arr.length;i++){
let flagArr=arrResult.filter((item)=>{
return item.name==arr[i].name;
});
if(flagArr.length<=0){
arrResult.push(arr[i])
continue
}
if(flagArr[0].price<arr[i].price){
let index=arrResult.indexOf(flagArr[0]);
arrResult.splice(index,1,arr[i]);
}
}
return arrResult;
}
4. 合并数据并去重
//第一种
function mergeAndNORepeat(){
let arr=[];
for(let i=0;i<arguments.length;i++){
arr=[...arr,...arguments[i]];
}
let arrResult=[]
for(let j=0;j<arr.length;j++){
if(arrResult.indexOf(arr[j])<=-1){
arrResult.push(arr[j]);
}
}
return arrResult;
}
//第二种
function mergeAndNORepeat2(){
let arr=[];
for(let i=0;i<arguments.length;i++){
arr=[...arr,...arguments[i]];
}
return [...new Set(arr)];//es6新特性方法：new Set(arr)得到一个不重复可遍历的对象
}
5. 根据下列json中age进行排序
var objArr=[{name:'a',age:23},{name:'b',age:12},{name:'c',age:14}];
function getSortByAge(obj){
obj.sort((a,b)=>{
return a.age-b.age
})
return obj
}
6. 求数组中最大值
function getmax(arr){
let max=arr[0];
for(let i=1;i<arr.length;i++){
if(max<arr[i]){
max=arr[i];
}
}
return max;
}
7. 获取一个节点的所有后代节点
var arr=[]
function getChildNodes(node){
var nodes = node.childNodes;
for (var i = 0; i < nodes.length; i++) {
var childNode = nodes[i];
if(childNode.nodeType == 1){
//可以在这里使用这个元素节点了
arr.push(childNode);
getChildNodes(childNode);
}
}
}
8. 打乱数组顺序
//第一种
function randomarr(arr){
for(let i=arr.length-1;i>0;i--){
let randomindex=Math.floor(Math.random()*arr.length);
[arr[i],arr[randomindex]]=[arr[randomindex],arr[i]];
}
return arr;
}
console.log(randomarr([6,8,10,22,45]))
//第二种
console.log([6,8,10,22,45].sort(()=>{return 0.5-Math.random()}))
9. 遍历对象中所有的keys值
//第一种
function getkeys(obj){
console.log(Object.keys(obj));
let arrvalues=Object.values(obj);
for(let i=0;i<arrvalues.length;i++){
if(typeof arrvalues[i]=='object'){
getkeys(arrvalues[i]);
}
}
}
//第二种
var tempArr=[]
function getKey(obj){
for(var key in obj){
tempArr.push(key)
if(typeof obj[key] =='object'){
getKey(obj[key])
}
}
}
10. 异步请求方法
//第一种
function dosomething(callback) {
setTimeout(function() {
console.log('执行结束');
let result = 4;
callback(result);
}, 1000)
}
dosomething((result) => {
console.log('执行结果:' + result)
})
//第二种
function dosomething2() {
return new Promise(function(resolve) {
setTimeout(function() {
console.log('执行结束');
let result = 6;
resolve(result);
}, 1000)
});
}
dosomething2().then(result => {
console.log('接收到的结果:' + result);
})
11. 把数组中的值添加到页面中的列表里
let arr = [1, 6, 9, 3, 8];
let ul = document.createElement('ul');
ul.setAttribute('id', 'ul')
let liHtml = ''
for(let i = 0; i < arr.length; i++) {
// let li=document.createElement('li');
// li.textContent=arr[i];
// ul.appendChild(li)
liHtml += '<li id=' + i + '>' + arr[i] + '</li>';
}
ul.innerHTML = liHtml;
document.body.appendChild(ul);
12. 获取父节点
function getParentNodes(ele) {
if(ele.parentNode) {
console.log(ele.parentNode);
getParentNodes(ele.parentNode);
}
}
let liele = document.getElementById('li');
getParentNodes(liele)
13. 事件委托
通过事件冒泡（或者事件捕获）给父元素添加事件监听
事件冒泡阶段，e.currenttarget和e.target是不相等的，但是在事件的目标阶段，e.currenttarget和e.target是相等的。
e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。
let ul = document.querySelectorAll('ul')[0]
let aLi = document.querySelectorAll('li')
ul.addEventListener('click',function(e){
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1) // 被点击的li
console.log(oLi2) // ul
console.og(oLi1===oLi2) // false
})
14. js运行机制
//第一部分
setTimeout(()=>{
console.log('set1')
new Promise((resolve)=>{
resolve()
}).then((res)=>{
console.log('then3')
})
})
new Promise((resolve)=>{
console.log(1)
resolve()
}).then((res)=>{
console.log('then1')
})
setTimeout(()=>{
console.log('set2')
})
console.log(3)
// 1，3，then1，set1，then3,set2
//异步任务：
//微任务（promise）会先于宏任务（setTimeout)执行
//微任务空了才会执行宏任务
//第二部分
async function a(){
var b= await new Promise((resolve)=>{
resolve(7)
})
console.log(b)
console.log('saync')
}
a()
console.log(1)
//第三部分
for(var i=0;i<10;i++){
(function(i){
setTimeout(()=>{
console.log(i)
})
})(i)
}
15. 获取地址栏参数
function getUrlParams(){
var query=window.location.search.substring(1)
var params=query.split('&')
var paramsObj={}
for(var i in params){
var key=params[i].split('=')[0]
var val=params[i].split('=')[1]
paramsObj[key]=val
}
return paramsObj
}
16. 将两个升序数组合并为一个升序数组
var arr1=[1,3,6,9];
var arr2=[4,7,9];
//第一种利用API
function mergeArr1(){
var arr=[];
for(var i=0;i<arguments.length;i++){
arr=arr.concat(arguments[i]);
}
arr.sort((a,b)=>{
return a-b;
})
arr=[...new Set(arr)]
return arr;
}
//第二种两个数组分别设置两个指针
function mergeArr2(arr1,arr2){
var arr1Point=0,arr2Point=0,arr=[];
while(arr1Point<arr1.length && arr2Point<arr2.length){
var temp=arr1[arr1Point]>arr2[arr2Point] ? arr2[arr2Point++] : arr1[arr1Point++];
if(arr.indexOf(temp)<=-1){
arr.push(temp);
}
}
var otherArr=arr1.slice(arr1Point).concat(arr2.slice(arr2Point))
for(var index in otherArr){
if(resultArr.indexOf(otherArr[index])<=-1){
resultArr.push(otherArr[index])
}
}
return arr
}
console.log(mergeArr2(arr1,arr2));
网友评论