菜单

必看的 JavaScript 录像

2019年1月15日 - JavaScript

必看的 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地图