A) vue router jump method
1.this.$router.push()
Jump to a different url, but this method will add a record to the history stack, click the back will return to the previous page.
-
this.$ router.push({path: '/home/sort/detail',query:{id: 'abc'}})The this acquisition parameters {{. $ Route .query.userId}}
-
this.$ router.push({name: 'detail',params:{id: 'abc'}})
获取参数：{{this.$ route.params.userId}}
ps:
query params and the difference between:
1. Usage
query to use the path to introduce, params to use the name introduction: eg
this.$router.push({
name:"detail",
params:{
name:'nameValue',
code:10011
}
});
2. On the show
ajax query is more similar to what we get in mass participation, params is similar to the post, and then said simply, former parameters to appear in the browser address bar, the latter will not be displayed
2.this.$router.replace()
Also jump to a specific url, but this method does not add a new record to the history there, click on the return, will jump to the previous page. On a record does not exist.
3.this.$router.go(n)
Relative to the current page jump forward or backward the number of pages, similar window.history.go(n). n is a positive number can be negative. Positive return on a page
4. Declarative :
1) The routing path (/ home / sort / detail) Jump <Router-Link: to = "{path: '/ Home / Sort / Detail', Query: {ID: 'ABC'}}"> Click sub page </ router-link>
2) route name (Detail) Jump according <router-link: to = "{name: 'detail', params: {id: 'abc'}}"> Click subpage </ router-link>: to = "" you can bind the routing and dynamic parameters
B) the difference between Cookie and localStorage, sessionStorage of
| name | cookie | localStorage | sessionStorage |
| Same point | Can be used to store the data in the browser, is a string of key-value pairs | ||
| Data lifecycle | Typically generated by the server, expiration time may be set; generated if the browser, then the browser is closed by default fail | Unless cleared, otherwise permanent | Valid only for the current session, close the current page or the browser after clearing |
| Storage size | 4kb | General 5mb | |
| Communicate with the server | Each will carry the http request header, if too much cookie saved, the performance is not very good | Only stored in the client, the server does not participate in communication | |
| use | Usually generated by the server to identify the user's identity | Courage browser cache data | |
C) an array of related
1) an array of methods:
1.push () length additive element from the rear, the return value is added after the array
let arr = [1,2,3,4,5]
console.log(arr.push(5)) // 6
console.log(arr) // [1,2,3,4,5,5]
2.pop () to remove elements from the back, is only one element of the return value is deleted
let arr = [1,2,3,4,5]
console.log(arr.pop()) // 5
console.log(arr) //[1,2,3,4]
3.shift () Returns the value of a front delete elements, it can only be deleted from the deleted elements
let arr = [1,2,3,4,5]
console.log(arr.shift()) // 1
console.log(arr) // [2,3,4,5]
4. the unshift () to add elements from the foregoing, the return value is added after the length of the array
let arr = [1,2,3,4,5]
console.log(arr.unshift(2)) // 6
console.log(arr) //[2,1,2,3,4,5]
5. The splice (I, n-, Key) delete the element after the starting I (index value). The return value is deleted elements. Parameter is empty indicates a taken empty array, the array element unchanged. i is an integer (0 Positive Negative) represents negative forward from behind the array, -1 is the last; n is a positive number represented by 0 and the length to be cut, and a negative number 0 is not deleted. represents a shear key newly added location data, any length, separated by commas new additional element, if the new element is added to the string, you need to use quotation marks.
let arr = [1,2,3,4,5]
console.log(arr.splice(2,2)) //[3,4]
console.log(arr) // [1,2,5]
6. The the concat () Returns connecting two arrays is connected to the new array
let arr = [1,2,3,4,5]
console.log(arr.concat([1,2])) // [1,2,3,4,5,1,2]
console.log(arr) // [1,2,3,4,5]
7. The Split (I, J) into the string array i-- separator, default for all null characters, including spaces, linefeed (\ n-), tab (\ t) and the like. j-- split times. Defaults to -1, i.e., all the partition
let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]
8. The .sort () to sort the array, good return value is an array of rows, the default is sorted according to the leftmost digit is not sorted according to the size of the figures
var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") //10,5,40,25,1000,1 document.write(arr.sort()) // 1,10,1000,25,40,5
-------按照数字大小排序：-------
let arr1 = arr.sort((a, b) =>a - b) //[1,5,10,25,40,1000]
9. The Reverse () array reversed, the return value is an array of the inverted
let arr = [1,2,3,4,5] console.log(arr.reverse()) // [5,4,3,2,1] console.log(arr) // [5,4,3,2,1]
10. The Slice (start, end) to cut the index start end of the array index value, the index does not contain the end value, the return value is an array of cut out
let arr = [1,2,3,4,5] console.log(arr.slice(1,3)) // [2,3] console.log(arr) // [1,2,3,4,5]
11. The forEach (the callback) to iterate, no return the callback parameters: value - the current value of the index index - the index array - the original array
let arr = [1,2,3,4,5] arr.forEach( (value,index,array)=>{ console.log(`value:${value} index:${index} array:${array}`) }) // value:1 index:0 array:1,2,3,4,5 // value:2 index:1 array:1,2,3,4,5 // value:3 index:2 array:1,2,3,4,5 // value:4 index:3 array:1,2,3,4,5 // value:5 index:4 array:1,2,3,4,5 let arr = [1,2,3,4,5] arr.forEach( (value,index,array)=>{ value = value * 2 console.log(`value:${value} index:${index} array:${array}`) }) console.log(arr) // value:2 index:0 array:1,2,3,4,5 // value:4 index:1 array:1,2,3,4,5 // value:6 index:2 array:1,2,3,4,5 // value:8 index:3 array:1,2,3,4,5 // value:10 index:4 array:1,2,3,4,5 // [1, 2, 3, 4, 5]
12. The Map (callback) mapping array (iterate), there is an array of return to return a new callback parameters: item-- current index value of index - the index arr - original array
llet arr1 = [1,2,3,4,5]; arr1.map((item,index,arr)=>{ item=item*2; console.log(item,'index',index,'arr',arr); }); console.log(arr1); VM421:4 2 "index" 0 "arr" (5) [1, 2, 3, 4, 5] VM421:4 4 "index" 1 "arr" (5) [1, 2, 3, 4, 5] VM421:4 6 "index" 2 "arr" (5) [1, 2, 3, 4, 5] VM421:4 8 "index" 3 "arr" (5) [1, 2, 3, 4, 5] VM421:4 10 "index" 4 "arr" (5) [1, 2, 3, 4, 5] VM421:6 (5) [1, 2, 3, 4, 5]
PS; arr.map with arr.forEach distinction map-- -MAP function traverses each item value will traverse back to a new array, (equivalent to redefining the array, then a one item press-fitting) forEach ---- forEach array does not return after a new function iterates
var arr = ['Jack','Tom','Json','Jerry','Danny'] var names = arr.map(function(item,index){ return item }) console.log(names) // ["Jack", "Tom", "Json", "Jerry", "Danny"] ---------------------------分割线--------------------------- var names2 = arr.forEach(function(item,index){ return item }) console.log(names2) // undefined
13. filter (the callback) with arrays, returns an array to meet the requirements of
let arr = [1,2,3,4,5] let arr1 = arr.filter( (i, v) => i < 3) console.log(arr1) // [1, 2]
14. A .every (the callback) is determined according to the condition, whether the whole element of the array is satisfied, if yes return ture
let arr = [1,2,3,4,5] let arr1 = arr.every( (i, v) => i < 3) console.log(arr1) // false let arr2 = arr.every( (i, v) => i < 10) console.log(arr2) // true
15. A some () Analyzing element according to the condition, whether there is an array satisfied, if a return to meet ture
let arr = [1,2,3,4,5] let arr1 = arr.some( (i, v) => i < 3) console.log(arr1) // true let arr2 = arr.some( (i, v) => i > 10) console.log(arr2) // false
16.join () method for all elements in the array into a string. Elements are separated by a specified delimiter. The default is,;
var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join()) // George,John,Thomas
ps: join () method to all elements in the array into a string, and then connected, and it is just a String split () method is a reverse operation.
17. A the indexOf () to find an element index value, if repeated, a first index value found is returned. If there -1
let arr = [1,2,3,4,5,2] let arr1 = arr.indexOf(2) console.log(arr1) // 1 let arr2 = arr.indexOf(9) console.log(arr2) // -1
18. As arr.lastIndexOf () and arr.indexOf () function, except that the look from the back
let arr = [1,2,3,4,5,2] let arr1 = arr.lastIndexOf(2) console.log(arr1) // 5 let arr2 = arr.lastIndexOf(9) console.log(arr2) // -1
19. A from () array into the dummy array, as long as the length that would be transformed into an array. --- es6
var setObj = new Set(["a", "b", "c"]); var objArr = Array.from(setObj); console.log(objArr) // ["a", "b", "c"] objArr[1] == "b"; // true --------------分割线--------------- var arr = Array.from([1, 2, 3], x => x * 10); console.log(arr) //[10, 20, 30] // arr[0] == 10; // arr[1] == 20; // arr[2] == 30;
20. Create a new instance of an array of a variable number of parameters Array.of () method, regardless of the number or type of parameters ES6 ---
ps: Array.of() and Array the difference between the integer argument constructor that process: Array.of(7) creating a single element having 7 array, and Array(7) to create an empty array of length 7 ( note: this refers to an array of seven vacancy (empty), and not by 7 undefinedarray of)
Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]
21. The the Find (callback) to find the first qualifying array member
let arr = [1,2,3,4,5,2,4] let arr1 = arr.find((value, index, array) =>value > 2) console.log(arr1) // 3
22. The findIndex (callback) find the index value of the first qualifying array members
let arr = [1,2,3,4,5] let arr1 = arr.findIndex((value, index, array) => value > 3) console.log(arr1) // 3
23. A Fill () Fill an Array using fixed values:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.fill("Runoob"); //Runoob,Runoob,Runoob,Runoob
24.includes () method returns a Boolean value indicating whether the array contains a given value, the method includes similar string. The method belongs ES7, but Babel transcoder has support.
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, NaN].includes(NaN); // true
to sum up:
The method of changing an array element: Push () POP () Shift () the unshift () splice () Split () Sort () Reverse ()
Does not change the original array method: the concat () Slice () the Join () map, filter, forEach, some, without changing the original array, etc. Every each array whose object map and will change the original array method forEach