菜单

非看不可的 JavaScript 摄像

2019年9月16日 - Html/Html5

必看的 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]

数组截断

其一小本事主要用于锁定数组的深浅,假设用于删除数组中的一些成分来讲,是卓殊有效的。举个例子,你的数组有拾二个因素,但你只想只要前多个要素,那么您可以透过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)来替代创造一个新数组。这种艺术不是用来创建三个新的数组,其只是将第2个第三个数组合併在一块儿,同有的时候候削减内部存款和储蓄器的行使:

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地图