现代 JavaScript 参考

feiwen8772 / modern-js-reference

一份现代 JavaScript 参考,你在现代项目中会经常遇到,以及最新的代码示例

http://www.css88.com/archives/8244

简介

初心

本文档是一份 JavaScript 速查表,你在现代项目中会经常遇到,以及最新的代码示例。

本指南不是为了教你从头开始学习 JavaScript ,而是为了帮助那些可能不熟悉当前代码库(例如 React)所用到 JavaScript 概念的开发人员。

此外,我有时还会提供一些个人的建议,这些建议可能是有争议的,但我也会注意到,当我这么做的时候,这是我个人的建议。 继续阅读

现在就可以使用的5个 ES6 特性

这篇文章介绍了5个 ES6 特性,使你的 JavaScript 代码变的更好。不用说,我们大多数前端开发工程师非常关注 JavaScript 的性能和特性,这就是为什么 ES6 对于我们来说是如此令人兴奋。

ES6的变化是巨大的,是令人兴奋的,也有令人困惑的地方。在本文中,我将介绍5个 ES6 的新特性,您可以立即使用它们来增强你的 JavaScript代码,以及哪些特性不建议使用。 继续阅读

10道典型的JavaScript面试题

在IT界中,JavaScript开发人员的需求量一直居高不下。如果你的能力能够胜任这一角色,那么你有很多机会换一家公司,并提高薪水。但在你被一家公司聘用之前,你必须展示你的技能,以通过面试环节。在本文中,我将向您展示10个 JavaScript 技能典型问题以及其相关解决方案,来面试前端工程师。它们很有意思! 继续阅读

学习 ES2015 新特性

es6features

这份文档最初取自Luke Hoban 优秀的es6features。 在GitHub,去给它一个star吧!

REPL

请务必在在线的REPL中尝试这些功能。
愚人码头注:你可以将示例代码复制到在线的REPL中,查看Babel转译结果。“读取-求值-输出”循环(英语:Read-Eval-Print Loop,简称REPL)是一个简单的,交互式编程环境。

介绍

ECMAScript 2015是一个ECMAScript标准,于2015年6月批准。

ES2015对于该语言来说是一次重要的更新,自2009年ES5标准化以来的第一个重大更新。自从ES5于2009年标准化以来,该语言的第一次重大更新。现在,主要的JavaScript引擎正在逐渐实现这些功能

有关ECMAScript 2015语言的完整规范,请参阅ES2015标准

ECMAScript 2015 新特性

箭头函数和词法this

箭头函数是使用=>语法对函数定义的简写。它们在语法上类似于 C#,Java 8 和 CoffeeScript 中的相关特性。它们支持表达式(Expression bodies)和函数体(Statement bodies)。与函数不同,箭头函数与其上下文代码共享相同的词法this(愚人码头注:箭头函数并没有自己的this,它的this是派生而来的,根据“词法作用域”派生而来)。如果箭头函数在另一个函数体内,它共享其父函数的 arguments 变量。 继续阅读

ES2015 中的箭头函数和词法 this

箭头函数是使用=>语法对函数定义的简写。它们在语法上类似于 C#,Java 8 和 CoffeeScript 中的相关特性。它们支持表达式(Expression bodies)和函数体(Statement bodies)。与函数不同,箭头函数与其上下文代码共享相同的词法this(愚人码头注:箭头函数并没有自己的this,它的this是派生而来的,根据“词法作用域”派生而来)。如果箭头函数在另一个函数体内,它共享其父函数的 arguments 变量。

// 使用表达式(Expression bodies)
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);

// 使用函数体(Statement bodies)
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// 词法`this`
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};

// 词法 arguments
function square() {
  let example = () => {
    let numbers = [];
    for (let number of arguments) {
      numbers.push(number * number);
    }

    return numbers;
  };

  return example();
}

square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

继续阅读

理解JavaScript 中的 this

本文解释JavaScript中的this,希望有助你理解this的工作机制。作为JavaScript程序员,学习this对于你的发展有很大帮助,可以说利大于弊。

this的工作原理

如果一个函数被作为一个对象的方法调用,那么this将被指派为这个对象。

var parent = {
    method: function () {
        console.log(this);
    }
};
 
parent.method();
//< - parent

注意这种行为非常“脆弱”,如果你获取一个方法的引用并且调用,那么this的值不会是parent了,而是window全局对象。这让大多数开发者迷惑。 继续阅读