[ JavaScript ] 基础知识

时间 2020-05-18

原文原文链接

1. 数据类型

（1）Numberjavascript

JavaScript 不分区整数和浮点数，统一用Number表示，如下都是合法的Number类型：java

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当没法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

Number能够直接作四则运算，规则和数学一致：web

1 + 2; // 3
(1 + 2) * 5 / 2; // 7.5
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5

（2）字符串数组

字符串是以单引号或双引号括起来的任意文本。好比： 'abc', 'xyz' 等等。浏览器

（3）布尔值数据结构

一个布尔值只有 true、false 两种值。函数

&& 表示 与 的关系，只有全部都为 true，&&运算结果才是true
|| 表示 或 的关系，只要其中一个为 true，则 || 结果为 true
！ 运算是非运算，是把 true 变为 false， false 变为 true

布尔值常常用于条件判断中：spa

var age = 15;
if (age >= 18) {
    alert('adult');
} else {
    alert('teenager');
}

（4）比较运算符3d

当咱们对 Number 作比较时，能够经过运算符获得一个布尔值：code

2 > 5; // false 5 >= 2; // true 7 == 7; // true

== 和 === 的区别

第一种 == 比较，它会自动转换数据类型再比较，不少时候，会获得很是奇怪的结果；

第二种 === 比较，它不会自动转换数据类型，若是数据类型不一致，返回 false，若是一致，再比较。

有这两种不一样的结果，所以在比较中，应当坚持使用 ===

null 和 undefined 的区别

null 是一个 ‘空’ 的值，它和0以及空字符串 ‘’ 不一样，0是一个数值，‘’表示长度为0的字符串，而null表示‘空’。

在 javascript 中，null表示一个空值，而 undefined 表示值未定义。在大多数状况下，咱们都应该用 null，undefined 仅仅在判断函数参数是否传递的状况下有用。

（5）数组

数组是一组按顺序排列的集合，集合的每一个值称为元素。JavaScript的数组能够包括任意数据类型。

两种建立数组的方式：

var arr = [1, 2, 3.14, 'Hello', null, true];
var arr1 = new Array(1,2,3);

处于代码的可读性考虑，强烈建议采用直接赋值的方式（第一种方式）

数组的元素能够经过索引来访问。索引的起始值为 0 ：

（6）对象

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

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

JavaScript对象的键都是字符串类型，值能够是任意数据类型。

要获取对象的属性，用对象变量.属性名的方式：

（7）变量

变量不只能够是数字，还能够是任意数据类型。

var a; // 申明了变量a，此时a的值为undefined
var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true
var t = null; // t的值是null

在JavaScript中，使用等号 = 对变量进行赋值。能够把任意数据类型赋值给变量，同一个变量能够反复赋值，并且能够是不一样类型的变量，可是要注意只能用var申明一次。

要显示变量的内容，可使用 console.log(x)打印

var a = 'beijing';

console.log(a);
VM714:1 beijing

1.1 字符串

JavaScript的字符串就是用''或""括起来的字符表示。

多行字符串用反引号表示：

模板字符串

要把多个字符串链接起来，能够用+号链接：

若是有不少变量须要链接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串同样，可是它会自动替换字符串中的变量：

操做字符串

（1）计算字符串的长度

var a = 'hello world.';

a.length
12

（2）获取字符串指定位置的字符，使用索引号来操做

var a = 'hello world.';
a[4]
"o"
a[10]
"d"

须要注意的是，字符串是不可变的，若是对字符串的某个索引赋值，不会有任何错误。所以字符串的经常使用方法并不会改变原字符串内容，而是返回一个新的字符串。

var s = 'test';

s[0] = 'T';
"T"
s
"test"

（3）toUpperCase

toUpperCase()把一个字符串所有变为大写：

var s = 'Hello';

s.toLocaleUpperCase();
"HELLO"

（4）toLowerCase

toLowerCase()把一个字符串所有变为小写：

var s = 'Hello';

s.toLocaleLowerCase();
"hello"

（5）indexOf

indexOf()会搜索指定字符串出现的位置：

（6）substring

substring()返回指定索引区间的子串：

（7）slice

slice() 方法可从已有的数组中返回选定的元素。

slice() 、substring() 、substr() 三者比较使用总结以下：

string.slice(x, y) 提取一个字符串；

string.substring(x, y) 提取一个字符串，可是 y 不能为负数；

string.substr(x, y) 提取一个长度为 y 的字符串。

