第134篇:解决浏览器的CORS跨域问题(CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.)

解决,浏览器,cors,问题,policy,cross,origin,requests,are,only,supported,for,protocol,schemes,http,data,isolated,app,chrome,extension,untrusted,https,edge · 浏览次数 : 355

小编点评

**解决方案:** 1. **解决跨域问题:**将背景图片的 src 属性设置为一个相对路径,例如 `./background.png`。 2. **解决报错:**确保 `index.html` 文件在运行时能够找到 `bg.src` 属性。 3. **建议:**使用方案一或方案二,因为它们更易于实现。方案一更简单易用,方案二需要下载任何附加软件。

正文

好家伙,

 

我继续尝试着将我的飞机大战使用ES6模块化分离开来,出了点问题

 

1.出现问题:

 

 

edge,chrome等一系列浏览器,会为了安全,禁止你跨域访问

 

目录如下:

 

 

主程序 

 index.html

 

main_1.js

 

main.js

 完整代码如下:

  1 /* //plane封装成类
  2 //实例化后使用
  3 //plane方法有:
  4     // cteate 
  5     config
  6     start
  7     stop
  8     pause
  9     
 10     
 11     */
 12 let plane = {
 13     create(dom) {
 14         let canvas = document.createElement('canvas');
 15         dom.appendChild(canvas);
 16         canvas.width = 480;
 17         canvas.height = 650;
 18 
 19         // 初始化画布对象
 20         // const canvas = document.getElementById("canvas");
 21         const context = canvas.getContext("2d");
 22 
 23         // 定义游戏的状态
 24         // 开始
 25         const START = 0;
 26         // 开始时
 27         const STARTING = 1;
 28         // 运行时
 29         const RUNNING = 2;
 30         // 暂停时
 31         const PAUSE = 3;
 32         // 结束时
 33         const END = 4;
 34 
 35         //创建一个配置文件 收藏所有的图片路径
 36         const IMAGES = {
 37             b: "img/bullet1.png",
 38             bg: "img/4.jpg",
 39             copyright: "img/shoot_copyright.png",
 40             pause: "img/game_pause.png",
 41             loading_frame: ["img/game_loading1.png", "img/game_loading2.png", "img/game_loading3.png",
 42                 "img/game_loading4.png"
 43             ],
 44             hero_frame_live: ["img/hero1.png", "img/hero2.png"],
 45             hero_frame_death: ["img/hero_blowup_n1.png", "img/hero_blowup_n2.png", "img/hero_blowup_n3.png",
 46                 "img/hero_blowup_n4.png"
 47             ],
 48             e1_live: ["img/enemy1.png"],
 49             e1_death: ["img/enemy1_down1.png", "img/enemy1_down2.png", "img/enemy1_down3.png", "img/enemy1_down4.png"],
 50             e2_live: ["img/enemy2.png"],
 51             e2_death: ["img/enemy2_down1.png", "img/enemy2_down2.png", "img/enemy2_down3.png", "img/enemy2_down4.png"],
 52             e3_live: ["img/enemy3_n1.png", "img/enemy3_n2.png"],
 53             e3_death: ["img/enemy3_down1.png", "img/enemy3_down2.png", "img/enemy3_down3.png", "img/enemy3_down4.png",
 54                 "img/enemy3_down5.png", "img/enemy3_down6.png"
 55             ],
 56             c1: "img/lanqiu.jpg"
 57         };
 58         //初始化各个图片
 59         const b = createImage(IMAGES.b);
 60         const bg = createImage(IMAGES.bg);
 61         const copyright = createImage(IMAGES.copyright);
 62         const pause = createImage(IMAGES.pause);
 63         const loading_frame = createImage(IMAGES.loading_frame);
 64         const hero_frame = {
 65             live: createImage(IMAGES.hero_frame_live),
 66             death: createImage(IMAGES.hero_frame_death),
 67         };
 68         const e1 = {
 69             live: createImage(IMAGES.e1_live),
 70             death: createImage(IMAGES.e1_death),
 71         };
 72         const e2 = {
 73             live: createImage(IMAGES.e2_live),
 74             death: createImage(IMAGES.e2_death),
 75         };
 76         const e3 = {
 77             live: createImage(IMAGES.e3_live),
 78             death: createImage(IMAGES.e3_death),
 79         };
 80         const c1 = createImage(IMAGES.c1);
 81 
 82         function createImage(src) {
 83             let img;
 84             if (typeof src === "string") {
 85                 img = new Image();
 86                 img.src = src;
 87             } else {
 88                 img = [];
 89                 for (let i = 0; i < src.length; i++) {
 90                     img[i] = new Image();
 91                     img[i].src = src[i];
 92                 }
 93             }
 94             return img;
 95         }
 96 
 97         //天空类的配置项
 98         const SKY = {
 99             bg: bg,
100             width: 480,
101             height: 650,
102             speed: 10,
103         };
104 
105         // 飞机加载界面的配置项
106         const LOADING = {
107             frame: loading_frame,
108             width: 186,
109             height: 38,
110             x: 0,
111             y: 650 - 38,
112             speed: 400,
113         };
114 
115         // 英雄配置项
116         const HERO = {
117             frame: hero_frame,
118             width: 99,
119             height: 124,
120             speed: 100,
121         };
122 
123         // 子弹配置项
124         const BULLET = {
125             img: b,
126             width: 9,
127             height: 21,
128         };
129 
130         //小敌机配置项
131         const E1 = {
132             type: 1,
133             width: 57,
134             height: 51,
135             life: 10,
136             score: 1,
137             frame: e1,
138             minSpeed: 20,
139             maxSpeed: 10
140         };
141         //中敌机配置项
142         const E2 = {
143             type: 2,
144             width: 69,
145             height: 95,
146             life: 50,
147             score: 5,
148             frame: e2,
149             minSpeed: 50,
150             maxSpeed: 20
151         };
152         //打敌机配置项
153         const E3 = {
154             type: 3,
155             width: 169,
156             height: 258,
157             life: 100,
158             score: 20,
159             frame: e3,
160             minSpeed: 100,
161             maxSpeed: 100
162         };
163         //奖励类配置项
164         const C1 = {
165             type: 4,
166             width: 75,
167             height: 75,
168             life: 1,
169             score: 1,
170             img: c1,
171             minSpeed: 5,
172             maxSpeed: 10
173         };
174 
175         //初始化一个天空类
176         class Sky {
177             constructor(config) {
178                 this.bg = config.bg;
179                 this.width = config.width;
180                 this.height = config.height;
181                 this.x1 = 0;
182                 this.y1 = 0;
183                 this.x2 = 0;
184                 this.y2 = -this.height;
185                 this.speed = config.speed;
186                 this.lastTime = new Date().getTime();
187             }
188             judge() {
189                 let currentTime = new Date().getTime();
190                 if (currentTime - this.lastTime > this.speed) {
191                     this.y1++;
192                     this.y2++;
193                     this.lastTime = currentTime;
194                 }
195                 if (this.y2 === 0) {
196                     this.y1 = 0;
197                     this.y2 = -this.height;
198                 }
199             }
200             paint(context) {
201                 context.drawImage(this.bg, this.x1, this.y1, this.width, this.height);
202                 context.drawImage(this.bg, this.x2, this.y2, this.width, this.height);
203             }
204         }
205 
206         // 初始化一个飞机界面加载类
207         class Loading {
208             constructor(config) {
209                 this.frame = config.frame;
210                 this.frameIndex = 0;
211                 this.width = config.width;
212                 this.height = config.height;
213                 this.x = config.x;
214                 this.y = config.y;
215                 this.speed = config.speed;
216                 this.lastTime = new Date().getTime();
217             }
218             judge() {
219                 const currentTime = new Date().getTime();
220                 if (currentTime - this.lastTime > this.speed) {
221                     this.frameIndex++;
222                     if (this.frameIndex === 4) {
223                         state = RUNNING;
224                     }
225                     this.lastTime = currentTime;
226                 }
227             }
228             paint(context) {
229                 context.drawImage(this.frame[this.frameIndex], this.x, this.y);
230             }
231         }
232 
233         // 初始化一个英雄类
234         class Hero {
235             constructor(config) {
236                 this.width = config.width;
237                 this.height = config.height;
238                 this.x = (480 - config.width) / 2;
239                 this.y = 650 - config.height;
240                 this.frame = config.frame;
241                 this.frameLiveIndex = 0;
242                 this.frameDeathIndex = 0;
243                 this.lastTime = new Date().getTime();
244                 this.speed = config.speed;
245                 this.img = null;
246                 this.live = true;
247                 this.lastShootTime = new Date().getTime();
248                 this.shootInterval = 50; //直接控制子弹刷新速率
249                 this.bulletList = [];
250                 this.destory = false;
251             }
252             judge() {
253                 const currentTime = new Date().getTime();
254                 if (currentTime - this.lastTime > this.speed) {
255                     if (this.live) {
256                         this.img = this.frame.live[this.frameLiveIndex++ % this.frame.live.length];
257                     } else {
258                         this.img = this.frame.death[this.frameDeathIndex++];
259                         if (this.frameDeathIndex === this.frame.death.length) {
260                             this.destory = true;
261                         }
262                     }
263                     this.lastTime = currentTime;
264                 }
265             }
266             paint(context) {
267                 context.drawImage(this.img, this.x, this.y, this.width, this.height);
268             }
269             shoot() {
270                 const currentTime = new Date().getTime();
271                 if (currentTime - this.lastShootTime > this.shootInterval) {
272                     let bullet = new Bullet(BULLET, this.x + this.width / 2 - BULLET.width / 2, this.y - BULLET.height);
273                     this.bulletList.push(bullet);
274                     bullet.paint(context);
275                     this.lastShootTime = currentTime;
276                 }
277             }
278             collide() {
279                 this.live = false;
280             }
281         }
282 
283         //初始化一个子弹类
284         class Bullet {
285             constructor(config, x, y) {
286                 this.img = config.img;
287                 this.width = config.width;
288                 this.height = config.height;
289                 this.x = x;
290                 this.y = y;
291                 this.destory = false;
292             }
293             paint(context) {
294                 context.drawImage(this.img, this.x, this.y);
295             }
296             move() {
297                 this.y -= 8;
298             }
299             outOfBounds() {
300                 return this.y < -this.height;
301             }
302             collide() {
303                 this.destory = true;
304             }
305         }
306 
307         // 初始化一个敌机类
308         class Enemy {
309             constructor(config) {
310                 this.type = config.type;
311                 this.width = config.width;
312                 this.height = config.height;
313                 this.x = Math.floor(Math.random() * (480 - config.width));
314                 this.y = -config.height;
315                 this.life = config.life;
316                 this.score = config.score;
317                 this.frame = config.frame;
318                 this.img = this.frame.live[0];
319                 this.live = true;
320                 this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed;
321                 this.lastTime = new Date().getTime();
322                 this.deathIndex = 0;
323                 this.destory = false;
324             }
325             move() {
326                 const currentTime = new Date().getTime();
327                 if (currentTime - this.lastTime >= this.speed) {
328                     if (this.live) {
329                         this.img = this.frame.live[0];
330                         this.y++;
331                         this.lastTime = currentTime;
332                     } else {
333                         this.img = this.frame.death[this.deathIndex++];
334                         if (this.deathIndex === this.frame.death.length) {
335                             this.destory = true;
336                         }
337                     }
338                 }
339             }
340             paint(context) {
341                 context.drawImage(this.img, this.x, this.y);
342             }
343             outOfBounds() {
344                 if (this.y > 650) {
345                     return true;
346                 }
347             }
348             hit(o) {
349                 let ol = o.x;
350                 let or = o.x + o.width;
351                 let ot = o.y;
352                 let ob = o.y + o.height;
353                 let el = this.x;
354                 let er = this.x + this.width;
355                 let et = this.y;
356                 let eb = this.y + this.height;
357                 if (ol > er || or < el || ot > eb || ob < et) {
358                     return false;
359                 } else {
360                     return true;
361                 }
362             }
363             collide() {
364                 this.life--;
365                 if (this.life === 0) {
366                     this.live = false;
367                     score += this.score;
368                 }
369             }
370         }
371         //初始化奖励类
372         class award {
373             constructor(config) {
374                 this.type = config.type;
375                 this.width = config.width;
376                 this.height = config.height;
377                 this.x = Math.floor(Math.random() * (480 - config.width));
378                 this.y = -config.height;
379                 this.life = config.life;
380                 this.score = config.score;
381                 this.img = config.img;
382                 this.live = true;
383                 this.speed = Math.floor(Math.random() * (config.minSpeed - config.maxSpeed + 1)) + config.maxSpeed;
384                 this.lastTime = new Date().getTime();
385                 this.deathIndex = 0;
386                 this.destory = false;
387             }
388             move() {
389                 const currentTime = new Date().getTime();
390                 if (currentTime - this.lastTime >= this.speed) {
391                     if (this.live) {
392                         this.y = this.y + 6;
393                         this.lastTime = currentTime;
394                     } else {
395                         this.destory = true;
396 
397                     }
398                 }
399             }
400             paint(context) {
401                 context.drawImage(this.img, this.x, this.y, this.width, this.height);
402             }
403             outOfBounds() {
404                 if (this.y > 650) {
405                     return true;
406                 }
407             }
408             hit(o) {
409                 let ol = o.x;
410                 let or = o.x + o.width;
411                 let ot = o.y;
412                 let ob = o.y + o.height;
413                 let el = this.x;
414                 let er = this.x + this.width;
415                 let et = this.y;
416                 let eb = this.y + this.height;
417                 if (ol > er || or < el || ot > eb || ob < et) {
418                     return false;
419                 } else {
420                     return true;
421                 }
422             }
423             // collide() {
424             //   this.life--;
425             //   if (this.life === 0) {
426             //     this.live = false;
427             //     score += this.score;
428             //   }
429             // }
430         }
431         //初始化一个天空实例
432         const sky = new Sky(SKY);
433         //初始化一个飞机界面加载实例
434         const loading = new Loading(LOADING);
435         //初始化一个英雄实例 英雄是会变的
436         let hero = new Hero(HERO);
437         //state表示游戏的状态 取值必须是以上的五种状态
438         let state = START;
439         //score 分数变量 life 变量
440         let score = 0;
441         let life = 3;
442         //为canvas绑定一个点击事件 且他如果是START状态的时候需要修改成STARTING状态
443         canvas.addEventListener("click", () => {
444             if (state === START) {
445                 state = STARTING;
446             }
447         });
448         // 为canvas绑定一个鼠标移动事件 鼠标正好在飞机图片的正中心
449         canvas.addEventListener("mousemove", (e) => {
450             let x = e.offsetX;
451             let y = e.offsetY;
452             hero.x = x - hero.width / 2;
453             hero.y = y - hero.height / 2;
454         });
455 
456         // //为canvas绑定一个屏幕触碰事件 触碰点正好在飞机图片的正中心
457         // canvas.addEventListener("touchstart",(e)=>{
458         //   let x = e.offsetX;
459         //   let y = e.offsetY;
460         //   hero.x = x - hero.width / 2;
461         //   hero.y = y - hero.height / 2;
462         // })
463         //为canvas绑定一个屏幕移动触摸点事件 触碰点正好在飞机图片的正中心
464         canvas.addEventListener("touchmove", (e) => {
465             // let x = e.pageX;
466             // let y = e.pageY;
467             console.log(e);
468             // let x = e.touches[0].clientX;
469             // let y = e.touches[0].clinetY;
470             let x = e.touches[0].pageX;
471             let y = e.touches[0].pageY;
472             // let x = e.touches[0].screenX;
473             // let y = e.touches[0].screenY;
474             let write1 = (document.body.clientWidth - 480) / 2;
475             let write2 = (document.body.clientHeight - 650) / 2;
476             hero.x = x - write1 - hero.width / 2;
477             hero.y = y - write2 - hero.height / 2;
478 
479             // hero.x = x - hero.width / 2;
480             // hero.y = y - hero.height / 2;
481             console.log(x, y);
482             console.log(document.body.clientWidth, document.body.clientHeight);
483             e.preventDefault(); // 阻止屏幕滚动的默认行为
484 
485         })
486         // 为canvas绑定一个鼠标离开事件 鼠标离开时 RUNNING -> PAUSE
487         canvas.addEventListener("mouseleave", () => {
488             if (state === RUNNING) {
489                 state = PAUSE;
490             }
491         });
492 
493         // 为canvas绑定一个鼠标进入事件 鼠标进入时 PAUSE => RUNNING
494         canvas.addEventListener("mouseenter", () => {
495             if (state === PAUSE) {
496                 state = RUNNING;
497             }
498         });
499         // 碰撞检测函数
500         //此处的碰撞检测包括 
501         //1.子弹与敌机的碰撞
502         //2.英雄与敌机的碰撞
503         //3.英雄与随机奖励的碰撞
504         function checkHit() {
505             // 遍历所有的敌机
506             for (let i = 0; i < awards.length; i++) {
507                 //检测英雄是否碰到奖励类
508                 if (awards[i].hit(hero)) {
509                     //当然了,这个随机奖励的样式也要删了
510                     awards.splice(i, 1);
511                     //清除所有的敌机
512                     // for (let i = 0; i < enemies.length; i++) {
513                     //   enemies.splice(i, 1);
514                     // }
515                     enemies.length = 0;
516 
517                 }
518             }
519             for (let i = 0; i < enemies.length; i++) {
520                 //检测英雄是否撞到敌机
521                 if (enemies[i].hit(hero)) {
522                     //将敌机和英雄的destory属性改为true
523                     enemies[i].collide();
524                     hero.collide();
525                 }
526                 for (let j = 0; j < hero.bulletList.length; j++) {
527                     enemies[i].hit(hero.bulletList[j]);
528                     //检测子弹是否撞到敌机
529                     if (enemies[i].hit(hero.bulletList[j])) {
530                         //将敌机和子弹的destory属性改为true
531                         enemies[i].collide();
532                         hero.bulletList[j].collide();
533                     }
534                 }
535             }
536         }
537         //该变量中有所有的敌机实例
538         let enemies = [];
539         //该变量中存放所有的奖励实例
540         let awards = [];
541         //敌机产生的速率
542         let ENEMY_CREATE_INTERVAL = 800;
543         let ENEMY_LASTTIME = new Date().getTime();
544         // 全局函数 隔一段时间就来初始化一架敌机/奖励
545         function createComponent() {
546             const currentTime = new Date().getTime();
547             if (currentTime - ENEMY_LASTTIME >= ENEMY_CREATE_INTERVAL) {
548                 let ran = Math.floor(Math.random() * 100);
549                 if (ran < 55) {
550                     enemies.push(new Enemy(E1));
551                 } else if (ran < 85 && ran > 55) {
552                     enemies.push(new Enemy(E2));
553                 } else if (ran < 95 && ran > 85) {
554                     enemies.push(new Enemy(E3));
555                 } else if (ran > 95) {
556                     awards.push(new award(C1));
557 
558                 }
559 
560                 ENEMY_LASTTIME = currentTime;
561             }
562         }
563         // 全局函数 来判断所有的子弹/敌人组件 "负责移动"
564         function judgeComponent() {
565             for (let i = 0; i < hero.bulletList.length; i++) {
566                 hero.bulletList[i].move();
567             }
568             for (let i = 0; i < enemies.length; i++) {
569                 enemies[i].move();
570             }
571             for (let i = 0; i < awards.length; i++) {
572                 awards[i].move();
573             }
574         }
575         // 全局函数 来绘制所有的子弹/敌人组件 绘制score&life面板
576         function paintComponent() {
577             for (let i = 0; i < hero.bulletList.length; i++) {
578                 hero.bulletList[i].paint(context);
579             }
580             for (let i = 0; i < enemies.length; i++) {
581                 enemies[i].paint(context);
582             }
583             for (let i = 0; i < awards.length; i++) {
584                 awards[i].paint(context);
585             }
586             context.font = "20px 微软雅黑";
587             context.fillStyle = "green";
588             context.textAlign = "left";
589             context.fillText("score: " + score, 10, 20);
590             context.textAlign = "right";
591             context.fillText("life: " + life, 480 - 10, 20);
592             //重置样式
593             context.fillStyle = "black";
594             context.textAlign = "left";
595         }
596         // 全局函数 来销毁所有的子弹/敌人组件 销毁掉英雄
597         function deleteComponent() {
598             if (hero.destory) {
599                 life--;
600                 hero.destory = false;
601                 if (life === 0) {
602                     state = END;
603                 } else {
604                     hero = new Hero(HERO);
605                 }
606             }
607             for (let i = 0; i < hero.bulletList.length; i++) {
608                 if (hero.bulletList[i].outOfBounds() || hero.bulletList[i].destory) {
609                     hero.bulletList.splice(i, 1);
610                 }
611             }
612             for (let i = 0; i < enemies.length; i++) {
613                 if (enemies[i].outOfBounds() || enemies[i].destory) {
614                     enemies.splice(i, 1);
615                 }
616             }
617         }
618 
619 
620 
621 
622         //当图片加载完毕时,需要做某些事情
623         bg.addEventListener("load", () => {
624             setInterval(() => {
625                 switch (state) {
626                     case START:
627                         sky.judge();
628                         sky.paint(context);
629                         let logo_x = (480 - copyright.naturalWidth) / 2;
630                         let logo_y = (650 - copyright.naturalHeight) / 2;
631                         context.drawImage(copyright, logo_x, logo_y);
632                         break;
633                     case STARTING:
634                         sky.judge();
635                         sky.paint(context);
636                         loading.judge();
637                         loading.paint(context);
638                         break;
639                     case RUNNING:
640                         sky.judge();
641                         sky.paint(context);
642                         hero.judge();
643                         hero.paint(context);
644                         hero.shoot();
645                         createComponent();
646                         judgeComponent();
647                         deleteComponent();
648                         paintComponent();
649                         checkHit();
650                         break;
651                     case PAUSE:
652                         let pause_x = (480 - pause.naturalWidth) / 2;
653                         let pause_y = (650 - pause.naturalHeight) / 2;
654                         context.drawImage(pause, pause_x, pause_y);
655                         break;
656                     case END:
657                         //给我的画笔设置一个字的样式
658                         //后面写出来的字都是这个样式的
659                         context.font = "bold 24px 微软雅黑";
660                         context.textAlign = "center";
661                         context.textBaseline = "middle";
662                         context.fillText("GAME_OVER", 480 / 2, 650 / 2);
663                         break;
664                 }
665             }, 10);
666         });
667 
668         //背景切换方法
669         function changebg() {
670             console.log("changebg方法被触发")
671             bg.src = "img/background.png"
672         }
673 
674     }
675 };
676 
677 
678 export {
679     plane
680 };
main.js代码

 

