JavaScript 基础知识
Posted 柯西没科气
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 基础知识相关的知识，希望对你有一定的参考价值。
1. 变量及其命名规范
在 javascript 中，使用等号
=对变量进行赋值。可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但是要注意只能用var申明一次。这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。
变量的命名：
- 变量名只能由字母、数字、下划线、$ 组成，且开头不能是数字。
- 变量区分大小写。
- 变量名要符合两大法则之一：
- 小驼峰法则：变量首字母小写，之后每个单词的首字母大写（常用）；
- 匈牙利命名法：变量所有字母都小写，单词之间用下划线分割。
var helloWorld; // 小驼峰命名法 var hello_world; // 匈牙利命名法
strict 模式
ECMA 在后续规范中推出了
strict模式，在strict模式下运行的 JavaScript 代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。使用方法如下：
'use strict'; // 在 JavaScript 代码的第一行写上
2. 6种变量数据类型
2.1. Undefined：未定义
在 JavaScript 中，使用 var 声明变量，但没有进行初始化赋值时，结果为 Undefined。如果变量没有声明直接使用，则会报错，不属于 Undefined。
Undefined仅仅在判断函数参数是否传递的情况下有用。
<script type="text/javascript">
var a;
console.log(a); // 使用 var 声明变量 a，但未赋值，a 为 Undefined
console.log(b); // 没有声明直接使用的变量 b，会报错
</script>
2.2. NULL：空引用
NULL 在 JavaScript 中是一种特殊的数据类型，表示一种空的引用，一个“空”的值，也就是这个变量中什么都没有。它和 0 以及空字符串 '' 不同。0 是一个数值，'' 表示长度为 0 的字符串，而 NULL 表示“空”。同时，NULL 作为关键字不区分大小写，形如 “NULL”、“Null”、“null” 均为合法数据类型。
2.3. Boolean：布尔类型
Boolean 值是一种非常常用的数据类型，表示真或者假，可选值只有两个：true 或 false。
var a = true;
var b = 1>2;
console.log(a); // true
console.log(b); // false
2.4. Number：数值类型
在 JavaScript 中，没有区分整数类型和小数类型，二十统一用数值类型代替。例如整数和小数类型都输入 Number 类型。
Infinity表示无限大，当数值超过了 JavaScript 的Number所能表示的最大值时，就表示为Infinity。
var a = 11;
var b = 11.2;
2.5. String：字符串类型
使用双引号 "" 或单引号 '' 包裹的内容，被称为字符串。两种字符串没有任何区别，且可以互相包含。
2.6. Object：对象类型
Object 是一种对象类型。在 JavaScript 中有一句话“万物皆对象”，包括函数、数组、自定义对象等都属于对象类型。
3. JavaScript 中的变量函数
3.1. Number() 函数：将变量转为数值类型
- 字符串类型转数值
Number("111"); // 字符串为纯数值字符串，会转 为对应的数字。转换之后结果为 111
Number(""); // 字符串为空字符串时，会转为0
Number("111a"); // 字符串中包换其他非数字字符时，不能转换。转换结果为 NaN
- 布尔
Boolean类型转数值
Number(true); // true 转换为1
Number(false);// false 转换为0
Null与Undefined转数值
Number(null); // Null 转换为0。将空引用 null 转换为 0
Number(undefined); // Undefined 转换为 NaN。
Object类型转数值
先调用 ValueOf() 方法，确定函数是否有返回值，再根据上述各种情况判断。
3.2. isNaN()：检测变量是否为 NaN
// 1. 纯数字字符串，检测结果为 false
isNaN("111"); // 先用 Number() 转换为数值类型的 111，所以 isNaN 检测结果为 false
// 2.空字符串，检测结果为 false
isNaN(""); // 先用 Number() 转换为数值类型的 0，所以 isNaN 检测结果为 false
// 3.包含其他字符，检测结果为 true
isNaN("la"); // 先用 Number() 转为 NaN，所以 isNaN 检测结果为 true
// 4.布尔类型，检测结果为 false
isNaN(false); // 先用 Number() 转为数值类型的 0，所以 isNaN 检测结果为 false
3.3. parseInt()：将字符串转为整型
parseInt() 函数的作用是将字符串类型转为整数数值类型。即 parseInt() 函数可解析一个字符串，并返回一个整数。
// 1.纯数字字符串
document.write(parseInt("123")); // 转换为 123
document.write(parseInt("123.11")); // 转换为 123
// 2.包含其他字符的字符串：截取第一个非数值字符前的数值部分进行输出
document.write(parseInt("123.11a")); // 转化为小数时，会直接抹掉小数点，转换为 123
document.write(parseInt("a123")); // 转换为 NaN
3.4. parseFloat()：将字符串转换为浮点型
parseFloat() 函数的作用是将字符串转换为小数数值类型，使用方式同 ParseInt() 类似。唯一不用的是，在转化整数字符串时，保留整数。但是当转化包含小数点的字符串时，保留小数点。
document.write(parseFloat("123")); // 转化为 123
document.write(parseFloat("123a11")); // 转化为 123
document.write(parseFloat("a123")); // 转化为 NaN
document.write(parseFloat("a123.12"));// 转化为 123.12
document.write(parseFloat("123.12a"));// 转化为 NaN
Notice：
parseInt()和parseFloat()函数只能转换String类型，对Boolen、null、Undefined进行转换结果均为NaN。
3.5. typeof()：变量类型检测
typeof() 是 JavaScript 中非常常用的一个函数，它的主要作用是用来检测一个变量的数据类型，传入一个变量，返回变量所属的数据类型。一般分为以下几种情况：
- 未定义：数据类型为
Undefined。 - 数值：数据类型为
Number。 - 字符串：数据类型为
String。 - True/False：数据类型为
Boolean。 - Null/对象：数据类型为
Object。 - 函数：数据类型为
function。
为了方便使用，JavaScript 在语法上为 typeof 函数提供了两中常用写法，分别是函数写法和指令写法：
var a;
// 1.函数写法：需要保留 ()，变量通过()传入。基本语法如下：
typeof(a); // 函数调用法师需要将变量通过函数后面的()传入
// 2.指令写法：可以省略 (),直接将变量紧跟 typeof。基本语法如下：
typeof a; // 指令调用方式可以省略()，直接将变量紧跟 typeof
4. 运算符
4.1. 相等比较运算符
1.
==和===的区别以及代码展示
==会自动转换数据类型再比较，很多时候会得到意想不到的结果；===不会转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
false == 0; // true
false === 0; // false
2.
NaN特殊的Number比较
NaN 这个特殊的 Number 与所有其他的值都不相等，包括他自己：
NaN === NaN; // false
唯一能够判断 NaN 的方法是通过 isNaN() 函数：
isNaN(NaN); // true
3.浮点数的相等比较
1/2 === (1-2/3); // false
这是由于浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：
Math.abs(1/3 - (1-2/3)) < 0.0000001; // true
4.2. 逗号运算符
var a = 2;
var b = 0;
var c;
c = (++a, a *=2, b = a*5);
document.write(c); // c = 30，整个逗号表达式的值是最后一个表达式的值
5. 数组
数组是一组按顺序排列的集合，结合中的每个值成为元素。JavaScript 的数组可以包括任意数据类型：
// 数组的元素可以通过索引来访问
var arr = [1, 2, 3.14, 'Hello', null, true];
// 上述数组包含六个元素，数组用 `[]` 表示，元素之间用 `,` 隔开。
arr.length; // 获取数组的长度，结果为 6
arr[0]; // 返回索引为0的元素，即1
arr[5]; // 返回索引为5的元素，即true
arr[6]; // 索引超出了范围，返回undefined
// 另一种创建数组的方法是通过 `Array()` 函数实现：
var arr1 = new Array(1, 2, 3); // 创建了数组 [1, 2, 3]
如果直接给 Array 的 length 赋一个新的值会导致 Array 大小发生变化：
var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length 2; // arr变为[1, 2]
Array 可以通过索引把对应的元素修改为新的值，因此，对 Array 的索引进行赋值会直接修改这个 Array：
ar arr = ['A', 'B', 'C'];
arr[1] = 99; // arr现在变为['A', 99, 'C']
// 如果通过索引赋值时，索引超过了范围，同样会引起 Array 大小的变化：
arr[5] = 'x'; // arr变为[1, 2, 3, undefined, undefined, 'x']
Notice： 大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而，JavaScript 的
Array却不会有任何错误。在编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。
5.1. indexOf()
与 String 类似，Array 也可以通过 indexOf() 来搜索一个指定的元素的位置：
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2
5.2. slice()
slice() 就是对应 String 的 substring() 版本，它截取 Array 的部分元素，然后返回一个新的 Array：
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
document.write(table.slice(0, 3)); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
document.write(table.slice(3)); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
注意到
slice()的起止参数包括开始索引，不包括结束索引。
如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array：
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false
5.3. push() 和 pop()
push() 向 Array 的末尾添加若干元素，pop() 则把Array 的最后一个元素删除掉：
var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []
5.4. unshift() 和 shift()
如果要往 Array 的头部添加若干元素，使用 unshift() 方法，shift() 方法则把 Array 的第一个元素删掉：
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []
5.5. sort()
sort() 可以对当前 Array 进行排序，它会直接修改当前 Array 的元素位置，直接调用时，按照默认顺序排序：
var arr = ['B', 'C', 'A'];
arr.sort(); // arr = ['A', 'B', 'C']
5.6. reverse()
// 反转数组
var arr = ['one', 'two', 'three'];
arr.reverse(); // arr = ['three', 'two', 'one']
5.7. splice()
splice() 方法是修改 Array 的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
5.8. concat()
concat() 方法把当前的 Array 和另一个 Array 连接起来，并返回一个新的 Array：
var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']
请注意，concat() 方法并没有修改当前 Array ，而是返回了一个新的 Array。
实际上，concat() 方法可以接收任意个元素和 Array，并且自动把 Array 拆开，然后全部添加到新的 Array 里：
var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
5.9. join()
join() 方法是一个非常实用的方法，它把当前 Array 的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
// 如果Array的元素不是字符串，将自动转换为字符串后再连接。
5.10. 多维数组
如果数组的某个元素又是一个 Array，则可以形成多维数组，例如：
var arr = [[1, 2, 3], [400, 500, 600], '-'];
// 上述Array包含3个元素，其中头两个元素本身也是Array。
6. 对象
JavaScript 的对象是一组由键-值组成的无序集合，例如：
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
JavaScript 对象的键都是字符串类型，值可以是任意数据类型。上述 person 对象一共定义了 6 个键值对，其中每个键又称为对象的属性，例如，person 的 name 属性为 'Bob' ，zipcode 属性为 null。
访问属性是通过 . 操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用 '' 括起来：
var xiaohong = {
name: '小红',
'middle-school': 'No.1 Middle School'
};
// xiaohong的属性名middle-school不是一个有效的变量，就需要用''括起来。访问这个属性也无法使用.操作符，必须用['xxx']来访问：
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'
实际上 JavaScript 对象的所有属性都是字符串，不过属性对应的值可以是任意数据类型。如果访问一个不存在的属性会返回 undefined。
由于 JavaScript 的对象是动态类型，可以自由地给一个对象添加或删除属性：
var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错
如果我们要检测 xiaoming 是否拥有某一属性，可以用 in 操作符：
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false
不过要小心，如果 in 判断一个属性存在，这个属性不一定是 xiaoming 的，它可能是 xiaoming 继承得到的：
'toString' in xiaoming; // true
因为 toString 定义在 object 对象中，而所有对象最终都会在原型链上指向 object，所以 xiaoming 也拥有 toString 属性。
要判断一个属性是否是 xiaoming 自身拥有的，而不是继承得到的，可以用 hasOwnProperty() 方法：
var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
7. 字符串
JavaScript 的字符串就是用 '' 或 "" 括起来的字符表示。如果 ' 本身也是一个字符，那就可以用 "" 括起来，比如 “I’m OK” 包含的字符是I，’，m，空格，O，K 这 6 个字符。如果字符串内部既包含 ' 又包含 " 怎么办？可以用转义字符 \\ 来标识：
'I\\'m \\"OK\\"!'; // 表示的字符串内容是：I'm "OK"!
转义字符 \\ 可以转义很多字符，比如 \\n 表示换行，\\t 表示制表符，字符 \\ 本身也要转义，所以 \\\\ 表示的字符就是 \\。
// ASCII 字符可以以 `\\x##` 形式的十六进制表示，例如：
'\\x41'; // 完全等同于 'A'
// 还可以用\\u####表示一个Unicode字符：
'\\u4e2d\\u6587'; // 完全等同于 '中文'
多行字符串
由于多行字符串用 \\n 写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号 ... 表示：
`这是一个
多行
字符串`;
模板字符串
要把多个字符串连接起来，可以用 + 号连接：
var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);
// 如果有很多变量需要连接，用 + 号就比较麻烦。ES6 新增了一种模板字符串，
// 表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量：
var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);
操作字符串
30秒就能看懂的JavaScript 代码片段