关于javascript:Y-分钟速成-javascript

源代码下载：javascript-zh.js

Javascript 于 1995 年由网景公司的 Brendan Eich 创造。最后它作为一种简略的，用于开发网站的脚本语言而被创造进去，是用于开发简单网站的 Java 的补充。但因为它与网页联合度很高并且在浏览器中失去内置的反对，所以在网页前端畛域 Javascript 变得比 Java 更风行了。

不过，Javascript 不仅用于网页浏览器，一个名为 Node.js 的我的项目提供了面向 Google Chrome V8 引擎的独立运行时环境，它正在变得越来越风行。

很欢送来自您的反馈，您能够通过下列形式分割到我：@ExcitedLeigh, 或者 l@leigh.net.au.

// 正文形式和 C 很像，这是单行正文
/* 这是多行
   正文 */

// 语句能够以分号完结
doStuff();

// ... 然而分号也能够省略，每当遇到一个新行时，分号会主动插入（除了一些非凡状况）。doStuff()

// 因为这些非凡状况会导致意外的后果，所以咱们在这里保留分号。///////////////////////////////////
// 1. 数字、字符串与操作符

// Javascript 只有一种数字类型 (即 64 位 IEEE 754 双精度浮点 double)。// double 有 52 位示意尾数，足以准确存储大到 9✕10¹⁵ 的整数。3; // = 3
1.5; // = 1.5

// 所有根本的算数运算都如你预期。1 + 1; // = 2
0.1 + 0.2; // = 0.30000000000000004
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7

// 包含无奈整除的除法。5 / 2; // = 2.5

// 位运算也和其余语言一样；当你对浮点数进行位运算时，// 浮点数会转换为 * 至少 * 32 位的无符号整数。1 << 2; // = 4

// 括号能够决定优先级。(1 + 3) * 2; // = 8

// 有三种非数字的数字类型
Infinity; // 1/0 的后果
-Infinity; // -1/0 的后果
NaN; // 0/0 的后果

// 也有布尔值。true;
false;

// 能够通过单引号或双引号来结构字符串。'abc';
"Hello, world";

// 用！来取非
!true; // = false
!false; // = true

// 相等 ===
1 === 1; // = true
2 === 1; // = false

// 不等 !=
1 !== 1; // = false
2 !== 1; // = true

// 更多的比拟操作符 
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true

// 字符串用 + 连贯
"Hello" + "world!"; // = "Hello world!"

// 字符串也能够用 <、> 来比拟
"a" < "b"; // = true

// 应用“==”比拟时会进行类型转换...
"5" == 5; // = true
null == undefined; // = true

// ... 除非你是用 ===
"5" === 5; // = false
null === undefined; // = false 

// ... 但会导致奇怪的行为
13 + !0; // 14
"13" + !0; // '13true'

// 你能够用 `charAt` 来失去字符串中的字符
"This is a string".charAt(0);  // = 'T'

// ... 或应用 `substring` 来获取更大的局部。"Hello world".substring(0, 5); // = "Hello"

// `length` 是一个属性，所以不要应用 ().
"Hello".length; // = 5

// 还有两个非凡的值：`null` 和 `undefined`
null;      // 用来示意刻意设置的空值
undefined; // 用来示意还没有设置的值 (只管 `undefined` 本身理论是一个值)

// false, null, undefined, NaN, 0 和 "" 都是假的；其余的都视作逻辑真
// 留神 0 是逻辑假而  "0" 是逻辑真，只管 0 == "0"。///////////////////////////////////
// 2. 变量、数组和对象

// 变量须要用 `var` 关键字申明。Javascript 是动静类型语言，// 所以你无需指定类型。赋值须要用 `=` 
var someVar = 5;

// 如果你在申明时没有加 var 关键字，你也不会失去谬误...
someOtherVar = 10;

// ... 然而此时这个变量就会在全局作用域被创立，而非你定义的以后作用域

// 没有被赋值的变量都会被设置为 undefined
var someThirdVar; // = undefined

