This series is not what flower head, is to adjust the usual interview of some handwriting functions, test these simple implementation of the benefit is to see the basic coding level, and take a short time, more comprehensive to see how your code strength. Generally will not have a lot of boundary conditions, so the interview time is not enough, not comprehensive investigation.

If you do not know or do not know the API, ask the interviewer directly, how to use the API under Google who can immediately understand the knowledge also can not see the level. The key is in the implementation process, and your code state, habits, clarity, etc.

Note is simple implementation, not complete implementation, the important thing is clear concept and clear idea of implementation, it is recommended to write pseudo code first, and then achieve specific functions.

1. Object.keys()

What is the

MDN portal

The object.keys () method returns an array of the self-enumerable properties of a given Object in the same order as a normal loop through the Object.

Let’s just look at the example

// simple array
var arr = ['a'.'b'.'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a'.1: 'b'.2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var anObj = { 100: 'a'.2: 'b'.7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }}}); myObj.foo =1;
console.log(Object.keys(myObj)); // console: ['foo']
Copy the code

If you want to get all the attributes of an Object, and even an enumeration, please see the Object. GetOwnPropertyNames.

Simple hand-written implementation

Train of thought

  1. Generally, you implement a function, and if you have a function, you have a return value, so in this case, it’s an array, so you define the result firstres = []
  2. To understand the implementation of this function, it’s too easy, just walk through the names of the properties that the object pushes into its own enumerable properties.
  3. Take a step further. What the interviewer might want you to expand on isfor inWill the traversalAn enumerable property on the prototype chainLet’s go through it together, how to handle it.

implementation

Because this is the first problem, I’m going to write the thought process clearly, and I’m not going to go into too much detail

  1. There’s a zero step here,Write a test caseIn the process of your writing or debugging, you can also blow a waveTDD
let obj = {'a': 1.'2': '22'.'66': 'c'}
Object.prototype.xxxprop = { 'xxx': 'xxx' }

console.log(Object.keys(obj)) // [ '2', '66', 'a' ]
Copy the code
  1. So let’s write the pseudocode first to clear our minds
const getObjectKeys = (obj) = > {
  // Define the return value res
  const res = []
  // Process logic to iterate over all enumerable properties and push res.return res
}
Copy the code
  1. Implement the master logic
const getObjectKeys = (obj) = > {
  // Define the return value res
  const res = []
  // Process logic to iterate over all enumerable properties and push res
  for (prop in obj) {
    res.push(prop)
  }
  return res
}
console.log(getObjectKeys(obj)) // [ '2', '66', 'a', 'xxxprop' ]
// Sure enough, the enum properties on the prototype chain are iterated through the output
Copy the code
  1. Write down all the special points, and of course you can do 2 and 3 in one step, but I’m doing it for example, and it’s better to have clear steps for other complicated problems.
const getObjectKeys = (obj) = > {
  // Define the return value res
  const res = []
  // Process logic to iterate over all enumerable properties and push res
  for (prop in obj) {
    // Use hasOwnProperty to filter out properties on the stereotype
    if (obj.hasOwnProperty(prop)) {
      res.push(prop)
    }
  }
  return res
}

console.log(getObjectKeys(obj)) // [ '2', '66', 'a' ]
Copy the code

2. Object.values()

What is the

MDN portal

The object.values () method returns an array of all the enumerable property values of a given Object itself, in the same order as using the for… The in loop is in the same order (the difference is that the for-in loop enumerates the properties in the prototype chain).

The root object.keys () difference is that it returns a value instead of a key

var obj = { foo: 'bar'.baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// array like object
var obj = { 0: 'a'.1: 'b'.2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

// array like object with random key ordering
// when we use numeric keys, 
// the value returned in a numerical order according to the keys
var an_obj = { 100: 'a'.2: 'b'.7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

// getFoo is property which isn't enumerable
var my_obj = Object.create({}, { 
    getFoo: { value: function() { return this.foo; }}}); my_obj.foo ='bar';
console.log(Object.values(my_obj)); // ['bar']

// non-object argument will be coerced to an object
console.log(Object.values('foo')); // ['f', 'o', 'o']
Copy the code

Simple hand-written implementation

In fact, we’ll write it according to these steps, and we’ll skip the steps here, but the steps are very important!

  1. Write a test case
  2. Write pseudocode and comment ideas
  3. Implement the master logic
  4. Boundary special cases are properly considered

I’m just going to write it right here because it’s almost the same at the root

let obj = {'1': 1.'2': 3.'3': 'c'}
Object.prototype.xxxprop = { 'xxx': 'xxx' }

const getObjectValues = (obj) = > {
  const res = []
  for (prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      // Return the value
      res.push(obj[prop])
    }
  }
  return res
}

console.log(getObjectValues(obj)) // [ 1, 3, 'c']
Copy the code

3. Object.entries()

What is the

MDN portal

The object.entries () method returns an array of key-value pairs of enumerable properties of a given Object itself, arranged with the use of for… The in loop returns the same order as it traverses the object (the difference is that the for-in loop also enumerates the properties in the prototype chain).

const obj = { foo: 'bar'.baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a'.1: 'b'.2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a'.2: 'b'.7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo is property which isn't enumerable
const myObj = Object.create({}, { getFoo: { value() { return this.foo; }}}); myObj.foo ='bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
Copy the code

skills

The new Map() constructor takes a single iterable entry. You can easily convert an Object to a Map with the object.entries method:

var obj = { foo: "bar".baz: 42 };
var map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }
Copy the code

Simple hand-written implementation

let obj = {'1': 1.'3': 'c'}
Object.prototype.xxxprop = { 'xxx': 'xxx' }

const getObjectEntries = (obj) = > {
  const res = []
  for (prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      // Return an array of key-value pairs
      res.push([prop, obj[prop]])
    }
  }
  return res
}

console.log(getObjectEntries(obj)) // [ [ '1', 1 ], [ '3', 'c' ] ]
console.log(Object.entries(obj)) // [ [ '1', 1 ], [ '3', 'c' ] ]
Copy the code

In addition, I would like to recommend to you the article of this big brother, very deep in simple, to the front of the advanced students are very effective, wall crack recommended!! Core concepts and algorithm disassembly series

That’s all for today. If you want to brush the questions with me, you can add my wechat to search my wechat id, infinity_9368. You can chat and add my password “Tianwang Gai Tigeri” in English. Please send me the verification message presious Tower shock the Rever Monster, I see it, I pass, do not add to the code, I will do my best to help you, but pay attention to the way of questioning, I suggest you read this article first: The Wisdom of Asking questions

reference

  • Developer.mozilla.org/zh-CN/docs/…