一、基础

js 隐式转换规则

1. null == undefined, 但和其他值比较就不再相等了。
2. NaN == NaN, 不相等。
3. 对象 == 字符串，对象的toString()转为字符串
4. 对象 == 数字，对象的toString()转为字符串，Number(对象的字符串)
5. 剩下的都是转为数字比较。

for in 和 for of 的区别

 a、for in 首先遍历对象的属性名，再是对象原型中的属性和方法， //如果不想让其输出原型中的属性和方法，可以使用hasOwnProperty方法进行过滤。也可以用Object.keys()方法获取所有的自身可枚举属性组成的数组<br />     b、for of 遍历对象时，要用Object.keys()先转成迭代器对象，例子：<br />    

var student={
  name:'wujunchuan',
  age:22,
  locate:{
    country:'china'
  }
}
for(var key of Object.keys(student)){
  //使用Object.keys()方法获取对象key的数组
  console.log(key+": "+student[key]);
}

案例解析

var getNumbers = () => {
  return Promise.resolve([1, 2, 3])
}
var multi = num => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (num) {
        resolve(num * num)
      } else {
        reject(new Error('num not specified'))
      }
    }, 1000)
  })
}
async function test () {
  var nums = await getNumbers()
  nums.forEach(async x => {
    var res = await multi(x)
    console.log(res)
  })
}
test()

希望每间隔 1 秒，然后依次输出 1，4，9 。结果是一次性输出1，4，9
解决方案：

1. 改造一下 forEach，确保每一个异步的回调执行完成后，才执行下一个

   async function asyncForEach(array, callback) {
   for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array)
   }
   }
   async function test () {
   var nums = await getNumbers()
   asyncForEach(nums, async x => {
    var res = await multi(x)
    console.log(res)
   })
   }

2. 使用 for-of 替代 for-each。

   async function test () {
   var nums = await getNumbers()
   for(let x of nums) {
    var res = await multi(x)
    console.log(res)
   }
   }

二、编写规范

禁止副作用

const persons = [{name: 'liu', age: 18}, {name: 'wang', age: 22}];
// bad
const newPersions = persons.map(k => {
  k.hobby = 'swimming';
  return k;
});
// good
const newPersions = persons.map(k => ({
    ...k,
    hobby: 'swimming'
}));

// bad
function addPersions(persions) {
  persions.push({
        name: '吴',
    age: 20
  });
}
addPersions(persons);
// good
function addPersions(persions) {
  return [...persions, {
        name: '吴',
    age: 20
  }]
}
addPersions(persons);

const persons = [{name: 'liu', age: 18}, {name: 'wang', age: 22}];
// bad
function sortPersions(persions) {
  // sort有副作用，会改变原数组
  const sortArr = persions.sort((a, b) => b.age - a.age);
  return sortArr;
}
sortPersions(persons);
// good
function sortPersions(persions) {
  // sort有副作用，会改变原数组
  const sortArr = [...persions].sort((a, b) => b.age - a.age);
  return sortArr;
}
sortPersions(persons);

// very bad
const prev = { coffee: 1 };
const next = Object.assign(prev, { pizza: 42 });
// bad
const prev = { coffee: 1 };
const next = Object.assign({}, prev, { pizza: 42 });
// good
const prev = { coffee: 1 };
const next = { ...prev, pizza: 42 };

禁止不必要的条件

// bad
const hasValue = value !== NONE ? true : false;
const hasProducts = products.length > 0 ? true : false;
// good
const hasValue = value !== NONE;
const hasProducts = products.length > 0;

// bad
const hasValue = value ? true : false;
const hasProducts = products.length ? true : false;
// good
const hasValue = Boolean(value);

// bad
const hasProducts = products && Array.isArray(products);
// good
const hasProducts = Array.isArray(products);

