If you feel that there is no interview question, then lodash each method can be regarded as a question, you can see the effect of the realization in reverse, in different ways, a variety of ways to achieve, consolidate the foundation. In addition to some functions that can be implemented in a flash, here are some selected functions as a test. The Times are progressing, all the solutions below adopt ES2015 +

This article is to see the effect of backward implementation method, and some expansion and thinking, and source irrelevant. The Lodash library is more like a question library here, just for us to brush the questions

What to gain:

  • Practice basic code skills and understand common routines
  • Learn about the English naming and specification of some operations
  • Accumulate experience, can solve complex logic problems quickly
  • May be able to check their own JS basic knowledge of the hole

Note:

  • Specific expansion and explanation will be given to those with difficulty above Three stars
  • This article uses the array native API and ES6 + functional programming basically, the code is concise and the process is clear
  • If performance is certainly imperative, it is a bit more cumbersome and boring to implement
  • Time is progressing, life is short, I choose grammar candy and API. The performance bottleneck of big data is the time to consider imperative programming

assignIn

  • _.assignIn(object, [sources])This method is similar to object.assign. But it iterates over and inherits the properties of the source object. Note: This method changes the source object
  • The object (object) parameter is the target object. [sources] (… Object) is the source Object
  • The return value (Object) is the returned Object after assignIn
  • Degree of difficulty: ★★
  • Maximum recommended time: 6 minutes
// example
function Foo() {
  this.b = 2;
}

function Bar() {
  this.d = 4;
}

Foo.prototype.c = 3;
Bar.prototype.e = 5;

_.assignIn({ 'a': 1 }, new Foo, new Bar);
// => { 'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5 }
Copy the code

Reference code:

function assignIn(target, ... newObjs) {
  return  newObjs.reduce((res, o) = > {
    for (const key in o) {
      res[key] = o[key];
    }
    Object.getOwnPropertySymbols(o).forEach(sb= > {
      res[sb] = o[sb];
    });
    return res;
  }, target);
}

Copy the code

