菜单

必看的 JavaScript 录像

2019年1月18日 - jQuery

必看的 JavaScript 视频

2015/10/30 · 基本功技术 ·
视频

去年 Sergey Bolshchikov
发起了一个倡导,视频列表已挺丰硕了。

小提示:

在这篇作品师长给大家享受有关于JavaScript的小技巧。这个小技巧可能在您的实际上工作中或许能匡助你解决一些问题。

2015

  1. Dr. Axel Rauschmayer: Using ECMAScript 6 today
  2. Brendan Eich: ECMAScript Harmony: Rise of the
    Compilers
     [19:17]
  3. Andreas Gal: Dirty Performance Secrets of HTML5 | HTML5
    性能秘籍
     [14:15]
  4. Andre Staltz: What if the user was a function |
    倘使用户是一个函数?
     [32:19]

使用!!操作符转换布尔值

2014

  1. Ilya Grigorik: Website Performance Optimization | 网站性能优化
    (Udacity 课程)
     [1:13:57]
  2. Mark DiMarco: User Interface
    Algorithms
     |
    用户接口算法 [27:41]
  3. Neil Green: Writing Custom
    DSLs
     [29:07]
  4. Philip Roberts: Help, I’m stuck in an
    event-loop
     [20:13]
  5. Eric Bidelman: Polymer and Web Components change everything you
    know about Web
    development
     [36:12]
  6. Alex Russell, Jake Archibald: Bridging the gap between the web
    and apps
     [48:40]
  7. Scott Hanselman: Virtual Machines, JavaScript and
    Assembler
     [25:56]
  8. Jafar Husain: Async JavaScript with Reactive
    Extensions
     [26:38]
  9. John-David Dalton: Unorthodox
    Performance
     [43:39]
  10. Gary Bernhardt: The Birth & Death of
    Javascript
     [29:22]
  11. Addy Osmani: Memory Management
    Masterclass
     [55:06]
  12. Reginald Braithwaite: Invent the future, don’t recreate the
    past
     [39:16]
  13. Kyle Simpson: Syncing
    Async
     [42:25]
  14. Ariya Hidayat: JavaScript and the Browser: Under the
    Hood
     [29:13]
  15. Jafar Husain: Version 7: The Evolution of
    JavaScript
     [1:11:53]
  16. David Nolen: Immutability: Putting The Dream Machine To
    Work
     [22:05]

有时我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,假若存在就回去true值。为了做这样的表达,大家可以行使!!操作符来兑现是分外的方便与简短。对于变量可以使用!!variable做检测,只要变量的值为:0、null、”
“、undefined或者NaN都将回来的是false,反之再次来到的是true。比如下边的示范:

2013

  1. Nat Duca, Tom Wiltzius: Jank Free: Chrome Rendering
    Performance
     [40:53]
  2. Ilya Grigorik: Automating Performance Best Practices with
    PageSpeed
     [46:58]
  3. Eric Bidelman: Web
    Components
     [32:39]
  4. Alex Komoroske, Matthew McNulty: Web Components in
    Action
     [41:28]
  5. Paul Lewis, Peter Beverloo: Device Agnostic
    Development
     [40:44]
  6. John McCutchan, Loreena Lee: A Trip Down Memory Lane with Gmail
    and
    DevTools
     [42:09]
  7. Joe Marini: Upgrading to a Chrome Packaged
    App
     [43:49]
  8. Pete Hunt: React: Rethinking best
    practices
     [29:31]
  9. Martin Kleppe: 1024+ Seconds of JS
    Wizardry
     [31:01]
  10. Yehuda Katz: A tale of two
    MVC’s
     [31:06]
  11. Vyacheslav Egorov: Performance and
    Benchmarking
     [25:41]
  12. Brendan Eich: JavaScript at 18: Legal to
    Gamble
     [25:44]
  13. Mathias Bynens: JavaScript ♥
    Unicode
     [26:12]
  14. Mark Trostler: Testable JavaScript – Architecting Your
    Application for
    Testability
     [45:35]
function Account(cash) {
  this.cash = cash;
  this.hasMoney = !!cash;
}
var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true

var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

2012

  1. Ryan Sandor Richards: Garbage Collection & Heap
    Management
     [32:57]
  2. Addy Osmani: Scaling Your JavaScript Applications
  3. John-David
    Dalton: Lo-Dash
     [25:08]
  4. Gary
    Bernhardt: WAT
     [4:17]
  5. Angus Croll: Break all the
    rules
     [31:29]
  6. Nicholas Zakas: Maintainable
    JavaScript
     [47:04]
  7. Douglas Crockford: Principles of
    Security
     [59:52]

在这些示例中,只要account.cash的值大于0,那么account.hasMoney重临的值就是true。

2011

  1. Douglas Crockford: Level 7: ECMAScript 5: The New
    Parts
     [57:18]
    图片 1
  2. Douglas Crockford: Section 8: Programming Style and Your
    Brain
     [1:06:45]
  3. Ryan Dahl: Introduction to
    Node.js
     [1:06:33]
  4. Alex Russell: Learning to Love
    JavaScript
     [1:03:25]

应用+将字符串转换成数字

