【前端】JavaScript快速入门

什么是JavaScript

JavaScript（简称JS），是目前最常用的Web编程语言，所有现代的 HTML 页面都可以使用 JavaScript。使用JavaScript可以简便、快捷的开发简单的网页，同时也能进行复杂的后端开发等。

JavaScript开发环境

你可以在许多地方编写JavaScript代码。

浏览器开发者工具

在浏览器中单击f12键，打开开发者工具。在开发者工具的console中可以直接进行JavaScript代码的编写。

代码编辑器

使用代码编辑器（推荐VSCode），安装Live Server插件。Live Server是一个具有实时加载功能的小型服务器。右键.html文件-使用Live Server打开，则会自动启动默认浏览器展示网页效果。对该HTML代码进行修改并保存后，浏览器页面内容也会自动重新加载。

Node.js

使用Node.js。Node.js是C++开发的JavaScript运行时环境，我们可以使用node指令在命令行中运行JavaScript代码查看效果。

JavaScript编码规范

.html文件内部

当写在.html文件内部时，一般将JavaScript代码置于body标签的最底部。一方面是让前面页面的内容优先加载，另一方面是因为JavaScript代码通常和.html内容有所关联。

.html文件外部

一般我们更多实用的是.html代码和JavaScript代码分离开的写法，也就是单独创建一个.js文件来存放JavaScript代码。

若要引入JavaScript代码，在.html中添加：

<script src="index.js"></script>

JavaScript基础语法

注释

分为单行注释和多行注释两种。

// 这是一条单行注释
/* 这是一条
   多行注释 */

变量和常量

变量声明var

var用于声明和定义变量，当前ES6使用不多，更多使用let。

var name;  		// 变量声明
var age = 20； 	// 变量定义

变量声明let

let用于声明和定义变量，这些变量只在let命令所在的代码块中有效。

let name；		// 变量声明
let age = 20； 	// 变量定义

var和let的区别

var和let的区别主要是以下三点：

1. var存在变量提升机制，而let不存在。
2. var允许重复声明，而let不允许。
3. let支持块级作用域，而var不支持。

这里就不过多的展开了

常量声明const

const用于定义常量，常量必须在定义时赋值，且之后不能重新赋值。

const name = "Carl";  	// 常量定义
name = "John";  		// 错误，常量不能重新赋值
const age； 			// 错误，常量必须赋初值

原生数据类型

字符串类型string

JavaScript使用单引号或双引号表示字符串类型。

const username = "Jackie";  			
let sentence = 'What a nice day!'; 

数值类型number

Number用于表示整数或浮点数。

const age = 30;  		// 整数	
let money = 125.7;  	// 浮点数

布尔类型boolean

const isRich = false; 

空类型null

const x = null; 	// 表示x被定义，值为空

未定义类型undefined

const x = undefined; 	//表示x未定义
let y;					// 声明未定义的变量类型也为undefined

typeof函数

使用typeof函数可以获取对象的类型。

const age = 20;
const x = null; 	
let y;				
typeof(age);	// number，表示数值
typeof(x);		// object，表示空对象
typeof(y);		// undefined，表示未定义

字符串

字符串拼接

const name = "Carl";	
console.log("My name is " + name);	// My name is Carl			

模板字符串

const name = "Carl";	
const age = 20;
console.log(`My name is ${name} and I am ${age}`);	// My name is Carl and I am 20

字符串内置方法

const s = "Hello World";	
console.log(s.length);			// 11
console.log(s.toUpperCase());	// HELLO WORLD
console.log(s.toLowerCase());	// hello world
console.log(s.substring(0, 5));	// Hello
console.log(s.split(' '));		// ['Hello', 'World']

数组

数组的声明和定义

const numbers = new Array(1, 2, 3, 4, 5);
const vehicle = ['car', 'plane', 'boat'];

JavaScript不要求数组元素类型相同：

const element = ['plate', 100, true];	// 正确，JavaScript数组的元素类型可以不同

数组的访问

JavaScript中数组下标从0开始。

const vehicle = ['car', 'plane', 'boat'];
console.log(vehicle[1]);	// plane

常量数组不能被整体重新赋值，但可以改变其内部元素的值，或者通过原生方法修改数组（见下）：

const vehicle = ['car', 'plane', 'boat'];
vehicle = [];				// 错误，常量的值不能改变
vehicle[0] = 'bicycle';		// 正确，数组内部元素的值可以被改变
vehicle.push('subway');		// 正确，可以在末尾添加新元素
console.log(vehicle);		// ['bicycle', 'plane', 'boat', 'subway']

操作数组

常量数组也可以通过原生方法操作元素，进行数组元素的增删等。

const vehicle = ['car', 'plane', 'boat'];
vehicle.push('subway');		// 在末尾添加新元素
vehicle.push('motorbike');	// 在开头添加新元素
vehicle.pop();				// 删除末尾元素

isArray方法

isArray方法可用来判断一个变量是否为数组类型，若是返回true，否则返回false。

const vehicle = ['car', 'plane', 'boat'];
console.log(Array.isArray(vehicle));	// true
console.log(Array.isArray('Hello'));	// false

indexOf方法

indexOf方法可以根据值获取数组某个元素的索引。

const vehicle = ['car', 'plane', 'boat'];
console.log(vehicle.indexOf('boat'));	// 2

对象

对象定义

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    married: true,
    hobbies: ['music', 'movies', 'sports'],
    address: {
        street: "50 main st",
        city: 'Boston',
        state: 'MA'
    },
};

访问数据

console.log(person.lastName);		// Doe
console.log(person.hobbies[1]);		// movie
console.log(person.address.city);	// Boston

使用对象赋值

对象可作为赋值表达式的右值，为左值中同名变量赋相同的值：

const { firstName, lastName, address: { city } } = person;
console.log(firstName);		// John
console.log(lastName);		// Doe
console.log(city);			// Boston

JSON.stringfy方法

stringfy方法可以把一个JavaScript对象转换为JSON格式。

const personJSON = JSON.stringfy(person);

逻辑判定与运算

判断是否相等

包含双等号和三等号两种。前者只执行数值检测，不执行类型检测。后者执行数值和类型的双重检测。

const x = 10;
const strX = '10';
x == 10		// true，x的值为10
strX == 10	// true, strX的值为10
x === 10	// true，x的值为10且类型为number
strX === 10	// false, strX的值为10，但类型是string

逻辑运算

x == 10 && y == 20	// 与
x == 10 || y == 20	// 或
!x					// 非

三目运算符

const color = x > 10 ? 'red' : 'blue';

选择结构

if语句

与其他语言写法类似。

if(x == 10) {
	console.log("x is 10.");
} else if(x > 10) {
	console.log("x is greater than 10.");
} else {
	console.log("x is less than 10.");
}

switch语句

switch(color) {
	case 'red':
		console.log('color is red.');
		break;
	case 'blue':
		console.log('color is blue.');
		break;
	default:
		console.log('color is unknown.');
}

循环结构

for循环

for(let i = 0; i < 10; i++) {
	console.log(`Now is round ${i}`);
}

while循环

let i = 0;
while(i < 10) {
	console.log(`Now is round ${i}`);
	i++;
}

数组的遍历

for(let i in vehicles) {
	console.log(i.id);		// 获取数组元素索引
	console.log(`${i} is a vehicle.`);
}