split, splice, slice difference
- stringObject.slice (start, end) method returns the selected elements from the existing array. Returns a new array containing the
element [start, end) in the arrayObject. - arrayObject.split (separator, howmany) split the string, returns an array, the second parameter is the maximum length of the returned array.
- arrayObject.splice (index, howmany, item1, ..., itemX)
to modify the original array, delete the index from the howmany elements, and insert item1-itemX element before the index. Back Erase elements of the array
for ... in statement
Or traverse the object properties for an array. Enumerates all properties on prototype chain traversal, filtering is to use these properties hasOwnProperty function.
Object.prototype.method=function(){
console.log(this);
}
var myObject={
a:1,
b:2,
c:3
}
for (var key in myObject) {
if(myObject.hasOwnProperty(key)){
console.log(key);
}
}
Deduplication Array
Array.prototype.unique = function() {
var obj = {}
return arr.filter((item, index, arr) => {
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(arr)
console.log(arr.unique())
Get userAgent
function getBrowser() {
let obj = {}
obj.appName = navigator.appName
obj.version= navigator.appVersion
obj.code = navigator.appCodeName
obj.userAgent = navigator.userAgent
return obj
}
console.log(getBrowser())
How do I stop bubbling
ev.stopPropagation();
ev.cancelBubble = true; // 旧IE
Prototype and prototype chain
(1) is the prototype of a property that is a property of the constructor, the constructor is used for manufacturing a target, is created by the constructor of a common ancestor, all the attributes and methods of the prototype objects inherit later (prototype also objects)
(2) __ proto__ This prototype is used to view, this is a property of the object, this property can be viewed but not modified (implicit property)
(3) prototype prototype set, the attribute is the constructor
（4）proto === constructor.prototype
(5) prototype chain is __proto__ to link the chain, when js Find object properties, first find out whether the existence of the property object itself, does not exist, it will be found on the prototype chain, but does not find its own prototype.
get and post the difference and when to use post
GET: General to obtain information, use a URL to pass parameters, the number of transmitted information is also limited, in the 2000 general character
POST: generally used to modify resources on the server, the information sent is no limit Get the address bar to pass value
Post by submitting a form to pass value
in the following situations, please use the POST request:
- Can not use the cache files (files or update the database on the server)
- Sending large amounts of data (POST not limit the amount of data) to the server
- When sending the user input contains unknown character, POST is more stable and more reliable than the GET
blocking css, js blocked
When the browser when downloading js, will stop all other activities, such as resource downloads, content presentation and so on. Until js download, parse, after finished resumes parallel downloading other resources and content presentation.
Embedding js blocks all content is presented, followed by an external js will block content presentation.
When followed behind css embedded js, css this case will be blocked behind the emergence of download resources. And in front of the embedded js css, obstruction of the situation would not arise.
Solution:
- The script at the bottom. <Link> or on the head, to ensure that the page can be loaded before loading js normal. <Script> in </ body> before.
- Limit the total number of script.
- Dynamic script element. No matter where you start downloading, file downloading and running the amount will not block other page processing, even in the head inside (except for http link to download the file).
<script>
var script = document.createElement('script')
script.style="text/javascript"
script.src="file.js"
document.getElementByTagName("head")[0].appendChild(script)
</script>
Same Origin Policy
Protocol, domain names, the same port, same origin policy is a security protocol, refers to only read a script window and documents from the same source attributes.
What action will cause a memory leak
- setTimeout first parameter string instead of a function.
- Closure.
- Console log.
- Cycle (two object references one another and are retained to one another)
Quick Sort
function sort(arr) {
if(arr.length === 1) {
return arr
}
let less = []
let generator = []
let centerIndex = Math.floor(arr.length/2)
let centerValue = arr.splice(centerIndex,1)[0]
console.log(arr)
for(let i = 0;i<arr.length;i++) {
if(arr[i]<centerValue) {
less.push(arr[i])
}else {
generator.push(arr[i])
}
}
return sort(less).concat(centerValue,sort(generator))
}
console.log(sort([5, 100, 6, 3, -12]))
How dom hidden elements
Using the opacity: 0 to 0 Set transparency; (representing position)
using the visibility: hidden; (representing position)
using display: none; (not accounting position)
css pseudo-classes and pseudo elements
When pseudo-class elements for the page is in a certain state, to add the specified style.
Pseudo-element creates an abstract pseudo-element, this element is not in real DOM elements, but will be present in the final rendering of the tree, we can add to their style.
Why use the data vue function returns
In order to ensure the independence of the data vue data on each instance, a predetermined function must be used, instead of the object.
Because the use of objects, then, data on the use of data for each instance (component) affect each other, which of course is not what we want. For the object is referenced memory address, this object will be used directly to define words between the component objects, this will cause data between components influence each other.
