Stack Overflow上最流行的5个JavaScript问答

我心飞翔 分类:javascript

Stack Overflow是最受程序员群体喜爱的问答平台。如果一个问题在Stack Overflow上比较受欢迎,那么你大概了已经遇到或者将要遇到同类型的问题。

这里我总结了Stack Overflow上最受欢迎的5个问题,希望对你有帮助。

版权声明:Stack Overflow上的内容是基于CC BY-SA 分发的。

TOP1:如何删除数组中的某个特定元素?

  • 阅读数: 8百万
  • 赞同数: 9304
  • 收藏数: 1423

其实这个问题的本身有一定的歧义。当我们说到删除某个特定的元素的时候,其实有3种理解方式:

  • 删除某个特定位置的元素
  • 删除某个特定值的元素
  • 删除所有特定值的元素

下面我们就分为三种情况来讨论。

删除某个特定位置的元素

如果我们需要删除某个位置的元素,那么事情就非常简单了。数组的API中有一个叫做array.splice的方法,可以帮我们删除特定索引的元素。

The splice() method changes the contents of an array by removing or replacing existing elements

这个方法可以接受两个参数:

let arrDeletedItems = arr.splice(start, deleteCount)
 
  • start: 从这个索引位置开始删除元素
  • deleteCount:需要删除的元素个数

使用示例:

Stack Overflow上最流行的5个JavaScript问答

用一个动画来展示就是这样的:

Stack Overflow上最流行的5个JavaScript问答

Stack Overflow上最流行的5个JavaScript问答

在掌握了这个方法后,我们完成之前的需求就非常简单了:我们要是想删除某个特定位置的元素,只需要将splice方法的deleteCount设置为1就行了。

比如说我们想要删除数组索引为2的元素,也就是true这个值,可以这样写:

Stack Overflow上最流行的5个JavaScript问答

一个简单的测试:

下面这个表达式的结果是什么?

[1, 2, 3].splice(2, 1)
 

删除数组中某个特定的值

如果我们想要删除数组中某个特定的值,只需要简单的两个步骤:

1. 寻找到这个值在数组中的索引

2. 根据索引来删除元素

数组中用来查找一个元素的索引的方法是 Array.prototype.indexOf():

The **indexOf()** method returns the first index at which a given element can be found in the array, or -1 if it is not present.

还是之前的数组,假设我们想要删除值为5的元素,那么我们只需要这样做:

let arr = [1, 'a', true, 5, 'a', 3]let index = arr.indexOf(5)if (index > -1) {
  arr.splice(index, 1)
}
console.log(arr)
 

Stack Overflow上最流行的5个JavaScript问答

删除所有特定值的元素

我们刚刚解释过如何删除一个元素。现在如果我们需要删除数组中所有特定值的元素,我们只需要把上面的步骤重复几遍。

function removeAll(array, value){  for (let i = array.length - 1; i >= 0; i--) {    if (array[i] === value) {      array.splice(i, 1);    }  }}
 

在上面的函数中,我们从后向前的遍历数组中的元素,如果发现当前的元素等于特定的值,那么就通过splice方法删除它。

示例:

Stack Overflow上最流行的5个JavaScript问答

小测试:

为什么我们要从后往前遍历,而不是从前往后遍历?

TOP2:如何在JavaScript中判断一个DOM元素是否处于hidden状态?

  • 阅读数: 280万
  • 赞同数: 8063
  • 收藏数: 920

原问题限制我们通过jQuery来进行判断的。但是考虑到jQuery已经没有那么流行了,所以我将这个扩展为使用原生JavaScript来解决。

 其实解决这个问题需要两个知识点:

  1. 在CSS中如何隐藏一个元素
  2. 如何在JavaScript中读取、操纵CSS属性

下面我们就一一的来解决一下。

在CSS中隐藏一个元素

CSS中是控制元素的可见性的属性是 visibility

这个属性有两个常用的值:

visible

Default value. The element is visible

hidden

The element is hidden (but still takes up space)

假设我们的HTML文件是这样的:

Stack Overflow上最流行的5个JavaScript问答

