IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: 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项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-28 00:12:45  更:2021-07-28 00:13:53 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/6 3:19:11-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码