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:需要删除的元素个数
使用示例:
用一个动画来展示就是这样的:
在掌握了这个方法后,我们完成之前的需求就非常简单了:我们要是想删除某个特定位置的元素,只需要将splice方法的deleteCount设置为1就行了。
比如说我们想要删除数组索引为2的元素,也就是true这个值,可以这样写:
一个简单的测试:
下面这个表达式的结果是什么?
[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)
复制代码
删除所有特定值的元素
我们刚刚解释过如何删除一个元素。现在如果我们需要删除数组中所有特定值的元素,我们只需要把上面的步骤重复几遍。
function removeAll(array, value){ for (let i = array.length - 1; i >= 0; i--) { if (array[i] === value) { array.splice(i, 1); } }}
复制代码
在上面的函数中,我们从后向前的遍历数组中的元素,如果发现当前的元素等于特定的值,那么就通过splice方法删除它。
示例:
小测试:
为什么我们要从后往前遍历,而不是从前往后遍历?
TOP2:如何在JavaScript中判断一个DOM元素是否处于hidden状态?
- 阅读数: 280万
- 赞同数: 8063
- 收藏数: 920
原问题限制我们通过jQuery来进行判断的。但是考虑到jQuery已经没有那么流行了,所以我将这个扩展为使用原生JavaScript来解决。
其实解决这个问题需要两个知识点:
- 在CSS中如何隐藏一个元素
- 如何在JavaScript中读取、操纵CSS属性
下面我们就一一的来解决一下。
在CSS中隐藏一个元素
CSS中是控制元素的可见性的属性是 visibility
这个属性有两个常用的值:
visible
Default value. The element is visible
hidden
The element is hidden (but still takes up space)
假设我们的HTML文件是这样的:
<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>
这个节点就会在页面中隐藏。
这里我们可以在浏览器的控制台中进行调试:
在JavaScript中读取、操纵CSS属性
如果我们想要判断一个DOM元素是否在页面中隐藏了,我们只需要在JavaScript中检查这个CSS属性就行了。
检查方法如下:
- 浏览器提供了 window.getComputedStyle 这个函数来获得一个DOM元素的所有属性。
- 通过 style.getPropertyValue 方法获得某个具体的样式的值。
当然,除了可以读取一个CSS属性,我们还可以通过JS来修改CSS属性。修改CSS属性的方法比较简单:
TOP3: 严格模式 “use Strict” 有什么用?
- 阅读数: 110万
- 赞同数: 7818
- 收藏数: 1530
最开始的时候,JavaScript是一个非常灵活的语言,但是过度的自由也带来了一定的混乱。
为了鼓励大家抛弃那些不严谨的代码风格,在ES5的时候引入了严格模式。这种模式下很多容易被误解的写法被禁用了。
所谓的严格模式,就是在脚本的第一行,或者函数的第一行,加上”use strict“
这个字符串。这个字符串会被JS引擎特殊处理,并开启严格模式。
废话不多说,这里直接上代码截图.
1. 严格模式下,不允许使用未声明的变量:
2. 严格模式下,不允许删除变量或对象
3. 严格模式下,不允许使用八进制
4. 严格模式下,禁止this关键字指向全局对象。
上面这种情况,this指向全局对象,所以控制台中打印Windows.
上面这种情况中,我们使用了严格模式,this被禁止指向全局对象,所以控制台打印出undefined.
当然,关于严格模式还有很多规则,这里我就不一一讲述了,大家刚兴趣的话可以参考这个连接:
TOP4: 如何跳转到其他网页?
- 阅读数: 670万
- 赞同数: 7713
- 收藏数: 2242
这个问题比较简单:location.href
和 location.replace
都可以完成页面跳转。
location.href = 'https://bytefish.medium.com'location.replace('https://bytefish.medium.com')
复制代码
TOP5: 如何判断一个字符串是否包含另一个字符串?
- 阅读数: 660万
- 赞同数: 7420
- 收藏数: 1501
和数组一样,字符串也有一个indexOf方法:
var string = "foo";
var substring = "oo";
console.log(string.indexOf(substring) !== -1);
复制代码
在ES6之后,我们还可以使用includes方法:
const string = "foo";
const substring = "oo";
console.log(string.includes(substring));
复制代码
小结
这就是Stack Overflow的JavaScript标签下,有史以来最流行的5个JavaScript问题,你有没有遇到过同类型的问题呢?
Medium
这篇文章的英文版同步的发布于Medium,欢迎各位掘金的朋友到Medium上围观、鼓掌一下。
Top 5 Most Popular JavaScript Questions on Stack Overflow
记得从我上面的链接中点开,这样可以避开Medium付费墙的限制。