5. 数组和字符串方法

1. 数组方法

1.1 forEach

作用：用于遍历数组，对数组中的每一个元素进行某个操作。没有返回值，也不需要返回值。

foreach 像for循环一样，对数据进行遍历。

语法：

arr.forEach(function(item, index, array) {
  // ... do something with item
  // item 表示当前数组元素
  // index 表示元素对应的索引
  // array 表示当前数组，这个不常用
});

而这段代码更详细地介绍了它们在目标数组中的位置：

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(''+item+' is at index '+index+' in '+array+'');
});

1.2 reverse

reverse 翻转数组，返回翻转后后的数组 。改变原来的数组

语法：array.reverse( );

示例:

var arr = ["a", "b", "c", "d", "e", "f"];

var result = arr.reverse(); // 将数组 arr 进行反转

console.log("arr =" + arr); // ["f","e","d","c","b","a"]
console.log("result =" + result); // ["f", "e", "d", "c", "b", "a"]

// 从打印结果可以看出，原来的数组已经被改变了。

1.3 slice

slice 截取数组的元素（复制原数组的部分内容)

• 返回值：返回一个新数组

• 不改变原数组

语法:

array.slice(start, end)

• 参数：

array.slice(start) 第二个参数省略，从索引start一直查找到末尾

array.slice(start, end) 从索引start开始查找到索引end处（不包含end）

array.slice(0)原样输出内容，可以实现数组克隆

array.slice(-start,-end) slice支持负参数，从数组的最后一个元素开始算起，-1为最后一个元素，-2为倒数二个元素, 以此类推

示例:

var arr = ["a", "b", "c", "d", "e", "f"];

var result1 = arr.slice(2); //从下标为2值开始提取
var result2 = arr.slice(-2); //提取最后两个元素
var result3 = arr.slice(2, 4); //提取从下标为2到下标为4之间的值（不包括下标为4的值）
var result4 = arr.slice(4, 2); //空

console.log("arr:" + arr); // ["a", "b", "c", "d", "e", "f"]
console.log("result1:" + result1); // ["c", "d", "e", "f"]
console.log("result2:" + result2); // ["e", "f"]
console.log("result3:" + result3); // ["c", "d"]
console.log("result4:" + result4); // []

1.4 indexOf

indexOf 获取元素在数组第一次出现的索引(从左往右查找)

• 返回值是在数组中可以找到给定值的第一个索引，如果不存在，则返回-1。

• 不改变原数组

语法:

array.indexOf(item,start)

• item是查找的元素。

• start可选，规定在数组中开始检索的位置（包含本身的位置）。

• 如果start为负值，则从最后一项开始算起，-1为最后一项，-2为倒数第二项。

• 如果start大于等于数组长度 ，则返回-1 。该数组不会被搜索。

var arr = ["a", "b", "c", "d", "e", "d", "c"];

console.log(arr.indexOf("c")); //从前往后，找第一个"c"在哪个位置,2
console.log(arr.lastIndexOf("d")); //从后往前，找第一个"d"在哪个位置,5

1.5 lastIndexOf

lastIndexOf 获取元素在数组第一次出现的索引(从右往左查找)

• 返回值是在数组中可以找到给定值的第一个索引，如果不存在，则返回-1。

• 不改变原数组

语法:

array.lastIndexOf(item,start)

• item是查找的元素。

• start可选,规定在数组中开始检索的位置（包含本身的位置）。

• 如果start为负值，则从最后一项开始算起，-1为最后一项，-2为倒数第二项。

• 如果start大于等于数组长度 ，则整个数组都会被搜索。

var arr = ["a", "b", "c", "d", "e", "d", "c"];

console.log(arr.lastIndexOf("d")); //从后往前，找第一个"d"在哪个位置,5

总结：

• 利用indexOf和lastIndexOf方法，我们可以判断某个值是否在指定的数组中。如果没找到则返回-1。

• indexOf和lastIndexOf方法的区别, indexOf是从左往右查找, lastIndexOf是从右往左查找。

1.6 includes

includes 用于确定数组中是否含有某个元素

• 返回值是布尔类型, 找得到返回true, 找不到返回false

• 不改变原数组

语法:

array.includes(item, start)

• item是查找的元素。

• start可选，规定在数组中开始检索的位置（包含本身的位置）。

• 如果start为负值，则按照从后往前开始找索引开始的位置。

示例:

var arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

请注意，这些方法使用的是严格相等 === 比较。