// bad
function IsNetscapeOnSolaris() {
  var agent = window.navigator.userAgent;
  if (
    agent.indexOf('Mozilla') != -1 &&
    agent.indexOf('compatible') == -1
  ) {
    if (agent.indexOf('SunOS') != -1) return true;
    else return false;
  } else {
    return false;
  }
}
// good
function IsNetscapeOnSolaris() {
  const { userAgent } = window.navigator;
  return (
    userAgent.includes('Mozilla') &&
    userAgent.includes('SunOS') &&
    !userAgent.includes('compatible')
  );
}

// bad
if (errorMessage) {
  log(LOG_LEVEL.ERROR, errorMessage);
} else {
  log(LOG_LEVEL.ERROR, DEFAULT_ERROR_MESSAGE);
}
// good
log(LOG_LEVEL.ERROR, errorMessage || DEFAULT_ERROR_MESSAGE);

// bad
function getProductsDropdownItems(response) {
  const products = response.products;
  if (products.length > 0) {
    return products.map(product => ({
      label: product.name,
      value: product.id
    }));
  }
  return [];
}
// 优化后，减少了一层判断
// 问题：当传入的products为undefined时，默认值才生效
function getProductsDropdownItems(products = []) {
  return products.map(product => ({
    label: product.name,
    value: product.id
  }));
}
// 解决上面的问题
function getProductsDropdownItems(products) {
  return (products || []).map(product => ({
    label: product.name,
    value: product.id
  }));
}
// 最终版本
function getProductsDropdownItems({ products }) {
  (Array.isArray(products) ? products : [products]).map(product => ({
    label: product.name,
    value: product.id
  }));
}

// bad
const generateOptionalRows = () => {
  const rows = [];
  if (product1.colors.length + product2.colors.length > 0) {
    rows.push({
      row: 'Colors',
      product1: <ProductOptions options={product1.colors} />,
      product2: <ProductOptions options={product2.colors} />
    });
  }
  if (product1.sizes.length + product2.sizes.length > 0) {
    rows.push({
      row: 'Sizes',
      product1: <ProductOptions options={product1.sizes} />,
      product2: <ProductOptions options={product2.sizes} />
    });
  }
  return rows;
};
const rows = [
  {
    row: 'Name',
    product1: <Text>{product1.name}</Text>,
    product2: <Text>{product2.name}</Text>
  },
  // More rows...
  ...generateOptionalRows()
];
// good
const rows = [
  {
    row: 'Name',
    product1: <Text>{product1.name}</Text>,
    product2: <Text>{product2.name}</Text>
  },
  {
    row: 'Colors',
    product1: <ProductOptions options={product1.colors} />,
    product2: <ProductOptions options={product2.colors} />,
    isVisible: (product1, product2) =>
      (product1.colors.length > 0 || product2.colors.length) > 0
  },
  {
    row: 'Sizes',
    product1: <ProductOptions options={product1.sizes} />,
    product2: <ProductOptions options={product2.sizes} />,
    isVisible: (product1, product2) =>
      (product1.sizes.length > 0 || product2.sizes.length) > 0
  }
];
const visibleRows = rows.filter(row => {
  if (typeof row.isVisible === 'function') {
    return row.isVisible(product1, product2);
  }
  return true;
});

提前返回错误

// bad
function postOrderStatus(orderId) {
  var idsArrayObj = getOrderIds();
  if (idsArrayObj != undefined) {
    if (idsArrayObj.length == undefined) {
      var tmpBottle = idsArrayObj;
      idsArrayObj = new Array(tmpBottle);
    }
    var fullRecordsArray = new Array();
    if (fullRecordsArray.length != 0) 
      return sendOrderStatus(fullRecordsArray);
    } else {
      return false;
    }
  } else {
    return false;
  }
}

// 优化后
function postOrderStatus(orderId) {
  let idsArrayObj = getOrderIds();
  if (idsArrayObj === undefined) {
    return false;
  }
  if (!Array.isArray(idsArrayObj)) {
    idsArrayObj = [idsArrayObj];
  }
  const fullRecordsArray = [];
  if (fullRecordsArray.length === 0) {
    return false;
  }
  return sendOrderStatus(fullRecordsArray);
}

