let a= {
id:1,
hobby:[1,3]
}
let b= {
id:1,
hobby:[1,2,3]
}
how does js judge whether an and b are equal? the value in objects may be strings, array objects, etc.
let a= {
id:1,
hobby:[1,3]
}
let b= {
id:1,
hobby:[1,2,3]
}
how does js judge whether an and b are equal? the value in objects may be strings, array objects, etc.
first of all, JSON.stringify
is impossible, and secondly, this classical problem can be found everywhere. object-comparison-in-javascript
x = {a: 1, b: 2};
y = {b: 2, a: 1};
JSON.stringify(x)===JSON.stringify(y); //false
A common way to compare equality is to loop object properties, but it's slow. The limitation of JSON.stringify is so high that it is not allowed if the order of attributes is different.
how to judge the equality of two objects
the article explains in great detail, directly using his final eq function to achieve comparison.
the following code is the final eq function code in the original text:
return toString.call(obj) === '[object Function]' } function eq(a, b, aStack, bStack) { // === true +0 -0 if (a === b) return a !== 0 || 1 / a === 1 / b; // typeof null object null if (a == null || b == null) return false; // NaN if (a !== a) return b !== b; // a false var type = typeof a; if (type !== 'function' && type !== 'object' && typeof b != 'object') return false; // deepEq return deepEq(a, b, aStack, bStack); }; function deepEq(a, b, aStack, bStack) { // a b [[class]] true var className = toString.call(a); if (className !== toString.call(b)) return false; switch (className) { case '[object RegExp]': case '[object String]': return '' + a === '' + b; case '[object Number]': if (+a !== +a) return +b !== +b; return +a === 0 ? 1 / +a === 1 / b : +a === +b; case '[object Date]': case '[object Boolean]': return +a === +b; } var areArrays = className === '[object Array]'; // if (!areArrays) { // if (typeof a != 'object' || typeof b != 'object') return false; var aCtor = a.constructor, bCtor = b.constructor; // aCtor bCtor Object aCtor bCtor if (aCtor !== bCtor && !(isFunction(aCtor) && aCtor instanceof aCtor && isFunction(bCtor) && bCtor instanceof bCtor) && ('constructor' in a && 'constructor' in b)) { return false; } } aStack = aStack || []; bStack = bStack || []; var length = aStack.length; // while (length--) { if (aStack[length] === a) { return bStack[length] === b; } } aStack.push(a); bStack.push(b); // if (areArrays) { length = a.length; if (length !== b.length) return false; while (length--) { if (!eq(a[length], b[length], aStack, bStack)) return false; } } // else { var keys = Object.keys(a), key; length = keys.length; if (Object.keys(b).length !== length) return false; while (length--) { key = keys[length]; if (!(b.hasOwnProperty(key) && eq(a[key], b[key], aStack, bStack))) return false; } } aStack.pop(); bStack.pop(); return true; }
use:
let a= {
id:1,
hobby:[1,3]
}
let b= {
id:1,
hobby:[1,2,3]
}
let c= {
hobby:[1,3],
id:1,
}
let d= {
hobby:[1,2,3],
id:1,
}
eq(a,b) //false
eq(a,c) //true
eq(a,d) //false
eq(b,c) //false
eq(b,d) //true
eq(c,d) //false
after reading several answers from others, I feel that this method in this article is really powerful.
also learned by the way.
^ _ ^
take a look at shallowEqual
let a= {
id:1,
hobby:[1,2,3]
}
let b = {
hobby:[1,2,3],
id:1,
}
function keySort(target){
const newObj = {}
Object.keys(target).sort().map(key => newObj[key] = target[key])
return newObj
}
console.log(JSON.stringify(keySort(a)) === JSON.stringify(keySort(b))) // true
Why do you spray JSON.stringify,? it doesn't support sorting. Can't you line it up and take it out? (manual dog head)
deep or shallow?
use JSON.stringify directly if you are deep
use Object.keys for shallow words
Previous: Docker deployment django web page
{ path: song , component: Song, children: [ { path: :id , component: Songditail }, { path: getNewsList , component: newslist } ] } this.$router.push({ path: song getNews }) newslist ...
the application packaged with create react app comes with service worker, which causes it to be redeployed and cannot be updated. How to update the application? ...
import React from react import . style.less import HomeList from .. .. .. components List import HomeMore from .. .. .. components LoadMore import { getListData } from .. .. .. fetch home home class List extends React.Component { ...
import React from react import PureRenderMixin from react-addons-pure-render-mixin import . style.less class SearchInput extends React.Component { constructor(props, context) { super(props, context); this.shouldComponent...
add className, to the pop-up box of the calendar component in antd and add dropdownClassName, according to his api, but it has no effect. I took a look at the source code and there is no dropdownClassName attribute. Ask the boss to answer . ...
effect description: each time you add the + button, you can add a new row of new columns, and click the following to delete the row. :,. : cause analysis: react s diff algorithm needs to add key values to nodes to recognize different nodes, so add...
Is rt redux-thunk used to handle this ...
I used mock to simulate a piece of data let list = Mock.mock ( " pie ", {) moni:{ salesTypeData:[ { x: 0, y: 2018-5-10 , }, { x: 20, y: 2018-5-11 , }, { ...
there is a problem with using mobx: obtain the backend interface data through @ action, then assign a value to @ observable data, and then calculate whether the modal needs to be displayed from data through @ computed modalVisiable. How can I change t...
I don t quite understand what I saw when I was learning react by myself. Can you explain. this can be a problem if the props and state properties have more complex data structures. For example, let s write a ListOfWords component to show a comma-sepa...
in the string given to me by the background, if a newline is n r, how can I insert a newline symbol such as br when I use it? it is not good for me to write it directly in the string, just as the string is output to me . <div > {state.list[c...
state= { val:0 } put on the timer to execute setState twice in a row setState what I see is that the setState twice put in the timer is Synchronize , and the twice setState is asynchronous without a timer. Can you help me explain this? ...
recently did a react project and found a bug, that shows normal when you click on the bottom navigation, and when you click quickly, when you switch between the home page and my module, my module will turn white. ...
point to the download address through window.location.href to download the file. How to get the time after the download is successful? ...
Let me encapsulate a component and an echarts-like diagram plug-in this morning. Like this in the figure, there is also a timeline function at the bottom, where nodes can click, click events, support nodes to add pictures, and replace them with user ava...
just started to encapsulate a diagram plug-in, with the timeline that is the kind of timeline, I found that echarts has timeline, but also requires the addition of thermal effects on the timeline. is the thermal effect of 24 hours to be reflected in the...
echarts diagram (force guide diagram) can multiple lines be connected between two nodes? Something like this in the picture? ...
choose the picture locally and upload it to the server through ajax. Do not want to use the form form, use the fileReader of h5 to report an error, how to solve converted code convertToBase64() { let fileReader = new FileReader() 2m con...
componentDidUpdate(prevProps, prevState, snapImg){ if(this.props.bookImg!=null && this.props.bookImg!==prevProps.bookImg){ var canvas= document.createElement( canvas ); var ctx= canvas.getContext( 2d ); var img= ne...
the default program entry for projects created using create-react-app is index.js,. The default home page is public index.html. But I want to do multiple web pages in the project, how can I associate index.js and index.html in the about directory? ...