Recently, I participated in the development of the company’s Vue + ElementUI background management system, and now the project has come to an end, which is a good time to make a summary.

This document is divided into three parts: the JavaScript part, the Vue part, and the ElementUI part.

First, understanding JavaScript

1. How to copy a Js object?

In C#, Java and other object-oriented high-level languages, you can copy an object directly through the ‘=’ assignment operator. If you want to define a proxy to point to an object, you need to use the pointer definition. However, Js used the ‘=’ assignment operator to define a pointer to an object by default in the early days for performance reasons.

var a = { prop: 'val' }
var b = a
a.prop = 'nothing'
console.log(b.prop) // 'nothing'Copy the code

No matter how “copied”, the new object always refers to the original object, and the original object changes, so does the new object. How do you copy objects? We know that objects can be nested, that is, the properties of an object can be another object, so copying the properties of the original object into a new object is not guaranteed to be consistent through ordinary looping, so this copying is also known as “shallow copy”. The opposite method of copying objects recursively is also known as “deep copy.”

/ / shallow copy
function extendCopy(p) {varc = {};for (var i inP) {c[I] = p[I]; } c.u ber = p;return c;
}Copy the code
/ / copy
function deepCopy(p, c) {varc = c || {};for (var i inp) {if (typeof p[i] === 'object'({c[I] = (p[I])Array)? [] : {}; deepCopy(p[i], c[i]);// recursive call}else[I] {c = p [I]; }}return c;
}Copy the code

Of course, it is possible to introduce a library (such as utils.js) in your project to make it easy to reference these extension functions, but is there a cleaner way to do this? The answer is yes.

// utils.js
export constextendCopy(p) {... }export constdeepCopy(p, c) {... }Copy the code
// page.js
import {extendCopy, deepCopy} fromutils.js a = {... } b = extendCopy(a)Copy the code

It can also be solved in the following ways:

  • Provided through a JSON objectstringify 和 parseMethods are implemented in combination.
// The problem is that the performance is not ideal.
var a = {}
var b = JSON.parse(JSON.stringify(a))Copy the code
  • Generate a new object by returning a value in a function.
// The disadvantage of this approach is that you define an original object as a template in literal form.
a = function() { 
return { prop:"123" } 
}
b = a()
d = a()
b === d // falseCopy the code
  • Provided through ES2015Object.assign()Method to copy.
// A simple, high-performance solution
var a = {}
var b = Object.assign({},a)Copy the code

From the example above, it is easy to conclude that copying an Object using object.assign () is an ideal solution.

2. How to determine whether an element is in a set

The early Js standard did not implement a method like array.contains(item), so it can only be judged by the index of the element in the collection. (Thanks for XiaozhongLiu’s reminding, the array.includes () method has been added in ES7.)

// The traditional way
var isSelected = function(row) {
  return (selection || []).indexOf(row) > - 1;
}

// ES7 is much simpler
isSelected = selection.includes(row)Copy the code

3. Determine whether a variable is a non-empty object

Null is of type object. Typing typeof NULL on the console returns “object”. In fact, to detect a non-empty array, we need to rule out null values.

var isObject = function(obj) {
  returnobj ! = =null && typeof obj === 'object'
}Copy the code

4. How do I query an array and return a subset of its elements

Here we use the filter method of the array, which has the following characteristics:

  1. You need to pass in a callback function as an argument that returns a Boolean value.
  2. filterThe callback is executed once for each element in the array.
  3. filterIs a new array whose member is the original array whose return value istrueThe element.
var users = allUsers.filter((user) = > user.loged === true)Copy the code

5. How can I tell if an object has no properties

What happens when two empty objects are compared in Js?

var a = {}
a === {} // falseCopy the code

When the “equal” operator is applied to data of type object in Js, it compares whether the two variables refer to the same reference, that is, whether they have the same address in memory.

What we expect is to compare two objects to see if they logically have the same properties. Empty objects are a special case; they don’t have any properties.

if (Object.keys(search).length ! = =0) {
    args = Object.assign({}, args, search)
}Copy the code

Keys () is used to obtain the set of Object keys and determine whether their length is 0.

6. How to use a loop to delete multiple elements in an array

for (let i = 0.let j = delIds.length - 1; i < j; i++) {
    allItems.splice(delIds[i], 0)}Copy the code

Is it possible to loop through the original array by index? If we execute this code, we will not get the desired result. The reason is that when the previous element is deleted, the index of the following element changes. If the index before deletion continues, the correct element cannot be located. There are two solutions:

  • Retrieves the index of the deleted element through a reverse loop, traversing the deletion from back to front.
for (let i = delIds.length - 1; i > 0; i--) {
    allItems.splice(delIds[i], 0)}Copy the code
  • The two methods of array deletion, forEach and indexOf, are used to dynamically retrieve the indexOf the deleted element itself.
delItems.forEach ((item) = > {
    allItems.splice(allItems.indexOf(item), 0)})Copy the code

(To be continued…)