“三更梦醒，瞧檐上落下的月，满地银光。”

Web：JavaScript 基础

前言

最后轮到 JS 了，这篇文章并不能帮你熟练使用 JS，但是能帮你理解个大概
这篇都是一些基础啊语法啥的，之后再整一篇 JS 结合 HTML 的文章吧
这里有个好玩的闯关式学习教程：free code camp

一些基础

在前端三剑客 HTML，CSS，JavaScript 中，JS 是唯一的编程语言，因此它更为复杂，但各种功能的背后都离不开它。

最初，JavaScript 在 1995 年由 Netscape 公司的 Brendan Eich 设计实现，由于那时该公司正和 Sun 公司合作，希望它外观看起来像 Java，因此取名为 JavaScript。
遗憾的是如今我们知道两者相差甚远，Java 是典型的强类型语言，而 JS 则是弱类型语言，定义变量的时候不需要规定其数据类型；毕竟 Java 是静态语言，需要先编译成 class 文件再执行，而 JS 则是动态语言，数据类型可以在运行时确定。
当然静态语言的优势在于其严格的代码规范，因此 IDE 有很强的代码感知能力，一些小错误会即时报错，所以很适合大型或复杂的系统；反之动态语言的代码量更少更简洁，能让开发者更注重业务逻辑。
JavaScript 的文件后缀为.js，所以它也简称为 JS。
而著名的ES6（ECMAScript 6）则是 2015 年 6 月发布的 JS 语言标准，正式名为ECMAScript 2015（ES2015）。在 ES6 中，引入了很多新的语法功能、方法和特性，如今已得到广泛的应用。

和 css 类似，可以在<head>中添加一个<script>元素来绑定一个 HTML 和 JS 文件：
<script type="text/javascript" src="./test.js"></script>

当然，我们也可以在<body>添加：
<script type="module" src="index.js"></script>

数据类型

和大部分语言类似，JS 的数据类型大体可分为两种：基本类型（Value Type / Primitive Types）和引用类型（Reference Types）
区别也基本没差，基本类型通过值传值，而引用类型通过引用（地址）传值
具体类型如下：

数据类型	意义	类型
Number	数值	基本类型
BigInt	大整数	基本类型
String	字符串	基本类型
Boolean	布尔类型	基本类型
Symbol	唯一标识对象的属性	基本类型
undefined	未赋值变量的默认值	基本类型
null	空对象引用	基本类型
Object	对象	引用类型
Function	函数	引用类型
Array	数组	引用类型

然后下面对一些数据的细节进行说明
由于 JS 没有区分整数和浮点数，所以不管是整数还是小数，最终都是Number类型
而对于那些不存在的数字（比如0/0），其值为NaN

至于Symbol，它是 ES6 引入的一个新的基本类型，用于解决对象属性名冲突的问题。在 ES6 之前，所有属性名都是字符串，这就容易造成属性名的冲突，特别是想给别人提供的对象添加新的属性或方法的时候（毕竟你不知道它本来有哪些属性或方法）
可以通过Symbol()创建，也可以传入字符串参数作为对该变量的说明

let sym = Symbol(); //创建一个Symbol
let symWithPara = Symbol("name"); //带说明的Symbol
//作为对象的唯一属性
let obj = {
  [symWithPara]: "BlackDn",
};
console.log(obj[symWithPara]); //输出'Blackdn'

如果不加参数，比如sym，在控制台输出的就是Symbol()；如果加了参数，比如symWithPara，输出的就是Symbol('name')
此外，Symbol()参数只是表示对当前 Symbol 值的描述，因此即便参数相同的两个Symbol其值也是不相等的。
不过要注意作为属性名的时候需要用方括号包裹Symbol，否则就只是symWithPara的字符串而非这个Symbol变量。同样，obj['symWithPara']和obj.symWithPara得到的都不是这个Symbol。

引号的使用

JS 支持三种引号，即单引号''，双引号""，反引号
通常情况下，都是在用字符串的情况下使用引号，单引号''和双引号""都可以表示字符串

const s1 = "hello";
const s2 = "hello";
console.log(s1 === s2); //输出：true

不过如果想字符串中包含引号，就需要用\转义。
所以很多时候为了简洁起见，可以混合使用单双引号，这样就不用转义了

const s1 = 'hello "world"';
const s2 = "hello 'world'";

const s3 = 'hello "world"';
const s4 = "hello 'world'";

console.log(s1 === s3); //输出：true
console.log(s2 === s4); //输出：true

至于反引号是比较新的，在 ES6 引入
很多时候我们需要用变量来构造字符串，这样就要用+来进行字符串的运算，非常麻烦：

const user = "blackdn";
const s = "hello " + user + " to this world.";
console.log(s); //输出：hello blackdn to this world.

于是引入了反引号，支持在字符串中直接解析变量：

const user = "blackdn";
const str = `hello ${user} to this world.`;
console.log(str); //输出：hello blackdn to this world.

当然，反引号的字符串里要用反引号也需要转义。

const str = `hello \`world\`.`;
console.log(str); //输出：hello `world`.

声明变量

三种方式声明变量：let，var和const

let name = "black";
var handsome = "yes";
const age = 18;

之前，JS 只能通过var声明变量，不过 ES6 引入了let。相对于var，let所声明的变量作用域更小，只在其所在的代码块内有效（block-scoped）；
而var的作用域则更大，在整个函数域内都存在（function-scoped）
所以原则上是能用let就用let。避免一些意料之外的误写、冲突等错误

for (let i = 0; i < 5; i++) {
  console.log(i); //输出1-4
}
console.log(i); //报错ReferenceError: i is not defined

for (var i = 0; i < 5; i++) {}
console.log(i); //输出5

此外，var存在变量提升（Hoisting）现象，即变量可以在声明之前使用，值为undefined。
不过显然，在声明前使用变量是不合逻辑的，因此let纠正了这种现象，在声明前使用let的对象会报错：

console.log(foo); // 输出undefined
var foo = 2;

console.log(bar); // 报错ReferenceError
let bar = 2;

const是声明一个常量不多做解释了，要注意的是，当这个常量是一个引用类型时，比如一个对象或数组，我们仍可对其内容进行修改。
因为我们修改后改变的是值而非地址，而引用类型的保存的是地址，其并没有发生变化，因此这对 JS 来说是合法的：

const person = {
  name: "Blackdn",
};
person.name = "White";
console.log(person.name); //输出'White'

逻辑运算

什么if-else的判断语句就不展开讲了，简单来说if，if-else，if-else if等语句都可以用的
还有switch语句也和java没差，都是switch-case-break的形式，就略过啦
这里就简单说一下逻辑运算嗷。

或运算：||

或运算还是老样子，只要有一个为true，则全部为true，就不举例了。
不过在 JS 中，或运算还有特殊的作用，就是用来寻找第一个真值：

result = value1 || value2 || value3;

在上面的式子中，会从左到右进行操作计算，处理每一个操作数时，都将其转化为布尔值。如果结果是 true，就停止计算，返回这个操作数的初始值
如果所有的操作数都被计算过（也就是，转换结果都是 false），则返回最后一个操作数。
不论如何，返回的值是操作数的初始形式，不会做布尔转换。
利用这个特性，我们可以用来做一些意料之外的事情，比如获取变量列表或者表达式中的第一个真值：

let firstName = "";
let lastName = "";
let nickName = "BlackDn";
console.log(firstName || lastName || nickName || "allEmpty"); //输出：BlackDn

另一个用处就是进行短路求值（Short-circuit evaluation）
当进行到达到第一个真值后，会立即返回该值，而无需处理其他参数。
这个特性常用来执行左侧的条件为假时才执行命令。（虽然但是用if他不香吗）

