11+ JavaScript Features You’ve Probably Never Used

最近在备考雅思，空下来就翻译一下技术文章，增加阅读能力。这篇文章来自medium，作者：Chidume Nnamdi，文章原文地址

⚠ 重要 ⚠

这篇文章描述的部分功能已经被弃用了，有些功能被EcmaScript禁用了。这些功能仍然在许多图书馆中很常见，还是值得我们学习了解的。

仅供参考。

标记模板字符串

taggingThis`Hey!!, I'm  ${name} !!`

如果已经用过React样式组件化，那么就已经用过标记模板字符串。
带有模板标记的字符串可以更好的控制字符串解析。允许我们使用函数来解析模板字符串。

taggingThis`Hey!!, I'm  ${name} !!`

taggingThis是一个功能。标记函数的第一个参数包含字符串值的数组，其余参数与表达式相关。

function taggingThis(strings, ...vals) {
    //...
}
taggingThis`Hey!!, I'm  ${name} !!`

strings参数将保持在[ "Hey!!, I'm ", ' !!' ]，其余的参数传递到数组中，vals[ 'Nnamdi' ]。

这个taggingThis函数里面，可以操作入参和返回不同内容。

function taggingThis(strings, ...vals) {
    return strings[0] + vals[0] + strings[1]
}
const name = "Nnamdi"
taggingThis `Hey!!, I'm  ${name} !!` // Hey!!, I'm  Nnamdi !!

样式组件标记字符串

逗号运算符

逗号运算符分割表达式和返回链中的最后一个表达式。

let expr = (99, 88, 77)
expr // 77

有三个表达式99，88和77。所有的表达式都被求值和最后一个被赋值给expr。

下面这个for循环：

for(let i = 0, ii = 1; i< 10; i++, ii--) { ... }

当想写一个简短的lambda函数，逗号运算符会派上用场。

const lb = (a, b, arr) => (arr.push(a*b), a*b)

这里面有两个语句，第一个语句将乘法结构推入数组arr，第二个语句是a*b。第二个结果就是返回给回调者的内容。

三元运算符逗号也是很有用，和短lambda函数语法相同，仅接受表达式，不是接受语句。

with语句

⚠注意⚠
通常不建议使用with语句，已经被废弃了。在严格模式下被禁止了。使用with会增加js语言性能和安全上的问题。

with是JS中的关键字。用于扩展语句的作用于链。

下面这样使用：

with(expression)
    statement
// OR
with(expression) {
    statement
    statement
    ...
}

计算表达式并围绕表达式创建作用域。with语句的表达式和父作用域在大括号里面。

const a = 45
let b = 8
var f = 909
with(f) {
    log(f, b, a) // 909 8 45
}

f是包裹在作用域链中。f和with语句块外面声明的外部变量在with语句块里面可见。

注意，let和const在with语句里面声明的变量只能在语句里面可以用，外部不可以调用。

with(f) {
    log(f, b, a) // 909 8 45
    let withinF = 20
}
log(withinF) // undefined

调用withinF方法，将会抛出ReferenceError错误,因为变量withinF只存在with语句块里面。

尽量避免使用with。

更多细节

in

in也是一个关键字，检查对象里面存在的属性。在for..in循环中就使用，但没有意识到in就是关键字。

如果对象里面存在这个属性in将返回true，否则将返回false。

const o = {
    prop: 90
}
log("prop" in o) // true

上面in是独立使用的，并没有for...in循环。

将检查prop是否可作为o对象里面的属性使用。返回ture，因为已经在o里面定义了prop。

如果检查未定义的属性：

const o = {
    prop: 90
}
log("prop1" in o) // false

打印出false。因为prop1在o这个对象里面没有定义。

已经用过这些功能了吗？

更多了解

数组构造函数

知道吗？可以不用传统的方式定义数组。

const arr = [90,88,77]

用数组构造函数

const arr = new Array(90, 88, 77)

传递给构造函数的参数排序将构成其索引的基础。

90第一个参数索引是0，88第二参数索引是1，77最后一个参数索引是2.

arr[0] // 90
arr[1] // 88
arr[2] // 77

用new Array(...)和使用数组是一样的。

那么

const arr = new Array(90, 88, 77)

同下面是一样的

const arr = [90, 88, 77]

