Array.from()方法

Array.from(arrayLike,mapFn,thisArg)  //arrayLike必填

Array.from()浅拷贝

arrayLike:数组或者伪数组(带有length属性), 可迭代对象 mapFn:对新数组的每一项执行一次mapFn方法

Set数据类型

let set = new Set([1,2,2,3])  // {1, 2, 3}
set.add(3).add(4).add(5)  //{1, 2, 3, 4, 5}

可以带初始值也可以不带, 不带set为空; 猜测带初始值时创建逻辑:

new 一个空的set伪数组, 然后将入参依次执行add

set.add(obj)  //向Set类型的set中新增obj, 如果obj已经存在于set里, 则不执行新增
set.add({})  //始终会执行成功

空对象之间不相等, 即 {} ≠ {}

set.has(value)  //判断set是否含有value, 含有则返回true

set.clear()  //清除set所有元素

set.delete(value)  //删除值为value的元素, 成功删除返回true

此处删除索引值不是index而是value

遍历
set.keys()  //键
set.values()  //值
set.entries()  //键值对

set.forEach((value, key) => console.log(key + ' : ' + value))

回归正题, 数组去重, 使用Set()和Array.from()

let arr = [1,2,2,2,3,4,4]
let set = new Set(arr)  //{1,2,3,4}
let newArr1 = [...set]  //[1,2,3,4]
let newArr2 = Array.from(set)  //[1,2,3,4]

取交并集

let a = new Set([1, 2, 3]); 
let b = new Set([4, 3, 2]); 
// 并集
let union = new Set([...a, ...b]);// Set {1, 2, 3, 4} 
// 交集 
let intersect = new Set([...a].filter(x => b.has(x))); // Set {2, 3}

arrayObject.join()

let arr = [1,2,3,4]
arr.join("|")  //1|2|3|4

.spilce(index, howmany, items)数组删除

index:数组下标

howmany:删除个数

items(选填):删除之后新增加的项

let arr = [1,2,3,4,5]
let deleteArr = arr.splice(1,2,66)
//arr [1,66,4,5]
//deleteArr [2,3]

split分割字符串

let str = "abc"
str.split('')  // ['a', 'b', 'c']

indexOf方法去重

同样是一种方法, 申请一个新的数组空间, 遍历原数组并进行判断, pass or push

一些JS数组深拷贝的方法

1、for循环遍历, push

2、concat()方法

var arr1 = [1, 2, 3]
var arr2 = arr1.concat()
arr1[0] = 4
console.log(arr1); //4, 2, 3
console.log(arr2); //1, 2, 3

3、slice()方法

var arr1 = [1, 2, 3]
var arr2 = arr1.slice(0)
arr1[0] = 4
console.log(arr1); //4, 2, 3
console.log(arr2); //1, 2, 3

4、...拓展运算符

var arr1 = [1, 2, 3]
var arr2 = [...arr1]
arr1[0] = 4
console.log(arr1); //4, 2, 3
console.log(arr2); //1, 2, 3

5、自定函数

