Javascript基础笔记

发表于 | 分类于

语法

JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{...}。但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;

基本数据类型

Number：JavaScript不区分整数和浮点数，统一用Number表示。

字符串：字符串是以单引号’或双引号”括起来的任意文本，比如'abc'，"xyz"等等。

布尔值：布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值。

== 和 ===

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

null和undefined

null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。

在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。

JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

数组

JavaScript的数组可以包括任意数据类型。

1
[1, 2, 3.14, 'Hello', null, true];

对象

JavaScript的对象是一组由键-值组成的无序集合，例如：

1
2
3
4
5
6
7
8
var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

JavaScript对象的键都是字符串类型，值可以是任意数据类型。上述person对象一共定义了6个键值对，其中每个键又称为对象的属性，例如，person的name属性为'Bob'，zipcode属性为null。

数组

indexOf，slice（切片），push（末尾加元素），pop（末尾删除元素），unshift（头部加元素），shift（头部删除元素），sort（排序），reverse（反转），splice（可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素），concat（当前的Array和另一个Array连接起来，并返回一个新的Array），join（把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串）

iterable

for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

for ... of循环则完全修复了这些问题，它只循环集合本身的元素。

map

map()方法定义在JavaScript的Array中，调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果。

1
2
3
4
5
6
function pow(x) {
    return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);

reduce

Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算。

1
2
3
4
5
6
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

遵守规约

  • 不要使用new Number()、new Boolean()、new String()创建包装对象；

  • 用parseInt()或parseFloat()来转换任意类型到number；

  • 用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；

  • 通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；

  • typeof操作符可以判断出number、boolean、string、function和undefined；

  • 判断Array要使用Array.isArray(arr)；

  • 判断null请使用myVar === null；

  • 判断某个全局变量是否存在用typeof window.myVar === 'undefined'；

  • 函数内部判断某个变量是否存在用typeof myVar === 'undefined'。

表单操作

HTML表单的输入控件主要有以下几种：

  • 文本框，对应的<input type="text">，用于输入文本。

  • 口令框，对应的<input type="password">，用于输入口令。

  • 单选框，对应的<input type="radio">，用于选择一项。

  • 复选框，对应的<input type="checkbox">，用于选择多项。

  • 下拉框，对应的<select>，用于选择一项。

  • 隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

  • HTML5新增了大量标准控件，常用的包括date、datetime、datetime-local、color等，它们都使用<input>标签。

获得了一个<input>节点的引用，就可以直接调用value获得对应的用户输入值。

操作文件

在HTML表单中，可以上传文件的唯一控件就是<input type="file">。

注意：当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径。