有人认为使用数组构造函数功能有些缺点或不一致：
Why never use new Array in Javascript

使用new的方式创建一个数组，适用于构造函数new Array()的参数大于或等于2的情况。

这样做

const arr = new Array(90, 88, 77)

将创建数组[90, 88, 77].因为new Array(..)的参数为3，即>=2.

给new Array(..)传递一个参数，将导致JS引擎为传递参数大小的数组分配空间。

const arr = new Array(6)

将创建一个包含6项或元素的数组，长度为6。

const arr = new Array(6)
arr // [ <6 empty items> ]
arr.length // 6

const arr = new Array(6)同下：

const arr = [, , , , , ]
arr // [ <6 empty items> ]
arr.length // 6

如果说这是JS不一致或偏激的功能，我不会同意。这在EcmaScript规范中。


这并不矛盾。规范中都有描述。在给出结论之前，我们首先应该始终先阅读语言的规范。

Function构造函数

可以用Function构造函数定一个一个Function。

接下来讲清楚。在JS里我们定义一个函数像这样：

const mul = (a, b) => a * b

// OR

function mul(a, b) {
    return a * b
}

// OR

const mul = function(a, b) {
    return a * b
}

我们仍然可以像下面这样做：

const mul = new Function("a", "b", "return a * b")

传递给Function的参数形成函数的参数和主体。mul变量变成函数的名称。

最后的参数将变成函数的主体，那么最后参数的前面将会变成函数的参数。

在mul中，参数a和b是函数将接收的参数，参数return a * b是函数的主体。a和b相乘然后返回结果。

调用函数在括号里面传参数mul(…)：

const mul = new Function("a", "b", "return a * b")

log(mul(7, 8)) // 56

根据MDN 文档：

直接调用构造函数可以动态创建函数，但存在安全和评估方面类似的（但重要性不高）问题。但是，与eval不同，Function构造函数创建的函数仅在全局范围内执行。

更多内容

解构数组

我们可以使用元素的索引来分解数组的元素。

const arr = [99, 88, 77]

元素99, 88, 77有索引0, 1, 2.从数组arr中获取元素99，我们将其作为属性传递给arr，

arr[1]

就像处理对象一样：

let o = {
    prop: 99
}
o[prop] // 99

可以像这样从o对象里面解构属性：

const {prop} = o
prop // 99

同样可以这样操作数组：

const arr = [99, 88, 77]

const { 1: secA } = arr
secA // 88

const { 0: firstA, 1: secA, 2: thirdA  } = arr

firstA // 99
secA // 88
thirdA // 77

我们使用索引号提取元素。索引是定义数组中元素位置的属性。

const arr = [99, 88, 77]

和下面的相同：

const arr = {
    0: 99,
    1: 88,
    2: 77,
    length: 3
}

数组也是对象，这就是为什么用对象的方式去解构数组效果一样，但还有一种特殊的语法解构数组：

const [first, second, third] = arr;

尽可能的避免知道数组中的特定位置信息（开始索引，结束索引）。

Reducing Array contents using the length property

可以操作length属性减少数组。

数组中的length属性是指数组中的长度。

const arr = [99, 88, 77]
arr.length // 3

减少length属性，JS引擎将元素减少为与length属性。

const arr = [99, 88, 77]
arr.length // 3
arr.length = 1
arr // [ 99 ]

arr的length属性更改为1，因此从右侧减少了元素，使其长度等于设置的length属性的值。
如果增加length属性，JS引擎将会增加元素（未定义），使数组元素长度符合length属性值。

const arr = [99, 88, 77]
arr.length // 3
arr.length = 1
arr // [ 99 ]

arr.length = 5
arr // [ 90, <4 empty items> ]

数组中只有一个，如果增加长度到5，那么增加了4个空到数组里面，使数组长度达到5.

Arguments

用arguments获取函数传递的参数。这样做的好处，可以使用arguments对象传参数给函数，无需确切的定义函数参数。

function myFunc() {
    arguments[0] // 34
    arguments[1] // 89
}

myFunc(34,89)

arguments对象是数组索引。也就是说，属性是数字，所以就可以通过键值索引。
arguments对象是通过Arguments类实例化的，该类具有一些很酷的属性。

arguments.callee.name这是指当前被调用的函数名称。

function myFunc() {
    log(arguments.callee.name) // myFunc
}

