2022年9月11日

JavaScript: !function

!function跟(function(){... })();函数意义相同,叫做立即运行的匿名函bai数(也叫立即调用函数)。 js中可以这样创建一个匿名函数: (function(){do something...})() //或 (function(){do something...}())   而匿名函数后面的小括号()是为了让匿名函数立即执行,其实就是一个函数调用。 这样写会报错: function(){alert(1)}() 因为function前面没有(或者! ~之类的运算符,js解析器会试图将关键字function解析成函数声明语句,而不是函数定义表达式。 作为组运算符,小括号()会将其内部的表达式当成一个整体,然后返回结果,所以定义一个匿名函数正确的格式就是用小括号将函数体括起来。 同样的! ~ + -等运算符也有同…
2022年9月6日

JavaScript: 实现sleep

sleep函数作用是让线程休眠,等到指定时间在重新唤起。 方法一:这种实现方式是利用一个伪死循环阻塞主线程。因为JS是单线程的。所以通过这种方式可以实现真正意义上的sleep()。 function sleep(delay) { var start = (new Date()).getTime(); while ((new Date()).getTime() - start < delay) { continue; } } function test() { console.log('111'); sleep(2000); console.log('222'); } test()   方法二:定时器 function sleep1(ms, callback) { setTimeout(callback, ms) } //sleep 1s sleep1(1000, () =>…
2022年9月6日

JavaScript: 全局变量与局部变量

目录 1.什么是全局变量和局部变量 2.全局变量和局部变量的声明 2.1 全局变量的声明 2.2 局部变量的声明 3.全局变量和局部变量一些常见问题  3.1全局变量跟局部变量重名 3.2 零散变量的问题 3.3. 变量释放问题 总结: 1.什么是全局变量和局部变量 全局变量:常常定义在函数外部,拥有全局作用域,即在 JavaScript 代码的任何地方都可以访问。 局部变量:定义在函数内部,只能在函数中使用的变量,作用范围是从函数开始到结尾,即在{}里。 在函数内声明的变量只在函数体内有定义,即为局部变量,其作用域是局部性的。需要注意的是,在函数体内声明局部变量时,如果不使用 var 关键字,则将声明全局变量。 <script> var str1 = "hello1"; //定义一个全局变量 function a() { var str2 = "hello2…
2022年9月6日

JavaScript: 模块导入导出

export - JavaScript | MDN (mozilla.org) import - JavaScript | MDN (mozilla.org) ES6 中引入了“模块”(module)。 导出模块就是让 .js 文件中的某些值对外可见,导入模块就是将那些对外可见的值导入到当前 .js 文件中。 模块导出、导入分别使用关键字 export、import。 如果在一个 .js 文件文件中使用了 export 或 import,那这个 .js 文件就会被当做一个模块。 在 HTML 中引入模块,以及,在 <script> 和 </script> 之间使用模块,都需要将 <script> 的属性 tyep 设为 module: <script type="module" src="./im.js"></script> <sc…
2022年9月6日

JavaScript: Chrome控制台引入js库 以jQuery为例

Chrome控制台引入jQuery var script = document.createElement("script"); script.src = "https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(script); // 验证是否引入成功 >jQuery ƒ (e,t){return new k.fn.init(e,t)}…
2022年9月2日

JavaScript: 以变量名称作为字符串 js中定义用字符串拼接起来的变量名的变量

今天在写js的时候碰到了难题,我又一个页面需要生成很多的变量。但是变量的名称是根据参数的不同而区分的。 例如可能需要生成 date_1,date_2,datet_3... (后面的数字是根据参数来的)。 所以我的函数名 应该由 var name = "test_"+num;   生成函数名  但这问题就来了。1可以使用 window[name] = "  "  这种方式来定义变量: 所以 var "test_"+num = 100; 这中肯定是错误的。后来问了大哥后才知道。可以使用  window[name] = 100 这种方式来定义变量。看代码     function create_variable(num){     var name = "test_"+num;   //生成函数名     window[name] = 100;    …
2022年8月20日

Chrome 浏览器中执行 JavaScript

目录 一、打开开发者工具 1.右键“检查” 2.快捷键F12 3.菜单进入 二、开发者工具中执行JavaScript代码 1.Console窗口执行 2.Snippet脚本 前言: 要在浏览器中执行 JavaScript 脚本,首先你的浏览器得支持。现在主流推荐 Chrome 浏览器,也可以使用基于 Chromium的 Edge 浏览器。下面来介绍如何在 Chrome 中打开开发者工具,以及如何在开发者工具中运行调试 JavaScript 代码。 一、打开开发者工具 Chrome 中的开发者工具界面如下图所示: 要打开 Chrome 开发者工具来运行调试前端代码,常见的有 3 种方式。 1.右键“检查” 在 Chrome 中打开一个页面之后,我们可以在页面中单击鼠标右键,然后在菜单中中选择**“检查”**,这样就可以打开开发者工具了。 2.快捷键 F12 同样的,一般在 Chrom…
2022年8月19日

JavaScript: 判断数组中是否存在某个值的几种方法

array.indexOf 判断数组中是否存在某个值,如果存在返回数组元素的下标,否则返回-1 let arr = ['something', 'anything', 'nothing', 'anything']; let index = arr.indexOf('nothing'); # 结果:2 array.includes(searchElement[, fromIndex]) 判断一个数组是否包含一个指定的值,如果存在返回 true,否则返回false。 参数:searchElement 需要查找的元素值。 参数:thisArg(可选) 从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。 let numbers = [12, 5, 8, 130, 44]; let result =…
2022年8月19日

JavaScript: 删除对象的某个属性

1.将属性设置为 undefined 属性本身仍将存在于对象中,它还会改变原始对象。 const pet = { species: 'dog', age: 3, name: 'celeste', gender: 'female' }; pet.gender = undefined; Object.keys(pet); // ['species', 'age', 'name', 'gender'] 2.使用 delete 操作符 delete 将完全从对象中删除属性,会导致原始对象的发生改变,但速度很慢。 const pet = { species: 'dog', age: 3, name: 'celeste', gender: 'female' }; delete pet.gender; Object.keys(pet); // ['species', 'age', 'name'] delete操作符移除对象…
2022年8月14日

JavaScript: 4种深拷贝的方法

浅拷贝与深拷贝 浅拷贝是创建一个新对象,这个对象有着原始对象属性值的拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的是内存地址 。 如果不进行深拷贝,其中一个对象改变了对象的值,就会影响到另一个对象的值。 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。 1、JSON.parse(JSON.stringify(obj)) 一般情况下对普通对象需要进行深拷贝,可以使用这种方法进行深拷贝操作,这种是最简单且代码量最少的深拷贝方法。 let a = {a:1,b:2} let b = JSON.parse(JSON.stringify(a)) a.a = 11 console.log(a)//{a:1,b:2} console.log(b)//{a:11,b:2}…