JS 学习笔记 | 字符串与数组

作者: 青年心路 | 来源:发表于2020-05-17 20:58 被阅读0次

一、字符串

字符串就是用单引号或者双引号包裹起来的，零个或多个排列在一起的字符。

1.字符串的长度

计算字符串的长度使用字符串.length的方式。
例如：

var txt1 = "Hello World!";
document.write(txt1.length);    // 12

2.字符索引

使用方法：在字符串后面接 []，中括号里面传入数字，能够访问到字符串中的每个字符（索引从0开始）。
例如：

var str = "Hello World!";
console.log(str[1]);    // e

3.charAt() 和 charCodeAt()

charAt() 和 charCodeAt() 均表示获取指定位置的字符。不同的是
前者返回具体的字符，后者返回字符的 Unicode 码。

例如：

var str = "Hello World!";
console.log(str.charAt(0)); // H
console.log(str.charCodeAt(0)); // 72

注意：如果向 charCodeAt() 方法中传入了负数或者大于等于字符串的长度，那么该方法会返回 NaN。

4.concat() 方法

concat() 方法能够将多个字符串拼接起来，合成一个新的字符串。
例如：

var str1 = "He";
var str2 = "llo";
console.log(str1.concat(str2)); // Hello

注意：该方法可以传入多个字符串参数，实现多个字符串之间的拼接。

5.转义字符

在 JavaScript 中，字符串可以写在单引号或者双引号中。正因为这样，以下字符串无法解析："My name is "swagger"，This year 21 years old"。

该字符串会在My name is 被截断。

解决字符串嵌套问题：
在字符串内部的双引号前面添加转义字符（“\”）即可解决。
除此之外，转义字符还可以将特殊字符转换为字符串字符。转义字符（\）可以用于转义撇号、换行、引号等特殊字符。

alert("My name is \"swagger\"，This year 21 years old");

如果在程序中需要设置磁盘路径可能就包含 \ 字符，如果不加以处理就会出现找不到路径的错误。
例如：

var path = "D:\resource";
console.log(path);  // D:esource

这里面的 r 就被转义了，所以需要在前面再添加一个 \。

var path = "D:\\resource";
console.log(path);  // D:\resource

6.字符串对象

JavaScript 中有字符串类型，我们也知道这种类型的创建方式，但在 JavaScript 中还提供了另外一种方式，这种方式叫做字符串对象，使用 new 关键字将字符串定义成一个对象。
语法：

var newString = new String("Swagger");

注意：

不要创建 String 对象，它会拖慢执行速度，并可能产生其它副作用。
字符串和字符串对象是不同的，虽然效果相似，但是不能混为一谈。

var str1 = "Swagger";
var str2 = new String("Swagger");
console.log(typeof str1);   // string
console.log(typeof str2);   // object
console.log(str1 == str2);  // true
console.log(str1 === str2); // false

7.其它字符串常用方法

在这里插入图片描述

8. JavaScript 字符集

JavaScript 使用 Unicode 字符集，也就是说，在 JavaScript 引擎内部，所有字符都用 Unicode 表示。
JavaScript 不仅以 Unicode 存储字符，还允许直接在程序中使用 Unicode 编号表示字符，即将字符写成 \uxxxx 的形式，其中 xxxx 代表该字符的 Unicode 编码。
比如，\u00A9 代表版权号。解析代码的时候，JavaScript 会自动识别一个字符是字面形式表示，还是 Unicode 形式表示。输出给用户的时候，所有字符都会转成字面形式。

8.1 字符串 Base64 编码

Base64 本身是一种加密方式，可以将任意字符转成可打印字符。而我们使用这种编码方法，主要不是为了加密，而是为了不出现特殊字符，简化程序的处理。

JavaScript 中字符串提供了两个有关 Base64 编码的方法：

btoa()：字符串或二进制值转成 Base64 编码
atob()：Base64 编码转换成原来的编码

var uname1 = "swagger";
console.log(btoa(uname1));  // c3dhZ2dlcg==

var uname2 = "c3dhZ2dlcg==";
console.log(atob(uname2));  // swagger

注意：这两个方法不适合非 ASCII 码的字符，会报错。如果把非 ASCII 码字符转换成 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。

8.2 加解密中文文字

encodeURIComponent()：加密
decodeURIComponent()：解密

二、数组