<head>    <style>        #stalker {            visibility: hidden;        }    </style></head><body>    <ul>        <li>bytefish</li>        <li id="stalker">a stalker</li>        <li>a dog</li>    </ul></body>
 

那么 <li id="stalker">a stalker</li> 这个节点就会在页面中隐藏。

这里我们可以在浏览器的控制台中进行调试:

Stack Overflow上最流行的5个JavaScript问答

在JavaScript中读取、操纵CSS属性

如果我们想要判断一个DOM元素是否在页面中隐藏了,我们只需要在JavaScript中检查这个CSS属性就行了。

检查方法如下:

Stack Overflow上最流行的5个JavaScript问答

  • 浏览器提供了 window.getComputedStyle 这个函数来获得一个DOM元素的所有属性。
  • 通过 style.getPropertyValue 方法获得某个具体的样式的值。

当然,除了可以读取一个CSS属性,我们还可以通过JS来修改CSS属性。修改CSS属性的方法比较简单:

Stack Overflow上最流行的5个JavaScript问答

TOP3: 严格模式 “use Strict” 有什么用?

  • 阅读数: 110万
  • 赞同数: 7818
  • 收藏数: 1530

最开始的时候,JavaScript是一个非常灵活的语言,但是过度的自由也带来了一定的混乱。

为了鼓励大家抛弃那些不严谨的代码风格,在ES5的时候引入了严格模式。这种模式下很多容易被误解的写法被禁用了。

所谓的严格模式,就是在脚本的第一行,或者函数的第一行,加上”use strict“这个字符串。这个字符串会被JS引擎特殊处理,并开启严格模式。

废话不多说,这里直接上代码截图.

1. 严格模式下,不允许使用未声明的变量:

Stack Overflow上最流行的5个JavaScript问答

Stack Overflow上最流行的5个JavaScript问答

2. 严格模式下,不允许删除变量或对象

Stack Overflow上最流行的5个JavaScript问答

Stack Overflow上最流行的5个JavaScript问答

3. 严格模式下,不允许使用八进制

Stack Overflow上最流行的5个JavaScript问答

Stack Overflow上最流行的5个JavaScript问答

4. 严格模式下,禁止this关键字指向全局对象。

Stack Overflow上最流行的5个JavaScript问答

上面这种情况,this指向全局对象,所以控制台中打印Windows.

Stack Overflow上最流行的5个JavaScript问答

上面这种情况中,我们使用了严格模式,this被禁止指向全局对象,所以控制台打印出undefined.

当然,关于严格模式还有很多规则,这里我就不一一讲述了,大家刚兴趣的话可以参考这个连接:

www.runoob.com/js/js-stric…

TOP4: 如何跳转到其他网页?

  • 阅读数: 670万
  • 赞同数: 7713
  • 收藏数: 2242

这个问题比较简单:location.hreflocation.replace 都可以完成页面跳转。

location.href = 'https://bytefish.medium.com'location.replace('https://bytefish.medium.com')
 

Stack Overflow上最流行的5个JavaScript问答

Stack Overflow上最流行的5个JavaScript问答

TOP5: 如何判断一个字符串是否包含另一个字符串?

  • 阅读数: 660万
  • 赞同数: 7420
  • 收藏数: 1501

和数组一样,字符串也有一个indexOf方法:

var string = "foo";
var substring = "oo";

console.log(string.indexOf(substring) !== -1);
 

Stack Overflow上最流行的5个JavaScript问答

在ES6之后,我们还可以使用includes方法:

const string = "foo";
const substring = "oo";

console.log(string.includes(substring));
 

Stack Overflow上最流行的5个JavaScript问答

小结

这就是Stack Overflow的JavaScript标签下,有史以来最流行的5个JavaScript问题,你有没有遇到过同类型的问题呢?

Medium

这篇文章的英文版同步的发布于Medium,欢迎各位掘金的朋友到Medium上围观、鼓掌一下。

Top 5 Most Popular JavaScript Questions on Stack Overflow

记得从我上面的链接中点开,这样可以避开Medium付费墙的限制。

回复

我来回复
  • 暂无回复内容