如果我们想检查是否包含某个元素，并且不想知道确切的索引，那么 arr.includes 是首选

1.7 Array.isArray

isArray 判断是否是一个数组

数组是基于对象的，所以 typeof 无法准确判断出数组：

alert(typeof {}); // object
alert(typeof []); // object

但是数组经常被使用，因此有一种特殊的方法用于判断：Array.isArray(value)。如果 value 是一个数组，则返回 true；否则返回 false。

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

1.8 sort

sort()方法要好好理解。所以，我们单独用一大段来讲。

对数组的元素进行排序（会改变原来的数组）。

1.8.1 sort()方法举例：无参时

如果在使用 sort() 方法时不带参，则默认按照字典序排序。

举例 1：（当数组中的元素为字符串时）

var arr1 = ["e", "b", "d", "a", "f", "c"];

arr1.sort(); // 将数组 arr1 进行排序

console.log("arr1 =" + arr1);

打印结果：

arr1 = ["a", "b", "c", "d", "e", "f"];

举例 2：（当数组中的元素为数字时）

var arr2 = [5, 2, 11, 3, 4, 1];

arr2.sort(); // 将数组 arr2 进行排序

console.log("arr2 =" + arr2);

打印结果：

arr2 = [1, 11, 2, 3, 4, 5]; // 其实是在对 ['5', '2', '11', '3', '4', '1']依据字典序排序

上方的打印结果中，你会发现，使用 sort() 排序后，数字11竟然在数字2的前面。这是为什么呢？

因为上面讲到了，sort()方法是按照字典序进行排序的。

1.8.2 sort()方法举例：带参时

想实现真正意义上的排序，需要我们为sort提供一个函数作为参数，指定排序规则。

回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数。

浏览器根据回调函数的返回值来决定元素的排序：（重要）

• 如果返回一个大于 0 的值，则元素会交换位置

• 如果返回一个小于 0 的值，则元素位置不变

• 如果返回一个 0，则认为两个元素相等，则不交换位置

代码举例：

var arr3 = [5, 2, 11, 3, 4, 1];

// 自定义排序规则
arr3.sort(function(a, b) {
    return a - b; // 升序排列
    // return b - a; // 降序排列
});

console.log("arr3 =" + arr3); // [1,2,3,4,5,11]

2. 字符串对象

2.1 基本包装类型

    为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

    基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

// 下面代码有什么问题？
var str = 'bufanxueyuan';
console.log(str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：

// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('bufanxueyuan');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

2.2 创建String对象

var str = new String('Hello World');
// 获取字符串中字符的个数
console.log(str.length);

2.3 字符串对象的常用方法

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。

charAt() 获取相应位置的字符
charCodeAt() 指定位置字符 的 Unicode 编码
fromCharCode() 获取 Unicode 编码对应的字符
indexOf() 返回字符在字符串中第一次出现的位置
lastIndexOf() 返回字符在字符串中最后一次出现的位置
concat() 连接字符串
slice() 提取字符串的某个部分
substring() 提取字符串的某个部分
substr() 截取字符串,有两个参数时,第二个代表截取的个数
toUpperCase() 将字符串转换为大写字母
toLowerCase() 将字符串转换为小写字母

var str = "how are you? and you?";

console.log(str.length); // 21
// charAt()获取相应位置字符
// 空格也 占位置
console.log(str.charAt(5)); // r
// charCodeAt() 方法可返回指定位置字符的 Unicode 编码
console.log(str.charCodeAt(5)); // 114
//fromCharCode()   获取 Unicode 编码对应的字符
console.log(str.fromCharCode(65)); //A
// indexOf() / lastIndexOf()
// 返回字符在字符串中的位置
console.log(str.indexOf("y")); // 8
console.log(str.lastIndexOf("y")); // 17

//concat() 连接字符串
var str2 = " me too";
console.log(str.concat(str2));

// slice()      方法可提取字符串的某个部分，并以新的字符串返回被提取的部分
console.log(str.slice(0, 9)); // how are y
console.log(str.slice(0)); // how are you? and you?
console.log(str.slice(1, 4)); // 'ow '
// substring()      与slice用法相同,只不过参数不支持负值
// substr(起始位置,[取的个数])  截取字符串 返回截取的字符串
console.log(str.substr(0)); // 截取 整个字符串
console.log(str.substr(1, 4)); // ow a

// 转换大小写
console.log(str.toUpperCase()); // HOW ARE YOU? AND YOU?
console.log(str);
console.log(str.toLowerCase()); // how are you? and you?