JavaScript 从入门到熟悉

1. 变量声明

• 在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。

• 在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。

• 由于 var 定义的变量存在提升机制，可能会引起一些隐蔽的 bug，因此建议使用 let 定义变量（参考：var、let、const 区别？
  ）

2. 基本数据类型

JavaScript 的数据类型大体上可分为两大类：

• 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

• 引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

2.1 字符串

2.1.1 定义字符串

在 Javascript 中定义字符串，可以使用单引号或者双引号。

let s1 = "Hello World";
let s2 = 'Hello World';
1
2

2.1.2 字符串的索引

可以通过类似数组下标索引的方式取得字符串中的每一个字符，下标从 0 开始。

// 定义
let s1 = "Hello World";
// 索引
console.log(s1[0])
1
2
3
4

2.1.3 字符串对象

可以使用 new 关键字定义一个对象

// 定义
let s2 = new String("123");

s2 == s1 // true

s2 === s1 // false 因为 === 为绝对相等，即数据类型与值都必须相等。
1
2
3
4
5
6

2.1.4 字符串的长度

我们可以通过内置属性 length 来获取某一个字符串的长度

// 定义
let s1 = "Hello World";
// 索引
console.log(s1.length);
1
2
3
4

2.1.5 其它常见字符串方法

// 定义
let s1 = "Hello World";


// 返回指定索引位置的字符
s1.charAt(0); // 注意，如果填的索引位置大于等于字符串长度，返回 '' 空字符



// 返回指定索引位置字符的 Unicode 值
s1.charCodeAt(0) // 注意，如果填的索引位置大于等于字符串长度，返回 NaN



// 连接两个或多个字符串，返回连接后的字符串
let s1 = "123";
let s2 = "456";
let s3 = s1.concat(s2) // 此时 s3 就为 '123456'



// 将 Unicode 转换为字符串
String.fromCharCode(65, 66, 67);  // 'ABC'



// 返回字符串中检索指定字符第一次出现的位置
let s4 = String.fromCharCode(65, 66, 67, 67, 66, 65);
s4.indexOf('B'); // 1
s4.indexOf('D'); // -1 如果不存在，返回 -1



// 返回字符串中检索指定字符最后一次出现的位置
s4.lastIndexOf('A'); // 5
s4.lastIndexOf('D'); // -1



// 用本地特定的顺序来比较两个字符串
let s5 = 'B';
let s6 = 'A';
let s7 = 'C';
s5.localeCompare(s7); // -1 说明 s5 在 s7 前面，也就是 s5 比 s7 小
s5.localeCompare(s6)； // 1 说明 s5 在 s6 后面，也就是 s5 比 s6 大
s5.localeCompare(s5); // 0 相等



// 提取字符串的片断，并在新的字符串中返回被提取的部分
// slice(start, end) start 必填，从0开始；end 选填，默认字符串长度
let s8 = "123456";
s8.slice(0); // '123456'
s8.slice(1,2); // '2'
s8.slice(1,1); // ''
s8.slice(10,11); // ''



// 把字符串分割为子字符串数组
let s9 = "1;2;3";
s9.split(";")  //  ['1', '2', '3']



// 从起始索引号提取字符串中指定数目的字符
// string.substr(start, length)
// start 必填，表示起始位置，如果大于字符串长度，返回 ""。如果是负数，表示从倒数第几个开始，到最后为止取几个（最多为剩余的几个）
// length 选填，表示需要截取多少个字符，如果省略，则表示剩下的都要。如果为负数，返沪 ""
let s10 = "123456";
s10.substr(0, 1); // '1'
s10.substr(3, 3); // '456'
s10.substr(0, 0); // ''
s10.substr(0, -10); // ''
s10.substr(-2, 1); // '5'
s10.substr(-2, 6); // '56'



// 提取字符串中两个指定的索引号之间的字符
// string.substring(start, end)
// 如果 end 省略，则表示从 start 到剩下的字符串
// 如果 start > end, 交换 start 和 end
s10.substring(1,2); // '2'
s10.substring(2,2); // ''
s10.substring(5,2); // '345'