实例：

1.2 数组

javascript 中的数组能够包含任意数据类型，并经过索引来访问每一个元素。

要取得数组的长度，直接使用 length 属性：

注意：不要随便给 Arry.length 赋值，不然会形成数组元素的变化；

Array能够经过索引把对应的元素修改成新的值，所以，对Array的索引进行赋值会直接修改这个Array：

数组经常使用方法

（1）indexOf

与String相似，Array也能够经过indexOf()来搜索一个指定的元素的位置：

（2）slice

slice()就是对应String的substring()版本，它截取Array的部分元素，而后返回一个新的Array：

注意：在 Array（数组）中没法使用 substring()

若是不给slice()传递任何参数，它就会从头至尾截取全部元素。利用这一点，咱们能够很容易地复制一个Array

（3）push 和 pop

push() 向 Array 的末尾追加若干个元素，pop() 则把 Array 的最后一个元素删除：

（4）unshift 和 shift

若是要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：

（5）sort

sort()能够对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序：

（6）reverse

reverse()把整个Array的元素给掉个个，也就是反转：

（7） splice

splice()方法是修改Array的“万能方法”，它能够从指定的索引开始删除若干元素，而后再从该位置添加若干元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素，而后再添加2个元素
arr.splice(2, 3, 'Google', 'Facebook');
(3) ["Yahoo", "AOL", "Excite"]
arr;
(5) ["Microsoft", "Apple", "Google", "Facebook", "Oracle"]

// 只删除，从索引为2开始，删除2个元素
arr.splice(2, 2);
(2) ["Google", "Facebook"]
arr
(3) ["Microsoft", "Apple", "Oracle"]

// 不删除，只添加，从索引为2的位置删除0个元素，并添加2个元素
arr.splice(2, 0, 'Google', 'Facebook');
[]
arr;
(5) ["Microsoft", "Apple", "Google", "Facebook", "Oracle"]

（8）concat

concat()方法把当前的Array和另外一个Array链接起来，并返回一个新的Array：

注意：concat() 方法并无修改当前 Array，而是返回了一个新的Array。

实际上，concat()方法能够接收任意个元素和Array，而且自动把Array拆开，而后所有添加到新的Array里：

（9）join

join()方法是一个很是实用的方法，它把当前Array的每一个元素都用指定的字符串链接起来，而后返回链接后的字符串：

若是Array的元素不是字符串，将自动转换为字符串后再链接。

（10）多维数组

若是数组的某个元素又是一个Array，则能够造成多维数组，例如：

var arr = [[1, 2, 3], [400, 500, 600], '-'];

若是须要取 500 的值：

小结

Array（数组）提供了按照顺序存储一组元素的功能，并能够经过索引取值来读写。

练习题-1：

在新生欢迎会上，你已经拿到了新同窗的名单，请排序后显示：欢迎XXX，XXX，XXX和XXX同窗！：

var arr = ['小明', '小红', '大军', '阿黄'];
console.log('欢迎' + arr.slice(0, 3) + '和' + arr.slice(3) + '同窗！');

1.3 对象

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。
JavaScript的对象用于描述现实世界中的某个对象。例如，为了描述“小明”这个淘气的小朋友，咱们能够用若干键值对来描述他：

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};