2010

  1. Douglas Crockford: Volume One: The Early
    Years
     [1:42:08]
  2. Douglas Crockford: Chapter 2: And Then There Was
    JavaScript
     [1:30:22]
  3. Douglas Crockford: Act III: Function the
    Ultimate
     [1:13:28]
  4. Douglas Crockford: Episode IV: The Metamorphosis of
    Ajax
     [1:33:54]
  5. Douglas Crockford: Part 5: The End of All
    Things
     [1:24:42]
  6. Douglas Crockford: Scene 6:
    Loopage
     [51:52]

其一技能分外有用,其非常简单,能够交字符串数据转换成数字,不过其只适合用来字符串数据,否则将再次来到NaN,比如上边的以身作则:

2009

  1. Nicholas Zakas: Scalable JavaScript Application
    Architecture
     [52:22]
  2. Douglas Crockford: JavaScript: The Good
    Parts
     [1:03:47]

    1 赞 4 收藏
    评论

图片 2

function toNumber(strNumber) {
  return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN

那多少个也适用于Date,在本例中,它将回来的是时刻戳数字:

console.log(+new Date()) // 1461288164385

并原则符

比方你有一段这样的代码:

if (conected) {
  login();
}

您也得以将变量简写,并且利用&&和函数连接在一道,比如下边的以身作则,可以简写成这样:

conected && login();

假使部分特性或函数存在于一个目的中,你也可以那样做检测,如下面的代码所示:

user && user.login();

使用||运算符

在ES6中有默认参数这一特色。为了在老版本的浏览器中模仿这一风味,可以动用||操作符,并且将将默认值当做第二个参数传入。假使第一个参数重临的值为false,那么第二个值将会以为是一个默认值。如下边那些示例:

function User(name, age) {
  this.name = name || "Oliver Queen";
  this.age = age || 27;
}
var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27

var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25

在循环中缓存array.length

以此技术很简短,那些在处理一个很大的数组循环时,对性能影响将是老大大的。基本上,大家都会写一个这样的联合迭代的数组:

for(var i = 0; i < array.length; i++) {
  console.log(array[i]);
}

比方是一个小型数组,这样做很好,假诺您要处理的是一个大的数组,这段代码在每一次迭代都将会另行总结数组的尺寸,这将会促成有的耽误。为了避免这种情景出现,可以将array.length做一个缓存:

var length = array.length;
for(var i = 0; i < length; i++) {
  console.log(array[i]);
}

你也得以写在这么:

for(var i = 0, length = array.length; i < length; i++) {
  console.log(array[i]);
}

检测对象中性能

当您需要检测一些特性是否存在,避免运行未定义的函数或性能时,这么些小技巧就显得很有用。假如你打算定些一些跨兼容的浏览器代码,你也可能会用到这个小技巧。例如,你想行使document.querySelector()来摘取一个id,并且让它能兼容IE6浏览器,可是在IE6浏览器中这些函数是不设有的,那么使用这多少个操作符来检测这些函数是否存在就显示特另外有用,如上面的演示:

if ('querySelector' in document) {
  document.querySelector("#id");
} else {
  document.getElementById("id");
}

在这么些示例中,即便document不设有querySelector函数,那么就会调用docuemnt.getElementById(“id”)。

赢得数组中最终一个要素

Array.prototype.slice(begin,end)用来取得begin和end之间的数组元素。如若您不设置end参数,将会将数组的默认长度值当作end值。但有点同学可能不领会这多少个函数还足以接受负值作为参数。假设你设置一个负值作为begin的值,那么您能够取得数组的末尾一个因素。如:

var array = [1,2,3,4,5,6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

数组截断

以此小技巧紧要用以锁定数组的大大小小,如若用于删除数组中的一些要从来说,是特别管用的。例如,你的数组有10个元素,但你只想假如前多少个因素,那么您可以由此array.length=5来截断数组。如下边这么些示例:

var array = [1,2,3,4,5,6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]

轮换所有

String.replace()函数允许你接纳字符串或正则表明式来替换字符串,本身那么些函数只替换首次面世的字符串,可是你可以运用正则表明多中的/g来模拟replaceAll()函数功效:

var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

联合数组

假若您要合并多少个数组,一般处境之下你都会使用Array.concat()函数:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

下一场这多少个函数并不合乎用来归并六个巨型的数组,因为其将消耗大量的内存来储存新创立的数组。在那种境况之个,可以拔取Array.pus().apply(arr1,arr2)来取代创制一个新数组。这种方法不是用来创立一个新的数组,其只是将首先个第二个数组合并在一道,同时收缩内存的行使:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

将NodeList转换成数组

一旦您运行document.querySelectorAll(“p”)函数时,它或许回到DOM元素的数组,也就是NodeList对象。但以此目标不拥有数组的函数效用,比如sort()、reduce()、map()、filter()等。为了让那么些原生的数组函数功用也能用于其下边,需要将节点列表转换成数组。可以运用[].slice.call(elements)来实现:

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

数组元素的洗牌

对此数组元素的洗牌,不需要动用其他外部的库,比如Lodash,只要这么做:

var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

总结

今昔您学会了些有用的JavaScript小技巧。希望那一个小技巧能在工作中辅助你解决一些难为,或者说这篇随笔对您拥有匡助。如若你有一些理想的JavaScript小技巧,欢迎在评头论足中与我们一道分享。

上述这篇JavaScript必看小技巧(必看)就是小编分享给我们的全体内容了,希望能给我们一个参照,也期望大家多多援助脚本之家。

你或许感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图