JavaScript

[JavaScript 引入方式](#JavaScript 引入方式)
[JavaScript 基础语法](#JavaScript 基础语法)
[JavaScript 对象](#JavaScript 对象)
- 数组
- - 创建数组
  - 数组操作
- 函数
- 对象
- - 方式一：字面量创建对象（推荐）
  - [方式二：new Object 创建](#方式二：new Object 创建)
  - 方式三：构造函数创建

JavaScript（简称JS）是一种脚本语言，与HTML和CSS共同构成前端开发的三大基石：

HTML：网页的结构（骨）
CSS：网页的表现（皮）
JavaScript：网页的行为（魂）

JavaScript 最初只是为了完成简单的表单验证，如今已发展为一门功能强大的编程语言。而 jQuery 则是一个快速、简洁的 JavaScript 框架，极大地简化了 DOM 操作。

JavaScript 引入方式

引入方式	描述	示例
行内样式	直接嵌入到 HTML 元素内部	`<input type="button" value="点我" onclick="alert('haha')">`
内部样式	定义 `<script>` 标签，写在标签内	`<script>alert("haha");</script>`
外部样式	通过 src 属性引入外部 JS 文件	`<script src="hello.js"></script>`

企业开发常用外部样式，实现 HTML 和 JS 的完全分离。

JavaScript 基础语法

变量

JS 声明变量有三种方式：

关键字	解释	示例
`var`	早期声明方式，作用域在函数内	`var name = 'zhangsan';`
`let`	ES6 新增，作用域在代码块内	`let name = 'zhangsan';`
`const`	声明常量，声明后不能修改	`const name = 'zhangsan';`

注意事项：

JavaScript 是动态弱类型语言，变量可以存放不同类型的值：

javascript 复制代码

var name = 'zhangsan';
var age = 20;

// 变量类型可以动态改变
var a = 10;     // 数字
a = "hehe";     // 变为字符串

变量命名规则：
- 组成字符：任何字母、数字、下划线（_）或美元符号（$）
- 不能以数字开头

字符串拼接 使用 +：

javascript 复制代码

var name = '张三';
var greeting = '你好，' + name;  // "你好，张三"

数据类型

数据类型	描述
`number`	数字，不区分整数和小数
`string`	字符串，用单引号或双引号包裹
`boolean`	布尔类型，true 或 false
`undefined`	变量未初始化，只有唯一值 undefined
`null`	空值

使用 typeof 函数返回变量类型：

javascript 复制代码

var a = 10;
console.log(typeof a);  // number

var b = 'hello';
console.log(typeof b);  // string

var c = true;
console.log(typeof c);  // boolean

var d;
console.log(typeof d);  // undefined

var e = null;
console.log(typeof e);  // object（历史遗留问题）

运算符

JavaScript 运算符与 Java 等语言基本相似，包括：

算术运算符 ：+ - * / %
比较运算符 ：> < >= <= == != === !==
逻辑运算符 ：&& || !

推荐使用 ===（严格相等），避免类型转换带来的问题。

JavaScript 对象

在 JS 中，字符串、数值、数组、函数都是对象。每个对象包含若干的属性（特征）和方法（行为）。

数组

创建数组

javascript 复制代码

// 方式一：使用 new 关键字
var arr = new Array();

// 方式二：字面量方式（推荐）
var arr = [];
var arr2 = [1, 2, 'haha', false];  // 元素可以是不同类型

注意：JS 的数组不要求元素是相同类型，这与 C、C++、Java 等静态类型语言差别很大。

数组操作

javascript 复制代码

var arr = [1, 2, 'haha', false];

// 读取数组（下标从 0 开始）
console.log(arr[0]);  // 1

// 添加元素
arr[4] = "add";
arr.push("追加");     // 在末尾追加

// 获取数组长度
console.log(arr.length);  // 5

// 修改元素
arr[4] = "update";

// 删除元素
arr.splice(4, 1);  // 从下标4开始，删除1个元素

// 下标越界返回 undefined
console.log(arr[100]);  // undefined

⚠️ 不要给数组名直接赋值，否则数组所有元素都会丢失。

javascript 复制代码

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr = '小猫凯迪';  // arr 变成了字符串，数组丢失！

函数

语法格式

javascript 复制代码

// 函数定义
function 函数名(形参列表) {
    函数体;
    return 返回值;
}

// 函数调用
函数名(实参列表);                // 不考虑返回值
返回值 = 函数名(实参列表);        // 考虑返回值

示例：

javascript 复制代码

function hello() {
    console.log("hello");
}

// 调用函数才会执行
hello();

关于参数个数

实参和形参个数可以不匹配：

javascript 复制代码

function sum(num1, num2) {
    return num1 + num2;
}

sum(10, 20, 30);  // 30，多出的参数不参与运算
sum(10);           // NaN，缺少的参数为 undefined

实际开发中一般要求形参和实参个数匹配。

函数表达式

javascript 复制代码

var add = function() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
};

console.log(add(10, 20));      // 30
console.log(add(1, 2, 3, 4));  // 10
console.log(typeof add);       // function

JS 中函数是一等公民，可以用变量保存，也可以作为其他函数的参数或返回值。

对象

方式一：字面量创建对象（推荐）

javascript 复制代码

var student = {
    name: 'zhangsan',
    height: 175,
    weight: 170,
    sayHello: function() {
        console.log("hello");
    }
};

属性和方法使用键值对的形式来组织：

键值对之间使用,分割
键和值之间使用 : 分割
方法的值是一个匿名函数

访问属性和方法

javascript 复制代码

var student = {
    name: 'zhangsan',
    height: 175,
    weight: 170,
    sayHello: function() {
        console.log("hello");
    }
};
// 1. 使用 . 成员访问运算符访问属性（"的"的意思）
console.log(student.name);        // "zhangsan"

// 2. 使用 [] 访问属性，属性名需要加引号
console.log(student["name"]);     // "zhangsan"

// 3. 调用方法，别忘了加 ()
student.sayHello();

修改属性

javascript 复制代码

var student = {
    name: 'zhangsan',
    height: 175,
    weight: 170,
    sayHello: function() {
        console.log("hello");
    }
};
// 修改已有属性的值
student.name = "lisi";
console.log(student.name);  // "lisi"
console.log(student);       // {name: "lisi", age: 15}

添加属性

javascript 复制代码

// JS 对象可以随时动态添加新属性
var student = {};
student.name = "空对象赋值";
console.log(student);  // {name: "空对象赋值"}

方式二：new Object 创建

javascript 复制代码

var student = new Object();
student.name = "zhangsan";
student.height = 175;
student['weight'] = 170;
student.sayHello = function() {
    console.log("hello");
};

方式三：构造函数创建

javascript 复制代码

function Cat(name, type, sound) {
    this.name = name;
    this.type = type;
    this.miao = function() {
        console.log(sound);  // 作用域链式访问规则
    };
}

var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫鸣');

console.log(mimi);
mimi.miao();