// 对变量进行数学运算有一些简写法：someVar += 5; // 等价于 someVar = someVar + 5; someVar 当初是 10 
someVar *= 10; // 当初 someVar 是 100

// 自增和自减也有简写
someVar++; // someVar 是 101
someVar--; // 回到 100

// 数组是任意类型组成的有序列表
var myArray = ["Hello", 45, true];

// 数组的元素能够用方括号下标来拜访。// 数组的索引从 0 开始。myArray[1]; // = 45

// 数组是可变的，并领有变量 length。myArray.push("World");
myArray.length; // = 4

// 在指定下标增加 / 批改
myArray[3] = "Hello";

// javascript 中的对象相当于其余语言中的“字典”或“映射”：是键 - 值对的无序汇合。var myObj = {key1: "Hello", key2: "World"};

// 键是字符串，但如果键自身是非法的 js 标识符，则引号并非是必须的。// 值能够是任意类型。var myObj = {myKey: "myValue", "my other key": 4};

// 对象属性的拜访能够通过下标
myObj["my other key"]; // = 4

// ... 或者也能够用 .，如果属性是非法的标识符
myObj.myKey; // = "myValue"

// 对象是可变的；值也能够被更改或减少新的键
myObj.myThirdKey = true;

// 如果你想要获取一个还没有被定义的值，那么会返回 undefined
myObj.myFourthKey; // = undefined

///////////////////////////////////
// 3. 逻辑与控制结构

// 本节介绍的语法与 Java 的语法简直完全相同

// `if` 语句和其余语言中一样。var count = 1;
if (count == 3){// count 是 3 时执行} else if (count == 4){// count 是 4 时执行} else {// 其余状况下执行}

// while 循环
while (true) {// 有限循环}

// Do-while 和 While 循环很像，但前者会至多执行一次
var input;
do {input = getInput();
} while (!isValid(input))

// `for` 循环和 C、Java 中的一样：// 初始化; 继续执行的条件; 迭代。for (var i = 0; i < 5; i++){// 遍历 5 次}

// && 是逻辑与, || 是逻辑或
if (house.size == "big" && house.colour == "blue"){house.contains = "bear";}
if (colour == "red" || colour == "blue"){// colour 是 red 或者 blue 时执行}

// && 和 || 是“短路”语句，它在设定初始化值时特地有用 
var name = otherName || "default";

// `switch` 语句应用 `===` 查看相等性。// 在每一个 case 完结时应用 'break'
// 否则其后的 case 语句也将被执行。grade = 'B';
switch (grade) {
  case 'A':
    console.log("Great job");
    break;
  case 'B':
    console.log("OK job");
    break;
  case 'C':
    console.log("You can do better");
    break;
  default:
    console.log("Oy vey");
    break;
}

///////////////////////////////////
// 4. 函数、作用域、闭包

// JavaScript 函数由 `function` 关键字定义
function myFunction(thing){return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"

// 留神被返回的值必须开始于 `return` 关键字的那一行，// 否则因为主动的分号补齐，你将返回 `undefined`。// 在应用 Allman 格调的时候要留神.
function myFunction()
{
    return // <- 分号主动插在这里
    {thisIsAn: 'object literal'}
}
myFunction(); // = undefined

// javascript 中函数是一等对象，所以函数也可能赋给一个变量，// 并且被作为参数传递 —— 比方一个事件处理函数：function myFunction(){// 这段代码将在 5 秒钟后被调用}
setTimeout(myFunction, 5000);
// 留神：setTimeout 不是 js 语言的一部分，而是由浏览器和 Node.js 提供的。// 函数对象甚至不须要申明名称 —— 你能够间接把一个函数定义写到另一个函数的参数中
setTimeout(function(){// 这段代码将在 5 秒钟后被调用}, 5000);

// JavaScript 有函数作用域；函数有其本人的作用域而其余的代码块则没有。if (true){var i = 5;}
i; // = 5 - 并非咱们在其余语言中所冀望失去的 undefined

// 这就导致了人们常常应用的“立刻执行匿名函数”的模式，// 这样能够防止一些长期变量扩散到全局作用域去。(function(){
    var temporary = 5;
    // 咱们能够拜访批改全局对象（"global object"）来拜访全局作用域，// 在 web 浏览器中是 `window` 这个对象。// 在其余环境如 Node.js 中这个对象的名字可能会不同。window.permanent = 10;
})();
temporary; // 抛出援用异样 ReferenceError
permanent; // = 10

// javascript 最弱小的性能之一就是闭包。// 如果一个函数在另一个函数中定义，那么这个外部函数就领有内部函数的所有变量的拜访权，// 即便在内部函数完结之后。function sayHelloInFiveSeconds(name){
    var prompt = "Hello," + name + "!";
    // 外部函数默认是放在部分作用域的，// 就像是用 `var` 申明的。function inner(){alert(prompt);
    }
    setTimeout(inner, 5000);
    // setTimeout 是异步的，所以 sayHelloInFiveSeconds 函数会立刻退出，// 而 setTimeout 会在前面调用 inner
    // 然而，因为 inner 是由 sayHelloInFiveSeconds“闭合蕴含”的，// 所以 inner 在其最终被调用时依然可能拜访 `prompt` 变量。}
sayHelloInFiveSeconds("Adam"); // 会在 5 秒后弹出 "Hello, Adam!"


///////////////////////////////////
// 5. 对象、构造函数与原型

//  对象能够蕴含办法。var myObj = {myFunc: function(){return "Hello world!";}
};
myObj.myFunc(); // = "Hello world!"

// 当对象中的函数被调用时，这个函数能够通过 `this` 关键字拜访其附丽的这个对象。myObj = {
    myString: "Hello world!",
    myFunc: function(){return this.myString;}
};
myObj.myFunc(); // = "Hello world!"

// 但这个函数拜访的其实是其运行时环境，而非定义时环境，即取决于函数是如何调用的。// 所以如果函数被调用时不在这个对象的上下文中，就不会运行胜利了。var myFunc = myObj.myFunc;
myFunc(); // = undefined

// 相应的，一个函数也能够被指定为一个对象的办法，并且能够通过 `this` 拜访
// 这个对象的成员，即便在函数被定义时并没有附丽在对象上。var myOtherFunc = function(){return this.myString.toUpperCase();
}
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"

// 当咱们通过 `call` 或者 `apply` 调用函数的时候，也能够为其指定一个执行上下文。var anotherFunc = function(s){return this.myString + s;}
anotherFunc.call(myObj, "And Hello Moon!"); // = "Hello World! And Hello Moon!"

// `apply` 函数简直齐全一样，只是要求一个 array 来传递参数列表。anotherFunc.apply(myObj, ["And Hello Sun!"]); // = "Hello World! And Hello Sun!"

// 当一个函数承受一系列参数，而你想传入一个 array 时特地有用。Math.min(42, 6, 27); // = 6
Math.min([42, 6, 27]); // = NaN (uh-oh!)
Math.min.apply(Math, [42, 6, 27]); // = 6

// 然而 `call` 和 `apply` 只是长期的。如果咱们心愿函数附着在对象上，能够应用 `bind`。var boundFunc = anotherFunc.bind(myObj);
boundFunc("And Hello Saturn!"); // = "Hello World! And Hello Saturn!"

// `bind` 也能够用来局部利用一个函数（柯里化）。var product = function(a, b){return a * b;}
var doubler = product.bind(this, 2);
doubler(8); // = 16

// 当你通过 `new` 关键字调用一个函数时，就会创立一个对象，// 而且能够通过 this 关键字拜访该函数。// 设计为这样调用的函数就叫做构造函数。var MyConstructor = function(){this.myNumber = 5;}
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5

