Gonwe 发布的文章 - 静水流深

变量运算之类型转换的坑

字符串拼接const a = 100 + '100'; // '100100' const b = 100 + 10; // 110 const c = true + '100'; // 'true100'只要有字符串运算就不在是加法，而是字符串拼接== 运算符100 == '100' //true 0 == '' //true 0 == false //true false == '' //true null == undefined //true== 会类型转换尽量让值去相等=== 运算符// 除了==null外，其余全部使用 === const obj = { x:100 } if (obj.a == null) { //这里相当于 obj.a === null || obj.a === undefined,简写形式 //这是jquery源码中推荐的写法 }if语句truly变量：两步非运算等于true（ !!a === true ）的变量falsely变量：两步非运算等于false (!!a === false) 的变量// 以下是falsely变量。除此之外都是truly变

前端开发 · 2022-06-07

前端项目中运行 npm run xxx 或者 yarn run xxx 的时候发生了什么？

NPM，Node Package Manager的缩写，也就是“节点的包管理器”。顾名思义，npm是一个软件包管理器，主要进行Javascript的包管理。通过npm，我们可以很方便地进行Javascript包的下载、升级，我们也可以把我们开发的JavaScript包共享给其他使用者。Yarn是Facebook最近发布的一款依赖包安装工具。Yarn是一个新的快速安全可信赖的可以替代NPM的依赖管理工具当我们执行npm run xxx or yarn run xxx的时候。首先会先从package.json中找到执行的命令。如下所示：{ "name": "restful-server", "version": "1.0.0", "description": "服务器后端程序", "main": "index.js", "scripts": { "

无 · 2022-06-07

几个优雅的JavaScript运算符使用技巧

ECMAScript发展进程中，会有很多功能的更新，比如销毁，箭头功能，模块，它们极大的改变JavaScript编写方式，可能有些人喜欢，有些人不喜欢，但像每个新功能一样，我们最终会习惯它们。新版本的ECMAScript引入了三个新的逻辑赋值运算符：空运算符，AND和OR运算符，这些运算符的出现，也是希望让我们的代码更干净简洁，下面分享几个优雅的JavaScript运算符使用技巧一、可选链接运算符【？.】可选链接运算符（Optional Chaining Operator）处于ES2020提案的第4阶段，因此应将其添加到规范中。它改变了访问对象内部属性的方式，尤其是深层嵌套的属性。它也可以作为TypeScript 3.7+中的功能使用。相信大部分开发前端的的小伙伴们都会遇到null和未定义的属性。JS语言的动态特性使其无法不碰到它们。特别是在处理嵌套对象时，以下代码很常见：if (data && data.children && data.children[0] && data.children[0].title) { // I

前端开发 · 2022-06-07

史上最轻量的前端框架-VanillaJS？

答案：是指没有用任何别的框架，如jQuery等的纯JS：VanillaJs === JavaScriptVanilla JavaScript不是框架，更不是别的奇奇怪怪的东西，它就是指最朴素的原生JavaScript背景：Vanilla：意思是“香草”。这个词与冰淇淋有关，没有味道的冰淇淋就是香草味冰淇淋，把这个概念移植到JS中，这仅仅只是为了区别使用了如jQuery等框架的JS。

前端开发 · 2022-05-31

网页用不了鼠标怎么办？

在chrome的收藏夹上，右键，添加网页命名为：破解鼠标限制在网址上填上这个↓javascript:(function() { function R(a){ona = "on"+a; if(window.addEventListener) window.addEventListener(a, function (e) { for(var n=e.originalTarget; n; n=n.parentNode) n[ona]=null; }, true); window[ona]=null; document[ona]=null; if(document.body) document.body[ona]=null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart");})()保存在书签栏，然后你打开你那个网站，再点击刚刚保存的书签，就可以用鼠标复制了。但是，发现

前端开发 · 2022-05-26

JS基础 - 值类型和引用类型

一、JavaScript中值的两种类型简单数据类型：又叫值类型，基本类型。变量中存储的是值本身。// 值类型 let a = 100; let b = a; b = 200; console.log(a) //100;常见值类型包含：String（字符串）、Number(数值)、Boolean(布尔值)、Undefined、Symbol（表示独一无二的值）。let a ; //const 定义必须有值，let不用 const b = 'string'; const c = 123; const d = true; const s = Symbol('s');//ES6 新增类型复杂数据类型：又叫引用类型。变量中存储的仅仅是地址(引用)。// 引用类型 let a = {time:100}; let b = a; b.time = 200; console.log(a) //200;其中包含：Array（数组）、Object(对象)、Null、Function（函数）。// 引用类型 const a = [1,2,3]; const b = {time:100}; // 特殊的引用类型，

前端开发·教程·资源 · 2022-05-17

浅析浏览器存储（localStorage、sessionStorage、cookie) 区别

HTML5新增了本地存储Web Storage，用于存储页面数据的，不同浏览器有差异；不兼容ie8及以下浏览器；Web Storage包含了两种对象：sessionStorage和localSotrage。这两个对象在支持的浏览器中都是以windows对象属性的形式存在，下面简单分析下新增本地存储Web Storage和cookie的区别localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。// 1、保存数据到本地 // 第一个参数是保存的变量名，第二个是赋给变量的值 localStorage.setItem('Author', 'local'); // 2、从本地存储获取数据 localStorage.getItem('Author'); // 3、从本地存储删除某个已保存的数据 localStorage.removeItem('Author'); // 4、清除所有保存的数据 localStorage.clear();sessionSto

无 · 2022-05-12

JavaScript数组中对象的key值从中文转换成英文

const results = [{ 日期: '2016-05-04', 姓名: '王小虎', 地址: '上海市普陀区金沙江路 1517 弄' }];使用 Object.keys 方法把数组中的对象的key转成中文function transform(results) { const mapInfo = { '日期': 'date', '姓名': 'name', '地址': 'address', } const data = results.map(obj => { const newObj = {}; Object.keys(obj).forEach(zhkey => { const enkey = mapInfo[zhkey]; newObj[enkey] = obj[zhkey]; }) return newObj }) return data

前端开发 · 2022-05-12

JavaScript对象数组通过参数获取对应的值

例如根据id得到name？const List: { id: number, name: string }[] = [ { id: 1, name: '审核' }, { id: 2, name: '上线' }, { id: 3, name: '开发' }, { id: 4, name: '下线' } ]; /** 遍历,逐个遍历,匹配id */ function getNameById(field: number) { return client.userList.value.find(i => i.id === field); }; console.log(getNameById(4).name);//下线

TypeScript · 2022-05-12

Theme Jasmine by Kent Liao