| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> web前端 - 你不知道的11个JavaScript开发技巧 -> 正文阅读 |
|
[JavaScript知识库]web前端 - 你不知道的11个JavaScript开发技巧 |
在最新版的JavaScript 中,JavaScript 语言引入了更多的有用语法。在本文中,我将介绍几个在JavaScript新旧版本中易于阅读的技巧。我们将从三元运算符、声明多个变量、箭头函数、默认参数值等方面开始。 1、三元运算符 我们可以使用三元运算符以简洁的方式编写 if…else 语句。 而不是写: const x = 20; let grade; if (x >= 50) { grade = “pass”; } else { grade = “fail”; } 我们可以写: const x = 20; let grade = (x >= 50) ? “pass” : “fail”; 他们都检查 x 是否大于或等于 50,然后分配字符串 ‘pass’ 如果为真,否则为假。 我们还可以使用三元运算符编写嵌套的 if 语句,如下所示: const x = 20; let grade = (x >= 50) ? “pass” : (x >= 25) ? “good fail” : ‘bad fail’; 这与下面代码一样: const x = 20; let grade; if (x >= 50) { grade = “pass”; } else { if (x >= 25) { grade = “good fail”; } else { grade = “bad fail”; } } 2、设置默认值 如果变量为假,我们可以通过编写以下内容来设置默认值: let x; let y = x || 10; 这与下面代码一样: let x; let y; if (x === undefined || x === null || x === 0 || x === ‘’ || isNaN(x)) { y = 10; } 因为 x || 10 表示如果 x 为假,即 x 为 undefined、null、0、空字符串或 NaN,那么我们将 10 赋值给 y,这与: if (x === undefined || x === null || x === 0 || x === ‘’ || isNaN(x)) { y = 10; } 3、声明多个变量的简写 我们可以通过编写来声明多个变量: let x = y = z = 5; 这与下面代码一样: let x = 5; let y = 5; let z = 5; 它的工作原理是,首先将 5 分配给 z,然后将 z 的值分配给 y,最后将 y 的值分配给 x 。 4、If Truthy 检查某些东西是否为真的JavaScript简写,它不是 undefined、null、0、空字符串或 NaN,如下所示: if (x){ console.log(‘x is truthy’) } 上面的代码检查 x 是否为真,如果是,则执行 console.log。 5、For…Of 循环简写 从 ES6 开始,我们可以使用 for…of 循环来遍历数组或类数组对象中的变量,其中包括 Maps、Sets、参数对象、生成器、迭代器以及任何带有 [Symbol.iterator]方法。 我们可以写: let fruits = [‘apple’, ‘orange’, ‘grape’]; for (let fruit of fruits) { console.log(fruit); } 这比使用带有索引的常规 for 循环更干净,并且它也适用于其他可迭代对象。例如,我们可以将它与生成器一起使用: let fruits = function*() { yield ‘apple’; yield ‘orange’; yield ‘fruits’; } for (let fruit of fruits()) { console.log(fruit); } 6、Array.forEach 我们可以使用 Array.forEach 方法来遍历数组,尽管它比循环慢。 要使用它,我们可以编写如下代码: let fruits = [‘apple’, ‘orange’, ‘grape’]; fruits.forEach((fruit, index) => console.log(fruit)); 7、十进制底指数 我们可以指定指数,而不是写出带有所有尾随零的整数。 例如,如果我们有: 1e0 为1 1e1 10 1e2 100 1e3 为 1000 等。 8、数字分隔符 最新的浏览器允许我们使用下划线来分隔数字,以便于阅读。例如,我们可以写: 100_000_000 一亿,下划线可以放在我们选择的任何地方。 9、对象属性简写 而不是写: const foo = 1, bar = 2; const obj = { foo: foo, bar: bar }; 我们可以写: const foo = 1, bar = 2; const obj = { foo, bar }; 两段代码完全一样。 10、箭头函数 如果箭头函数只有一行,那么我们就不需要大括号,我们可以在不使用 return 关键字的情况下从它返回一个值。 例如: () => 1 与下面代码是相同的: () => { return 1 } 如果我们不关心 this 的值,我们可以使用箭头函数,因为箭头函数不会改变函数内部的 this 值。 11、默认参数值 我们可以在 ES6 中指定默认参数值。例如,我们可以这样写: const add = (a = 1, b = 2) => { return a + b } 这与下面代码一样: const add = (a, b) => { if (typeof a === ‘undefined’) { a = 1; } if (typeof b === ‘undefined’) { b = 1; } return a + b } 上面的技巧大多来自 ES6。这个版本的 JavaScript 提供了许多快捷的方式方法,可以让我们更轻松地编写代码和阅读。 for…of 循环非常有用,因为它可以遍历数组和类似数组的对象。没有其他循环可以做到这一点。 数字分隔符较新,仅在最新浏览器中可用。 |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年2日历 | -2025/2/5 20:00:38- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |