JavaScript 基础
JavaScript 是一门所有现代 Web 浏览器都支持的高级编程语言。
JavaScript 中的注释方式有以下两种：
- 使用//注释掉当前行的代码，
// 这是一条单行注释。 - 使用多行注释来注释你的代码，以/开始，用/来结束，
/* 这是一个多行注释 */
变量
1、变量的定义
在计算机科学中，数据就是一切，它对于计算机意义重大。JavaScript 提供七种不同的数据类型，它们是undefined（未定义）， null（空），boolean（布尔型），string（字符串），symbol(符号)，number（数字），和object（对象）。
变量 允许计算机以一种动态的形式来存储和操作数据，通过操作指向数据的指针而不是数据本身来避免了内存泄露，以上的七种数据类型都可以存储到一个变量中。
通过在变量的前面使用关键字var，声明一个变量：var ourName; ，创建一个名为ourName的变量，在 JavaScript 中我们以分号结束语句。
变量名称可以由数字、字母、美元符号$ 或者 下划线_组成，但是不能包含空格或者以数字为开头。好的变量名，见名知义，如： var myName;
在 JavaScript 中所有的变量和函数名都是大小写敏感的。要区别对待大写字母和小写字母。MYVAR与MyVar和myvar是截然不同的变量。
使用驼峰命名法来书写一个 Javascript 变量，在驼峰命名法中，变量名的第一个单词的首写字母小写，后面的单词的第一个字母大写。如：var someVariable; var anotherVariableName;
2、变量的赋值
在 JavaScript 中，你可以使用赋值运算符将值存储在变量中。
myVariable = 5; ，这条语句把Number类型的值5赋给变量myVariable。
赋值过程是从右到左进行的。在将值分配给运算符左侧的变量之前，将解析=运算符右侧的所有内容。
myVar = 5; // 数值5被赋给变量myVar中，没有 var 声明的变量的全局变量
myNum = myVar; // 将变量myVar解析为5并将其赋给myNum变量
通常在声明变量的时候会给变量初始化一个初始值。
var myVar = 0; // 创建一个名为 myVar 的变量并指定一个初始值0。
3、undefined 未初始化的变量
当 JavaScript 中的变量被声明的时候，程序内部会给它一个初始值undefined。当你对一个值为undefined的变量进行运算操作的时候，算出来的结果将会是NaN，NaN的意思是"Not a Number"。当你用一个值是undefined的变量来做字符串拼接操作的时候，它会输出字符串"undefined"。
var a; a = a + 1; console.log(a); // NaN
var b; b = b + 5; console.log(b); // NaN
var c; c = c + " String!"; console.log(c); // undefined String!
运算符
| 运算符 | 含义 | 实例 | ||
|---|---|---|---|---|
| +、-、*、/、% | 加、减、乘、除、取余，算数运算符 | myVar = 5 + 10; myDecimal = 2.0 * 2.5; | ||
| i++、++i、i--、--i | 自增、自减，等价于 i=i+1、i=i-1，但 i++ 先运算输出再加1，++i 是先加1再做运算 | var myVar = 87;myVar++; 等价于 var myVar = 87;myVar = myVar + 1; | ||
| =、+=、-=、*=、/=、%= | 赋值、复合赋值 | myVar = myVar + 5; 等价于 myVar += 5; | ||
| &&、 | 、！ | 与、或、非，逻辑运算符 | !false | |
| ==、===、!=、!==、>、<、>=、<= | 等于、全等、不等、全不等、大于、小于、大于等于、小于等于 | x=5; x==8 为 false | ||
| ? : | 三元运算符 | condition ? statement-if-true : statement-if-false; |
数据类型
在JavaScript中，你可以使用typeof运算符确定变量的类型或值，typeof 3 // 返回 'number' 。
简单数据类型：
number ：整数（-1，0，1）、浮点数（-1.1，1.1）
-
stirng ：用单引号或双引号包裹着，var myName = "Daenerys Targaryen";
- 字符串有特殊字符需要使用反斜杠(
\)转义，var sampleStr = "Alan said, "Peter is learning JavaScript"."; - 使用单引号包裹双引号或者相反，conversation = 'Finn exclaims to Jake, "Algebraic!"';
- 字符串中的转义序列：' 、" 、\ 、\n 、\r 、\t 、\b(退格) 、\f (换页符)
- 用加号连接字符串，var myVar = 'My name is Alan,' + ' I concatenate.'
- 在字符串变量或字符串后面写上
.length来获得字符串变量字符串值的长度，lastNameLength = lastName.length; - 方括号获取在字符串中的特定
index（索引）处获取字符，firstLetterOfLastName = lastName[0];
- 字符串有特殊字符需要使用反斜杠(
-
array ：以左方括号
[开始定义一个数组，以右方括号]结束，里面每个元素之间用逗号隔开，var myArray = ["dragon", 22];- 数组的嵌套：var myArray = [["Game of Thrones", 8], ["golden state warriors", 4]];
- 通过索引访问数组中的数据：var myData = myArray[0];
- push：追加到最后， myArray.push(["dog", 3]);
- pop：抛出最后的，var removedFromMyArray = myArray.pop();
- shift：移除第一项，var removedFromMyArray = myArray.shift();
- unshift：添加到第一项，myArray.unshift(["Paul", 35]);
boolean：布尔，布尔值要么是 true 要么是 false
-
object：对象
- 对象和数组很相似，数组是通过索引来访问和修改数据，而对象是通过属性来访问和修改数据。
- 对象适合用来存储结构化数据，var cat = { "name": "Whiskers", "legs": 4, "tails": 1, "enemies": ["Water", "Dogs"] };
- 有两种方式访问对象属性，一个是点操作符(
.)，一个是中括号操作符([])。 - 删除对象的属性：delete ourDog.bark;
- 测试对象的属性：myObj.hasOwnProperty("top"); 返回 true 或者 false
- JavaScript 对象是处理灵活数据的一种方法。它可以储存字符串，数字，布尔值，函数，和对象以及这些值的任意组合。
- JavaScript Object Notation 简称
JSON是用于存储数据的相关数据交换格式。 - 数组中有多个 JSON 对象的时候，对象与对象之间要用逗号隔开。
函数
在 JavaScript 中，我们可以把代码的重复部分抽取出来，放到一个函数中。
函数的参数parameters在函数中充当占位符(也叫形参)的作用，参数可以为一个或多个。调用一个函数时所传入的参数为实参，实参决定着形参真正的值。简单理解：形参即形式、实参即内容。
function reusableFunction() {
console.log("Hi World");
} // 定义一个函数
reusableFunction(); // 使用函数名调用
function testFun(param1, param2) {
console.log(param1, param2);
} // 接收两个参数的函数
testFun("Hello", "World"); // 函数中，param1等于“Hello”，param2等于“World”
function processArg(num) {
return (num + 3) / 5;
} // 使用 return 返回函数结果，没有 return 返回的值时 undefined
作用域
在 JavaScript 中，作用域涉及到变量的作用范围。在函数外定义的变量具有 全局 作用域。这意味着，具有全局作用域的变量可以在代码的任何地方被调用。
没有使用var关键字定义的变量，会被自动创建在全局作用域中，形成全局变量。当在代码其他地方无意间定义了一个变量，刚好变量名与全局变量相同，这时会产生意想不到的后果。因此你应该总是使用var关键字来声明你的变量。
在一个函数内声明的变量，以及该函数的参数都是局部变量，意味着它们只在该函数内可见。
一个程序中有可能具有相同名称的局部变量 和全局变量。在这种情况下，局部变量将会优先于全局变量。
内置函数
Math.random()用来生成一个在0（包括 0）到1（不包括 1）之间的随机小数，因此Math.random()可能返回 0 但绝不会返回 1。
Math.floor()向下取整 获得它最近的整数，Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;
parseInt()函数解析一个字符串返回一个整数，var a = parseInt("007");
流程控制
1、用 if 语句来表达条件逻辑
if (val > 5) {
result = "Bigger than 5";
} // if ...
if (num > 10) {
return "Bigger than 10";
} else {
return "10 or Less";
} // if ... else ...
if (num > 15) {
return "Bigger than 15";
} else if (num < 5) {
return "Smaller than 5";
} else {
return "Between 5 and 15";
} // if ... else if ... else
2、使用 Switch 语句从许多选项中进行选择，case 中执行的是严格相等===
switch (num) {
case value1:
statement1;
break;
case value2:
statement2;
break;
...
default:
defaultStatement;
break;
}
3、while 循环
var ourArray = [];
var i = 0;
while(i < 5) {
ourArray.push(i);
i++;
}
4、for 循环，for ([初始化]; [条件判断]; [计数器])
var ourArray = [];
for (var i = 0; i < 5; i++) {
ourArray.push(i);
}
var arr = [10,9,8,7,6];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
var arr = [ [1,2], [3,4], [5,6] ];
for (var i=0; i < arr.length; i++) {
for (var j=0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}
5、do...while 循环，它会先执行do里面的代码，如果while表达式为真则重复执行，反之则停止执行。
var ourArray = [];
var i = 0;
do {
ourArray.push(i);
i++;
} while (i < 5);
ES6
ECMAScript 是 JavaScript 的标准化版本，它旨在统一语言语言的规范和功能。所有主流的浏览器或者 Javascript 的运行环境都支持这个规范，因此 ECMAScript 和 JavaScript 的术语是通用的。在2015年，ECMAScript 发布了被称为 ECMAScript 6 (ES6) 的最新版本。
var 和 let 关键字之间的差异
使用var关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题：
var camper = 'James';
var camper = 'David';
console.log(camper); // 打印出 'David'
在 ES6 中引入了新的关键字let来解决var关键字带来的潜在问题。如果你在上面的代码中，使用了let关键字来代替var关键字，结果会是一个报错。
let camper = 'James';
let camper = 'David'; // 报错 Uncaught SyntaxError:...has already been declared
请注意"use strict"。这代表着开启了严格模式，用于检测常见的代码错误以及"不安全"的行为，例如："use strict"; x = 3.14; // x 没有声明导致了报错
当你使用var关键字来声明一个变量的时候，这个变量会被声明成全局变量，或是函数内的局部变量。
let关键字的作用类似，但会有一些额外的特性。如果你在代码块、语句或表达式中使用关键字let声明变量，这个变量的作用域就被限制在当前的代码块，语句或表达式之中。
var numArray = [];
for (var i = 0; i < 3; i++) {
numArray.push(i);
} // 当使用var关键字的时候，i会被声明成全局变量。当i++执行的时候，它会改变全局变量的值。
console.log(numArray); // 返回 [0, 1, 2]
console.log(i); // 返回 3
var printNumTwo;
for (var i = 0; i < 3; i++) {
if(i === 2){
printNumTwo = function() { return i; };
}
} // i 发生了改变，函数printNumTwo()返回的是全局变量i的值，不是for循环中创建函数时 i 的值
console.log(printNumTwo()); // 返回 3
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() { return i; };
} // i在全局作用域中没有声明，所以它没有被定义，它的声明只会发生在for循环内
}
console.log(printNumTwo()); // 返回 2
console.log(i); // 返回 "没有定义 i 变量"
用 const 关键字声明只读变量
let并不是唯一的新的声明变量的方式。在 ES6 里面，你还可以使用const关键字来声明变量。
const拥有let的所有优点，所不同的是，通过const声明的变量是只读的。这意味着通过const声明的变量只能被赋值一次，而不能被再次赋值。
"use strict"
const FAV_PET = "Cats";
FAV_PET = "Dogs"; // 报错 Uncaught TypeError: Assignment to constant variable.
对象（包括数组和函数）在使用const声明的时候依然是可变的。使用const来声明只会保证它的标识不会被重新赋值。
"use strict";
const s = [5, 6, 7];
s = [1, 2, 3]; // 试图给 const 变量赋值，报错
s[2] = 45; // 与用 var 或 let 声明的数组一样，这个操作也会成功
console.log(s); // 返回 [5, 6, 45]
防止对象改变 ：const声明并不会真的保护你的数据不被改变。为了确保数据不被改变，JavaScript 提供了一个函数Object.freeze来防止数据改变。
当一个对象被冻结的时候，你不能再对它的属性再进行增、删、改的操作。任何试图改变对象的操作都会被阻止，却不会报错。
let obj = {
name:"FreeCodeCamp",
review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad"; // obj 对象被冻结了，这个操作会被忽略
obj.newProp = "Test"; // 也会被忽略，不允许数据改变
console.log(obj); // { name: "FreeCodeCamp", review:"Awesome"}
使用箭头函数编写简洁的匿名函数
在 JavaScript 里，我们会经常遇到不需要给函数命名的情况，尤其是在需要将一个函数作为参数传给另外一个函数的时候。通常会使用以下语法：
const myFunc = function() {
const myVar = "value";
return myVar;
}
ES6 提供了其他写匿名函数的方式的语法糖。你可以使用箭头函数：
const myFunc = () => {
const myVar = "value";
return myVar;
}
当不需要函数体，只返回一个值的时候，箭头函数允许你省略return关键字和外面的大括号。
const myFunc= () => "value" // 这段代码仍然会返回value。
编写带参数的箭头函数：
const doubler = (item) => item * 2; // 给传入的数值乘以 2 并返回结果
编写高阶箭头函数：箭头函数在类似map()，filter()，reduce()等需要其他函数作为参数来处理数据的高阶函数里会很好用。
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";
const squaredIntegers = (arr.filter((cur) => cur > 0 && cur % 1 == 0)).map((cur) => Math.pow(cur,2)); // 计算 squaredIntegers 数组里正整数的平方
return squaredIntegers;
};
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers); // [16, 1764, 36]
设置函数的默认参数：ES6 里允许给函数传入默认参数，来构建更加灵活的函数。
function greeting(name = "Anonymous") {
return "Hello " + name;
}
console.log(greeting("John")); // Hello John
console.log(greeting()); // Hello Anonymous
将 rest 操作符与函数参数一起使用，在rest操作符的帮助下，你可以创建有一个变量来接受多个参数的函数。这些参数被储存在一个可以在函数内部读取的数组中。
function howMany(...args) {
return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2)); // 输出：You have passed 3 arguments.
console.log(howMany("string", null, [1, 2, 3], { })); // 输出：You have passed 4 arguments.
// rest操作符可以避免查看args数组的需求，并且允许我们在参数数组上使用map(),fiter()，和reduce()。
使用 spread 运算符展开数组项
var arr = [6, 89, 3, 45]; // ES5 代码
var maximus = Math.max.apply(null, arr); // 返回 89
// 必须使用Math.max.apply(null,arr)，是因为直接调用Math.max(arr)会返回NaN。
// Math.max()函数需要传入的是一系列由逗号分隔的参数，而不是一个数组。
// Function.apply()是JS的一个OOP特性，一般用来模拟继承和扩展this的用途
// XXX.apply是一个调用函数的方法，其参数为：apply(Function, Args)，
// Function为要调用的方法，Args是参数列表，当Function为null时，默认为上文，
const arr = [6, 89, 3, 45]; // ES6 代码
const maximus = Math.max(...arr); // 返回 89
// ...arr返回了一个“打开”的数组。或者说它 展开 了数组。
// 展开操作符只能够在函数的参数中，或者数组之中使用
const spreaded = ...arr; // 将会发生语法错误
使用解构赋值从对象中分配变量
var voxel = {x: 3.6, y: 7.4, z: 6.54 }; // ES5 代码
var x = voxel.x; // x = 3.6
var y = voxel.y; // y = 7.4
var z = voxel.z; // z = 6.54
const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54 ES6 代码
const { x : a, y : b, z : c } = voxel; // a = 3.6, b = 7.4, c = 6.54 将voxel.x,voxel.y,voxel.z的值分别赋给a,b,c，
// 使用解构赋值从嵌套对象中分配变量
const a = {
start: { x: 5, y: 6},
end: { x: 6, y: -9 }
};
const { start : { x: startX, y: startY }} = a;
console.log(startX, startY); // 5, 6
// 使用解构赋值从数组中分配变量
const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5
// 使用解构赋值配合 rest 操作符来重新分配数组元素
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b); // 1, 2
console.log(arr); // [3, 4, 5, 7]
// 使用解构赋值将对象作为函数的参数传递
const profileUpdate = (profileData) => {
const { name, age, nationality, location } = profileData; // 对这些变量执行某些操作
}
// 等价于
const profileUpdate = ({ name, age, nationality, location }) => {
/* 对这些参数执行某些操作 */
}
使用模板字面量创建字符串
模板字符串是 ES6 的另外一项新的功能。这是一种可以轻松构建复杂字符串的方法。
使用的{和}，并将其放在字符串里就可以了。不再需要使用+运算符。
其次，在例子使用了反引号（`），而不是引号（'或者"）将字符串括了起来，并且这个字符串可以换行。
const person = {
name: "Zodiac Hasbro",
age: 56
};
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;
console.log(greeting); // Hello, my name is Zodiac Hasbro! // I am 56 years old.
使用简单字段编写简洁的对象字面量声明：
const getMousePosition = (x, y) => ({
x: x,
y: y
}); // 返回拥有2个属性的对象的简单函数
// ES6 提供了一个语法糖，消除了类似`x: x`这种冗余的写法.你可以仅仅只写一次`x，解释器会自动将其转换成x: x`。
const getMousePosition = (x, y) => ({ x, y });
// 用 ES6 编写简洁的函数声明
const person = {
name: "Taylor",
sayHello() {
return `Hello! My name is ${this.name}.`;
}
};
使用 class 语法定义构造函数：
var SpaceShuttle = function(targetPlanet){
this.targetPlanet = targetPlanet;
} // ES5 构造函数写法
var zeus = new SpaceShuttle('Jupiter');
class SpaceShuttle {
constructor(targetPlanet){
this.targetPlanet = targetPlanet;
} // ES6 构造函数写法
}
const zeus = new SpaceShuttle('Jupiter');
使用 getter 和 setter 来控制对象的访问：
- Getter 函数的作用是可以让返回一个对象私有变量的值给用户，而不需要直接去访问私有变量。
- Setter 函数的作用是可以基于传进的参数来修改对象中私有变量的值。这些修改可以是计算，或者是直接替换之前的值。
class Book {
constructor(author) {
this._author = author;
}
// getter
get writer(){
return this._author;
}
// setter
set writer(updatedAuthor){
this._author = updatedAuthor;
}
}
const lol = new Book('anonymous');
console.log(lol.writer); // anonymous
lol.writer = 'wut';
console.log(lol.writer); // wut
了解 import 和 require 之间的差异
在过去，我们会使用require()函数来从外部文件或模块中引入函数或者代码。这时候会遇到一个问题：有些文件或者模块会特别大，但你却往往只需要引入其中的一些核心代码。
ES6 给我们提供了import这个便利的工具。通过它，我们能够从外部的文件或者模块中选择我们需要的部分进行引入，从而节约载入的时间和内存空间。
想象math_array_functions拥有大概20个函数，但是我只需要countItems这一个函数在我当前的文件里。使用老的require()方式会强制我引入所有20个函数。而使用新的import语法，我可以只引入需要的那个函数：
import { countItems } from "math_array_functions" // 只引入需要的那个函数
import { function } from "file_path_goes_here" // 我们还可以用同样的方式来引入变量！
在许多的例子中，在文件的路径前会加上./；否则， node.js 会先尝试去node_modules目录中寻找依赖项。
用 export 来重用代码块 ：import语句是如何从大文件中引入其中的部分代码的。为了让其正常的工作，我们还必须了解一个与之相关的语句，叫做export。当我们想要一些代码——函数或者变量——在其他文件中使用，我们必须将它们导出来供其他文件导入。
const capitalizeString = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
export { capitalizeString } //如何导出函数。
export const foo = "bar"; //如何导出变量。
// 等价于
const foo = "bar";
export { capitalizeString, foo } // 将你所有的export语句打包成一行
用 * 从文件中导入所有内容 ：用import语法从文件中导入所有的内容。
import * as myMathModule from "math_functions";
myMathModule.add(2,3);
myMathModule.subtract(5,3);
用 export default 创建一个默认导出 ：在文件中只有一个值需要导出的时候，你通常会使用这种语法。它也常常用于给文件或者模块创建返回值。
当使用export default去声明一个文件或者模块的返回值，你在每个文件或者模块中应当只默认导出一个值。特别地，你能将export deafult与var，let与const一起使用。
export default function add(x,y) {
return x + y;
}
导入一个默认的导出 ：与导出值的方法不同，导入默认导出的写法仅仅只是简单的讲变量名写在import之后。
// 有一个add函数, 它在"math_functions"文件里默认被导出
import add from "math_functions";
add(5,4); //将会返回 9