true || console.log("1"); //没有输出
false || alert("alert me when all of others fail"); //输出："alert me when all of others fail"

与运算：&&

与运算也不用多讲，全为true才返回true
和或运算类似，与运算用来寻找第一个假值

result = value1 && value2 && value3;

同样从左到右进行计算，先转为布尔值，遇到false就停止，返回操作数的初始值。要是全为true就返回最后一个操作数的初始值

注意，与运算 && 的优先级比或运算 || 要高
a && b || c && d 等同于(a && b) || (c && d)（写的时候都给我加上括号，老师教的代码可读性可别忘了！）

非运算：!

……不会指望我讲这个吧？好吧还是简单说一下，非运算用来取反，没了。

值得一提的是，我们可以用两个非运算!!来将某个值转化为布尔类型：

console.log(!!"non-empty string"); // true
console.log(!!null); // false

原理就是第一个非运算将该值转化为布尔类型并取反，第二个非运算再次取反，就得到了其布尔类型，而非初始数据类型。
当然可以用Boolean函数创建一个布尔对象，从而得到同样的效果：

console.log(Boolean("non-empty string")); // true
console.log(Boolean(null)); // false

== 和 ===

简单来说，==是普通比较，===是严格比较。
==在比较的时候，如果双方的数据类型不相等，则会进行一个转换，比如1 == true（数字和Boolean比较），双方类型不同，会将true转换成1，因此等式成立。同理，"1" == true，0 == false都是成立的。
===就比较直白了，先比较数据类型，如果不同就不成立；如果类型相同了，再比较值，值不同也不成立。只有当类型和值都相等的情况下才会成立。

1 == 1; //true
"1" == 1; //true
0 == false; //true
0 == null; //false
0 == undefined; //false
null == undefined; //true
NaN == NaN; //false NaN和任何数都不相等

3 === 3; //true
3 === "3"; //false
null === undefined; //false

同理，!=和!==也是同样的效果，前者会先进行类型转换，后者的比较内容包括类型。

空值合并运算：??

空值合并运算符（nullish coalescing operator）是 ES6 引入的，当左侧参数为null或undefined的时候，则返回右侧参数：

let result = value1 ?? value2;

如果value1为为null或undefined则result的值为value2。用三元操作符?:表示的话就是：

result = value1 !== null && value1 !== undefined ? value1 : value2;

该运算通常用来提供默认值。

和或运算类似， ?? 可以从一系列的值中选择出第一个 非null/undefined 的值。（因为或运算会将null/undefined视为false）

let firstName = "";
let lastName = "";
let nickName = "BlackDn";
console.log(firstName ?? lastName ?? nickName ?? "allEmpty"); //输出：BlackDn

循环语句

循环其实也没差啦，while循环、for循环、do-while都和 java 一样所以就不说啦
要说唯一的差别那就是 for 循环中定义变量的时候要用let而不是int吧=。=

这里说一下比较特别的for-in和for-of循环，他们和 java 中的for-each比较像
不过for-in循环的内容是下标（数组）或属性（对象）而另一个for-of循环则直接输出元素
因此对于数组推荐使用for-of，对于对象则推荐使用for-of（对象不能使用for-of）

对象只能用for-in

const person = {
  name: "Blackdn",
  age: 22,
};

for (let prop in person) {
  console.log(prop + " " + person[prop]);
}
//输出：
//name Blackdn
//age 22

数组则两个都可以用：

const arr = ["a", "b"];

for (let index in arr) {
  console.log(index + " " + arr[index]);
}
//输出：
//0 a
//1 b
for (let val of arr) {
  console.log(val);
}
//输出：
//a
//b

常用函数

函数	作用
Math.random()	生成随机数（`[0,1)`）
Math.floor()	去掉小数部分，保留整数
parseInt()	将字符串转为整数类型（`parseInt("11", 2)`返回`3`，第二个可选参数表示进制）

数组 Array