at

  • _.at(object, [paths])Get the value as an array based on the path of object.
  • object (Object)Is the object to iterate over
  • [paths] (... (string|string[])Is the element path of the object to be retrieved, specified separately or in an array
  • The return value is an array of selected values
  • Degree of difficulty: ★★★
  • Maximum recommended time: 9 minutes
//example
var object = { 'a': [{ 'b': { 'c': 3}},4]}; _.at(object, ['a[0].b.c'.'a[1]']);
/ / = > [3, 4]

_.at(['a'.'b'.'c'].0.2);
// => ['a', 'c']
Copy the code

Reference code

// Get ()
function get(o, path) {
// both _ and $can be used as keys
// '${path}' takes into account the number passed in
  const keys = `${path}`.match(/(\w|\$)+/g)
  if (keys) {
    return keys.reduce((acc, key, i) = > 
      acc && acc[key]
    , o)
  }
}

function at(target, ... paths) {
  return paths.reduce((res, path) = > {
    if (Array.isArray(path)) {
      return [...res, ...path.map(key= > get(target, key))]
    }
    return [...res, get(target, path)]
  }, [])
}
Copy the code

defaultsDeep

  • _.defaultsDeep(object, [sources])Assigns enumerable properties of the source object to all properties of the target object that resolve to undefined. The source object is applied from left to right. Once the value of the same property is set, subsequent properties are ignored. Default properties are assigned recursively. Note: This method changes the source object
  • Parameter Object (object): the target object
  • [sources] (... Object): Source object
  • Return value (Object): Returns an Object
  • Degree of difficulty: ★★★
  • Maximum recommended time: 9 minutes
// example
_.defaultsDeep({ 'user': { 'name': 'barney'}}, {'user': { 'name': 'fred'.'age': 36}});// => { 'user': { 'name': 'barney', 'age': 36 } }
Copy the code

Reference code

function defaults(target, obj) {
// Basic data type, null excluded
  if(! obj ||typeofobj ! = ='object') {
    return target;
  }
  return Object.entries(obj).reduce((acc, [key, value]) = > {
    if (acc[key] === undefined) {
      acc[key] = value
    } else if (typeof acc[key] === 'object') {
/ / recursion
      defaults(acc[key], value)
    }
    return acc
  }, target)
}

function defaultsDeep(target, ... objs) {
  return objs.reduce((acc, obj) = > {
    defaults(acc, obj)
    return acc;
  }, target)
}
Copy the code

merge

  • _.merge(object, [sources])Recursively merges the source object’s own and inherited enumerable properties into the target object. Skip properties that resolve to undefined from the source object. Arrays and ordinary objects are merged recursively, and other objects and values are allocated directly. Source objects are allocated from left to right, and subsequent source object properties overwrite the previously allocated properties. Note: This method changes the source object
  • Parameters:object (Object)Target object.[sources] (... Object)Is the source object
  • Return value (Object) : Returns an Object
  • Degree of difficulty: ★★★
  • Maximum recommended time: 9 minutes
// example
var users = {
  'data': [{ 'user': 'barney' }, { 'user': 'fred'}};var ages = {
  'data': [{ 'age': 36 }, { 'age': 40}}; _. (users, ages);// => { 'data': [{ 'user': 'barney', 'age': 36 }, { 'user': 'fred', 'age': 40 }] }
Copy the code

Reference code

function mergeOne(target, obj) {
  return Object.entries(obj).reduce((acc, [key, value]) = > {
    if (typeof acc[key] === 'object' && typeof value === 'object') {
      mergeOne(acc[key], value)
    } else {
      acc[key] = value
    }
    return acc
  }, target)
}

function merge(target, ... objs) {
  return objs.reduce((acc, obj) = > {
    mergeOne(acc, obj)
    return acc
  }, target)
}
Copy the code

set

  • _.set(object, path, value)Sets the value to the corresponding property path of the object, or creates the partial path if it does not exist. Missing index properties are created as arrays, and missing properties are created as objects. Custom creation using _.setWith.
  • parameterobject (Object)Is the object to be modified.path (Array|string)Is the path of the object to be set,value (*)Is the value to set
  • The return value (Object) is the Object that returns the setting
  • Degree of difficulty: ★★★
  • Maximum recommended time: 9 minutes
// example
var object = { 'a': [{ 'b': { 'c': 3}}}; _.set(object,'a[0].b.c'.4);
console.log(object.a[0].b.c);
/ / = > 4

_.set(object, 'x[0].y.z'.5);
console.log(object.x[0].y.z);
/ / = > 5
Copy the code

Reference code

// Modify the previous implementation of get
function get(o, path, defaultValue) {
  const keys = `${path}`.match(/(\w|\$)+/g)
  if (keys) {
    return keys.reduce((acc, key) = > 
      acc ? (acc[key] === undefined ? (acc[key] = defaultValue) : acc[key]) : (acc[key] = defaultValue)
    , o)
  }
}

function set(target, path, value) {
  const paths = `${path}`.match(/(\w|\$)+/g)
  if (paths && paths.length) {
    const lastKey = paths.pop()
    const last = get(target, paths.join('. '), {})
    last[lastKey] = value
  }
  return target
}
Copy the code

unset

  • _.unset(object, path)Removes properties of the object path. Note: This method changes the source object
  • parameterobject (Object)The object to modify,path (Array|string)Path to the object to remove
  • Returns true on success, false otherwise
  • Degree of difficulty: ★★★
  • Maximum recommended time: 9 minutes
// example
var object = { 'a': [{ 'b': { 'c': 7}}}; _.unset(object,'a[0].b.c');
// => true

console.log(object);
// => { 'a': [{ 'b': {} }] };

_.unset(object, 'a[0].b.c');
// => true

console.log(object);
// => { 'a': [{ 'b': {} }] };
Copy the code

Reference code

function unset(object, path) {
  const paths = `${path}`.match(/(\w|\$)+/g)
  if (paths && paths.length) {
    const lastKey = paths.pop()
    let temp = object
    while (paths.length) {
      temp = temp[paths.shift()]
    }
    if (lastKey in temp) {
      delete temp[lastKey]
      return true
    }
    return false
  }
  return false
}
Copy the code

Pay attention to the public account “Different front-end”, learn front-end from a different perspective, grow fast, play with the latest technology, explore all kinds of black technology