// 把字符串转换为小写
// string.toLowerCase() 不改变原来的字符串，生成一个新的字符串
let s11 = "ABC";
let s12 = s11.toLowerCase(); // 'abc'



// 把字符串转换为大写
// string.toUpperCase()
let s13 = 'abc';
let s14 = s13.toUpperCase(); // 'ABC'



// 返回字符串对象值
// string.toString()
let a = 3;
let b = '3';
let c = true;
let d = {test:'123',example:123}
let e = function(){console.log('example');}
let f = ['test','example'];

a.toString();// "3"
b.toString();// "3"
c.toString();// "true"
d.toString();// "[object Object]"
e.toString();// "function (){console.log('example');}"
f.toString();// "test,example"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

2.2 数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

let num1 = 10;
let num2 = 10.11;
1
2

2.3 布尔类型

布尔（逻辑）只能有两个值：true 或 false。

let x=true;
let y=false;
1
2

2.4 数组

2.4.1 创建数组

在 Javascript 中，创建数组有三种形式，如下所示：

// 常规方式:
let arr1 = new Array();
arr1[0] = 0;
arr1[1] = 1;


// 简洁方式:
let arr2 = new Array(1, 2, 3);


// 字面：
let arr3 = [1, 2, 3];
1
2
3
4
5
6
7
8
9
10
11
12

注意⚠️：数组中的元素可以是任意类型，且可以为不同类型。

2.4.2 数组的访问和修改

其实数组创建中的第一种方式就已经涉及里数组的访问和修改了。数组的访问和修改是通过索引方式实现的

let arr4 = [1, 2, 3];
arr[0]; // 1
arr[0] = 0;
1
2
3

2.4.5 其它常见数组方法

// 使用一个固定值来填充数组（改变原数组）。
// array.fill(value, start, end)
// value	必填， 待填充的值。
// start	可选，起始位置，默认为 0。
// end		可选，结束位置，默认为数组长度。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi");

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi", 2, 4);




// 向数组的末尾添加一个或更多元素，并返回新的长度。
// array.push(item1, item2, ..., itemX)
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // 5

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon"); // 6



// 删除数组的最后一个元素并返回删除的元素。
// array.pop() 如果 array 为空，返回 undefined
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // "Mango"



// 删除并返回数组的第一个元素。
// array.shift()
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();




// 向数组的开头添加一个或更多元素，并返回新的长度。
// array.unshift(item1, item2, ..., itemX)
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");




// 合并数组，类似 extend
// array1.concat(array2, array3, ..., arrayX)
// 不改变原数组，而是生成新的数组
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin"];
// arr1 =  ['Cecilie', 'Lone']
// children = ['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus', 'Robin']
const children = arr1.concat(arr2, arr3);


// 检测数值元素，并返回符合条件所有元素的数组。
// array.filter(function(currentValue, index, arr), thisValue)
// function()	Required.A function to run for each array element.
// currentValue	Required.The value of the current element.
// index	Optional.The index of the current element.
// arr	Optional.The array of the current element.
// thisValue	Optional. Default undefined A value passed to the function as its this value.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

2.4.6 map, reduce 等高级用法

• 利用 reduce 统计频次

let arr = [1, 1, 2, 2, 2, 3];
let counter = arr.reduce((prev, curr) => {
    if (curr in prev) {
        prev[curr]++;
    } else {
        prev[curr] = 1;
    }
    return prev
}, {});

console.log(counter); // {1: 2, 2: 3, 3: 1}
1
2
3
4
5
6
7
8
9
10
11

• 利用 reduce 数组去重

let arr = [1,2,3,4,4,1];
let unique = arr.reduce((prev, curr) => {
    if (prev.includes(curr)) {
        ;
    } else {
        prev.push(curr);
    }
    return prev;
}, []);

console.log(unique); // [1, 2, 3, 4]
1
2
3
4
5
6
7
8
9
10
11

• 利用 reduce 将多维数组转换为一维数组

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
1
2
3
4
5

---

2.5 对象

2.6 Set 集合

---

99 参考：

• JS数组reduce()方法详解及高级技巧