-
Notifications
You must be signed in to change notification settings - Fork 2
/
Handwritten.html
13873 lines (12483 loc) · 432 KB
/
Handwritten.html
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
overflow: hidden;
}
.middle,
.left,
.right {
float: left;
height: 100px;
}
.left {
width: 100px;
background: red;
margin-left: -100%;
}
.right {
width: 100px;
background: blue;
margin-left: -100px;
}
.middle {
width: 100%;
background: aqua;
}
.inner {
margin: 0 100px;
}
img {
background: #F1F1FA;
width: 400px;
height: 300px;
display: block;
margin: 10px auto;
border: 0;
}
</style>
<body>
<!-- 圣杯布局 -->
<div class="container">
<div class="middle">
<div class="inner">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<!-- 手写图片的懒加载 -->
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300" />
<img class="lazy" data-src="https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300" />
<script>
//手写图片懒加载
//图片出现在视窗内的情况: offsetTop < clientHeight + scrollTop
//element.getBoundingClientRect().top < clientHeight
// h5的IntersectionObserver方式
// intersectionRatio:目标元素的可见比例,即 intersectionRect 占 boundingClientRect 的比例,完全可见时为 1 ,完全不可见时小于等于 0
// function lazyload() {
// let imgs = document.querySelectorAll("img.lazy") //伪数组
// let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// for (let i = 0; i < imgs.length; i++) {
// if (imgs[i].offsetTop < clientHeight + scrollTop) {
// imgs[i].setAttribute('src', imgs[i].dataset.src)
// }
// }
// }
// document.addEventListener("scroll", lazyload);
// window.addEventListener("resize", lazyload);
// window.addEventListener("orientationChange", lazyload);
// function lazyload() {
// let imgs = document.querySelectorAll("img.lazy") //伪数组
// let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
// // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// for (let i = 0; i < imgs.length; i++) {
// // console.log(i,imgs[i].getBoundingClientRect().top)
// if (imgs[i].getBoundingClientRect().top < clientHeight) {
// imgs[i].setAttribute('src', imgs[i].dataset.src)
// }
// }
// }
// document.addEventListener("scroll", lazyload);
// window.addEventListener("resize", lazyload);
// window.addEventListener("orientationChange", lazyload);
function lazyload() {
let imgs = document.querySelectorAll("img.lazy") //伪数组
let io = new IntersectionObserver(function (changes) {
// console.log(changes,'IntersectionObserver')
changes.forEach(function (change) {
if (change.intersectionRatio > 0) {
let img = change.target;
img.src = img.dataset.src;
io.unobserve(img);
}
})
})
for (let i = 0; i < imgs.length; i++) {
io.observe(imgs[i])
}
}
//优点:不需要绑定window事件 自带防抖 可以反向懒加载 缺点:兼容性
lazyload()
//手写call,apply,bind
Function.prototype.myCall = function () {
let obj = Array.from(arguments)[0]
let args = Array.from(arguments).slice(1)
let symbol = new Symbol()
if (obj === undefined || obj === null) {
obj = window
} else {
obj[symbol] = this
}
let result = obj[symbol](...arg)
delete obj[symbol]
return result
}
Function.prototype.myApply = function () {
let obj = Array.from(arguments)[0]
let args = Array.from(arguments).slice(1)
let symbol = new Symbol()
if (obj === undefined || obj === null) {
obj = window
} else {
obj[symbol] = this
}
let result = obj[symbol](args)
delete obj[symbol]
return result
}
Function.prototype.myBind = function () {
let obj = Array.from(arguments)[0]
let args = Array.from(arguments).slice(1)
if (obj === null || obj === undefined) {
obj = window
}
let self = this
return function () {
let newArgs = Array.from(arguments)
self.apply(obj, args.concat(newArgs))
}
}
//promise封装ajax
function Ajax(url, method, data) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest() || window.ActiveXObject
xhr.open(method, url)
xhr.send(data)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(xhr.responseText)
} else {
reject(xhr.status)
}
}
})
}
//图片的异步加载
function loadImageAsync(url) {
return new Promise(function (resolve, reject) {
let image = new Image()
image.src = src
image.onload = function () {
resolve(image)
}
image.onerror = function () {
reject(new Error('此路径' + url + '的图片加载失败'))
}
})
}
//防抖
//定时器版
function debounce(fn, delay) {
let timer
return function () {
clearTimeout(timer)
timer = setInterval(() => {
fn.apply(this, arguments)
}, delay);
}
}
//时间戳版
function debounce(fn, delay) {
let time = 0
return function () {
time = Date.now()
if (Date.now() - time > delay) {
fn.apply(this, arguments)
}
}
}
// 最后我们再思考一个小需求,
// 我希望能取消 debounce 函数, 比如说我 debounce 的时间间隔是 10 秒钟, immediate 为 true,
// 这样的话, 我只有等 10 秒后才能重新触发事件,
// 现在我希望有一个按钮, 点击后, 取消防抖, 这样我再去触发, 就可以又立刻执行啦, 是不是很开心?
// 为了这个需求, 我们写最后一版的代码:
// 防抖终极版
function debounce(func, wait, immediate) {
var timeout, result;
var debounced = function () {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
// 如果已经执行过,不再执行
var callNow = !timeout;
timeout = setTimeout(function () {
timeout = null;
}, wait)
if (callNow) result = func.apply(context, args)
} else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
return result;
};
debounced.cancel = function () {
clearTimeout(timeout);
timeout = null;
};
return debounced;
}
//节流
function throttle(fn, delay) {
let canRun = true
return function () {
if (!canRun) return
canRun = false
setTimeout(() => {
fn.apply(this, arguments)
canRun = true
}, delay);
}
}
//原型链继承
function SupType(val) {
this.name = {
name: val,
sex: '男'
}
}
function SubType() {
this.sex = '女'
}
SubType.prototype = new SupType()
// console.log(new SubType().name.name='徐娟') 原型链继承的缺点 引用类型会被不同的实例共享 不能向父类中传参数
// console.log(new SubType().name)
//call实现继承
function Animal(name) {
this.name = name
}
function Cat() {
this.sex = '老鼠'
Animal.call(this, '大象')
}
// console.log(new Cat().name) 优点: 可以向超类中传递参数 解决了原型中的引用类型被所有实例共享的问题
//缺点:在超类的原型中的方法对子类来说是不可见的 方法都放在构造函数中复用无从谈起
//组合继承
function SuperType() {
this.name = 'zc'
this.colors = ['pink', 'blue', 'green'];
}
function SubType() {
SuperType.call(this)
}
SubType.prototype = new SuperType()
SubType.prototype.constructor = SubType
let a = new SubType()
let b = new SubType()
//用原型链实现对原型属性和方法的继承,
//通过借用构造函数来实现对实例属性的继承,
//既通过在原型上定义方法来实现了函数复用,又保证了每个实例都有自己的属性。
//无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。
//原型式集成
function object(o) {
function F() { }
F.prototype = o
return new F()
}
//ECMAScript5通过新增 Object.create()方法规范了原型式继承。
//这个方法接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象(可以覆盖原型对象上的同名属性),
//在传入一个参数的情况下,Object.create() 和 object() 方法的行为相同。
//寄生式集成
function object(o) {
function F() { }
F.prototype = o
return new F()
}
function createAnother(original) {
let clone = object(original)
clone.sayHi = function () { }
return clone
}
//基于 person 返回了一个新对象 -—— person2,
//新对象不仅具有 person 的所有属性和方法,而且还有自己的 sayHi() 方法。
//在考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式。
//使用寄生式继承来为对象添加函数,会由于不能做到函数复用而效率低下。
//同原型链实现继承一样,包含引用类型值的属性会被所有实例共享。
//寄生组合式集成
function inheritPrototype(subType, superType) {
var prototype = object(superType.prototype); //创建对象
prototype.constructor = subType; //增强对象
subType.prototype = prototype; //指定对象
}
function SuperType(name) {
this.name = name;
this.colors = ['pink', 'blue', 'green'];
}
function subType(name, age) {
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(subType, SuperType);
//手写new
function _new(fn, ...args) {
let obj = {}
fn.apply(obj, args)
fn.prototype.constructor = fn
obj._proto_ = fn.prototype
return obj
}
fn = function (val) {
this.name = '付光雄'
this.sex = '男'
this.eat = val
}
// console.log(_new(fn,'大便'))
//手写用递归实现一个深拷贝
function checkedType(target) {
return Object.prototype.toString.call(target).slice(8, -1)
}
function clone(target) {
let targetType = checkedType(target)
let result
if (targetType === 'Array') {
result = []
} else if (targetType === 'Object') {
result = {}
} else {
return target
}
for (const key in target) {
if (target.hasOwnProperty(key)) {
const element = target[key];
if (checkedType(element) === 'Array' || checkedType(element) === 'Object') {
result[key] = clone(element)
} else {
result[key] = element
}
}
}
return result
}
//手写一个柯里化
// function curry(fn, args) {
// var length = fn.length; // 函数参数的长度
// // 闭包保存参数列表
// args = args || [];
// return function () {
// // 获取参数列表。
// var _args = args.slice(0);
// Array.prototype.push.apply(_args, Array.prototype.slice.call(arguments))
// if (_args.length < length) {
// // 如果传入的参数列表长度还没有超过函数定义时的参数长度,就 push 新的参数到参数列表中保存起来。
// // 自己调用自己,将保存的参数传递到下一个柯里化函数。
// return curry.call(this, fn, _args);
// } else {
// // 如果传入的参数列表长度已经超过函数定义时的参数长度,就执行。
// return fn.apply(this, _args);
// }
// }
// }
function curry(fn, ...args) {
if (fn.length > args.length) {
return function () {
return curry.call(this, fn, ...args, ...arguments)
}
} else {
fn(...args)
//fn.call(this,...args)
}
}
const add = curry(function (a, b, c) {
// console.log([a, b, c].reduce((a, b) => a + b))
})
// add(1, 2, 3)
// add(1, 2)(3)
// add(1)(2)(3)
// add(1)(2, 3)
//手写一个双向绑定
let vm = {} //想象成vue的实例
let obj = { //想象成vue的data
name: 'zc',
age: '123'
}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
Object.defineProperty(vm, key, {
get: function () {
return obj[key]
},
set: function (val) {
obj[key] = val
}
})
}
}
obj.age = '30'
vm.age = '112221' //触发set
vm.age //触发get
//手写一个双向绑定这个proxy版本
let vm1 = new Proxy(obj, {
get: function (target, propKey, receiver) {
// console.log(target, propKey, receiver, '...............1')
// console.log(Reflect.get(target, propKey, receiver), '..............11') //112221
},
set: function (target, propKey, value, receiver) {
// console.log(target, propKey, value, receiver, '...............2')
// console.log(Reflect.set(target, propKey, value, receiver), '.............22') //true 它采用Reflect.set方法将值赋值给对象的属性,确保完成原有的行为,然后再部署额外的功能。
}
})
vm1.age
vm1.age = '30'
//观察者模式
// 目标者类
class Subject {
constructor() {
this.observers = []; // 观察者列表
}
// 添加
add(observer) {
this.observers.push(observer);
}
// 删除
remove(observer) {
let idx = this.observers.findIndex(item => item === observer);
idx > -1 && this.observers.splice(idx, 1);
}
// 通知
notify() {
for (let observer of this.observers) {
observer.update();
}
}
}
// 观察者类
class Observer {
constructor(name) {
this.name = name;
}
// 目标对象更新时触发的回调
update() {
// console.log(`目标者通知我更新了,我是:${this.name}`);
}
}
// 实例化目标者
let subject = new Subject();
// 实例化两个观察者
let obs1 = new Observer('前端开发者');
let obs2 = new Observer('后端开发者');
// 向目标者添加观察者
subject.add(obs1);
subject.add(obs2);
// 目标者通知更新
subject.notify();
// 输出:
// 目标者通知我更新了,我是前端开发者
// 目标者通知我更新了,我是后端开发者
//发布订阅者模式
class Pubsub {
list = []
// constructor(){
// this.list = {}
// }
subscribe(event, fn) { //订阅
if (!this.list[event]) {
this.list[event] = []
}
this.list[event].push(fn)
}
publish(event, args) { //发布
for (let fn of this.list[event]) {
// console.log(fn,this)
// fn.call(this, args)
fn(args)
}
}
unSubscribe(event) { //取消订阅
this.list[event].length = 0
}
}
let pubsub = new Pubsub()
pubsub.subscribe('oneat', function (a) {
// console.log(a)
})
pubsub.subscribe('oneat', function (a) {
// console.log(a)
})
pubsub.subscribe('oneat', function (a) {
// console.log(a)
})
pubsub.publish('oneat', '米饭')
//js获取路径参数
let test =
'?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=21331&rsv_pq=b8627e62001efbb9&rsv_t=eef5sqIQ98s66yOwueYH5BWlFUARj0PkHBdCA4ahbSVYQA5qO9MBoZPC0mU&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=5&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=509&rsv_sug4=509'
function f(str) {
let str1 = str.slice(1)
let arr = str1.split('&')
let map = new Map()
arr.map(item => {
const [key, value] = item.split('=')
map.set(key, decodeURIComponent(value))
})
return map //map可以用for of遍历 遍历出的每一项是数组
}
for (let item of f(test)) {
// console.log(item)
}
//冒泡排序最终优化版
function bubble(arr) {
for (let i = 0; i < arr.length; i++) {
let Change = false
for (let j = 0; j < arr.length - i; j++) {
if (arr[j] > arr[j + 1]) {
Change = true
arr[j] = arr[j] ^ arr[j + 1]
arr[j + 1] = arr[j] ^ arr[j + 1]
arr[j] = arr[j + 1] ^ arr[j]
}
}
if (!Change) {
return arr
}
}
}
// console.log(bubble([1, 5, 9, 7, 5, 3, 2, 4]))
//选择排序
function selectSort(arr) {
let minIndex, temp
for (let i = 0; i < arr.length; i++) {
minIndex = i //假设第一项是值最小的索引
for (let j = i; j < arr.length; j++) {
if (arr[j] < arr[minIndex]) {
minIndex = j
}
}
temp = arr[minIndex]
arr[minIndex] = arr[i]
arr[i] = temp
}
return arr
}
// console.log(selectSort([1, 5, 9, 7, 5, 3, 2, 4]))
//插入排序
function insertSort(arr) {
if (arr.length < 2) {
return arr
}
let temp, j
for (let i = 1; i < arr.length; i++) {
j = i
temp = arr[i]
// while (j > 0 && arr[j - 1] > temp) {
// arr[j] = arr[j - 1]
// j--
// }
for (let k = i - 1; k < i && k > -1; k--) {
if (temp < arr[k]) {
arr[k + 1] = arr[k]
arr[k] = temp
}
}
}
return arr
}
//希尔排序 (对插入排序的升级)
// function shellSort(arr) {
// let len = arr.length;
// // gap 即为增量
// for (let gap = Math.floor(len / 2); gap > 0; gap = Math.floor(gap / 2)) {
// for (let i = gap; i < len; i++) {
// let j = i;
// let current = arr[i];
// while (j - gap >= 0 && current < arr[j - gap]) {
// arr[j] = arr[j - gap];
// j = j - gap;
// }
// arr[j] = current;
// }
// }
// }
var shellSort = function () {
if (this.array === null || this.array.length < 2) return this.array
let length = this.array.length
//初始化增量
var gap = Math.floor(length / 2)
// whlie循环
while (gap > 1) {
for (let i = gap; i < length; i++) {
let temp = this.array[i]
let j = i
while (this.array[j - gap] > temp && j > gap - 1) {
this.array[j] = this.array[j - gap]
j -= gap
}
this.array[j] = temp
}
gap = Math.floor(gap / 2)
}
}
// console.log(insertSort([1, 5, 9, 7, 5, 3, 2, 4]))
//快速排序
// 我们都知道快排的时间复杂度是 O(nlogn) ,遇到最差的情况会退化成为 O(n ^ 2) ,但什么情况最差?
// 最差的情况:
// 数组已经是排好序的,并且你每次基准 pivot 选的是数组最左面或者是最右面
// 所有元素都相同
//方法一优化版(避免每趟都选中极值)
// 1. 快速排序如果选择的基准bai值为最小值的话,划du分的结果序列只有一个,皆位于基准值zhi的一侧(具体哪侧需要dao视序列的升序或降序情况而定)。但是其特征不变,即通过该趟排序基准值在最终序列的位置即被确定。
// 2. 快速排序若每趟排序选取的基准值都为数组中的最小值,则其排序效率会降到最低
// 3. 快速排序基准值的选定并非是一定的,可以采用随机选择,取中间位置、或加入其它算法进行选择,这些方式可以降低每趟皆选中极值的情况。
function quickSort(arr, left, right) { //这个left和right代表分区后“新数组”的区间下标,因为这里没有新开数组,所以需要left/right来确认新数组的位置
if (left < right) {
let pos = left - 1 //pos即“被置换的位置”,第一趟为-1
for (let i = left; i <= right; i++) { //循环遍历数组,置换元素
let pivot = arr[right] //选取数组最后一位作为基准数,
if (arr[i] <= pivot) { //若小于等于基准数,pos++,并置换元素, 这里使用小于等于而不是小于, 其实是为了避免因为重复数据而进入死循环
pos++
let temp = arr[pos]
arr[pos] = arr[i]
arr[i] = temp
}
}
//一趟排序完成后,pos位置即基准数的位置,以pos的位置分割数组
quickSort(arr, left, pos - 1)
quickSort(arr, pos + 1, right)
}
return arr //数组只包含1或0个元素时(即left>=right),递归终止
}
// //使用
// var arr = [5, 1, 4, 2, 3]
// var start = 0;
// var end = arr.length - 1;
// quickSort(arr, start, end)
//方法二普通版
// function quickSort(arr) {
// if (arr.length < 2) {
// return arr
// }
// let end = arr.length - 1
// let pivot = arr.splice(Math.floor(end / 2), 1)[0];
// // let base = arr[Math.floor(end / 2)]
// let leftArr = []
// let rightArr = []
// for (let i = 0; i < arr.length; i++) {
// if (arr[i] <= pivot) {
// leftArr.push(arr[i])
// } else {
// rightArr.push(arr[i])
// }
// }
// return quickSort(leftArr).concat([pivot], quickSort(rightArr))
// }
//方法三while版
// var arr = [3, 3, -5, 6, 0, 2, -1, -1, 3];
// console.log(arr);
// quick_sort(arr, 0, arr.length - 1);
// console.log(arr);
/**
题目:快速排序算法
思路:两个哨兵,i,j,j从右边找比基数小的,i从左边找比基数大的,然后交换两个目标元素的位置,直到i=j,然后交换i和基数的位置,递归处理。
**/
function quickSort(arr, from, to) {
var i = from; //哨兵i
var j = to; //哨兵j
var key = arr[from]; //标准值
if (from >= to) { //如果数组只有一个元素
return;
}
while (i < j) {
while (arr[j] > key && i < j) { //从右边向左找第一个比key小的数,找到或者两个哨兵相碰,跳出循环
j--;
}
while (arr[i] <= key && i <
j) { //从左边向右找第一个比key大的数,找到或者两个哨兵相碰,跳出循环,这里的=号保证在本轮循环结束前,key的位置不变,否则的话跳出循环,交换i和from的位置的时候,from位置的上元素有可能不是key
i++;
}
/**
代码执行道这里,1、两个哨兵到找到了目标值。2、j哨兵找到了目标值。3、两个哨兵都没找到(key是当前数组最小值)
**/
if (i < j) { //交换两个元素的位置
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
arr[from] = arr[i] //将基数与下标为 i 的元素原地交换,从而实现划分;
arr[i] = key;
quickSort(arr, from, i - 1);
quickSort(arr, i + 1, to);
}
// arr = [2, 1, 5, 8, 3, 7, 4, 6, 9];
// console.log(quickSort(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
//合并两个有序数组
function Merger(a, b) {
let len1 = a && a.length //a ?.length //链判断运算符
let len2 = b && b.length //b ?.length
let index1 = 0
let index2 = 0
let arr = []
while (index1 < len1 && index2 < len2) { //保证有一个有序数组已经遍历完
if (a[index1] > b[index2]) {
arr.push(b[index2++])
} else {
arr.push(a[index1++])
}
}
while (index1 < len1) {
arr.push(a[index1++])
}
while (index2 < len2) {
arr.push(b[index2++])
}
return arr
}
// console.log(Merger([2, 5, 9],[1,6,8,11])) 无序数组为什么不能用这个方法??
//归并排序
function mergeSort(arr = [1, 9, 7, 5, 6, 4, 9, 8, 1, 3]) {
if (arr.length === 1) {
return arr
}
let mid = Math.floor(arr.length / 2)
let left = arr.slice(0, mid)
let right = arr.slice(mid)
// return mergeSort(left).concat(mergeSort(right))
return Merger(mergeSort(left), mergeSort(right))
}
// console.log(mergeSort(),'归并排序')
//手写迭代器
var it = makeIterator(["a", "b"]);
function makeIterator(arr) {
nowIndex = 0
return {
next: function () {
if (nowIndex < arr.length) {
return {
value: arr[nowIndex++],
done: false
}
} else {
return {
value: undefined,
done: true
}
}
}
}
}
//求数组的最大子序列和
// dp方程 dp[n] = Math.max(dp[n - 1], 0) + a[n]
// 解释:
// dp[n] 表示 n 个元素里面,出现连续元素相加和的最大值。
// dp[n - 1] 只可能有两种结果 要么大于等于 0,要么小于 0,小于择舍弃,取 a[n]。
// /**
// * @param {number[]} nums
// * @return {number}
// */
// // dp[n] n 个元素里面 出现连续元素相加和的最大值
// // dp 方程 dp[n] = Math.max(dp[n-1], 0) + a[n]
// // dp[n-1] 只可能有两种结果 要么大于等于 0,要么小于 0,小于择舍弃,取 a[n]
var maxSubArray = function (nums) {
const dp = [nums[0]]
for (let i = 1; i < nums.length; i++) {
dp[i] = Math.max(dp[i - 1], 0) + nums[i]
}
return Math.max(...dp)
}
let arr = [1, -5, 8, 3, -4, 15, -8]
function getNum(arr) {
let num = arr[0]
let max = arr[0]
for (let i = 1; i < arr.length; i++) {
num = (num > 0) ? arr[i] + num : arr[i]
max = (num > max) ? num : max
// console.log(num, max)
}
return max
}
function contMax(array) {
if (array.length == 0)
return 0
var sum = array[0] //保存每组的和
var maxSum = array[0] //连续子数组最大和
for (var i = 1; i < array.length; i++) {
sum = Math.max(sum + array[i], array[i]);
maxSum = Math.max(sum, maxSum)
}
return maxSum
}
getNum(arr)
//乘积最大子数组(连续)
// dp 方程 dp[n] = Math.max(dp[n - 1] * nums[n], nums[n])
// 解释
// dp[n] 表示 n 个元素里面,出现连续元素相乘的最大乘积。
// 该题的技巧,是注意乘积会出现 负负得正的 case ,存储上次乘积的结果 dp[n - 1] 的最大值和最小值。
// /**
// * 需要考虑 负负得正的 case,需要存储存储最大值和最小值
// * dp[n] = Math.max(dp[n-1]*nums[n], nums[n])
// */
var maxProduct = function (nums) {
if (!nums.length) return null
let state = [],
max = nums[0];
for (let i = 0; i < nums.length; i++) {
state[i] = [0, 0];
}
state[0][0] = nums[0]; // 从 0 至 0 处的最大值
state[0][1] = nums[0]; // 从 0 至 0 处的最小值
for (let i = 1; i < nums.length; i++) {
if (nums[i] >= 0) {
state[i][0] = Math.max(state[i - 1][0] * nums[i], nums[i]);
state[i][1] = Math.min(state[i - 1][1] * nums[i], nums[i]);
} else {
state[i][0] = Math.max(state[i - 1][1] * nums[i], nums[i]);
state[i][1] = Math.min(state[i - 1][0] * nums[i], nums[i]);
}
if (max < state[i][0]) {
max = state[i][0]
}
};
return max
}
//实现一个EventListener类,包含on,off,emit方法
class EventListener {
constructor() {
this.list = {}
}
on(key, fn) {
if (!this.list[key]) {
this.list[key] = []
}
this.list[key].push(fn)
}
emit(key, ...args) {
for (let fn of this.list[key]) {
fn.apply(this, args)
}
}
off(key, fn) {
let fnlist = this.list[key]
if (!fnlist) return
if (!fn) {
fnlist.length = 0
} else {
fnlist.forEach((item, index) => {
if (item === fn) {
fnlist.splice(index, 1)
}
})
}
}
}
let obj1 = new EventListener()
obj1.on('work', value => {
// console.log(`我是${value}啊`)
})
obj1.on('eat', value => {
// console.log(`我在${value}啊`)
})
obj1.emit('work', 'zc')
obj1.off('eat')
obj1.emit('eat', '吃西瓜')
//手写一个sleep函数
function sleep(ms) {
return new Promise(function (resolve, reject) {
setTimeout(() => {
resolve('徐娟')
}, ms);
})
}
// sleep(10000).then((data) => {
// console.log(data)
// })
async function init() {
await sleep(2000)
// console.log('徐娟')
}
init()