数组（Array）是按照一定顺序排列的一组值，每个值都拥有自己的编号，编号从 0 开始，整个数组用方括号来表示。
语法：

var arr = [item1, item2, item3];

上述代码中 item1、item2、item3 元素就构成一个数组。两端的方括号是数组的标志。因为数组元素编号从 0 开始，所以 item1 是数组的第 0 个元素。

注意： item1、item2 和 item3 是泛指，JavaScript 中的数组元素可以是任何类型的数据。

1.数组的特点

1.1 数组的本质是对象

数组是对象的一种特殊的表现形式，因此创建的时候我们可以使用 new 方式来创建

var names = new Array("tom", "alice", "jack");
console.log(typeof names);  // object

1.2 数组的长度

我们都知道，JavaScript 中的数组可以存放任意数据类型的数据，而在计算机中不同的数据类型存储的位置也是不同的，因此 JavaScript 中数组元素在内存中的存储位置是不连续的。

在这里插入图片描述
如果我们不能按照内存地址来访问数组元素，那样在编程的时候会造成很大的不便，所以为了解决这个问题，我们按照下标的方式来对数组元素进行标记。，所以在计算数组长度的时候只需要计算数组元素的个数即可。

在这里插入图片描述
注意：数组的长度（length）是一个可写属性（可修改）。

如果 length 长度小于数组本身，则舍弃多余的元素。
如果 length 长度大于数组本身，则用空位补齐。
如果 length 长度不是合法数值，则会报 Invalid array length 错误。

1.3 数组的遍历

如果想要连续访问数组中的每个元素，可以使用 for-in 快速遍历。

var students = ["tom", "alice", "jack"];
for (var index in students) {
    console.log(students[index]);
}

注意：for-in 循环遍历数组的时候，for 循环中 index 表示数组的下标，并不是数组元素。

1.4 数组的空位

当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位（hole）。

var countrys = ["china", "japan", "america"];
console.log(countrys.length);   // 3
var countrys = ["china", "", "america"];
console.log(countrys.length);   // 3

注意：如果最后一个元素后面有逗号，并不会产生空位，也就是说最后一个元素后面的逗号有和没有是一样的

1.5 数组的删除

delelte 命令能删除数组中的值，从而形成空位。但 delete 命令并不会影响 length 的属性。

var countrys1 = ["china", "japan", "america"];
console.log(countrys1.length);  // 3
delete countrys1[1];
console.log(countrys1.length);  // 3
console.log(countrys1); // ["china", empty, "america"]

注意：delete 命令在使用的时候，是根据数组下标来对指定数组的值进行删除的。

2.数组的调用

数组的调用是指数组元素的调用，数组元素通过 数组名[下标] 的方式来进行访问。

var names = ["tom", "alice", "jack"];
console.log(names[1]);  // alice

注意：数组元素一次只能访问一个，不能一次连续访问多个数组元素。

3.数组的常用方法

在这里插入图片描述

3.1 isArray

isArray 方法是 Array 提供的用来专门判断当前对象是否为数组的方法，如果是数组返回 true，如果不是返回 false。

var arr = ["a", "b", "c"];
console.log(typeof arr);    // object
console.log(Array.isArray(arr));    // true

var obj = {};
console.log(typeof obj);    // object
console.log(Array.isArray(obj));    // false

3.2 valueOf

valueOf 方法属于 Object 对象类型，作用是返回指定对象的原始值，在数组中使用是返回数组本身。

var arr = ["a", "b", "c"];
console.log(arr.valueOf() === arr); // true

注意：JavaScript 的许多内置对象都重写了该函数，以实现更适合自身的功能需求。因此，不同类型对象的 valueOf() 方法的返回值和返回值类型均有可能不同。

3.3 toString

toString 方法能够把数组转换成字符串。
语法：

arr.toString();

var arr = ["a", "b", "c"];
console.log(arr.toString());    // a,b,c

3.4 push

push方法用于在数组的末端添加一个或多个元素，并返回添加后的数组长度。
语法：

arr.push(item);

var arr = ["a", "b", "c"];
console.log(arr.push("d")); // 4

3.5 pop

pop 方法用于删除数组的最后一个元素，并返回删除的这个元素。
语法：

arr.pop();

var arr = ["a", "b", "c"];
console.log(arr.pop()); // c
console.log(arr);   // ["a", "b"]