// 最终版
function postOrderStatus(orderId) {
  const orderIds = getOrderIds(); // 总是返回数组
  const fullRecordsArray = [];
  if (fullRecordsArray.length === 0) {
    return false;
  }
  return sendOrderStatus(fullRecordsArray);
}

多层if判断优化

// bad
if (month == 'jan') month = 1;
if (month == 'feb') month = 2;
if (month == 'mar') month = 3;
if (month == 'apr') month = 4;
if (month == 'may') month = 5;
if (month == 'jun') month = 6;
if (month == 'jul') month = 7;
if (month == 'aug') month = 8;
if (month == 'sep') month = 9;
if (month == 'oct') month = 10;
if (month == 'nov') month = 11;
if (month == 'dec') month = 12;
// good
const MONTH_NAME_TO_NUMBER = {
  jan: 1,
  feb: 2,
  mar: 3,
  apr: 4,
  may: 5,
  jun: 6,
  jul: 7,
  aug: 8,
  sep: 9,
  oct: 10,
  nov: 11,
  dec: 12
};
const month = MONTH_NAME_TO_NUMBER[monthName];

const DECISION_YES = 0;
const DECISION_NO = 1;
const DECISION_MAYBE = 2;
const getButtonLabel = decisionButton => {
  switch (decisionButton) {
    case DECISION_YES:
      return 'Yes';
    case DECISION_NO:
      return 'No';
    case DECISION_MAYBE:
      return 'Maybe';
  }
};
<Button>{getButtonLabel(decision.id)}</Button>;
// good
const DECISION_YES = 0;
const DECISION_NO = 1;
const DECISION_MAYBE = 2;
const getButtonLabel = decisionButton =>
  ({
    [DECISION_YES]: 'Yes',
    [DECISION_NO]: 'No',
    [DECISION_MAYBE]: 'Maybe'
  }[decisionButton]);
<Button>{getButtonLabel(decision.id)}</Button>;
// very good
const DECISION_YES = 0;
const DECISION_NO = 1;
const DECISION_MAYBE = 2;
const ButtonLabel = ({ decision }) =>
  ({
    [DECISION_YES]: 'Yes',
    [DECISION_NO]: 'No',
    [DECISION_MAYBE]: 'Maybe'
  }[decision]);
<Button>
  <ButtonLabel decision={decision.id} />
</Button>;

合理使用三元运算

// bad
let drink;
if (caffeineLevel < 50) {
  drink = DRINK_COFFEE;
} else {
  drink = DRINK_WATER;
}
// good
const drink = caffeineLevel < 50 ? DRINK_COFFEE : DRINK_WATER;

