JS 面试题：如何用set() 给数组去重以及对数组对象去重、JS 中 ...扩展运算符 与 解构、JS 防抖与节流的概念、JS 中null 与 undefind出现的情况、JS 中map()

@[TOC]( JS 面试题：如何用set() 给数组去重以及对数组对象去重、JS 中 …扩展运算符 与 解构、JS 防抖与节流的概念、JS 中null 与 undefind出现的情况、JS 中map() 与 foreach() 的区别)

一 如何用set() 给数组去重以及对数组对象去重

    // 1 给数组中普通元素去重  
    let arr = [1,2,3,4,4]
    // 数组去重：
    // 1使用new Set()  去重
    // 2 使用...扩展运算符，拿出可用的值
    // 3 加一个数组括号  [ ]   让其转成数组
    let res =[...new Set(arr)]


    // 2 给数组对象去重
    const result = [{name: 'flx'},{name: 'flx'},{name: 'flx1'},{name: 'flx2'}]
    // 让Set进行比较字符串，通过字符串进行去重。然后在进行JSON.parse转换回来
    const result2  = [...new Set(c.map(t=>JSON.stringify(t)))].map(s=>JSON.parse(s))

二 JS 中 …扩展运算符 与 解构

对象的扩展运算符(…) 用于取出对象中的所有可遍历属性
var obj1 = { name:'flx', sex:'男', hobby:'唱跳rap篮球' };
var obj2 = { ...obj1 , age:100 };
console.log(obj2 );    //{ name:'flx', sex:'男', hobby:'唱跳rap篮球' ,age:100 };

//  ...[2,3,4]   取出能用的数据也就是1,2,3
console.log([1, ...[2,3,4] ,5]);   //[1,2,3,4,5];



解构的用法()  用于取出对象中的所有可遍历属性，并赋值给左边的元素
var obj1 = { name:'flx', sex:'男', hobby:'唱跳rap篮球' };
let { name,sex} = obj1 ;
console.log(name);       //"flx"
console.log(sex);    //"男"


let  arr = [ "1", "2", "3" ];
let [one,two,three] = colors;
console.log(one); // "1"
console.log(two); // "2"
console.log(three); // "3"

三 JS 防抖与节流的概念

// 防抖
//防抖：用户多次触发事件，在用户一直触发事件中，事件不会执行，只有在用户停止触发事件一段时间之后再执行这个事件一次。
    // @fn 是对应请求数据
    // @ms 是用户多次触发事件的时间间隔 是一个毫秒数
    function debounce(fn, ms) {
        let timeout = null
        return function() {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
                fn.apply(this, arguments)
            }, ms)
        }
    }

// 节流
//用户每一次触发事件都会设置一个延迟定时器，但是如果已经设置了延迟定时器就会等上一次延迟定时器执行之后才会开启下一个定时器，这样用户一直触发事件，事件会每间隔一段时间执行一次
    // @fn 是对应请求数据
    // @ms 是用户多次触发事件的时间间隔 是一个毫秒数
     function throttle(fn, ms){
        let flag = true
        return function(){
            if(!flag) return
            flag = false
            setTimeout(()=>{
                fn.apply(this, arguments)
                flag = true
            }, ms)
        }
    }

四 JS 中null 与 undefind出现的情况

// 两种常见的情况会undefind
// 1 普通类型已经声明，未赋值
let test;
console.log(test)  // undefined

// 2 对象中某个属性不存在
let obj = {}
console.log(obj.name)   // undefind

五 JS 中map() 与 foreach() 的区别

// 1 执行的快慢程度
.map() > .forEach() > for()

// 2 应用场景
forEach()适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。

map()适用于你要改变数据值的时候。它会返回一个新的数组。这样的优点在于你可以使用结合map, filter(), reduce()等函数链式编程。