3.6 join

join 方法能够以给定的参数做分隔符，将所有的数组元素组成一个字符串。如果不提供参数，默认使用逗号分隔。
语法：

arr.join(separator);

var arr = ["a", "b", "c"];
console.log(arr.join());    // a,b,c
console.log(arr.join("|")); // a|b|c

3.7 shift

shift 方法用于删除数组中的第一个元素，并返回删除的这个元素。
语法：

arr.shift();

var arr = ["a", "b", "c"];
console.log(arr.shift());   // a

3.8 unshift

unshift 方法用于在数组的第一个位置添加元素，并返回添加元素后的数组长度。
语法：

arr.unshift();

var arr = ["a", "b", "c"];
console.log(arr.unshift("100"));    // 4
console.log(arr);   // ["100", "a", "b", "c"]

3.9 reverse

reverse 方法能够反序排列数组。
语法：

arr.reverse();

var arr = ["a", "b", "c"];
console.log(arr.reverse()); // ["c", "b", "a"]

3.10 slice

slice 方法可以根据指定的起点和终点来对数组进行截取，并生成一个新数组。新数组的内容是从起点下标的元素到终点下标的元素，但不包含终点下标的元素本身。

语法：

arr.slice(index1, index2);

var arr = ["a", "b", "c"];
console.log(arr.slice(1, 2));   // b

上面的代码从下标为 1 的元素开始截取，截取到下标为 2 处，但是不包括下标为 2 的元素。

注意：

slice 方法的参数可以是负值，-1 代表最后一个元素，-2 代表倒数第二个元素。
如果只写一个下标，则表示从该下标处截取到数组末尾。

3.11 splice

splice 方法和 slice 方法很相似，但是 splice 更强大，splice 方法的作用是在指定下标处截取一定长度的元素，再插入一些新元素，并将删除的元素构成一个新数组返回，splice 方法会改变原数组。

语法：

arr.splice(index, removeCount, addItem1, addItem2...);

var nums = [1, 2, 3, 'a', 'b', 'c', 7, 8, 9];
// 从索引为 3 的位置删除 3 个元素，再将 4, 5, 6 添加进去
var new1 = nums.splice(3, 3, 4, 5, 6);  
console.log(new1);  // ["a", "b", "c"]
console.log(nums);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

注意：前两个参数是必要的，后面的可以自己选择。

3.12 sort

sort 方法用于对数组元素进行排序，默认按照编码方式进行排序（即不在括号里写任何内容），如果不希望按照默认方式排序，则需要自定义排序函数。

语法：

arr.sort(sortby);

var arr = [1, 100, 40, 25, 38];
console.log(arr.sort());    // [1, 100, 25, 38, 40]

注意：如果调用该方法时没有使用参数，则按照字符编码的顺序排序。

3.13 indexOf

indexOf 方法能够从前到后检索数组，并返回元素在数组中的第一次出现的下标，如果没有找到则返回 -1，indexOf 第二个参数表示第几个元素开始索引。
语法：

arr.indexOf(item, beginIndex);

var nums = [11, 13, 15, 17, 19, 11];
console.log(nums.indexOf(11));  // 0
console.log(nums.indexOf(11, 1));   // 5
console.log(nums.indexOf(100)); // -1

注意：第二个参数可以是负值，如果是 -1 则表示从最后一个元素开始向后查找（不推荐）。

3.14 lastIndexOf

lastIndexOf 方法能够从后向前检索数组，并返回元素在数组中的最后一次出现的下标，如果没有找到则返回 -1，lastIndexOf 的第二个参数表示从第几个元素开始索引，是可选参数。

语法：

arr.lastIndexOf(item, beginIndex);

var nums = [11, 13, 15, 17, 19, 11];
console.log(nums.lastIndexOf(11));  // 5
console.log(nums.lastIndexOf(11, -2));  // 0
console.log(nums.lastIndexOf(100)); // -1

4.二维数组

如果数组的元素还是数组，那么我们就称外层数组是一个二维数组。
语法：

var arr = [[item1, item2], [item3, item4]];

var arr = [[1, 2], [3, 4]];
console.log(arr[0][1]); // 2
console.log(arr[1][0]); // 3

二维数组的调用很简单，有两个下标。第一个下标表示外层数组的下标，第二个下标表示内层数组的下标。