JavaScript用一个{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。

注意：最后一个键值对不须要在末尾加,，若是加了，有的浏览器（如低版本的IE）将报错。

经过对象获取值：

访问一个对象不存在的属性时，返回 undefined

访问属性是经过 . 操做完成的，但这要求属性名必须是一个有效的变量名。若是属性名包含特殊字符，就必须用 'xxx' 括起来：

在平常使用中，通常建议使用对象.name 的方式来获取值。

JavaScript对象的全部属性都是字符串，不过属性对应的值能够是任意数据类型。

因为JavaScript的对象是动态类型，你能够自由地给一个对象添加或删除属性：

若是咱们要检测xiaoming是否拥有某一属性，能够用in操做符：

不过要当心，若是in判断一个属性存在，这个属性不必定是xiaoming的，它多是xiaoming继承获得的：

由于toString定义在object对象中，而全部对象最终都会在原型链上指向object，因此xiaoming也拥有toString属性。

要判断一个属性是不是xiaoming自身拥有的，而不是继承获得的，能够用hasOwnProperty()方法：

1.4 条件判断

JavaScript使用if () { ... } else { ... }来进行条件判断。例如，根据年龄显示不一样内容，能够用if语句实现以下：

多条件判断

若是判断过多，可使用多个 if ... else ... 的组合：

JavaScript把null、undefined、0、NaN和空字符串''视为false，其余值一律视为true，所以上述代码条件判断的结果是true。

练习-1：

小明身高1.75，体重80.5kg。请根据BMI公式（体重除以身高的平方）帮小明计算他的BMI指数，并根据BMI指数：

低于18.5：太轻
18.5-25：正常
25-28：太重
28-32：肥胖
高于32：严重肥胖

var height = parseFloat(prompt('请输入身高（m）:'));
var weight = parseFloat(prompt('请输入体重（kg）:'));

var bmi = weight / height**2;
console.log(bmi);

// 经过逻辑判断，在if条件判断中，只要知足其中一个if (条件) 则终止判断
if (bmi < 18.5) {
    alert('太轻');
} else if (bmi < 25 ) {
    alert('正常')
} else if (bmi < 28) {
    alert('太重')
} else if (bmi < 32) {
    alert('肥胖')
} else {
    alert('严重肥胖')
}

1.5 循环

JavaScript的循环有两种：

　　（1）经过 for 循环，经过初始条件、结束条件和递增条件来循环执行语句块：

　　（2）经过while 循环，在已知循环的初始和结束条件时很是有用

（1） for 循环

利用 for 循环计算 1 * 2 * 3 * ... * 10 的结果：

var x = 1;
var i;
for (i=1; i <=10; i++) {
  x *= i;
}

for 循环最经常使用的地方是利用索引来遍历数组：

for (var i=0; i<arr.length; i++) {
    console.log(arr[i]);
};

若是使用 for 循环没有明确的退出条件，则必须使用 break 来退出：

var x = 0;
for (;;) { // 将无限循环下去
    if (x > 100) {
        break; // 经过if判断来退出循环
    }
    x ++;
}

for ... in

　　for ... in 是把一个对象的属性依次循环出来：

要过滤掉继的属性，用 hasOwnProperty() 来实现：

注意：在使用 for 循环遍历 Array（数组）时，有两种方式：

（1）经过 for ... in 遍历数组的索引位置（在循环遍历索引的时候，获得的string类型，而不是Number）

（2）经过 for ... of 遍历数组的值（没法遍历对象类型）

（1）

（2）

（2）while 循环

while 循环只有一个判断条件，条件知足，就不断循环，条件不知足时则退出循环。

求：1-100之和

do ... while

这种循环不是在循环开始就进行条件判断，而是在循环完成的时候进行条件判断（这种循环模式不经常使用）

小结

循环是为了作重复的事情，在编写代码时，必需要当心初始条件和判断条件，尤为是边界值。 i < 100 或 i <= 100 是不一样的判断逻辑。

1.6 Map 和 Set

JavaScript的默认对象表示方式{}能够视为其余语言中的Map或Dictionary的数据结构，即一组键值对。可是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其余数据类型做为键也是很是合理的。为了解决这个问题，最新的ES6规范引入了新的数据类型Map。

（1）Map

Map 是一组键值对的结构，具备极快的查询速度。

建立一个 Map：

初始化Map须要一个二维数组，或者直接初始化一个空Map。Map具备如下方法：

能够看到，若是将值删除，再经过 m.get() 获取的话，返回的是 undefined

（2）Set

Set和Map相似，也是一组key的集合，但不存储value。因为key不能重复，因此，在Set中，没有重复的key。

要建立一个Set，须要提供一个Array做为输入，或者直接建立一个空Set：

重复元素在 Set 中自动被过滤掉：

能够经过 s1.add(xxx) 来添加元素，若是添加的重复，则不会有任何变化。

最后，也能够经过 delete 删除 Set中的元素：

小结

Map 和 Set 是ES6标准新增的数据类型，请根据浏览器的支持状况决定是否要使用。

1.7 iterable

遍历Array能够采用下标循环，遍历Map和Set就没法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具备iterable类型的集合能够经过新的for ... of循环来遍历。

使用 for ... of 遍历以下：

然而，更好的方式是直接使用 iterable 内置的 forEach 方法，它接收一个函数，每次迭代就自动回调该函数。以 Array为例：

a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象自己
    console.log(element + ', index = ' + index);
});

1.8 JavaScript 三元运算

(condition) ? (expr2) : (expr3)
(判断条件) ? (当条件判断为 true 返回该结果) : (当条件判断为 false 返回该结果)

在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3。