Javascript常见问题

认识一下undefined

undefined既是一个原始数据类型，也是一个原始值数据 undefined还是全局对象上的一个属性 window.undefined 它不可写、不可配、不可枚举。undefined不是JS的保留字和关键字

1、系统会给一个未赋值的变量自动赋值为undefined，类型也是undefined

var a;
console.log(a);  //undefined
console.log(typeof a);  //undefined

2、当你方法的实参没有传值时，返回形参的值是undefined，形参类型也是undefined

function test (a){
    console.log(typeof a);  //undefined
    return a;
}

console.log(test());  //undefined

3、函数内部没有显示返回值的时候，系统默认会给函数返回undefined

function test(){
    console.log(123)  //123
}

console.log(test())  //undefined

js数组去重

1、利用Set去重

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
const res = Arrar.from(new Set(arr));
或者
const res = [...new Set(arr)]

2、利用Map去重

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
function unique(arr){
    const res = new Map();
    return arr.filter((a)=>!res.has(a) && res.set(a,1))
}

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
const unique = arr =>{
    const map = new Map();
    const res = [];
    for(let i=0;i<arr.length;i++){
        if(!map.has(arr[i])){
            map.set(arr[i],true)
            res.push(arr[i]);
        }
    }
    return res;
}

3、利用indexOf去重

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
const unique = arr =>{
    const res = [];
    for(let i=0;i<arr.length;i++){
        if(res.indexOf(arr[i]) === -1){
            res.push(arr[i])
        }
    }
    return res;
}

4、利用include去重

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
const unique = arr =>{
    const res = [];
    for(let i=0;i<arr.length;i++){
        if(!res.include(arr[i])){
            res.push(arr[i])
        }
    }
    return res;
}

5、利用filter去重

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];
const unique = arr =>{
    return arr.filter((item,index)=>{
        return arr.indexOf(item) === index;
    })
}

6、利用reduce实现复杂数组对象去重

简单的数组去重，我们可以通过把数组转为ES6提供的新数据结构Set实现。然而在实际业务上，我们需要经常处理后台返回的json格式的数组对象进行去重。比如：

 const arr = [{
  id: 1,
  phone: 1880001,
  name: 'wang',
  },{
  id: 2,
  phone: 1880002,
  name: 'li',
  },{
  id: 3,
  phone: 1880001,
  name: 'wang',
}] 

我们需要去掉电话号码重复的元素，这时候就需要利用hash检测方法：

const unique= arr =>{
  let hash = {};
	return arr.reduce((item, next) => {
	  hash[next. phone]? '': hash[next.phone] = true && item.push(next);
		return item
	}, []);
}
unique(arr)

js判断数据类型

1、typeof判断基本数据类型

返回一个表述数据类型的字符串，返回结果包括：string、number、boolean、symbol、object、undefined、function等7种数据类型，但是不能判断null和引用数据类型

typeof ''; //'string'
typeof 12; //'number'
typeof true; //'boolean'
typeof Symbol(); //'symbol'
typeof undefined; //'undefined'
typeof new Function(); //'function'
----------------------------------
typeof null; //'object' 无效
typeof []; //'object' 无效
typeof new Date(); //'object' 无效
typeof new RegExp(); //'object' 无效

vue中如何判断基本类型
function isPrimitive(vale){
    return(typeof value === 'string'|| typeof value === 'number' || typeof value === 'symbol' || typeof value ==='boolean')
}
vue中如何判断引用类型
function isObject(obj){
    return obj !==null && (typeof obj === 'object' || typeof obj === 'function')
}

2、instanceof判断引用类型数据

用来判断A是否为B的实例，A instanceof B ，返回boolean值。instanceof用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性，但是它不能判断null和undefined

[] instanceof Array; //true
{} instanceof Object; // true
new Date() instanceof Date; //true
new RegExp() instanceof RegExp; //true
--------------------------------------
null instanceof Null; //报错
undefined instanceof undefined; //报错

3、Object.prototype.toString.call()

一般的数据类型都能判断，最准确最常用的一种（推荐）

Object.prototype.toString.call(''); //[object String]
Object.prototype.toString.call(12); //[object Number]
Object.prototype.toString.call(true); //[object Boolean]
Object.prototype.toString.call(undefined); //[object Undefined]
Object.prototype.toString.call(null); //[object Null]
Object.prototype.toString.call([]); //[object Array]
Object.prototype.toString.call(new Function()); //[object Function]
Object.prototype.toString.call(new Date()); //[object Date]
Object.prototype.toString.call(new RegExp()); //[object RegExp]
Object.prototype.toString.call(new Error()); //[object Error]

vue中如何判断对象
function isPlainObject(obj){
    return Object.prototype.toString.call(obj) === '[object Object]'
}
vue中如何判断正则表达式
function isRegExp(r){
    return Object.prototype.toString.call(r) === '[object RegExp]'
}

js数组扁平化处理

数组扁平化是指将一个多维数组变为一个一维数组

const arr = [1, [2, [3, [4, 5]]], 6];
// => [1, 2, 3, 4, 5, 6]

1、使用flat()

const res1 = arr.flat(Infinity);

2、使用正则表达式

const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');
改良版正则表达式：
const res3 = JSON.parconst flatten = arr => {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, [])
}
const res4 = flatten(arr);se('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');

3、使用reduce

const flatten = arr => {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, [])
}
const res4 = flatten(arr);

4、使用递归函数

const res5 = [];
const fn = arr => {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      fn(arr[i]);
    } else {
      res5.push(arr[i]);
    }
  }
}
fn(arr);

js防抖、节流函数

防抖函数

export const debounce = function(fn,delay=300){
    let timer = null;
    return function(){
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
                fn.apply(context,args);
        },delay)
    }
}

js类数组转化为真正的数组

类数组是具有length属性，但不具有数组原型上的方法。常见的类数组有arguments,DOM操作方法返回的结果。

1、Array.from

Array.form(document.querySelectorAll('div'))

2、扩展运算符

[...document.querySelectorAll('div')]

3、Array.prototype.slice.call()

Array.prototype.slice.call(document.querySelectorAll('div'))

4、利用concat

Array.prototype.concat.apply([],document.querySelectorAll('div'))