JavaScript 数据类型详解（字符串、数组）

本文将介绍 JavaScript 中常用的两种数据类型 —— 字符串 和 数组，just follow me

1、字符串

其实字符串的使用都大同小异，没有特别新奇的点

1.1、字符串格式

• 正常的字符串使用 ’ ’ （单引号）或者 " "（双引号）包裹
• 转义字符请使用 \

//其实学过编程的基本都能知道这些基本的转义字符

\'				//单引号
\"				//双引号
\\				//反斜杠
\n				//换行
\r				//回车
\t				//水平制表符

如果要进行长字符串书写，可以在外层使用 `` （就是 table 健上面，ESC 下面那个按键）

var str_1 = "Hello world!";
console.log("str_1 = " + str_1);				//输出 Hello world!
var str_2 = 'Hello world!';
console.log("str_2 = " + str_2);				//输出 Hello world!
var str_3 = "\'Hello world!\'";
console.log("str_3 = " + str_3);				//输出 'Hello world!'
var str_4 = "Hello \nworld!";
console.log("str_4 = " + str_4);				/* 输出  Hello
                                  				world!*/
// str_5 是一个使用 `` 包裹的长字符串
var str_5 = `Today is a
        nice
        day吧
        !`;
console.log("str_5 = " + str_5);				/* 输出 Today is a
                                            			nice
                                            			day
                                            			!` */

控制台输出结果：

如果我们需要连接字符串，可以使用 + 号连接，同时 ES6 新增了一种方法，通过搭配使用 $ 和 ``

//下面我们演示两种连接字符串的方式

var str_6 = "Hello";
var str_7 = " world";
console.log("(+ 号连接)str_6 + str_7 = " + str_6 + str_7 + "!");
//请注意 ` 需要转义字符才能显示哦
console.log(`($ 和 \`\` 连接)str_6 + str_7 = ${str_6}${str_7}!`);

浏览器控制台输出结果：

注意：在 JavaScript 中字符串是不可变的，这点和 Java一样，有些人可能觉的我们可以拼接字符串，实际上拼接后的字符串内存地址早就不是原来的字符串地址了！

下面这个例子中，我们尝试将 Hello 改成 hello，但是输出结果仍然为 Hello：

1.2、字符串常用方法

1、大小写转换：toUpperCase() & toLowerCase()

//toUpperCase(): string;
//toLowerCase(): string;

var str_8 = "BIG";
console.log("str_8 = " + str_8.toLowerCase());	//输出 big
var str_9 = "small";
console.log("str_9 = " + str_9.toUpperCase());	//输出 SMALL

2、获取字符串中指定字符的下标：indexOf()

//indexOf(searchString: string, position?: number): number;

var str_10 = "This is a test sentence";
console.log("str_10 = " + str_10.indexOf("t"));	//输出 10（可以看出是严格区分大小写的）

3、截取子串方法1：substr()

//substr(from: number, length?: number): string;

var str_11 = "Today is Monday!";
console.log("str_11 = " + str_11.substr(9, 6));	//输出 Monday

4、截取子串方法2：subString()

//substring(start: number, end?: number): string;

var str_12 = "HaHa, you are funny"
console.log("str_12 = " + str_12.substring(6, 19));//输出 you are funny

上边所有代码运行结果：

有些人可能会问，哎怎么没有 length 啊？因为这是字符串的属性，方法是带括号 () 的，千万不要弄错！

2、数组

2.1、数组格式

JavaScript 数组特点：一个数组可以包含任意类型的数据，这一点和 python 的 list 类似

//数组的创建有多种方式

//1、直接赋值
let array_1 = [1, 2, 3, 'abc', null];

//2、使用 new 关键字（不推荐）
let array_2 = new Array(1, 2, 3, 'abc', null);

同样可以使用多维数组

let array_double = [[1, 2], [3, 4], ['5', '6']];
console.log(array_double);

浏览器控制台输出二维数组（这里解释一下：第一行的 Array（2）代表该数组的第一个元素也是一个数组，而且含有两个元素，下标为 0 的元素值为 1，下标为 1 的元素值为 2，下面依次类推）：

2.2、数组常用方法

首先我们准备测试数据：

// 我们会使用 array 数组测试常用的方法
var obj = {
    name: "Mike",
    age: 21,
    school: "清华大学"
};
var arr = ["Hello World!"];
function func1() {
    console.log("Today is a good day!");
}

//可以看到这个数组的元素类型很多，有 number、字符串、对象、数组和函数，请注意函数写入数组不要使用 ()，否则会直接执行（一般情况下没人会把函数写到数组内）
var array = [1, 2, "a", 'b', obj, arr, func1];

1、数组的长度：length（注意，这是属性，不是方法）

//1、数组的长度
console.log("array 数组的长度是：" + array.length);		              //输出 7

注意：如果给 array.length 赋值，变长的部分会被赋值为 undefined，变短则会丢弃数组原本的元素

2、获取数组元素的下标：indexOf()

//2、获取指定元素在数组中的下标，不存在返回 -1
console.log("元素 3 在 array 数组的下标是：" + array.indexOf(3));         //下标为 -1
console.log("元素 obj 在 array 数组的下标是：" + array.indexOf(obj));     //下标为 4

3、截取数组的一部分：slice()

/* 3、截取数组的一部分
需要注意第一个参数代表开始截取的元素下标，第二个参数代表结束截取的元素下标 + 1
例如：你想要截取下标为 2~3 的数组片段，你得写 slice(2, 4) */

console.log("截取 array 数组下标为 3~5 的元素 ↓↓↓");
console.log(array.slice(3, 6));	                                   
//截取的数组片段为 ['b', obj, arr]

4、首尾添加/弹出元素：push()、pop()、unshift()、shift()

console.log("\n注意下面输出的内容都是数组的长度！\n");

//4、尾部添加元素：push()，函数返回添加后数组的长度
console.log("array 尾部添加元素 \'10\'：" + array.push('10'));	       
//现在数组为：[1, 2, "a", 'b', obj, arr, func1, '10']

//5、尾部弹出数据：pop()，函数返回添加后数组的长度
console.log("array 尾部弹出元素：" + array.pop());		               
//现在数组为：[1, 2, "a", 'b', obj, arr, func1]

//6、头部添加元素：unshift()，函数返回添加后数组的长度
console.log("array 头部添加元素 0：" + array.unshift(0));       
//现在数组为：[0, 1, 2, "a", 'b', obj, arr, func1]

//7、弹出头部元素：shift()，函数返回添加后数组的长度
console.log("array 头部弹出元素：" + array.shift());		            
//现在数组为：[1, 2, "a", 'b', obj, arr, func1]

5、数组排序：sort()

//8、数组排序：sort()
var array_2 = [1, 4, 2, 6, 10];
console.log("array_2 数组排序结果：" + array_2.sort());     //输出 [1, 10, 2, 4, 6]

可以看到数组排序还是按照字符的 ASCII 码进行比较，所以 10 < 2

6、数组元素反转：reverse()

//9、数组元素反转：reverse()
console.log("array_2 数组反转：" + array_2.reverse());    //输出 [6, 4, 2, 10, 1]

7、连接符：join

//10、连接符：join
console.log("使用 join 连接 array_2 数组元素：" + array_2.join(" -- "));  //输出 6 -- 4 -- 2 -- 10 -- 1

上边所有测试方法输出的结果（都写了标注，对你们多好）：

那么关于字符串和数组就说到这吧，上边的方法都是较为常用的，更多的方法建议 CTRL + 鼠标左键（IDEA 适用），点开 String 或者 Array 源码直接看，注意这里的首字母是大写的哦