然后打开index.html

直接报错,跨域问题

 

2.解决问题:

网上搜了一大片问题解决方案:

方案一:使用npm模块 anywhere

 

 

 

anywhere可以将你的当前目录变成一个静态文件服务器的根目录。

全局安装:

npm install anywhere -g

在index.html目录下;

anywhere

 

 

 

 随后自动打开网页,不再报错

 

 

方案二:

使用Live Server插件

 

 

 

安装后,直接在右下角启动服务

 

 

 

 

方案三:

买个服务器,部署到服务器上

.....

 

与第134篇:解决浏览器的CORS跨域问题(CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.)相似的内容:

第134篇:解决浏览器的CORS跨域问题(CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.)

好家伙, 我继续尝试着将我的飞机大战使用ES6模块化分离开来,出了点问题 1.出现问题: edge,chrome等一系列浏览器,会为了安全,禁止你跨域访问 目录如下: 主程序 index.html main_1.js main.js 完整代码如下: 1 /* //plane封装成类 2 //实例化后

第一百零五篇:变量的原始值和引用值

好家伙,JS基础接着学, 本篇内容为《JS高级程序设计》第四章学习笔记 1.原始值和引用值 ECMAScript变量可以包含两种不同类型的数据:原始值和引用值。原始值(primitive value)就是最简单的数据,引用值(reference value)则是由多个值构成的对象。 在把一个值赋给变

第一百零六篇:变量的不同声明(var,let和const的不同)

JS关于变量的声明,变量提升,暂时性死区

第一百零七篇:基本数据类型(undefined,null,boolean类型)

好家伙, 本篇内容为《JS高级程序设计》第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Number, String和Symbol。 Symbol (符号)是ECMAScript6新增的。还有一种复杂数据类型

第一百零八篇:最常用的基本数据类型(Number类型)

最常用的基本数据类型(Number类型)

第一百一十篇:内存泄漏和垃圾回收(JS)

好家伙,本篇内容为《JS高级程序设计》第四章的学习笔记 1.内存泄露 1.1.什么是内存泄漏? 内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。 内存泄漏缺陷具有隐蔽性、积累性的特征,比其

第一百一十一篇:基本引用类型Date

好家伙,本篇为《JS高级程序设计》第五章的学习笔记 1.基本引用类型 引用值(或者对象)是某个特定引用类型的实例,在ECMAScript中,引用类型是把数据和功能组织到一起的结构,(像极了“类”) 经常被人错误的称作“类”。 虽然从技术上讲JavaScript是一门面向对象语言,但是ECMAScri

第一百一十二篇: JS数组Array(一)数组基本用法

好家伙, 1.数组 Array应该就是ECMAScript中最常用的类型了。ECMAScript数组跟其他编程语言的数组有很大区别。 跟其他语言中的数组一样,ECMAScript 数组也是一组有序的数据, 但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。 这意味着可以创建一个数组,它的第

第一百一十四篇: JS数组Array(三)数组常用方法

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.数组的复制和填充 批量复制方法 copyWithin(),以及填充数组方法fill()。 这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。 使用这个方法不会改变数组的大小。 1.1.fi

第一百一十五篇: JS集合引用类型Map

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.Map ECMAScript6以前,在JavaScript中实现“键/值”式存储可以使用object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。 但这种实现并非没有问题,为此TC39委员会专门为“键/值”存储定