function deepClone(target) {
    // 获取数据类型
    function getType(target) {
        return Object.prototype.toString.call(target)
    }
    //判断数据是不是引用类型
    function isObject(target) {
        return target !== null && (typeof target === 'object' || typeof target === 'function');
    }
    //处理不需要遍历的应引用类型数据
    function handleOherData(target) {
        const type = getType(target);
        switch (type) {
            case "[object Date]":
                return new Date(target)
            case "[object RegExp]":
                return cloneReg(target)
            case "[object Function]":
                return cloneFunction(target)

        }
    }
    //拷贝Symbol类型数据
    function cloneSymbol(targe) {
        const a = String(targe); //把Symbol字符串化
        const b = a.substring(7, a.length - 1); //取出Symbol()的参数
        return Symbol(b); //用原先的Symbol()的参数创建一个新的Symbol
    }
    //拷贝正则类型数据
    function cloneReg(target) {
        const reFlags = /\w*$/;
        const result = new target.constructor(target.source, reFlags.exec(target));
        result.lastIndex = target.lastIndex;
        return result;
    }
    //拷贝函数
    function cloneFunction(targe) {
        //匹配函数体的正则
        const bodyReg = /(?<={)(.|\n)+(?=})/m;
        //匹配函数参数的正则
        const paramReg = /(?<=\().+(?=\)\s+{)/;
        const targeString = targe.toString();
        //利用prototype来区分下箭头函数和普通函数，箭头函数是没有prototype的
        if (targe.prototype) { //普通函数
            const param = paramReg.exec(targeString);
            const body = bodyReg.exec(targeString);
            if (body) {
                if (param) {
                    const paramArr = param[0].split(',');
                    //使用 new Function 重新构造一个新的函数
                    return new Function(...paramArr, body[0]);
                } else {
                    return new Function(body[0]);
                }
            } else {
                return null;
            }
        } else { //箭头函数
            //eval和函数字符串来重新生成一个箭头函数
            return eval(targeString);
        }
    }
    /**
     * 遍历数据处理函数
     * @array 要处理的数据
     * @callback 回调函数，接收两个参数 value 每一项的值 index 每一项的下标或者key。
     */
    function handleWhile(array, callback) {
        let index = -1;
        const length = array.length;
        while (++index < length) {
            callback(array[index], index);
        }
    }
    function clone(target, map) {
        if (isObject(target)) {
            let result = null;
            if (getType(target) === "[object Array]") {
                result = []
            } else if (getType(target) === "[object Object]") {
                result = {}
            } else if (getType(target) === "[object Map]") {
                result = new Map();
            } else if (getType(target) === "[object Set]") {
                result = new Set();
            }

            // 解决循环引用
            if (map.has(target)) {
                return map.get(target);
            }
            map.set(target, result);

            if (getType(target) === "[object Map]") {
                target.forEach((value, key) => {
                    result.set(key, clone(value, map));
                });
                return result;
            } else if (getType(target) === "[object Set]") {
                target.forEach(value => {
                    result.add(clone(value, map));
                });
                return result;
            } else if (getType(target) === "[object Object]" || getType(target) === "[object Array]") {
                const keys = getType(target) === "[object Array]" ? undefined : Object.keys(target);

                function callback(value, key) {
                    if (keys) {
                        // 如果keys存在则说明value是一个对象的key，不存在则说明key就是数组的下标。
                        key = value
                    }
                    result[key] = clone(target[key], map)
                }
                handleWhile(keys || target, callback)
            } else {
                result = handleOherData(target)
            }
            return result;
        } else {
            if (getType(target) === "[object Symbol]") {
                return cloneSymbol(target)
            } else {
                return target;
            }
        }
    }
    let map = new WeakMap;
    const result = clone(target, map);
    map = null;
    return result
}

中止forEach()函数的办法

1.将数组置为空...

2.try catch
try{
  Array.forEach((item)=>{
    // function...
    if(item.name === "bb"){
      throw new Error("Error");
    }
  })
} catch(error){
  if(error.message === "Error"){
    this.$message.error(error)
  }
}

JS高级教程

toString()和String()

.toString()方法处理null和undefined会报错

String()           //可以调用toString的参数,和调用.toString()等价
其余情况
String(null)       //'null'
String(undefined)  //'undefined'

数据扁平化

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

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

arr.flat(1); // => [1, 2, [3, [4, 5]], 6]
arr.flat(Infinity); // => [1, 2, 3, 4, 5, 6]

或者利用正则

JSON.stringify(arr).replace(/\[|\]/g, '').split(',');
JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']');

reduce

将多维数组转化为一维, 相当于flat(Infinity)

let arr1 = [[0, 1], [2, 3], [4,[5,6,7]]]
let newArr = (arr)=>{
  return arr.reduce((pre,cur)=>{
    if(Array.isArray(cur)){
      pre.concat(newArr(cur))
    }
    else{
      pre.concat(cur)
    }
    return pre  
  }, [])
}