数组大体上没什么好说的，同样是通过下标（index）索引，下标同样是从 0 开始
不过，既然是动态编译的弱类型语言，JS 允许数组的各个元素是不同的数据类型

可以用push方法直接在数组后面添加元素

const array = [1, 2, 3];
array.push(4, 5); //变成[1, 2, 3, 4, 5]

此外，Array 的filter可以对数组元素进行筛选，从而得到新的数组

const numbers = [1, 2, 3, 4, 5];
const filtered = numbers.filter((n) => n % 2 === 0); //结果为[2, 4]

而map能对所有元素进行操作

const numbers = [1, 2, 3, 4, 5];
const mapped = numbers.map((n) => (n += 1)); //结果为[2, 3, 4, 5, 6]

还有reduce，通常进行求和等操作。因为它最终是吧一串元素变成一个值，所以称之为reduce（减少）

const numbers = [1, 2, 3, 4, 5];
const reduced = numbers.reduce((accumulator, current) => accumulator + current);
//reduced结果为：15

然后下面是一些常用函数，更多可以看菜鸟：JavaScript Array 对象

函数	作用
`slice()`	选取数组的一部分，并返回一个新数组，`slice(4,7)`返回原数组下标`4-6`元素组成的新数组，包含头位置，不包含尾位置
`join()`	连接数组元素为字符串，传入参数为连接符，默认为逗号`,`，`['hello', 'world'].join('->')结果为'hello->world'`
`find()`	返回第一个符合要求的元素，都不符合时返回`undefind`。需要传入函数作为参数，以此判断是否符合要求。
`unshift()`	在数组头部增加元素
`push()`	在数组尾部增加元素
`pop()`	删除并返回数组的最后一个元素
`shift()`	删除并返回数组的第一个元素
`splice()`	从数组中添加或删除元素，会修改原数组。`splice(index, quantity, item1...n)`，参数分别表示`删除/添加位置`，`删除多少元素`，`添加的新元素`
`includes()`	判断一个数组是否包含一个指定的值。
`indexOf()`	搜索数组中的元素，并返回它所在的位置。没找到则返回`-1`
`forEach()`	对每个元素执行某函数（参数为函数）
`reverse()`	返回逆序的数组

字符串 String

字符串也没啥好说的，这里列出一些我遇到过的函数
JS 就是这点不好，你不知道他都有啥函数，除非看到别人用或者自己去查手册。不像 Java 那样能到源码里看=。=
也可以看看菜鸟，里面的方法还挺全的：JavaScript String 对象

函数	作用
`slice()`	提取字符串的片断，`'coconuts'.slice(4,7)结果为'nut'`，包含头位置，不包含尾位置
`indexOf()`	返回子串开头的出现位置：`'coconuts'.indexOf('ut')结果为5`
`trim()`	去除字符串两边的空白
`split()`	把字符串分割为字符串数组，参数为分隔符（为空时不分割，为空字符串`''`时分割每个字符）
`toLowerCase()`	全变为大写
`toUpperCase()`	全变为小写
`concat()`	连接多个字符串
`startsWith()`	判断字符串是否以某子串开头
`endsWith()`	判断字符串是否以某子串结尾

对象 Object 和类 Class

定义对象

在 JS 中创建对象比较简单，只需要用括号包括，再用键值对属性名: 值的方式创建属性即可
下面两种声明和获取属性的方式是一样的：

let person = {
  name: "Blackdn",
};
console.log(person.name); //输出'Blackdn'
//等同于
let person = {
  ["name"]: "Blackdn",
};
console.log(person["name"]); //输出'Blackdn'

还要注意一点，如果属性名由变量存储，那么只能通过方括号的方式来获取变量内的属性名
且方括号中的变量名不能加上引号：

let propertyName = "name";
console.log(person.propertyName); //输出'undefined'
console.log(person[propertyName]); //输出'Blackdn'
console.log(person["propertyName"]); //输出'undefined'

定义类

