天天看点

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

作者:Daniel

译者:前端小智

来源:js-craft

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

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

1. Function 构造函数

Function()

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

不管是通过函数定义语句还是函数直接量表达式,函数的定义都要使用

function()

关键字。单函数还可以通过

Function()

构造函数来定义,比如:

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

复制

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

const diff = function(a, b) {
   return a - b
}

diff(20, 13)           

复制

2. with 语句

JavaScript 有个

with

关键字,

with

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

我们已经知道,用变量的作用域和作用域链(即一个按顺序检索的对象列表)来进行变量名解析,而

with

语句就是用于暂修改作用域链的,其语法为:

with(object)

该语句可以有效地将

object

添加到作用域链的头部,然后执行

statement

,再把作用域链恢复到原始状态。

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

复制

使用 with

语句的 JavaScript 代码很难优化,因此它的运算速度比不使用

with

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

with`语句。

3. + 操作符

我们可以使用

+

运算符将字符串转换为数字。 除非你想解析为特定的数字类型,否则不需要使用诸如

parseInt()

parseFloat()

之类的函数。

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

复制

4. 给函数赋值属性

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

function sayHello() {
    if (sayHello.country = 'US') {
        return alert('Hi there!');
    }
    if (sayHello.country = 'FR') {
        return alert('Bonjour !');
    }
    if (sayHello.country = 'GR') {
            return alert('Guten Tag !');
        }
    return alert('Hi');
}
sayHello.country =  'FR';
sayHello(); // alert('Bonjour !');           

复制

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

5. arguments.callee.caller

我们可以使用arguments.callee.caller来查看哪个函数调用了当前函数。

arguments

JS 普通函数的默认值。

arguments.callee.caller

告诉我们谁调用了该函数。 类似于只有一层

console.trace()

function sayHello() {
  console.log(arguments.callee.caller) // [Function: start]
}

(function start() {
  sayHello()
})()           

复制

另外

arguments.callee

表示引用当前正在运行的函数。

function sayHello() {
  console.log(arguments.callee) // [Function: sayHello]
}

(function start() {
  sayHello()
})()           

复制

6. void 操作符

void

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

undefined

void(1); // undefined
void(true); // undefined
void(false); // undefined
void({}); // undefined           

复制

如果你问为什么只需要返回

undefined

而不是返回就需要一个特殊的关键字

undefined

:原因是在ES5之前,实际上可以命名一个全局变量

undefined

,就像这样:

var undefined = "hello"

var undefined = 23

,大多数浏览器都可以接受它;

undefined

不会保证标识符实际上是不确定的。因此,要返回实际的未定义值,请使用

void

运算符。它不是一个非常流行的运算符,并且很少使用。

原文:http://www.js-craft.io/blog/6...

继续阅读