前端常见问题汇总

1.判断变量是否空值 

/*** 判断变量是否空值*
 undefined, null, '', false, 0, [], {} 均返回true，否则返回false
*/
function empty(v){
    switch (typeof v){
        case 'undefined' : return true;
        case 'string' : if(trim(v).length == 0) return true;break;
        case 'boolean' : if(!v) return true; break;
        case 'number' : if(0 === v) return true; break;
        case 'object' :if(null === v) return true;
        if(undefined !== v.length && v.length==0) return true;
            for(var k in v){return false;} return true;
            break;
        }
return false;}

 2.不刷新页面的情况下改变URL

/*** 
设置浏览器url*  params：queryObj（参数对象）
*/
function setBrowserUrl(queryObj){    
// stringify是queryString的一个api，具体可以查看node官网，也可以自己实现   
 var url = `${location.pathname}?${stringify(queryObj)}`   
 history.pushState({url: url}, '', url)
}

3.检测是否包含了‘，’

if ("输入的值".indexOf(",") != -1) {
alert("包含了逗号");
}

4.检测对象是否有此参数

var obj = {   
a: 1,        b: 2,        c: 3  
}
console.log(obj.hasOwnProperty('a')); // true        
因为当前定义对象中含有此参数, 故返回值为 true

5.数组切割

let newArr=[];
let data = [
{url:"img1.jpg,j.jpg,new.mp4",title:"标题"},
{url:"img.jpg,j.jpg,jack.mp4",title:"标题1"}
];
for(let i=0;i<data.length;i++){  
let oUrlArr = data[i].url.split(","); 
 let imgUrl = [],mp4Arr=[]; 
 for(let j=0;j<oUrlArr.length;j++){   
 if(oUrlArr[j].indexOf("mp4")!=-1){     
 mp4Arr.push(oUrlArr[j]);    
}else {     
imgUrl.push(oUrlArr[j]); 
   } 
 }; 
 newArr[i]=data[i]; 
 newArr[i].imgUrl=imgUrl;
  newArr[i].mp4Arr=mp4Arr;}

6.js 快速将字符串数组 转化为 数字数组（互换）

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); 
//结果： ['1', '2', '3', '4', '5', '6', '7', '8', '9']
var a = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
a.map(Number); //结果：[1, 2, 3, 4, 5, 6, 7, 8, 9]

7.合并

var arr = [
{id: 1, score: 1, type: 1},
{id: 1, score: 11, type: 1},
{id: 1, score: 2, type: 2},
{id: 1, score: 222, type: 2},
{id: 2, score: 3, type: 1},
{id: 2, score: 4, type: 2}
];
let arrLen = arr.length;
let newArr = arr.reduce((items,item)=>{
let itemsFound = items.find((arrItem)=>{
if(item.id == arrItem.id && item.type == arrItem.type) {
return item}});
if(itemsFound) {
if(String(itemsFound.score).indexOf(item.score)==-1) {
itemsFound.score +=","+item.score;}
}else {
let newData = {
id:item.id,score:item.score,type:item.type
}
items.push(newData)}return items;},[]);
console.log(newArr)
0: {id: 1, score: "1,11", type: 1}
1: {id: 1, score: "2,222", type: 2}
2: {id: 2, score: 3, type: 1}
3: {id: 2, score: 4, type: 2}

8.js过滤数组中的对象

var newArray = [{
                 name: "aaa",
                 value: 0,
                 height: 1
             },
             {
                 name: "ddd",
                 value: 3,
                 height: 1
             }];
var newArray2 = [];
for (var i = 0; i < newArray.length; i++) {
           var newObject = {};
             newObject.name = newArray[i].name;
            newObject.height = newArray[i].value;
            newArray2.push(newObject);
        }
 console.log(newArray2)

9.js计算数组中重复元素个数

var arr=[1,1,2,3];
var newArr = [...new Set(arr)];  // 去重
var list = [];
newArr.forEach(i => {
    list.push(arr.filter(t => t === i))；
})
var mlist = [];
list.forEach((i, index) => {
    mlist.push({
        name: newArr[index],
        num: i.length,
    })
})
console.log(list, mlist)  


 var arr=[{nam:'我', age: '5'}, {nam:'我', age: '5'}, {nam:'你', age: '2'}, 
{nam:'他', age: '3'}];
var newArr = [...new Set(arr.map(i => i.nam))]; // 去重
console.log(newArr);
var list = [];
newArr.forEach(i => {
    list.push(arr.filter(t => t.nam === i));
})
var mlist = [];
list.forEach((i, index) => {
    mlist.push({
        name: newArr[index],
        num: i.length,
    })
})
console.log(list, mlist);

10.vue中子组件往父组件传值，父组件往子组件传值

vue中子组件往父组件传值：emit
methods: {
    add: function() {
    this.$emit("showpro", this.list+'我是孩子的值');//showpro是传往父组件的方法，后面参数是
    要传过去的参数
}} 
父组件中
import HelloWorldVue from "./HelloWorld.vue";
<abc @showpro="met" ></abc> // 引用子组建传来的方法 showpro，这个方法即本组件中的met放法，注意这里
不要写参数
methods: {
    met(data2) {  // 在这里可以直接的打印参数
        console.log("data2",data2);
     }
}
vue中父组件往子组件传值：props
import HelloWorldVue from "./HelloWorld.vue";
父组件中引用子组件，在这里子组件是
<abc>
<template><abc v-bind:sunny="title2">
</abc>传到子组件中取名为sunny，而引用的值是这个组件中的title2
<template>
export default {
    name: "second",
    data() {
        return{
            title2:"我是父组件的值：富士山下" // 这是字符串类型
        };},}
在子组件中：
 <template><p>{{sunny}}</p></div></template>
export default {
    name: "compon",
      props:{// props接受父组件传来的值
            sunny:{
            type:String,   // 传值的类型
            required:true // 固定写法}
}}

11.异常捕捉

 function s1() {
    console.log(1)
    throw('报错') //抛出异常不执行下面的方法
   }
   
   function s2() {
    console.log(2)
   }
   
   
   function s3() {
    console.log(3)
   }
   
   s1()
   s2()
   s3()

12.判断是否是 {}

JSON.stringify(item.unit) === "{}"