我不知道还可以用 JS 做的 6 件事

开发 前端
JS 是一种灵活的语言,这种特性让我们经常觉得它是一门最简单的语言,也是最难掌握的语言。我使用 JavaScript 已有很多年了,但我仍然偶然发现一些我不知道的隐藏语法或技巧。

JS 是一种灵活的语言,这种特性让我们经常觉得它是一门最简单的语言,也是最难掌握的语言。我使用 JavaScript 已有很多年了,但我仍然偶然发现一些我不知道的隐藏语法或技巧。

[[333890]]

我们来一直看看,我发现了哪些。

1. Function 构造函数Function()构造函数虽然不是很常用,但是了解一下还是很有必要的。

不管是通过函数定义语句还是函数直接量表达式,函数的定义都要使用 function()关键字。单函数还可以通过Function()构造函数来定义,比如:

  1. const diff = new Function('a''b''return a - b'); 
  2. diff(20,13) // 7 

这一行的实际效果和下面的一行代码是等价的:

  1.  const diff = function(a, b) { 
  2.    return a - b 
  3.  
  4. diff(20, 13) 

2. with 语句

JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式。也就是在指定的代码区域, 直接通过节点名称调用对象。

我们已经知道,用变量的作用域和作用域链(即一个按顺序检索的对象列表)来进行变量名解析,而 with 语句就是用于暂修改作用域链的,其语法为:

  1. with(object) 

该语句可以有效地将object添加到作用域链的头部,然后执行statement,再把作用域链恢复到原始状态。

  1. const book = { 
  2.     author: '前端小智'
  3.     title: '我不知道还可以用 JS 做的 6 件事' 
  4. with(book) { 
  5.     console.log(author); // 前端小智 
  6.     console.log(title); // 我不知道还可以用 JS 做的 6 件事 

使用 with语句的 JavaScript 代码很难优化,因此它的运算速度比不使用with语句的等价代码要慢得多。而且,在with语句中的函数定义和变量初始化可能会产生令人惊讶的、相抵触的行为,因此我们避免使用with`语句。

3. + 操作符

我们可以使用+运算符将字符串转换为数字。除非你想解析为特定的数字类型,否则不需要使用诸如 parseInt() 或 parseFloat() 之类的函数。

  1. const nr = +'1.5'
  2. nr + 1; // 2.5 

4. 给函数赋值属性我们可以给函数赋属性。接着,可以通过为函数分配特定的属性来创建可配置的函数。

  1. function sayHello() { 
  2.     if (sayHello.country = 'US') { 
  3.         return alert('Hi there!'); 
  4.     } 
  5.     if (sayHello.country = 'FR') { 
  6.         return alert('Bonjour !'); 
  7.     } 
  8.     if (sayHello.country = 'GR') { 
  9.             return alert('Guten Tag !'); 
  10.         } 
  11.     return alert('Hi'); 
  12. sayHello.country =  'FR'
  13. sayHello(); // alert('Bonjour !'); 

外,我们可以使用这些函数属性作为计数器或“静态变量”。

5. arguments.callee.caller

我们可以使用arguments.callee.caller来查看哪个函数调用了当前函数。argumentsJS 普通函数的默认值。arguments.callee.caller告诉我们谁调用了该函数。类似于只有一层 console.trace()。

  1. function sayHello() { 
  2.   console.log(arguments.callee.caller) // [Function: start] 
  3.  
  4. (function start() { 
  5.   sayHello() 
  6. })() 

另外arguments.callee表示引用当前正在运行的函数。

  1. function sayHello() { 
  2.   console.log(arguments.callee) // [Function: sayHello] 
  3.  
  4. (function start() { 
  5.   sayHello() 
  6. })() 

6. void 操作符

void 运算符 对给定的表达式进行求值,然后返回 undefined。

  1. void(1); // undefined 
  2. void(true); // undefined 
  3. void(false); // undefined 
  4. void({}); // undefined 

如果你问为什么只需要返回undefined而不是返回就需要一个特殊的关键字undefined:原因是在ES5之前,实际上可以命名一个全局变量undefined,就像这样:var undefined = "hello"或var undefined = 23,大多数浏览器都可以接受它;undefined不会保证标识符实际上是不确定的。因此,要返回实际的未定义值,请使用void运算符。它不是一个非常流行的运算符,并且很少使用。

人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。

作者:Daniel 译者:前端小智 来源:js-craft

 

原文:http://www.js-craft.io/blog/6-things-i-didnt-know-you-can-do-in-javascript/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2021-12-16 10:42:53

苹果备忘录应用程序

2021-07-14 11:25:12

CSSPosition定位

2021-12-29 11:38:59

JS前端沙箱

2010-07-12 10:03:50

ibmdwjava

2011-04-02 13:11:35

JARJava

2024-01-08 07:11:35

2024-11-06 08:32:02

JavaScriptTypeScript数据结构

2021-11-16 08:51:29

Node JavaScript变量类型

2011-04-02 13:35:21

多线程编程多线程java

2024-01-11 11:28:54

2010-03-19 08:45:20

Windows Pho

2013-06-18 11:05:40

Mac Pro开发工具苹果

2020-06-03 08:53:40

CSS伪类 JS

2024-02-05 11:55:41

Next.js开发URL

2017-05-02 11:36:00

Java

2014-11-21 10:25:18

Java

2024-03-25 00:10:00

JSON后端开发

2010-05-19 09:01:00

2011-11-30 13:34:13

2015-06-16 10:25:22

点赞
收藏

51CTO技术栈公众号