# JavaScript

# 背景理论

要真正学好用好JavaScript,理解其本质、历史及局限性是非常重要的

JavaScript包含几个部分:

  • 核心(ECMAScript)宿主环境提供ECMAScript的基准实现和与环境自身交互必需的扩展。扩展(比如DOM)使用ECMAScript核心类型和语法,提供特定于环境的额外功能。
  • 文档对象(DOM)DOM通过创建表示文档的树,让开发者可以随心所欲地控制网页的内容和结构。使用DOM API,可以轻松地删除、添加、替换、修改节点。能做到不刷新页面而修改页面外观和内容。
  • 浏览器对象模型(BOM)用于支持访问和操作浏览器的窗口。

JavaScript是通过<script>元素插入到HTML页面中。这个元素可用于把JavaScript代码嵌入到HTML页面中,跟其他标记混合在一起,也可用于引入保存在外部文件中的JavaScript代码。<script>元素的一个最为强大、同时也备受争议的特性是,它可以包含来自外部域的JavaScript文件

# 语言基础

  • 标识符 数字、字母、下划线(_)和美元符号($),相较于Python多了个$
  • 变量 是松散类型可用于保存任何类型的数据,重用 const let来定义
  • 数据类型 6 种 简单数据类型(也称原始类型),可用操作符 typeof 来检测
    • Undefined类型 取值undefined,如let message; 假值
    • Null类型 取值null,如let car = null; 假值
    • Boolean类型 取值true和false
    • Number类型 取值范围Number.MIN_VALUE到Number.Max_VALUE,特殊值NaN,转换函数parseInt和parseFloat
    • String类型 可使用单引号(')、双引号(")或反引号(`)标示,如 let firstName = 'linda';
    • Symbol类型
  • 对象是一组数据和功能的集合。对象通过new操作符后跟对象类型的名称来创建,如 let o = new Object();
  • 操作符 用于操作数据值
    • 一元操作符 age++
    • 逻辑操作符 取反(同时使用两个!!,相当于调用了转型函数Boolean()),逻辑与 逻辑或 如 let myObject = preferredObject || backupObject; 短路特性
    • 关系运算符 == ===
    • 条件运算符 variable = boolean_expression ? true_value : false_value;
    • 赋值操作符 let num = 10; num *= 20;
    • 逗号操作符号 let num1 = 1, num2 = 2, num3 = 3;
  • 语句 if for 语句 break continue
if (i > 25){
    console.log('xxx');
} else {
    console.log('yyy');
}

for (const propName in window){
    document.write(propName);
}

# 基本引用类型

对象被认为是某个特定引用类型的实例。新对象通过使用new操作符后跟一个构造函数(constructor)来创建。构造函数就是用来创建新对象的函数,如 let now = new Date();

let value = "25";
let number = Number(value); // 转型函数
console.log(typeof number); // "number"

let obj = new Number(value);// 构造函数
console.log(typeof obj);    // "object"

# 集合引用类型

# Object

虽然Object的实例没有多少功能,但很适合存储和在应用程序间交换数据

方式一

let person = new Object();
person.name = "linda";
person.age = 20;

方式二 推荐

let person = {
    name: "linda",
    age: 20
};

# Array

  • 一组有序数据
  • 每个槽位可以存储任意类型的数据
  • 动态大小,随着数据添加而自动增长
let colors = ["red", "blue", "green"];

colors.length           // 3, 长度
Array.isArray(colors);  // true, 检测是否是数组

// 迭代 keys()、values()、entries()
for (const [idx, element] of colors.entries()) {
    console.log(idx, element);
}

colors.toString()   // red,blue,green
colors.join("||")   // red||blue||green

// 栈方法
colors.push("orange");
colors.pop();

// 队列方法
colors.shift();
colors.unshift("orange");

// 排序方法 原地排
colors.sort() 

// 最强大 splice

// indexOf(item), lastIndexOf(item), 没有返回-1

// 迭代方法 every filter forEach map some
colors.forEach((item, idnex, array) => {
    // 执行某些操作
})

# 函数

函数实际上是对象,每个函数都是Function类型的实例,函数名就是指向函数对象的指针,而且不一定与函数本身紧密绑定

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

let sum = (num1, num2) => {
    return num1 + num2;
};
  • ECMAScript函数既不关心传入的参数个数,也不关心这些参数的数据类型。参数可通过内部arguments类数组来访问
上次更新: 8/26/2021, 5:03:13 PM