myFunc(34, 89)

arguments.callee.name引用调用当前执行函数的函数的名称。

function myFunc() {
    log(arguments.callee.name) // myFunc
    log(arguments.callee.caller.name) // myFuncCaller
}

(function myFuncCallee() {
    myFuncCaller(34, 89)
})()

可变参数在函数中是特别有用的。

更多内容

Skip the brackets

实例化对象，可以忽略括号().

例如：

class D {
    logger() {
        log("D")
    }
}

// Normally, we do this:
(new D()).logger() // D

// Also, we can skip the ():
(new D).logger() // D
// and it still works

括号是可选的，即使在内置类中也是如此。

(new Date).getDay()
(new Date).getMonth()
(new Date).getYear()

void operator

void是JS中的关键字，是一个陈述语句，然后返回undefined.

例如：

class D {
   logger() {
        return 89
    }
}

const d = new D

log(void d.logger()) // undefined

logger方法应该返回89，但void关键字将无效并返回undefined.

之前未定义的值可以被分配给另一个值，会伪造定义。void操作符可以确保真正的undefined。用于最小化目的。

更多内容

Function property

可以在函数中设置属性：

function func() {
    func.prop1 = "prop1"
}
func.prop2 = "prop2"

函数也是对象，所以上面的写法是有效的。当使用对象时，Function属性将是Function所有实例的静态属性。

const j1 = new func()
const j2 = new func()
j1.prop1 // prop1
j2.prop1 // prop1
j1.prop1 = "prop1 changed"
j2.prop1 // prop1 changed

当用作是函数时，将是全局属性。

function func() {
    func.prop1 === undefined ? func.prop1 = "yes" : null
    if(func.prop1 === "yes")
        log("Prop with Yes")
    if (func.prop1 == "no")
        log("Prop with No")
}
func() // Prop with Yes
func.prop1 = "no"
func() // Prop with No

Inheritance via proto

_proto_是从JavaScript中的对象继承属性的方法。
Object.prototype 的 __proto__ 属性是一个访问器属性（一个getter函数和一个setter函数）, 暴露了通过它访问的对象的内部[[Prototype]] (一个对象或 [null])。

看一个例子：

// proto.js
const log = console.log
const obj = {
    method: function() {
        log("method in obj")
    }
}
const obj2 = {}
obj2.__proto__ = obj
obj2.method()

两个对象字面量：obj和obj2都有一个merhod属性方法。obj2是一个空对象字面量，没有属性。

接下来，访问obj2的__proto__，并将obj赋值给它。通过Object.prototype将obj所有的可访问的属性赋值给obj2.这就是为什么在没有定义的情况下可以调用obj2上面的method，而且没有报错。

$ node proto
method in obj

obj2继承了obj的属性，那么在它的属性里面，method方法将可用。

proto用于对象，例如：object literal, Object, Array, Function, Date, RegEx, Number, Boolean, String.

Unary + Operator

一元+操作符将其操作数转换为Number类型。

+"23" // 23
+{} // NaN
+null // 0
+undefined // NaN
+{ valueOf: () => 67 } // 67
+"nnamdi45" // NaN

当我们想快速将变量转换为Number类型时，这非常方便。

Unary — Operator

一元运算符将其操作数转换为Number类型，然后取反。
该运算符将一元+运算符的结果取反。首先，它将操作数转换为Number值，然后取反该值。

-"23" // -23

字符串“23”将转换为Number类型，得到23.然后，正数将会转换为复数形式-23.

-{} // NaN
-null // -0
-undefined // NaN
-{ valueOf: () => 67 } // -67
-"nnamdi45" // NaN

如果转换为数值的结果为NaN,则不会取反。

取负+0产生-0，取负-0产生+0。

- +0 // -0
- -0 // 0

Exponentiation ** operator

该运算符用于查找数字的指数。数字的幂上升到一个确定的级。
在数学中，如果2的3次方（找到2的指数），则意味着将2乘以三次：

2 * 2 * 2

我们可以用**运算符在JS中相同的操作：

2 ** 3 // 8
9 ** 3 // 729

Conclusion

😀JS中有很多很棒的功能。即将推出更多功能，将不断更新。

如果拥有或发现了JS很少使用的任何功能，可以在评论中回复。很高兴能知道这些😀。

翻译结束！

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350