JavaScript速成

JavaScript速成（Crash Course For Beginners）。教程视频地址：JavaScript速成。

准备

浏览器：Google Chrome（多浏览器测试）
编辑器：Visual Studio Code

另外，代码平台：CodePen。

什么是JavaScript

一种编程语言，它可以在网页上实现复杂的功能，交互等。
解释型语言。
运行在客户端。（也有在服务端的）
面向对象语言。

添加JavaScript的三种方式

内部的JavaScript（推荐使用）

<script>
//Your JavaScript
</script>

外部JavaScript（推荐使用）

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

内联JavaScript（×）

<button
oneclick="createParagraph()">
Click me
</button>

JavaScript的基本概念

在浏览器中打开console

在浏览器中打开console做一些简单的操作。

注释

单行注释：//
多行注释：/*comment*/

类型

字符串类型

一些基本操作

页面弹出提示：alert()。字符串长度："hello".length。控制台输出结果：console.log("hello".length)。输出字符串特定位置字符：console.log("hello".charAt(0))。（注意：JavaScript索引从0开始）。字符串替换：console.log("hello, world".replace("hello", "goodbye"))，返回替换之后的字符串。转为大写：console.log("hello, world".toUpperCase())。

布尔类型

算数比较。逻辑比较。逻辑运算符。

变量

三种方式创建变量：

用var创建变量。
用let创建变量。
用const声明常量。

运算符

算术运算符。+=运算符等等。自加、自减运算符。字符串拼接：+。字符串拼接会先计算可计算的数值再拼接。比较运算符。两个等号：==，比如比较两个不同类型，123=="123"，会进行自大类型转，实际比较的是"123"和"123"。三个等号：===，不进行强制类型转换，类型不同则为false。 JavaScript中1和true，0和false相同，如果用比较，会进行类型转换。而=比较则不会。

控制结构

基本结构：

条件

if(){
    
} else if{
    
} else{
    
}

循环

//1. 第一种
while(){
    
}
//2. 第二种
do{
    
}while();
//3. 第三种
for(let i=0;i<5;i++){
    age++;
    console.log(age);
}

作用域

var关键字是没有作用域的，可以在任何地方访问。let有作用域。const也有作用域。建议都用let。

条件表达式（三元运算符）

var allowed = (age >= 18)?"Yes":"No";
console.log(allowed);

开关语句

switch(){
    case 1:
        console.log();
        break;
    case 2:
        console.log();
        break;
    default:
        console.log();
}

对象

（Object）

//创建对象
//1. 第一种方式
var obj = new Object();
//2. 第二种方式
var obj2 = {};

//在对象中添加东西
obj = {
    name: "Simon",
    age: "20",
    email: "simon@gmail.com",
    contact: {
        phone: "123456",
        Telegram: "@Simon"
    }
};
console.log(obj);
//点操作符
console.log(obj.name);
console.log(obj.contact.phone);
//方括号操作符
console.log(obj["contact"]["phone"]);
//修改对象
obj.age = "18";
console.log(obj.age);
//直接新增属性等
obj.contact.WeChat = "abcd";
console.log(obj.contact.WeChat);

数组

//新建数组
//方式1
var a = new Array();
//方式2
var b = [];

//往数组中添加内容
//数组索引从0开始
a[0] = "dog";
a[1] = "cat";
//也可以是对象类型
a[5] = "tiger";

console.log(a);
//数组中间是空的，是undefined类型
console.log(a[2]);

//另一种添加方式
b = ["dog","cat","tiger"];
console.log(b);

//遍历数组
//方式1
for(let i = 0;i < b.length;i++){
    console.log(b[i]);
    //不会忽略undefined
}
//方式2
for(let i in a){
    console.log(a[i]);
    //会忽略undefined
}

//数组自带方法
//末尾追加元素
b.push("sheep");
//删除最后一个元素
b.pop();
//反转
b.reverse();
//删除第一项
b.shift();
//添加在开头
b.unshift();

关于数组属性的链接：Array Properties。

函数

let a = 1;

function add(x){
    a += x;
}

add(4);
console.log(a);

//函数接收任意多个参数
//arguments参数
function add1(){
    let sum = 0;
    for(let i = 0, j = arguments.length;i < j;i++){
        sum += arguments[i];
    }
    return sum;
}
let sum = add1(1,2,3,4,5,6,7,8,9,10);
console.log(sum);

闭包

回调函数：向方法传入一个函数，被方法使用。

闭包：函数返回一个函数。

function makeAdder(a){
    return function(b){
        return a + b;
    };
}

var x = makeAdder(5);//可以理解为x变成了一个方法
var sum = x(6);//向返回的x方法传入求和第二个参数
console.log(sum);