和传统一样，JS 用关键字class标识一个类，不过不同的是我们不需要为其声明属性
类中的属性直接在构造函数中标识，用constructor标识构造函数
当然类也可以有自己的函数，不过定义的时候不需要function关键字

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  introduce() {
    return `My name is ${this.name}. I am ${this.age} years old.`;
  }
}

继承类

继承同样用的是extend关键字：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  introduce() {
    return `My name is ${this.name}. I am ${this.age} years old.`;
  }
}

class Student extends Person {
  constructor(name, age, klass) {
    super(name, age);
    this.klass = klass;
  }
  introduce() {
    return `${super.introduce()} I am a Student. I am at Class ${this.klass}.`;
  }
}

继承的时候，子类中用super指代父类，可以用super()调用父类的构造方法，也可以用来调用父类的函数
比如Student的introduce方法实际上等同于
My name is ${this.name}. I am ${this.age} years old. I am a Student. I am at Class ${this.klass}.

常用函数

用到的时候再加吧=。=

函数	作用
`hasOwnProperty()`	判断某对象是否含有某属性。`person.hasOwnProperty('name')`等同于`'name' in person`，都返回`true`
`Object.keys()`	将对象的所有属性名返回为一个数组。`Object.keys(person)`返回`['name']`

模块化 Model

就像之前的 Sass 能够用@import导入文件实现模块化，JS 肯定不甘落后
很多时候我们将一个类进行模块化，然后在子类中导入并继承。我们把上面的Person类放在person.js文件中
不同于 Sass，我们不能直接在其他文件导入person.js，而是在导入前需要进行导出
我们可以在定义类的时候用export声明导出：

// person.js
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  introduce() {
    return `My name is ${this.name}. I am ${this.age} years old.`;
  }
}

当然也可以在代码最后声明导出：
我比较喜欢这种方式啦，方便查找修改。

// person.js
class Person {
	//···
}
export Person;

既然有了person.js，那么我们再搞一个student.js用来写子类Student
我们的父类Person已经道出了，那么在student.js中就要将其导入：

// student.js
import { Person } from "./person";

class Student extends Person {
  constructor(name, age, klass) {
    super(name, age);
    this.klass = klass;
  }
  introduce() {
    return `${super.introduce()} I am a Student. I am at Class ${this.klass}.`;
  }
}

可以看到导入的格式为import {name} from "file";
和 Sass 一样，文件名不需要加.js后缀

上面的方法称为命名导出（Named Export），还有一种默认导出（Default Export）
就是多加个default关键字：

// person.js
class Person {
  //···
}
export default Person;

使用默认导出后，在导入的时候就不需要加中括号了：

// student.js
import Person from "./person";

class Student extends Person {
  //···
}

当然也可以结合使用：

// person.js
class Person {
  //···
}
export function funToExport() {
  console.log("hello");
}
export default Person;

这样student.js中的导入语句就可以结合两者，Person是默认导入的所以不用中括号，函数funToExport()是命名导入所以就要有中括号

// student.js
import Person, { funToExport } from "./person";

class Student extends Person {
  //···
}

Web：JavaScript基础

数据类型、变量、语法等

Web：JavaScript 基础

前言

一些基础

数据类型

引号的使用

声明变量

逻辑运算

或运算：||

与运算：&&

非运算：!

== 和 ===

空值合并运算：??

循环语句

常用函数

数组 Array

字符串 String

对象 Object 和类 Class

定义对象

定义类

继承类

常用函数

模块化 Model

参考

CATALOG

FEATURED TAGS

FRIENDS

Web：JavaScript 基础

前言

一些基础

数据类型

引号的使用

声明变量

逻辑运算

或运算：||

与运算：&&

非运算：!

== 和 ===

空值合并运算：??

循环语句

常用函数

数组 Array

字符串 String

对象 Object 和 类 Class

定义对象

定义类

继承类

常用函数

模块化 Model

参考

CATALOG

FEATURED TAGS

FRIENDS

对象 Object 和类 Class