// bad
function Products({products, isError, isLoading}) {
  return isError
    ? <p>Error loading products</p>
      : isLoading
        ? <Loading />
        : products.length > 0
          ? <ul>{products.map(
              product => <li key={product.id}>{product.name}</li>
            )}</ul>
          : <p>No products found</p>
}
// good
function Products({ products, isError, isLoading }) {
  if (isError) {
    return <p>Error loading products</p>;
  }
  if (isLoading) {
    return <Loading />;
  }
  if (products.length === 0) {
    return <p>No products found</p>;
  }
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

二、相关实现

new的实现

function newFunc(...args) {
  const constructor = args.shift();
  const obj = Object.create(constructor.prototype);
  const result = constructor.apply(obj, args);
  return (typeof result === 'object' && result != null) ? result : obj;
}

call的实现

Function.prototype.call3 = function (context, ...rest) {
    context = context ? Object(context) : window;
    const key = `_fn${Date.now()}`;
    context[key] = this;
    const result = context[key](...(rest || []));
    delete context[key];
    return result;
}
// 测试代码
var value = 2;
var obj = {
    value: 1,
}
function bar(name, age) {
    console.log(this.value);
    return {
        value: this.value,
        name,
        age,
    }
}
console.log(bar.call3(null))
console.log(bar.call3(obj, 'kevin', 18));

apply的实现

Function.prototype.apply3 = function (context, rest = []) {
    context = context || window;
    const key = `fn${Date.now()}`;
    console.log(context, rest);
    context[key] = this;
    const result = context[key](...rest);
    delete context[key];
    return result;
}
var value = 2;
var obj = {
    value: 1,
}
function bar(name, age) {
    console.log(this.value);
    return {
        value: this.value,
        name,
        age,
    }
}
console.log(bar.apply3(null))
console.log(bar.apply3(obj, ['kevin', 18]));

bind的实现方式

Function.prototype.bind2 = function(content) {
    if(typeof this != "function") {
        throw Error("not a function")
    }
    // 若没问参数类型则从这开始写
    let fn = this;
    let args = [...arguments].slice(1);
    let resFn = function() {
        return fn.apply(this instanceof resFn ? this : content,args.concat(...arguments) )
    }
    function tmp() {}
    tmp.prototype = this.prototype;
    resFn.prototype = new tmp();
    return resFn;
}

bind导致的内存泄漏

/*
* bind为null或undefined时，foo里面的this指向window，会在window上挂载a变量
*/
function foo(a, b) {
    this.a = 'test';
    console.log( "a:" + a + "，b:" + b );
}
var bar = foo.bind( null, 2 );
bar( 3 ); // a:2，b:3 
/*
* 解决方法，使用Object.create, 0, false
*/
function foo(a, b) {
    console.log( "a:" + a + "，b:" + b );
}
// 我们的空对象
var ø = Object.create( null );
// 使用bind(..)进行柯里化
var bar = foo.bind( ø, 2 );
bar( 3 ); // a:2，b:3

箭头函数的bind、call、apply没有用

var fun = (() => { console.log(this);}).bind({name: 12})
console.log(fun());  //window
// 练习
let result = (function() {
  return [
    (() => this.x).bind({x: 'inner'})(),
    (() => this.x)()
  ]
}).call({x: 'outer'})
console.log(result) // [ 'outer', 'outer' ]

使用bind实现偏函数

解释：使一个函数拥有预设的初始参数；

function list() {
    return Array.prototype.slice.call(arguments);
}
function addArguments(arg1, arg2) {
    return arg1 + arg2
}
var list1 = list(1, 2, 3); // [1, 2, 3]
var result1 = addArguments(1, 2); // 3
// 创建一个函数，它拥有预设参数列表。
var leadingThirtysevenList = list.bind(null, 37);
// 创建一个函数，它拥有预设的第一个参数
var addThirtySeven = addArguments.bind(null, 37); 
var list2 = leadingThirtysevenList(); 
// [37]
var list3 = leadingThirtysevenList(1, 2, 3); 
// [37, 1, 2, 3]
var result2 = addThirtySeven(5); 
// 37 + 5 = 42 
var result3 = addThirtySeven(5, 10);
// 37 + 5 = 42 ，第二个参数被忽略

bind和apply、call之间的异同

相同点：

1. apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
2. apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
3. apply 、 call 、bind 三者都可以利用后续参数传参；

不同的：

1. bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

注意点：在Javascript中，多次 bind() 是无效的。

promise实现

// 先定义三个常量表示状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
// 新建 MyPromise 类
class MyPromise {
    constructor(executor) {
        // executor 是一个执行器，进入会立即执行
        // 并传入resolve和reject方法
        try {
            executor(this.resolve, this.reject);
        } catch (error) {
            this.reject(error);
        }
    }
    // 储存状态的变量，初始值是 pending
    status = PENDING;
    // resolve和reject为什么要用箭头函数？
    // 如果直接调用的话，普通函数this指向的是window或者undefined
    // 用箭头函数就可以让this指向当前实例对象
    // 成功之后的值
    value = null;
    // 失败之后的原因
    reason = null;
    // 存储成功回调函数
    onFulfilledCallbacks = [];
    // 存储失败回调函数
    onRejectedCallbacks = [];
    // 更改成功后的状态
    resolve = (value) => {
        // 只有状态是等待，才执行状态修改
        if (this.status === PENDING) {
            // 状态修改为成功
            this.status = FULFILLED;
            // 保存成功之后的值
            this.value = value;
            // resolve里面将所有成功的回调拿出来执行
            while (this.onFulfilledCallbacks.length) {
                // Array.shift() 取出数组第一个元素，然后（）调用，shift不是纯函数，取出后，数组将失去该元素，直到数组为空
                this.onFulfilledCallbacks.shift()(value);
            }
        }
    };
    // 更改失败后的状态
    reject = (reason) => {
        // 只有状态是等待，才执行状态修改
        if (this.status === PENDING) {
            // 状态成功为失败
            this.status = REJECTED;
            // 保存失败后的原因
            this.reason = reason;
            // resolve里面将所有失败的回调拿出来执行
            while (this.onRejectedCallbacks.length) {
                this.onRejectedCallbacks.shift()(reason);
            }
        }
    };
    then(onFulfilled, onRejected) {
        const realOnFulfilled =
                    typeof onFulfilled === "function" ? onFulfilled : (value) => value;
        const realOnRejected =
                    typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
        };
        // 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
        const promise2 = new MyPromise((resolve, reject) => {
            const fulfilledMicrotask = () => {
                // 创建一个微任务等待 promise2 完成初始化
                queueMicrotask(() => {
                    try {
                        // 获取成功回调函数的执行结果
                        const x = realOnFulfilled(this.value);
                        // 传入 resolvePromise 集中处理
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                });
            };
            const rejectedMicrotask = () => {
                // 创建一个微任务等待 promise2 完成初始化
                queueMicrotask(() => {
                    try {
                        // 调用失败回调，并且把原因返回
                        const x = realOnRejected(this.reason);
                        // 传入 resolvePromise 集中处理
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                });
            };
            // 判断状态
            if (this.status === FULFILLED) {
                fulfilledMicrotask();
            } else if (this.status === REJECTED) {
                rejectedMicrotask();
            } else if (this.status === PENDING) {
                // 等待
                // 因为不知道后面状态的变化情况，所以将成功回调和失败回调存储起来
                // 等到执行成功失败函数的时候再传递
                this.onFulfilledCallbacks.push(fulfilledMicrotask);
                this.onRejectedCallbacks.push(rejectedMicrotask);
            }
        });
        return promise2;
    }
    catch(onRejected) {
        // 只需要进行错误处理
        this.then(undefined, onRejected);
    }
    finally(fn) {
        return this.then(
            (value) => {
                return MyPromise.resolve(fn()).then(() => {
                    return value;
                });
            },
            (error) => {
                return MyPromise.resolve(fn()).then(() => {
                    throw error;
                });
            }
        );
    }
    // resolve 静态方法
    static resolve(parameter) {
        // 如果传入 MyPromise 就直接返回
        if (parameter instanceof MyPromise) {
            return parameter;
        }
        // 转成常规方式
        return new MyPromise((resolve) => {
            resolve(parameter);
        });
    }
    // reject 静态方法
    static reject(reason) {
        return new MyPromise((resolve, reject) => {
            reject(reason);
        });
    }
    static all(promiseList) {
        return new MyPromise((resolve, reject) => {
            const result = [];
            const length = promiseList.length;
            let count = 0;
            if (length === 0) {
                return resolve(result);
            }
            promiseList.forEach((promise, index) => {
                MyPromise.resolve(promise).then(
                    (value) => {
                        count++;
                        result[index] = value;
                        if (count === length) {
                            resolve(result);
                        }
                    },
                    (reason) => {
                        reject(reason);
                    }
                );
            });
        });
    }
    static allSettled = (promiseList) => {
        return new MyPromise((resolve) => {
            const length = promiseList.length;
            const result = [];
            let count = 0;
            if (length === 0) {
                return resolve(result);
            } else {
                for (let i = 0; i < length; i++) {
                    const currentPromise = MyPromise.resolve(promiseList[i]);
                    currentPromise.then(
                        (value) => {
                            count++;
                            result[i] = {
                                status: "fulfilled",
                                value: value,
                            };
                            if (count === length) {
                                return resolve(result);
                            }
                        },
                        (reason) => {
                            count++;
                            result[i] = {
                                status: "rejected",
                                reason: reason,
                            };
                            if (count === length) {
                                return resolve(result);
                            }
                        }
                    );
                }
            }
        });
    };
    static race(promiseList) {
        return new MyPromise((resolve, reject) => {
            const length = promiseList.length;
            if (length === 0) {
                return resolve();
            } else {
                for (let i = 0; i < length; i++) {
                    MyPromise.resolve(promiseList[i]).then(
                        (value) => {
                            return resolve(value);
                        },
                        (reason) => {
                            return reject(reason);
                        }
                    );
                }
            }
        });
    }
}
function resolvePromise(promise, x, resolve, reject) {
    // 如果 promise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 promise
    // 这是为了防止死循环
    if (promise === x) {
        return reject(
            new TypeError("The promise and the return value are the same")
        );
    }
    if (typeof x === "object" || typeof x === "function") {
        // 这个坑是跑测试的时候发现的，如果x是null，应该直接resolve
        if (x === null) {
            return resolve(x);
        }
        let then;
        try {
            // 把 x.then 赋值给 then
            then = x.then;
        } catch (error) {
            // 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
            return reject(error);
        }
        // 如果 then 是函数
        if (typeof then === "function") {
            let called = false;
            // 将 x 作为函数的作用域 this 调用之
            // 传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise
            // 名字重名了，我直接用匿名函数了
            try {
                then.call(
                    x,
                    // 如果 resolvePromise 以值 y 为参数被调用，则运行 [[Resolve]](promise, y)
                    (y) => {
                        // 如果 resolvePromise 和 rejectPromise 均被调用，
                        // 或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用
                        // 实现这条需要前面加一个变量called
                        if (called) return;
                        called = true;
                        resolvePromise(promise, y, resolve, reject);
                    },
                    // 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
                    (r) => {
                        if (called) return;
                        called = true;
                        reject(r);
                    }
                );
            } catch (error) {
                // 如果调用 then 方法抛出了异常 e：
                // 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
                if (called) return;
                // 否则以 e 为据因拒绝 promise
                reject(error);
            }
        } else {
            // 如果 then 不是函数，以 x 为参数执行 promise
            resolve(x);
        }
    } else {
        // 如果 x 不为对象或者函数，以 x 为参数执行 promise
        resolve(x);
    }
}
MyPromise.deferred = function () {
    var result = {};
    result.promise = new MyPromise(function (resolve, reject) {
        result.resolve = resolve;
        result.reject = reject;
    });
    return result;
};
module.exports = MyPromise;

class MyPromise {
  constructor (fn) {
    this.fn = fn;
    this.resolve = v => v;
    const _resolve = (v) => {
      this.status = 'resolve'
      this.resolve(v)
      this.res = v
    }
    this.fn(_resolve)
  }
  then(cb) {
    const wrapperCb = val => {
      if (val.constructor === MyPromise) {
        return val.then(cb)
      } else {
        return cb(val)
      }
    }
    const resolve = this.resolve
    this.resolve = (...args) => wrapperCb(resolve(...args))
    // 检测状态 未完成就挂起 完成就执行
    if(this.status === 'resolve') {
      this.resolve(this.res)
    }
    return this
  }
}
var data = new MyPromise((res) => {
  setTimeout(() => {
    console.log('start');
    res('start')
  }, 2000)
  // res('start')
})
data.then((res) => {
  // return res + 44
  console.log('res1');
  return new MyPromise((res2) => setTimeout(() => res2(res + '11'), 1000));
  // return new MyPromise((res2) => res2(res + '11'));
}).then((res) => {
  // return res + 44
  console.log('res2');
  // return new MyPromise((res2) => setTimeout(() => res2(res + '11'), 1000));
  return new MyPromise((res2) => res2(res + '22'));
}).then(console.log);

深拷贝

1. 方式一 ```javascript function getEmpty(o) { const types = {

    '[object Object]': {},
    '[object Array]': [],

   } const type = Object.prototype.toString.call(o); if(types[type]) {

    return types[type]

   } return o; }

function deepClone(origin) { const queue = []; const map = new Map(); const target = getEmpty(origin); if(target !== origin) { queue.push([origin, target]); map.set(origin, target); } while(queue.length) { const [ori, tar] = queue.shift(); for(let key in ori) { if(map.get(ori[key])){ tar[key] = map.get(ori[key]); continue; } tar[key] = getEmpty(ori[key]); if(tar[key] !== ori[key]){ queue.push([ori[key], tar[key]]); map.set(ori[key], tar[key]); } } } return target; }

// 测试代码 const obj = { name: 1, range: [17, 30], getName: () => { console.log(this.name); } } const newObj = deepClone(obj); newObj.name = ‘333’ newObj.range.push(66) newObj.test = 18 console.log(obj, newObj);

2. 方式二
```javascript
function deepClone(obj) {
  if(obj == null || typeof obj !== 'object') return obj
  // 时间对象有特殊属性
  const newObj =  new obj.constructor(obj.constructor === Date ? obj : null)
  // 不拷贝原型链的
  for (const key in Object.getOwnPropertyDescriptors(obj)) {
      newObj[key] = deepClone(obj[key])
  }
  return newObj
}

三、函数式编程

函数柯里化

小记 · 语雀

once实现

const once = () => {
    let done = false;
  return function(){
      return done?undefined: ((done = true), fn.apply(this,arguments))
  }
}

memoized实现

const memoized = () => {
    const lookupTable = {};
  return (arg) => lookupTable[arg] || (lookupTable[arg] = fn(arg))
}

unary实现

// 让函数只接受一个参数
const unary = (fn) => fn.length === 1 ? fn: (arg) => fn(arg)

四、相关应用

switch里面case和default一起使用

switch(step){
      case 1 : default: {
        html='<h1></h1>'; break;
     }
     case 2:{
       html = '<h2></h2>' ; break;
     }
     case 3:{
       html = '<h3></h3>'; break;
     }
 }

小数求最大值、最小值

const readings = [0.3, 1.2, 3.4, 0.2, 3.2, 5.5, 0.4];
const maxReading = readings.reduce((x, y) => Math.max(x, y), Number.MIN_VALUE);
const minReading = readings.reduce((x, y) => Math.min(x, y), Number.MAX_VALUE);
console.log({minReading, maxReading});
// ⦘ {minReading: 0.2, maxReading: 5.5}

点击区域以外

const handler = event => {
  const { current: el } = ref;
  el && !el.contains(event.target) && onClickAway(event);
};
document.body.addEventListener('click', e => {
  if (e.target && e.target.matches('div.code')) {
      return;
  }
     // do sthing
});

判断函数参数的个数

var a = function(a){}
console.log(a.lenth); // 1
var b = function(a,b){}
console.log(b.lenth); // 2
// 让函数只接受一个参数
const unary = () => fn.length === 1 ? fn : (arg) => fn(arg)

发布订阅模式

class Event{
    constructor(){
        this.callbacks = {}
    }
    $off(name){
        this.callbacks[name] = null
    }
    $emit(name, args){
        let cbs = this.callbacks[name]
        if (cbs) {
            cbs.forEach(c=>{
                c.call(this, args)
            })
          }
    }
    $on(name, fn){
        (this.callbacks[name] || (this.callbacks[name] = [])).push(fn)
    }
}
let event = new Event()
event.$on('event1', function(arg){
    console.log('事件1',arg)
})
event.$emit('event1',{name:'测试'})