我的编程空间,编程开发者的网络收藏夹
学习永远不晚

如何使用javascript 数组来代替条件语句以及如何使用classList操作类名。

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

如何使用javascript 数组来代替条件语句以及如何使用classList操作类名。

这期内容当中小编将会给大家带来有关如何使用javascript 数组来代替条件语句以及如何使用classList操作类名。,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。

用数组检查替换长表达式

平时开发中,我们可能会写如下的代码:

if (fruit === 'apple' || fruit === 'orange' || fruit === 'grape') {   //... }

对于上面,我们可以使用一些数组方法来减少条件表达式的长度。

一种方法是使用数组的include方法:

if (['apple', 'orange' ,'grape'].includes(fruit)) {   //... }

如果传递给参数的值包含在数组实例中,include方法返回true,否则返回false。

另一种方法是使用数组的some方法:

if (['apple', 'orange', 'grape'].some(a => a === fruit)) {   //... }

通过some方法,我们可以检查回调中是否存在具有给定条件的数组元素。

如果存在一个或多个,则返回true,否则返回false。

在 DOM 元素中使用 classList 属性

检查 DOM 元素中是否存在类并操作多个类的最简单方法是使用classList属性。

例如,如果要添加多个类,可以使用下面方式:

const p = document.querySelector('p'); p.classList.add('foo'); p.classList.add('bar'); p.classList.add('baz');

这样,我们可以添加多个类而无需操作字符串。我们只是获得DOM元素对象的classList属性,然后调用add通过将带有类名的字符串传递到add方法中来添加类。

现在,渲染的DOM元素具有foo,bar和baz类。

同样,我们可以调用classList属性的remove方法,该方法使用一个带有要删除的类名的字符串来删除该类。

例如,我们可以这样写:

const p = document.querySelector('p'); p.classList.add('foo'); p.classList.add('bar'); p.classList.add('baz'); p.classList.remove('baz');

要检查 DOM 元素对象中是否存在类名,可以使用contains方法。

例如,我们可以这样写:

const p = document.querySelector('p'); p.classList.add('foo'); p.classList.add('bar'); const hasBaz = p.classList.contains('baz');

上面判断 p 元素是否包含 baz 类,因为 p 没有包含 baz类,所以返回false。

classList属性还有toggle方法,表示切换类(添加或者移除),例如下面的代码:

const p = document.querySelector('p'); const button = document.querySelector('button'); p.classList.add('foo'); p.classList.add('bar');  button.onclick = () => {   p.classList.toggle('bar'); }

每点击一次按钮,p 的上 bar 类就会添加或者移除。

clasList属性有一个类似数组的可迭代对象,称为DOMTokenList对象。因此,我们可以使用展开操作符将其转换为数组,将clasList转换为一个带有类名的字符串数组。

例如,我们可以这样写:

const p = document.querySelector('p'); p.classList.add('foo'); p.classList.add('bar'); const classArr = [...p.classList];

上面 classArr 最终值为[“foo”, “bar”]。

一旦我们将DOMTokenList转换为一个数组,那么我们就可以使用任何数组方法来操作代码。


带有 || 操作的长条件语句,我们使用对应数组方法来进行优化。

要操作多个类名,我们应该使用作为DOM元素对象一部分的classList属性。通过这种方式,我们可以添加、删除和切换类,而不需要操作字符串并自己将其设置为className属性。

上述就是小编为大家分享的如何使用javascript 数组来代替条件语句以及如何使用classList操作类名。了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

如何使用javascript 数组来代替条件语句以及如何使用classList操作类名。

下载Word文档到电脑,方便收藏和打印~

下载Word文档

编程热搜

目录