前台界面--- 字符串和数组

Posted 2020-08-31 幻影星辰

目录

1. 字符串

1.1. 字符串中的转义序列

1.2. 字符串的不可变性

1.3. 字符串索引

1.4. 字符串分割：split

1.5. 数组连接成字符串：join

2. 数组

2.1. 数组索引

2.2. 多维数组

2.3. 数组方法

2.3.1. 数据追加到数组的尾部push() 函数

2.3.2. 移除数组最后一个元素pop() 函数

2.3.3. 移出数组第一个元素shift()函数

2.3.4. 加入到数组头部一个元素unshift()函数

2.3.5. 迭代数组：map

2.3.6. 数组的累加：reduce

2.3.7. 过滤数组：filter

2.3.8. 数组排序：sort

2.3.9. 翻转数组：reverse

2.3.10. 合并数组：concat

-----------------------黄金分割线----------------------

1. 字符串

1.1. 字符串中的转义序列

引号不是字符串中唯一的可以被转义字符。下面是常见的转义序列列表:

Code	Output
\\\'	单引号
\\"	双引号
\\\\	反斜杠符
\\n	换行符
\\r	回车符
\\t	制表符
\\b	退格符
\\f	换页符

注意，如果你想要显示一个反斜杠就必须要转义它。

1.2. 字符串的不可变性

在 javascript 中，字符串 的值是 不可变的，这意味着一旦字符串被创建就不能被改变。

例如，下面的代码：

var myStr = "Bob";
myStr[0] = "J";

是不会把变量 myStr 的值改变成 "Job" 的，因为变量 myStr 是不可变的。注意，这 并不 意味着 myStr 永远不能被改变，只是字符串字面量 string literal 的各个字符不能被改变。改变 myStr 中的唯一方法是重新给它赋一个值，就像这样：

var myStr = "Bob";
myStr = "Job";

1.3. 字符串索引

你也可以使用 [索引]来获得一个字符串中的其他位置的字符。

请记住，程序是从 0 开始计数，所以获取第一个字符实际上是[0]。

为了得到一个字符串的最后一个字符，你可以用[字符串的长度减去一]。

例如，在 var firstName = "Charles" 中，你可以这样操作 firstName[firstName.length - 1] 来得到字符串的最后的一个字符。

我们既可以获取字符串的最后一个字符，也可以用获取字符串的倒数第N个字符。

例如，你可以这样firstName[firstName.length - 3] 操作来获得 var firstName = "Charles" 字符串中的倒数第三个字符。

1.4. 字符串分割：split

你可以使用 split 方法按指定分隔符将字符串分割为数组。

你要给 split 方法传递一个参数，这个参数将会作为一个分隔符。

下面的例子展示了 split 方法的使用，按照 s字母进行分割：

