菜单

必看的 JavaScript 录像

2019年1月12日 - Bootstrap

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]
var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

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]
var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

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]
for(var i = 0, length = array.length; i < length; i++) {
  console.log(array[i]);
}

必看的 JavaScript 视频

2015/10/30 · 基础技术 ·
视频

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

小提示:

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

2009

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

    1 赞 4 收藏
    评论

图片 1

在ES6中有默认参数这一特点。为了在老版本的浏览器中模拟这一特性,可以应用||操作符,并且将将默认值当做第二个参数传入。假如第一个参数再次回到的值为false,那么第二个值将会以为是一个默认值。如下边这么些示例:

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]

突发性咱们需要对一个变量查检其是否留存或者检查值是否有一个实用值,固然存在就回到true值。为了做这么的说明,大家得以行使!!操作符来促成是万分的便民与简单。对于变量可以利用!!variable做检测,只要变量的值为:0、null、”
“、undefined或者NaN都将重返的是false,反之再次来到的是true。比如下边的言传身教:

2011

  1. Douglas Crockford: Level 7: ECMAScript 5: The New
    Parts
     [57:18]
    图片 2
  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]
conected && login();

您也足以写在如此:

以此也适用于Date,在本例中,它将回到的是岁月戳数字:

倘若你有一段这样的代码:

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

万一有的属性或函数存在于一个目的中,你也可以这样做检测,如下边的代码所示:

赢得数组中最终一个要素

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

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

在这篇作品中将给我们大快朵颐关于于JavaScript的小技巧。这一个小技巧可能在你的实际工作中可能能帮助您解决部分题材。

数组截断

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]
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.pus().apply(arr1,arr2)来代表创造一个新数组。那种措施不是用来创建一个新的数组,其只是将率先个第二个数组合并在协同,同时缩短内存的应用:

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

现今你学会了些有用的JavaScript小技巧。希望这个小技巧能在工作中帮衬你解决部分麻烦,或者说这篇小说对您富有援助。假诺您有一对完美的JavaScript小技巧,欢迎在评论中与我们一并享用。

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

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

在循环中缓存array.length

使用||运算符

将NodeList转换成数组

总结

var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
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

本条技能异常有用,其异常简单,可以交字符串数据转换成数字,但是其只适合用来字符串数据,否则将回来NaN,比如下面的言传身教:

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

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

数组元素的洗牌

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

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

轮换所有

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

对于数组元素的洗牌,不需要选取此外外部的库,比如Lodash,只要这么做:

您可能感兴趣的著作:

其一小技巧紧要用于锁定数组的深浅,即使用于删除数组中的一些元平素说,是十分有效的。例如,你的数组有10个因素,但您只想只要前六个要素,那么你能够透过array.length=5来截断数组。如下面这多少个示例:

Array.prototype.slice(begin,end)用来赢得begin和end之间的数组元素。倘使您不设置end参数,将会将数组的默认长度值当作end值。但多少同学可能不明了这些函数还能接受负值作为参数。假如您设置一个负值作为begin的值,那么你可以得到数组的尾声一个因素。如:

统一数组

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

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]

检测对象中性能

user && user.login();

假定是一个小型数组,这样做很好,虽然你要拍卖的是一个大的数组,那段代码在历次迭代都将会再也总括数组的分寸,这将会招致有些延误。为了避免这种情景出现,可以将array.length做一个缓存:

其一技术很简短,那个在拍卖一个很大的数组循环时,对性能影响将是这一个大的。基本上,我们都会写一个这么的联合迭代的数组:

并规范符

你也足以将变量简写,并且采纳&&和函数连接在一齐,比如下边的言传身教,可以简写成这么:

如果您要合并五个数组,一般意况之下你都会拔取Array.concat()函数:

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

相关文章

发表评论

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

网站地图xml地图