// 每一个 js 对象都有一个‘原型’。当你要拜访一个理论对象中没有定义的一个属性时，// 解释器就回去找这个对象的原型。// 一些 JS 实现会让你通过 `__proto__` 属性拜访一个对象的原型。// 这尽管对了解原型很有用，然而它并不是规范的一部分；// 咱们前面会介绍应用原型的规范形式。var myObj = {myString: "Hello world!"};
var myPrototype = {
    meaningOfLife: 42,
    myFunc: function(){return this.myString.toLowerCase()
    }
};

myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42

// 函数也能够工作。myObj.myFunc() // = "hello world!"

// 当然，如果你要拜访的成员在原型当中也没有定义的话，解释器就会去找原型的原型，以此类推。myPrototype.__proto__ = {myBoolean: true};
myObj.myBoolean; // = true

// 这其中并没有对象的拷贝；每个对象实际上是持有原型对象的援用。// 这意味着当咱们扭转对象的原型时，会影响到其余以这个原型为原型的对象。myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43

// 咱们晓得 `__proto__` 并非标准规定，实际上也没有规范方法来批改一个已存在对象的原型。// 然而，咱们有两种形式为指定原型创立一个新的对象。// 第一种形式是 Object.create，这个办法是在最近才被增加到 Js 中的，// 因而并不是所有的 JS 实现都有这个办法
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43

// 第二种形式能够在任意版本中应用，不过必须通过构造函数。// 构造函数有一个属性 prototype。然而它 * 不是 * 构造函数自身的原型；相同，// 是通过构造函数和 new 关键字创立的新对象的原型。MyConstructor.prototype = {
    myNumber: 5,
    getMyNumber: function(){return this.myNumber;}
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6
myNewObj2.getMyNumber(); // = 6

// 字符串和数字等内置类型也有通过构造函数来创立的包装类型
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true

// 然而它们并非严格等价
typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0){// 这段代码不会执行，因为 0 代表假}

// 不过，包装类型和内置类型共享一个原型，// 所以你理论能够给内置类型也减少一些性能，例如对 string：String.prototype.firstCharacter = function(){return this.charAt(0);
}
"abc".firstCharacter(); // = "a"

// 这个技巧常常用在“代码填充”中，来为老版本的 javascript 子集减少新版本 js 的个性，// 这样就能够在老的浏览器中应用新性能了。// 比方，咱们晓得 Object.create 并没有在所有的版本中都实现，// 然而咱们依然能够通过“代码填充”来实现兼容：if (Object.create === undefined){ // 如果存在则不笼罩
    Object.create = function(proto){
        // 用正确的原型来创立一个长期构造函数
        var Constructor = function(){};
        Constructor.prototype = proto;
        // 之后用它来创立一个新的对象
        return new Constructor();}
}

更多浏览

Mozilla 开发者网络 提供了优良的介绍 Javascript 如何在浏览器中应用的文档。而且它是 wiki，所以你也能够自行编辑来分享你的常识。

MDN 的 A re-introduction to JavaScript 笼罩了这里提到的绝大多数话题的细节。该导引的大多数内容被限定在只是 Javascript 这个语言自身；如果你想理解 Javascript 是如何在网页中被利用的，那么能够查看 Document Object Model。

Learn Javascript by Example and with Challenges 是本参考的另一个版本，并蕴含了挑战习题。

Javascript Garden 是一个深刻解说所有 Javascript 反直觉局部的导引。

JavaScript: The Definitive Guide 是一个经典的领导参考书。

除了这篇文章的间接贡献者之外，这篇文章也参考了这个网站上 Louie Dinh 的 Python 教程，以及 Mozilla 开发者网络上的 JS Tutorial。

有倡议？或者发现什么谬误？在 Github 上开一个 issue，或者发动 pull request！

原文由 Leigh Brenecki 编写，并由 0 个好心人 批改。
Translated by:Chenbo Li Guodong Qu
© 2022 Leigh Brenecki, Ariel Krakowski
本作品采纳 CC BY-SA 3.0 协定进行许可。