var array = string.split(\'s\');

使用 split 方法来把字符串 string 分割为数组 array。

1.5. 数组连接成字符串：join

我们还可以使用 join 方法来把数组转换成字符串，里面的每一个元素可以用你指定的连接符来连接起来，这个连接符就是你要传入的参数。

下面展示了使用 join 来将数组中的每一项放入字符串，并用 and 进行连接：

var veggies = ["Celery", "Radish", "Carrot", "Potato"];
var salad = veggies.join(" and ");
console.log(salad); // "Celery and Radish and Carrot and Potato"

使用 join 方法，连接符为\' \'把数组 joinMe转化成字符串 joinedString.

 

2. 数组

使用 数组，我们可以在一个地方存储多个数据。

以左方括号[开始定义一个数组，以右方括号]结束定义，并把每个条目之间用逗号隔开，就像这样：
var sandwich = ["peanut butter", "jelly", "bread"]。

你也可以在数组中包含其他数组，就像这样:[["Bulls", 23], ["White Sox", 45]]。这被称为一个 多维数组。

2.1. 数组索引

我们可以像操作字符串一样通过数组索引[index]来访问数组中的数据。

数组索引的使用与字符串索引一样，不同的是，通过字符串的索引得到的是一个字符，通过数组索引得到的是一个条目。与字符串类似，数组也是 基于零 的索引，因此数组的第一个元素的索引是 0。

与字符串的数据不可变不同，数组的数据是可变的，并且可以自由地改变。

例如

var ourArray = [3,2,1];
ourArray[0] = 1; // ourArray等于 [1,2,1]

2.2. 多维数组

可以把 多维 数组看作成是一个 数组中的数组。当使用[]去访问数组的时候，第一个[index]访问的是第N个子数组，第二个[index]访问的是第N个子数组的第N个元素。

例如

var arr = [
[1,2,3],
[4,5,6],
[7,8,9],
[[10,11,12], 13, 14]
];
arr[0]; // 等于 [1,2,3]
arr[1][2]; // 等于 6
arr[3][0][1]; // 等于 11

2.3. 数组方法

2.3.1. 数据追加到数组的尾部push() 函数

一个简单的方法将数据追加到一个数组的末尾是通过 push() 函数。

.push() 接受把一个或多个参数，并把它“推”入到数组的末尾。

var arr = [1,2,3];
arr.push(4);
// 现在arr的值为 [1,2,3,4]

2.3.2. 移除数组最后一个元素pop() 函数

改变数组中数据的另一种方法是用 .pop() 函数。

.pop() 函数用来“抛出”一个数组末尾的值。我们可以把这个“抛出”的值赋给一个变量存储起来。

数组中任何类型的条目（数值，字符串，甚至是数组）可以被“抛出来”。

举个例子, 对于这段代码
var oneDown = [1, 4, 6].pop();
现在 oneDown 的值为 6 ，数组变成了 [1, 4]。

2.3.3. 移出数组第一个元素shift()函数

pop() 函数用来移出数组中最后一个元素。如果想要移出第一个元素要怎么办呢？

这就是 .shift() 的用武之地。它的工作原理就像 .pop()，但它移除的是第一个元素，而不是最后一个。

2.3.4. 加入到数组头部一个元素unshift()函数

你不仅可以 shift（移出）数组中的第一个元素，你也可以 unshift（移入）一个元素到数组的头部。

.unshift() 函数用起来就像 .push() 函数一样, 但不是在数组的末尾添加元素，而是在数组的头部添加元素。

2.3.5. 迭代数组：map

map 方法可以方便的迭代数组，例子：

var timesFour = oldArray.map(function(val){
  return val * 4;
});

map 方法会迭代数组中的每一个元素，并根据回调函数来处理每一个元素，最后返回一个新数组。注意，这个方法不会改变原始数组。

在我们的例子中，回调函数只有一个参数，即数组中元素的值 (val 参数) ，但其实，你的回调函数也可以支持多个参数，譬如：元素的索引index、原始数组arr。

使用 map 方法来为 oldArray 中的每一项增加3，并且在 newArray 中保存它们。 oldArray不应该被改变。

2.3.6. 数组的累加：reduce

数组方法 reduce 用来迭代一个数组，并且把它累积到一个值中。

使用 reduce 方法时，你要传入一个回调函数，这个回调函数的参数是一个 累加器 （比如例子中的 previousVal) 和当前值 (currentVal）。

reduce 方法有一个可选的第二参数，它可以被用来设置累加器的初始值。如果没有在这定义初始值，那么初始值将变成数组中的第一项，而 currentVal 将从数组的第二项开始。

下面的例子使用了 reduce 来让数组中的所有值相减：

var singleVal = array.reduce(function(previousVal, currentVal) {
  return previousVal - currentVal;
}, 0);

使用 reduce 方法来让 array 中的所有值相加，并且把结果赋值给 singleVal 。

2.3.7. 过滤数组：filter

filter 方法用来迭代一个数组，并且按给出的条件过滤出符合的元素。

filter 方法传入一个回调函数，这个回调函数会携带一个参数，参数为当前迭代的项（我们叫它 val ）。

回调函数返回 true 的项会保留在数组中，返回false 的项会被过滤出数组。

下面的代码示例展示了使用 filter 来移除数组中值等于5的项：

注意： 我们忽略了第二参数和第三参数，因为例子中我们只需要第一参数就够了。

array = array.filter(function(val) {
  return val !== 5;
});

使用 filter 来创建一个新数组，新数组的值是oldArray 中值小于6的元素。不许改变原数组oldArray 。

2.3.8. 数组排序：sort

使用 sort 方法，你可以很容易的按字母顺序或数字顺序对数组中的元素进行排序。

与我们之前用的数组方法仅仅返回一个新数组不同， sort 方法将改变原数组，返回被排序后的数组。

sort 可以把比较函数作为参数传入。比较函数有返回值，当 a 小于 b，返回一个负数；当 a大于 b ，返回一个正数；相等时返回0。

如果没有传入比较函数，它将把值全部转成字符串，并按照字母顺序进行排序。

下面的例子将展示 sort 的使用，传入的比较函数把元素按照从小到大的顺序进行排列：

var array = [1, 12, 21, 2];
array.sort(function(a, b) {
  return a - b;
});

使用 sort 按照从大到小的顺序排序 array 。

2.3.9. 翻转数组：reverse

你可以使用 reverse 方法来翻转数组。

var myArray = [1, 2, 3];
myArray.reverse();

结果myArray 变成了 [3, 2, 1]

使用 reverse 来翻转 array 数组。并赋值给newArray.

2.3.10. 合并数组：concat

concat 方法可以用来把两个数组的内容合并到一个数组中。

concat 方法的参数应该是一个数组。参数中的数组会拼接在原数组的后面，并作为一个新数组返回。

下面是一个拼接数组的例子，用concat 把otherArray 拼接在 oldArray 的后面：

newArray = oldArray.concat(otherArray);

使用 .concat() 将 concatMe 拼接到 oldArray后面，并且赋值给 newArray。

最后最后最后，重要的事情说三遍,来着是客，如果您觉得好就推荐或评论下，觉得不好希望能得到您的建议，继续改善，您的支持就是对我最大的鼓励.