-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
146 lines (146 loc) · 50.8 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[es6常用的方法]]></title>
<url>%2F2018%2F06%2F14%2Fes6%E5%B8%B8%E7%94%A8%E7%9A%84%E6%96%B9%E6%B3%95%2F</url>
<content type="text"><![CDATA[解构赋值1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859// 以前我们给变量赋值，只能直接指定值var a = 1;var b = 2;var c = 3;console.log(a,b,c); // 1 2 3 // 现在用解构赋值的写法就变得简单了，只要模式匹配上了就行了，如下// 注意数组是有顺序的var [a,b,c] = [11,22,33];console.log(a,b,c); // 11 22 33var [b,a,c] = [11,22,33];console.log(a,b,c); // 22 11 33// 当然解构赋值还有嵌套比较复杂的写法，如下let [foo,[[bar],[baz]]] = [111,[[222],[333]]];console.log(foo,bar,baz); // 111 222 333let [head,...foot] = [1,2,3,4];console.log(head,foot); // 1 [2,3,4]// 如果解构不成功，变量的值就等于undefined，如下var [bar3,foo3] = [1000];console.log(bar3,foo3); // 1000 undefined// 另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功let [x,y] = [10000,20000,30000];console.log(x,y); // 10000 20000// 默认值可以引用解构赋值的其他变量，但该变量必须已经声明let [a=1,b=a] = [2,3];console.log(a,b); // 2 3// 对象的解构也可以指定默认值var {x,y=5} = {x:1};console.log(x,y); // 1 5//对象的解构赋值解构不仅可以用于数组，还可以用于对象(json)//对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；//而对象的属性没有次序，变量必须与属性同名，才能取到正确的值var {a,b} = {a:'apple',b:'banana'};console.log(a,b); // apple bananavar {b,a} = {a:'apple',b:'banana'};console.log(a,b); // apple banana// 如果变量名与属性名不一致，必须写成下面这样let obj = {first:'hello',last:'world'};// first ---> f，那么此时f就是first，而不是undefined了,有点类似别名的概念let {first:f,last} = obj;console.log(f,last); // hello world//1.也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。 真正被赋值的是后者，而不是前者//2.v是匹配的模式，n才是变量。真正被赋值的是变量n，而不是模式v。 //注意，采用这种写法时，变量的声明和赋值是一体的// v ---> n，那么此时n就是vue，而不是undefined了var {v:n} = {v:'vue',r:'react'};console.log(n); // vueconsole.log(v); // Uncaught ReferenceError: v is not definedconsole.log(r); // Uncaught ReferenceError: r is not defined 数组拷贝且不影响原数组123456789101112131415161718192021222324// 复制数组深拷贝，传统做法var arr1 = [1,2,3];var arr2 = [];//通过for循环遍历之后将arr1数组的每一项赋值给arr2数组的每一项， 就实现了数组的深拷贝，这时候我再去操作arr2的数组的时候，arr1就不会受影响了for(var i=0;i<arr1.length;i++){ arr2[i] = arr1[i];}// 数组尾部添加arr2.push(4);console.log(arr1,arr2);// ES6实现的数组的深拷贝方法1var arr1 = [1,2,3];var arr2 = Array.from(arr1);// 数组尾部添加arr2.push(100);console.log(arr1,arr2);// ES6实现的数组的深拷贝方法2var arr1 = [1,2,3];// 超引用拷贝数组var arr2 = [...arr1];// 数组尾部添加arr2.push(1000);console.log(arr1,arr2); for循环12345678910111213141516171819202122232425262728293031323334353637383940414243//for of一个arr对象var arr = ['红楼梦','西游记','三国演义','水浒传','金瓶梅'];//只循环keyfor(var key of arr.keys()){console.log(key);}//只循环valuefor(var value of arr){console.log(value);}//循环key,valuefor(var [key,value] of arr.entries()){console.log(key,value);}//for in循环与for of循环的区别var arr = ['apple','banana','orange','pear'];for(var i in arr){// i打印出来的就是arr数组对应的索引// 0 1 2 3console.log(i);}for(var i of arr){// i值打印出来的就是我们想要的数组具体的值// apple banana orange pearconsole.log(i);}//for of不能循环jsonvar json = {'a':'apple','b':'banana','c':'orange','d':'pear'};for(var name in json){// a b c dconsole.log(name);// appleconsole.log(json.a);// pearconsole.log(json['d']);}// 注意for..of可以循环arr，但是不可以循环json,会报错，特别注意下for(var name of json){Uncaught TypeError: undefined is not a functionconsole.log(json);} class和extends123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110//传统面向对象写法function Person(name,age){ // 类、构造函数 this.name = name; this.age = age;}Person.prototype.showName = function(){ return this.name;};Person.prototype.showAge = function(){ return this.age;};var p1 = new Person('allen',28);var p2 = new Person('xiaoxiaoyou',101);console.log(p1.showName()); // allenconsole.log(p2.showAge()); // 101console.log(p1.showName == p2.showName); // trueconsole.log(p1.constructor == Person); // true//ES6面向对象写法class Person{ // 构造器 constructor(name,age){ this.name = name; this.age = age; } showName(){ return this.name; } showAge(){ return this.age; }}var p1 = new Person('aaa',18);var p2 = new Person('bbb',20);console.log(p1.name); // aaaconsole.log(p1.showName()); // aaaconsole.log(p2.showAge()); // 20console.log(p1.showAge == p2.showAge); // trueconsole.log(p1.constructor == Person); // true//面向对象class给默认值class Person{ // 构造器 constructor(name='default',age=0){ this.name = name; this.age = age; } showName(){ return this.name; } showAge(){ return this.age; }}var p1 = new Person();console.log(p1.name); // 构造器里面给的默认值 defaultconsole.log(p1.age); // 构造器里面给的默认值 0//传统写法原型继承function Person(name,age){ // 类、构造函数 this.name = name; this.age = age;}Person.prototype.showName = function(){ return this.name;};Person.prototype.showAge = function(){ return this.age;};// 工人类function Worker(name,age){ // 属性继承过来 Person.apply(this,arguments);}// 原型继承Worker.prototype = new Person();var p1 = new Person('allen',28);var w1 = new Person('worker',1000);console.log(w1.showName()); // 确实继承过来了 result：worker//ES6中面向对象实现类继承class Person{ // 构造器 constructor(name,age){ this.name = name; this.age = age; } showName(){ return this.name; } showAge(){ return this.age; }}class Worker extends Person{ constructor(name,age,job='拖地的'){ // 继承超父类的属性 super(name,age); this.job = job; } showJob(){ return this.job; }}var p1 = new Person('aaa',18);var w1 = new Person('www',36);var w2 = new Worker('wwwwwwww',90);console.log(w1.showName()); // wwwconsole.log(w2.showJob()); // 默认给的值 ‘拖地的’ 123456789101112131415161718192021class Animal { constructor(){ this.type = 'animal'; } says(say){ console.log(this.type + ' says ' + say); }}let animal = new Animal();animal.says('hello'); // animal says helloclass Cat extends Animal { construtor(){ super(); // 必须有 this.type = 'cat'; }}let cat = new Cat();cat.says('hello'); // cat says hello 上面代码首先定义了一个类，拥有一个默认的方法 constructor ，这是构造方法，constructor 内定义的方法和属性是实例对象自己的，外的是所有实例对象可以共享的。 Class 之间通过 extends 继承，继承父类的所有属性和方法。 super 指代父类的实例，也就是父类的 this 对象，子类必须在 constructor 方法类调用 super 方法，否则报错。因为子类没有自己的 this 对象，如果不调用，子类得不到 this 对象。 Class 注意点： * 类的内部定义的方法，都是不可枚举的（和 ES5 不同） * 必须有 constructor 方法，没有显式定义，则默认添加空的 constructor 方法 * 类的构造函数，必须使用 new 调用，普通构造函数不适用也可执行 * 不存在变量提升 * 类的方法内部，this 默认指向类的实例 * 类的内部，默认是严格模式 Promise12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182//Promise对象 ---> 用来传递异步操作过来的数据的//Pending(等待、处理中) ---> Resolve(完成，fullFilled) ---> Reject(拒绝，失败)var p1 = new Promise(function(resolve,reject){ resolve(1); // 成功了 // reject(2); // 失败了});// 接收成功和失败的数据，通过then来传递// then也是返回一个promise对象，会继续往下传递数据,传递给下一个thenp1.then(function(value){ // resolve console.log(value); return value + 1; // 1 alert(`成功了：${value}`);},function(value){ // reject alert(`失败了：${value}`);}).then(function(value){ console.log(value); // 2});//catch捕获异常错误var p1 = new Promise(function(resolve,reject){ resolve('成功了');});p1.then(function(value){ console.log(value); // throw是用来抛错误的 throw '发生了点小意外';}).catch(function(e){ // catch用来捕获这个错误的 ---> 追踪 console.log(e);});//all ---> 全部，用于将多个promise对象，组合，包装成//Promise.all([p1,p2,p3,...]); 所有的promise对象，都正确，才走成功//否则，只要有一个错误，就走失败var p1 = Promise.resolve(1);var p2 = Promise.reject(0);Promise.all([true,p1,p2]).then(function(obj){ console.log(`成功了：${obj}`);},function(obj){ console.log(`失败了：${obj}`);});// race ---> 返回的也是一个promise对象//最先执行的的promise结果，哪个最快我用哪个var p1 = new Promise(function(resolve,reject){ setTimeout(resolve,50,'one');});var p2 = new Promise(function(resolve,reject){ setTimeout(resolve,100,'two');});Promise.race([p1,p2]).then(function(val){ console.log(val);});//resolve ---> 生成一个成功的promise对象//语法规则：Promise.resolve(val); // 普通值// Promise.resolve(arr); // 数组之类//Promise.resolve(promise); // 传递另一个promise对象//传递普通值Promise.resolve('success').then(function(val){ // 注意resolve，走得是这里 console.log(val); // success},function(err){ console.log("err:"+ err);});//传递数组Promise.resolve([1,2,3]).then(function(val){ // 注意resolve，走得是这里 console.log(val); // [1,2,3]},function(err){ console.log(err);});//传递一个promise对象var p1 = Promise.resolve(520);var p2 = Promise.resolve(p1);p2.then(function(val){ //从p1那边传递过来的 console.log(val); // 520});]]></content>
<categories>
<category>JS</category>
</categories>
<tags>
<tag>JS</tag>
</tags>
</entry>
<entry>
<title><![CDATA[JS中数据格式的转化]]></title>
<url>%2F2018%2F04%2F14%2F%E6%95%B0%E6%8D%AE%E7%9A%84%E8%BD%AC%E5%8C%96%2F</url>
<content type="text"><![CDATA[JSON 转 数组格式栗子:{"count":"4126","yuzhi":"4109","donhuan":"2","syslog":"15","device":"0"} 12345var result = [];for (var i in json) { result.push(json[i])}// ["4126", "4109", "2", "15", "0"] 12const list = Object.keys(json).map((item, index) => ({key: item, value:json[item]}))// [{},{},{}]]]></content>
<categories>
<category>JS</category>
</categories>
<tags>
<tag>JS</tag>
</tags>
</entry>
<entry>
<title><![CDATA[JS中数组的常用方法(包含es6扩展)]]></title>
<url>%2F2018%2F03%2F14%2FjsArr%2F</url>
<content type="text"><![CDATA[JS中数组的常用方法(包含es6扩展 1、join()1234功能：将数组中所有元素都转化为字符串并连接在一起。输入： 分隔符，默认为逗号输出：分隔符分割的字符串举例： 123var a = [1,2,3];a.join(); // =>"1,2,3"a.join(";");// =>"1;2;3" 2、 reverse()1234功能：将数组中的元素颠倒顺序。输入：无输出：逆序的数组举例： 12var a = [1,2,3];a.reverse.join()// =>"3,2,1" 3、sort() 12345功能：将数组中的元素 输入：比较函数或null。null时表示按照字母表顺序排序；传入带两个参数的比较函数时；第一个参数在前，则返回小于0的数值；第一个参数在后，则返回大于0的数组 输出：排序后数组 注意：改变了原数组 举例： 123456var a = [22,33,11111,4444];a.sort();// =>11111,22,33,4444a.sort(function(a,b){ return a-b;});// => 22,33,4444,11111a.sort(function(a,b){return b-a})// =>11111,4444,33,22 4、concat() 12345功能：数组拼接的功能 输入：待拼接的元素；如果参数中有数组，则连接的是数组元素，而非数组本身；但是不支持递归，不修改调用的数组。 输出：拼接后的新数组 注意：新建的数组，原数组不改变。 举例： 1234var a = [1,2,3];a.concat(4,5) // =>[1,2,3,4,5]a.concat([4,5]) // =>[1,2,3,4,5]a.concat(4,[5,[6,7]]) //[1,2,3,4,5,[6,7]] 5、slice() 12345功能：获取原数组的片段或子数组 输入：片段的开始和结束 输出：返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有元素。如果为负数，表示相对于数组中最后一个元素的位置。 注意：新建的数组，原数组不改变。 举例： 1234var a = [1,2,3,4,5];a.slice(0,3);// =>[1,2,3]a.slice(3);// =>[4,5]a.slice(1,-1)// =>[2,3,4] 6、splice() 12345功能：从数组中删除元素、插入元素到数组中或者同事完成这两种操作。 输入：第一个参数为指定插入或删除的起始位置，第二个参数为要删除的个数。之后的参数表示需要插入到数组中的元素 输出：返回一个由删除元素组成的数组。 注意：新建了一个数组，并修改了原数组 举例： 123var a = [1,2,3,4,5,6,7,8];a.splice(4) // =>[5,6,7,8];a [1,2,3,4]a.splice(2,0,'a','b') // =>[];a [1,2,a,b,3,4] 7、push()和pop() 1234功能：push从数组尾部添加一个或多个元素，并返回数组新的长度；pop返回最后一个元素 输入：push输入为插入的元素；pop输入为空 输出：push为新长度；pop为返回的数组元素 举例： 123var stack = [];stack.push(1,2);// =>stack:[1,2],返回2stack.pop;// => stack: [1],返回2 8、unshift()和shift 功能：类似push和pop，不同是从头部插入和删除，而非尾部 9、toString()和toLocaleString() 1234功能：将数组的每个元素转化为字符串，并且输入用逗号分隔的字符串列表。功能类似join(); 输入：无 输出：字符串 举例： 1[1,2,3].toString() // =>'1,2,3' ###以下为es6中新增的9个方法 10、forEach() 1234功能：从头至尾遍历数组，为每个元素调用指定函数 输入：输入为一个待遍历函数，函数的参数依次为：数组元素、元素的索引、数组本身 输出：只是执行了遍历函数，无特定返回 举例： 123var data = [1,2,3,4,5];data.forEach(function(v,i,a){a[i] = v + 1;});data // =>[2,3,4,5,6] 11、map() 12345功能：调用的数组的每一个元素传递给指定的函数，并返回一个新数组 输入：和forEach一样 输出：执行完函数的新数组 注意：返回新数组，不修改原数组 举例： 12a = [1,2,3];b = a.map(function(x){return x*x;}); // =>[1,4,9] 12、filter() 1234功能：将数组元素执行特定函数，而返回一个子集。 输入：执行逻辑判断的函数，该函数返回true或false，参数类似forEach和map() 输出：如果执行输入函数返回值为true，则传递给判定函数的元素是这个子集的成员 举例： 12a = [5,4,3,2,1];smallvalues = a.filter(function(x){return x<3});// =>[2,1] 13、every()和some() 1234功能：对数组元素进行指定函数的逻辑判断。 输入：特定函数 输出：true 或者false 举例： 12var a = [1,2,3,4,5];a.every(function(x){return x<10;}) // =>true 14、reduce()和reduceRight() 123功能：使用指定的函数将数组元素进行组合，生成单个值。 输入：两个参数，第一个是执行化简操作的函数。第二个（可选）的参数是一个传递给函数的初始值。 注意：执行化简的函数的第一个参数为目前为止化简操作累积的结果。 15、indexOf()和lastIndexOf() 123功能：搜索整个数组中具有给定值得元素，返回找到的第一个元素的索引或者如果没有找到就返回-1.lastIndexOf为反向搜索。 输入：元素的值。 输入：索引值 es6扩展16、Array.from() 1234功能：将两类对象转为真正的数组：类似数组的对象和可遍历的对象 输入：待转换的对象，第二个参数可选，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。 输入：数组 举例： 1234567let arrayLike = { '0':'a', '1':'b', '2':'c', length:3};let arr2 = Array.from(arrayLike);// =>['a','b','c'] 17、Array.of() 1234功能：将一组值，转换为数组。 输入：数组元素 输出：数组 举例： 12Array.of(2,11,3)// =>[2,11,3]Array.of(3)// =>[3] 18、copyWithin() 12345功能：在当前数组内部，将指定位置的成员复制到其他位置，返回当前数组。 输入：第一个参数（从该位置开始替换数据）；第二个参数可选（从该位置开始读取数据，默认为0，负值表示倒数）；第三个参数（到该位置前停止读取，默认为数组长度） 输出：返回当前替换后的数组。 注意：改变了当前数组 举例： 1[1, 2, 3, 4, 5].copyWithin(0, 3) //=> [4, 5, 3, 4, 5] 19、find()和findIndex() 1234功能：找到第一个符合条件的数组成员。 输入：回调函数，所有数组成员依次执行该函数，直到找到第一个返回值为true的成员。回调函数可以接受三个参数，依次为值，位置，原数组。 输出：find()返回找到的成员；findIndex()返回成员的位置。 举例： 123[1,5,10,15].find(function(value,index,arr){ return value > 9;})// =>10 20、fill() 1234功能：使用给定的值，填充一个数组。 输入：第一个参数为待填充的值，第二和第三参数可选，分别表示填充的起始和结束位置(不包括)。 输出：填充后的数组 举例： 12['a', 'b', 'c'].fill(7, 1, 2)// =>['a', 7, 'c'] 21、entries()、keys()、values() 1234功能：用于遍历数组，可以用for…of循环进行遍历。区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历。 输入：无 输出：遍历器对象 举例： 1234567891011121314151617for (let index of ['a', 'b'].keys()) { console.log(index);}// =>0// =>1for (let elem of ['a', 'b'].values()) { console.log(elem);}// =>'a'// =>'b'for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem);}// =>0 "a"// =>1 "b" 22、includes() 12345功能：表示某个数组是否包含给定的值 输入：第一个参数必选（待检查的给定值），第二个参数可选，表示搜索的起始位置，默认为0，负数表示倒数的位置。 输出：一个布尔值。 注意：和indexOf的区别，indexOf进行了运算符的强比对，会导致对NaN误判。 举例 123[1, 2, 3].includes(2); // true[1, 2, 3].includes(4); // false[1, 2, NaN].includes(NaN); // true 数组排序1.JavaScript的sort()方法123456var array = [1,4,-8,-3,6,12,9,8];function compare(val1,val2){ return val1-val2;};array.sort(compare);document.write(array); sort()方法按照升序排列数组项，会调用每个数组项的toString()转型方法，然后比较得到的字符串。 toString()方法是把布尔值或BooleanObject转换为字符串，并返回结果。 compare()函数方法是一个比较函数，作为sort()方法的参数。 2. 冒泡排序（从后向前）123456789101112131415var array = [1,4,-8,-3,6,12,9,8];function sort(arr){ for(var j=0;j<arr.length-1;j++){ //两两比较，如果前一个比后一个大，则交换位置。 for(var i=0;i<arr.length-1-j;i++){ if(arr[i]>arr[i+1]){ var temp = arr[i]; arr[i] = arr[i+1]; arr[i+1] = temp; } } }}sort(array);document.write(array); （1）比较相邻的元素。如果第一个比第二个大，就交换他们两个位置。 （2）对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。 （3）针对所有的元素重复以上的步骤，除了最后一个。 （4）持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。 3. 快速排序：递归思想，两边快速的排序，冒泡排序的改进123456789101112131415161718192021222324var array = [1,4,-8,-3,6,12,9,8];function quickSort(arr){//如果数组长度小于等于1，则返回数组本身 if(arr.length<=1){ return arr; } //定义中间值的索引 var index = Math.floor(arr.length/2); //取到中间值 var temp = arr.splice(index,1); //定义左右部分数组 var left = []; var right = []; for(var i=0;i<arr.length;i++){ //如果元素比中间值小，那么放在左边，否则放右边 if(arr[i]<temp){ left.push(arr[i]); }else{ right.push(arr[i]); } } return quickSort(left).concat(temp,quickSort(right));}document.write(quickSort(array)); Math.floor(x)方法是向下取整，返回小于或等于x的最接近的整数。 splice(index,num,item)方法是向数组中添加项目，或是从数组中删除项目，并返回被删除的项目。 index是整数，被操作项目所在的位置（必须） num是整数，要删除的项目的数量，如果为0，表示不删除（必须） item是向数组中添加的新项目，可以是多个（可选） push()方法是向数组末尾添加一个或多个新项目并返回新数组的长度 concat()方法连接两个或多个数组，不会改变原有数组，返回一个新数组 4. 插入排序12345678910111213141516171819202122var array = [1,4,-8,-3,6,12,9,8];function insertSort(arr){//假设第0元素是有序序列，第1元素之后是无序的序列。从第1元素开始依次将无序序列的元素插入到有序序列中 for(var i=1; i<arr.length;i++){ if(arr[i]<arr[i-1]){ //取出无序序列中需要插入的第i个元素 var temp = arr[i]; //定义有序中的最后一个位置 var j = i-1; arr[i] = arr[j]; //比较大小，找到插入的位置 while(j>=0&&temp<arr[j]){ arr[j+1] = arr[j]; j--; }; //插入 arr[j+1] = temp; } } }insertSort(array)document.write(array); （1）从第一个元素开始，该元素可以认为已经被排序（2）取出下一个元素，在已经排序的元素序列中扫描（3）如果该元素（已排序）大于新元素，将该元素移到下一位置（4）重复步骤3，直到找到已排序的元素小于或者等于新元素的位置（5）将新元素插入到下一位置中（6）重复步骤2 数组去重12let arr = [1,2,3,3];let unique = [...new Set(arr)];]]></content>
<categories>
<category>JS</category>
</categories>
<tags>
<tag>JS</tag>
</tags>
</entry>
<entry>
<title><![CDATA[正则表达式和字符操作]]></title>
<url>%2F2018%2F03%2F14%2FregExp%2F</url>
<content type="text"><![CDATA[用得到的一些实例 获取最后一个/xx.123456789var reg = /.*\/([^\.\/]+)/g;var url = "sdfsdfsdfsdfsdfsdfsdfsdf/123.jpg";console.log(str.replace(reg,"$1"))// 123.var str = "/asdasf/asfaewf/agaegr/trer/rhh";var index = str .lastIndexOf("\/"); str = str .substring(index + 1, str .length);// rhh 12345var blueurl= 127.0.0.1/1.txtvar reg = /([/][^/]+)$/;var blueurl = blueurl.replace(reg, "");var reg2 = /([^/]+)$/; var bluef charAt 返回指定位置的字符。12var get_char = a.charAt(0);//get_char = "h" substring 返回字符串的一个子串，传入参数是起始位置和结束位置。1234var sub_string1 = a.substring(1);//sub_string1 = "ello"var sub_string2 = a.substring(1,4);//sub_string2 = "ell" substr 返回字符串的一个子串，传入参数是起始位置和长度 1234var sub_string1 = a.substr(1);//sub_string1 = "ello"var sub_string2 = a.substr(1,4);//sub_string2 = "ello" slice 提取字符串的一部分，并返回一个新字符串（与 substring 相同）。1234var sub_string1 = a.slice(1);//sub_string1 = "ello"var sub_string2 = a.slice(1,4);//sub_string2 = "ell" toLowerCase 将整个字符串转成小写字母。12var lower_string = a.toLowerCase();//lower_string = "hello" toUpperCase 将整个字符串转成大写字母。12var upper_string = a.toUpperCase();//upper_string = "HELLO" es6中的方法repeat方法返回一个新字符串，表示将原字符串重复n次。123'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello"'na'.repeat(0) // ""]]></content>
<categories>
<category>JS</category>
</categories>
<tags>
<tag>JS</tag>
</tags>
</entry>
<entry>
<title><![CDATA[echart的相关设置]]></title>
<url>%2F2018%2F02%2F28%2FechartSetting%2F</url>
<content type="text"><![CDATA[整理一些能用到的echart设置 加入loading效果 12345678var myChart = echarts.init(document.getElementById('wsdBody'));myChart.showLoading('default', {text:'统计中，请稍候...',maskColor: '#404a59',textColor: '#fff',}); // hide setTimeout(function() { myChart.hideLoading(); myChart.setOption(option); },500) echart图表重新绘制 123456789101112131415161718192021222324252627// 1.myChart.setOption(option,true);//true重绘// 2.//walden为echarts主题，_.flatten为underscore.js提供的数组扁平化方法var myChart = echarts.init(document.getElementById('main'), 'walden');//封装_ajax方法，每次切换时发起get请求，获取相应的json文件，请求成功后渲染echartsfunction _ajax(url) { $.ajax({ type: 'get', url: url, success: function(res) { option = { xAxis: { data: res.series }, yAxis: {}, series: [{ name: '销量', type: 'line', data: _.flatten(res.rows[0].values) }] }; myChart.setOption(option); } });}]]></content>
<categories>
<category>JS</category>
</categories>
<tags>
<tag>echart</tag>
</tags>
</entry>
<entry>
<title><![CDATA[js date函数集合]]></title>
<url>%2F2018%2F02%2F24%2Fdate%2F</url>
<content type="text"><![CDATA[整理一些能用到的时间函数 获取当前时间123456789function getdate() { var now = new Date(), y = now.getFullYear(), m = now.getMonth() + 1, d = now.getDate(); return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);}// 2018-02-27 10:50:49 获取日期 YY-MM-dd1234567891011121314151617function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var year = date.getFullYear(); var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } var currentdate = year + seperator1 + month + seperator1 + strDate; $('#end_time').val(currentdate); $('#start_time').val(beforedate)}getNowFormatDate(); 获取时间-日期1234567891011121314151617181920212223242526272829303132333435function showTime(){ var date = new Date(); var year = date.getFullYear(); var mouths = date.getMonth()+1; if (mouths < 10) { mouths = '0' + mouths; } var day = date.getDate(); if (day < 10) { day = '0' + day; } var hours = date.getHours(); if (hours < 10) { hours = '0' + hours; } var minutes = date.getMinutes(); if (minutes < 10) { minutes = '0' + minutes; } var seconds = date.getSeconds(); if (seconds < 10) { seconds = '0' + seconds; } var weekDay = new Array(7); weekDay[0] = "星期日"; weekDay[1] = "星期一"; weekDay[2] = "星期二"; weekDay[3] = "星期三"; weekDay[4] = "星期四"; weekDay[5] = "星期五"; weekDay[6] = "星期六"; document.getElementById("newTime").innerHTML=year+"年"+mouths+"月"+day+"日"+hours+":"+minutes+":"+seconds+" "+weekDay[date.getDay()];}setInterval("showTime();",1000); JS 求时间差var date1=new Date(); //开始时间alert(“aa”);var date2=new Date(); //结束时间var date3=date2.getTime()-date1.getTime() //时间差的毫秒数 //计算出相差天数var days=Math.floor(date3/(2436001000)) //计算出小时数 var leave1=date3%(2436001000) //计算天数后剩余的毫秒数var hours=Math.floor(leave1/(36001000))//计算相差分钟数var leave2=leave1%(36001000) //计算小时数后剩余的毫秒数var minutes=Math.floor(leave2/(60*1000)) //计算相差秒数var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数var seconds=Math.round(leave3/1000) alert(“ 相差 “+days+”天 “+hours+”小时 “+minutes+” 分钟”+seconds+” 秒”)]]></content>
<categories>
<category>JS</category>
</categories>
<tags>
<tag>JS</tag>
</tags>
</entry>
<entry>
<title><![CDATA[markedown 语法简介]]></title>
<url>%2F2018%2F01%2F24%2Fmarkdown%2F</url>
<content type="text">< 找问题 ` [参考链接](http://www.baidu.com/ "百度") 找问题`### 强调Markdown 使用星号（*）和底线（_）作为标记强调字词的符号，被 * 或 _ 包围的字词会被转成用 <em> 标签包围，用两个 * 或 _ 包起来的话，则会被转成 <strong>，例如： single asterisks single underscores double asterisks double underscores 12345678910111213 *single asterisks* _single underscores_ **double asterisks** __double underscores__### 图片图片的语法和链接很像。行内形式(title 是选择性的): 12345678910### 链接More info: [Deployment](https://hexo.io/docs/deployment.html)参考形式：![alt text][id][id]: https://img-blog.csdn.net/20161222085404804 "Title"上面两种方法都会输出 HTML 为： ` 其他 分割线 ***]]></content>
<categories>
<category>blog</category>
</categories>
<tags>
<tag>博客</tag>
</tags>
</entry>
<entry>
<title><![CDATA[markedown 语法简介]]></title>
<url>%2F2018%2F01%2F24%2F%E6%96%87%E6%9C%AC%2F</url>
<content type="text"><![CDATA[css的使用 文本溢出td1234567891011table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/ } 单行12345678910overflow: hidden;text-overflow:ellipsis;white-space: nowrap;// 多行display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden; 适用于WebKit浏览器及移动端1234567p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);}]]></content>
<categories>
<category>css</category>
</categories>
<tags>
<tag>css</tag>
</tags>
</entry>
<entry>
<title><![CDATA[vuex的基本使用]]></title>
<url>%2F2017%2F08%2F24%2FVuex%2F</url>
<content type="text"><![CDATA[举个栗子123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> </head> <body> <div class="app"> <div>我现在有{{nowcount}}条数</div> <button @click="add">add</button> <button @click="reduce">reduce</button> </div> </body> <script> const store = new Vuex.Store({ state: { count: 0, }, mutations: { add(state, count) { state.count += count; }, REDUCE(state, count) { state.count += count } }, actions: { reduce(context, count) { context.commit('REDUCE', count) }, add(context, count) { context.commit('add',count) } } }) var app = new Vue({ el: '.app', store: store, data() { }, computed: { nowcount() { return this.$store.state.count } }, methods: { add() { // this.$store.commit('add', 5) this.$store.dispatch('add',5) }, reduce() { this.$store.dispatch('reduce', -5) } } }) </script></html> 通过computed的计算属性直接赋值computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。 12345computed: { nowcount() { return this.$store.state.count }}, 通过mapState的对象来赋值1computed:mapState(["count"]) 通过mutations修改状态（$store.commit( )）1234add() { // this.$store.commit('add', 5) this.$store.dispatch('add',5)}, 通过脚手架获取Mutations方法12345678import { mapState,mapMutations } from 'vuex' methods: { ...mapMutations({ add, reduce: 'REDUCE' }) } 通过actions异步修改状态actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。 在store.js中声明actions123456reduce(context, count) { context.commit('REDUCE', count)},add({commit}, count) { commit('add',count)} 在actions里写了两个方法addAction和reduceAction，在方法体里，我们都用commit调用了Mutations里边的方法。 context：上下文对象，这里你可以理解称store本身。 {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。 在脚手架中的使用12345678import {mapActions} form 'mapActions'methods:{ ...mapMutations([ 'add','reduce' ]), ...mapActions(['add','reduce'])},]]></content>
<categories>
<category>Vue</category>
</categories>
<tags>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title><![CDATA[vue-router 的相关]]></title>
<url>%2F2017%2F08%2F24%2Fvue-router%2F</url>
<content type="text"><![CDATA[$route 和 $router的区别？ $router 是router（路由）实例；$route 是一个对象，可以访问path，name等属性。还有就是route object 是只读的，不可变的，所以我们不能更改其中的值。 $route.params 和 $roue.query 的区别？1234567891011// 1.显示的方式不一样// $route.params url显示 /user/123 // $route.query url显示 /user/id=123 // 在router-link中显示形态<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link><router-link :to={name:'a', params:{id:123}}></router-link>// 如果使用 params 就不能写 path 路径（写了也访问不到），可以配置name来匹配路径 路由懒加载112345678910111213141516//懒加载路由 const routes = [ { //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面 path:'/', //重定向，就是给它重新指定一个方向，加载一个组件； component:resolve => require(['@/components/First'],resolve) }, { path:'/first', component:resolve => require(['@/components/First'],resolve) }, { path:'/second', component: resolve => require(['@/components/Second'],resolve) } //这里require组件路径根据自己的配置引入 ] 21234567891011121314151617181920import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const Recommend = (resolve) => { import('components/recommend/recommend').then((module) => { resolve(module) })}export default new Router({ routes: [ { path: '/', redirect: '/recommend' }, { path: '/recommend }] })]]></content>
<categories>
<category>Vue</category>
</categories>
<tags>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title><![CDATA[vue生命周期]]></title>
<url>%2F2017%2F08%2F24%2Fvue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%2F</url>
<content type="text"><![CDATA[Vue2.0 探索之路——生命周期和钩子函数的一些理解 生命周期钩子 详细 beforeCreate 在实例初始化之后，数据观测(data observer)和event/watcher 事件配置之前被调用。 created 实例已经创建完成之后被调用在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 activated keep-alive 组件激活时调用。 deactivated keep-alive 组件停用时调用。 beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 测试过程 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./vue.js"></script></head><body><div id="app"> <p>{{message}}</p> <keep-alive> <my-components msg="hello" v-if="show"></my-components> </keep-alive></div></body><script> var child = { template: '<div>from child: {{msg}}</div>', props: ['msg'], data: function () { return { childMsg: 'child' }; }, deactivated: function () { console.log('component deactivated!'); }, activated: function () { console.log('component activated'); } }; var app = new Vue({ el: '#app', data: function () { return { message: 'father', show: true }; }, beforeCreate: function () { console.group('beforeCreate 创建前状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(state); }, created: function () { console.group('created 创建完毕状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(state); }, beforeMount: function () { console.group('beforeMount 挂载前状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, mounted: function () { console.group('mounted 挂载结束状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); // this.message = 'change'; }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); // this.message = 'change2'; }, updated: function () { console.group('updated 更新完成状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, components: { 'my-components': child } });</script></html> ###create 和 mounted 相关 1234beforecreated：el 和 data 并未初始化 created:完成了 data 数据的初始化，el没有beforeMount：完成了 el 和 data 初始化 mounted ：完成挂载 应用1234beforecreate : 举个栗子：可以在这加个loading事件 created ：在这结束loading，还做一些初始化，实现函数自执行 mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容 在created钩子中可以对data数据进行操作，这个时候可以进行ajax请求将返回的数据赋给data 在mounted钩子对挂载的dom进行操作 在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。]]></content>
<categories>
<category>Vue</category>
</categories>
<tags>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title><![CDATA[原生JS的基本操作]]></title>
<url>%2F2017%2F04%2F17%2F%E5%8E%9F%E7%94%9FJS%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C%2F</url>
<content type="text"><![CDATA[原生JS的基本操作 创建和获取元素创建123456var para=document.createElement("p");var node=document.createTextNode("这是一个新段落。");需要被复制的节点.cloneNode(true/false)true复制当前节点极其所以子节点，false仅复制当前节点 获取元素与节点元素 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClassName） 获取html的方法（document.documentElement） 获取body的方法（document.body） 通过选择器获取一个元素（querySelector） 通过选择器获取一组元素（querySelectorAll） 节点父节点 parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null 兄弟关系型 previousSibling ：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下 previousElementSibling ：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持 nextSibling ：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下 nextElementSibling ：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持 子节点 childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等 children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持； firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild 节点修改123456parent.appendChild(child); //它会将child追加到parent的子节点的最后面parentNode.insertBefore(newNode, refNode); //将某个节点插入到另外一个节点的前面parent.removeChild(node); //用于删除指定的子节点并返回子节点parent.replaceChild(newChild, oldChild); //用于将一个节点替换另一个节点 获取元素的属性，设置元素的属性，删除123设置属性 .setAttribute("属性","值")获取属性 .getAttribute("属性")删除属性 .removeAttribute("属性") 获取元素尺寸123456789101112131415网页可见区域宽： document.documentElement.clientWidth;网页可见区域高： document.documentElement.clientHeight; 网页正文全文宽： document.documentElement.scrollWidth;网页正文全文高： document.documentElement.scrollHeight;网页被卷去的高(ff)：document.body.scrollTop; 网页被卷去的高(ie): document.documentElement.scrollTop; 网页被卷去的左：document.body.scrollLeft; 网页正文部分上：window.screenTop; 网页正文部分左：window.screenLeft; 某个元素的宽度：obj.offsetWidth;某个元素的高度：obj.offsetHeight;某个元素的上边界到body最顶部的距离：obj.offsetTop;（在元素的包含元素不含滚动条的情况下）某个元素的左边界到body最左边的距离：obj.offsetLeft;（在元素的包含元素不含滚动条的情况下）返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offsetTop（在元素的包含元素含滚动条的情况下）返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offsetLeft（在元素的包含元素含滚动条的情况下）]]></content>
<categories>
<category>JS</category>
</categories>
<tags>
<tag>JS</tag>
</tags>
</entry>
<entry>
<title><![CDATA[关于点击空白关闭弹窗的js写法推荐]]></title>
<url>%2F2017%2F03%2F14%2FclickCancel%2F</url>
<content type="text"><![CDATA[关于点击空白关闭弹窗的js写法推荐123456789101112131415161718192021222324// menuvar open_menu = true;$("#arrow-right").on("click", function(e){ if (open_menu) { $("#left_nav").show(); $('#logo-img').addClass('open') open_menu = false $(document).one("click", function(){ $("#left_nav").hide(); $('#logo-img').removeClass('open') open_menu = true }); e.stopPropagation(); } else { $("#left_nav").hide(); $('#logo-img').removeClass('open') open_menu = true }});$("#left_nav").on("click", function(e){ $('#logo-img').removeClass('open') e.stopPropagation();});]]></content>
<categories>
<category>JS</category>
</categories>
<tags>
<tag>JS</tag>
</tags>
</entry>
</search>