web前端7

String（另外两个是 Number、Boolean）。

 

包装对象：原生对象可以把原始类型的值变成（包装成）对象。

let v2 = new String('abc');

包装对象的最大目的：1.使得 JavaScript 的对象涵盖所有的值；2.使得原始类型的值可以方便地调用某些方法（比如下面的这些方法）。

字符串长度：length

let len = 'here is an apple'.length;

从上面的输出结果中可以看到，字符串中的空格也是计算在内的。

查找字符：indexOf()

从字符串中查找某个子字符串是否存在：

let str = 'here is an apple';
const index = str.indexOf('an');
console.log(index);

当 str 中存在子字符串 an 时，返回的值为 an 中的 a 所在的下标（下标从 0 开始计），即 8。

当 str 中不存在子字符串 an 时，返回的值为 -1。

去掉两端空格：trim()

我们在输入内容的时候常常会遇到多输入空格的时候，这时候就可以用 trim() 把字符串开头和结束位置的空格去掉了：

// 'here' 之前有一个空格，'apple' 之后有三个空格
let str = ' here is an apple   ';
const trimedStr = str.trim();
console.log(str.length);
console.log(trimedStr.length);

点击播放上述代码：

代码演示

注意，trim() 是去掉字符串前后的空格，不论前后有多少空格，都会去掉，但不会去掉中间的空格。另外，trim() 不会改变原字符串 str，而是复制一份原字符串，修改后返回给 trimedStr。

截取字符串：substring/substr

如果要截取一个字符串中的一部分，可以用 substring 或 substr。

比如我们现在有一个 URL（“优课达官网”） 要求截取其中 # 之后的内容，可以这样做：

let url = 'https://www.youkeda.com/userhome#collect';

// 首先找到 # 后第一个字母的下标
const index = url.indexOf('#') + 1;

// 有 hash 才能进行截取，没有就直接提示不存在
if (index) {
  // 用 substring 截取字符串
  const hash1 = url.substring(index, url.length);

  // 计算 hash 的长度
  const lenHash = url.length - index;
  // 用 substr 截取字符串
  const hash2 = url.substr(index, lenHash);

  console.log(hash1);
  console.log(hash2);
} else {
  console.log('不存在 hash');
}

• substring(start, end)： start —— 要截取的字符串的开始下标 end —— 要截取的字符串的结束下标。
• substr(start, len)： start —— 要截取的字符串的开始下标 len —— 要截取的字符串的长度。

注意，substring 和 substr 的第二个参数不写的时候，会一直截取到字符串结束为止。

它们和 trim 一样都不会改变原字符串，而是返回处理后的字符串。

分割字符串：split

split 方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组：

const splitedStr = 'a|b|c'.split('|');
console.log(splitedStr);

点击播放上述代码：

代码演示

小节

let arr = [1, 2, 3, 4];

arr.join(" "); // '1 2 3 4'
arr.join(" | "); // "1 | 2 | 3 | 4"
arr.join(); // "1,2,3,4"

这个方法和字符串里的 split 方法正好是一对作用相反的方法：

let str = "a|b|c";

const splited = str.split("|");
console.log(splited);

const joined = splited.join("|");
console.log(joined);

点击播放上述代码：

代码演示

join() 方法不会改变原数组。

倒序排列：reverse()

reverse 方法用于颠倒排列数组元素，返回改变后的数组。：

let arr = ["a", "b", "c"];

arr.reverse(); // ["c", "b", "a"]
arr; // ["c", "b", "a"]

注意，该方法将改变原数组。

这个方法对原本有序的数组用起来很方便，比如原来是按时间顺序排列，现在要倒序，直接使用 reverse() 即可。

那如果数组原本就是无序的，该怎么排序呢？这里我们会用到 sort() 方法。

排序：sort()

sort 方法对数组成员进行排序，默认是按照字典顺序排序。如果想让 sort 方法按照自定义方式排序，可以传入一个函数作为参数。

现在我们将下面的数组按照人物年龄从小到大排列：

let arr = [
  { name: "jenny", age: 18 },
  { name: "tom", age: 10 },
  { name: "mary", age: 40 },
];

arr.sort(function (a, b) {
  return a.age - b.age;
});

console.log(arr);

这里我们传入了一个函数，这个函数有两个参数，即进行比较的两个数组成员，原数组中 a 排在 b 之前。

这个函数有个返回值，当返回值大于 0 时，表示第一个成员应该排在第二个成员之后，否则排在第二个成员之前。

点击播放上述代码，查看结果：

代码演示

注意，该方法将改变原数组。

遍历：map/forEach

遍历数组我们之前用的是 for 循环，但其实 JavaScript 为我们提供了两个很方便的遍历方法：map 和 forEach。

有返回值的遍历：map

先看 map 方法的使用，它接受一个函数，然后将数组的所有成员依次传入这个参数函数，最后把每一次的执行结果组成一个新数组返回：

let arr = [
  { name: "jenny", age: 18 },
  { name: "tom", age: 10 },
  { name: "mary", age: 40 },
];

// elem: 数组成员
// index: 成员下标
// a: 整个数组
const handledArr = arr.map(function (elem, index, a) {
  elem.age += 1;
  console.log(elem, index, a);
  return elem.name;
});

console.log(arr);
console.log(handledArr);

点击播放上述代码，查看结果：

代码演示

map 方法的参数函数可以有三个参数：elem, index, a。

• elem：表示依次传入的数组成员
• index：表示依次传入的数组成员所对应的下标
• a：表示整个数组

在上面的代码中，map 方法的返回值是一个由 return 后的内容 elem.name 组成的数组。

无返回值的遍历：forEach

forEach 的用法和 map 基本一致，不过 forEach 没有返回值：

const handledArr = arr.forEach(function (elem, index, a) {
  elem.age += 1;
  console.log(elem, index, a);
  return elem.name;
});

console.log(handledArr);

输出：

 

let now = new Date();
console.log(now);

点击播放上述代码，查看结果：

代码演示

那如果给构造函数传入一些参数的话，就能够生成特定的时间对象了，这里可以传入数字、字符串、毫秒数：

// 传入表示“年月日时分秒”的数字
let dt1 = new Date(2020, 0, 6, 0, 0, 0);
console.log(dt1);

// 传入日期字符串
let dt2 = new Date("2020-1-6");
console.log(dt2);

// 传入距离国际标准时间的毫秒数
let dt3 = new Date(1578240000000);
console.log(dt3);

点击播放上述代码，查看结果：

代码演示

注意，传入表示“年月日时分秒”的数字时，1. 如果只传入一个数字，会被认为传入的是毫秒数；2. 月份的范围是 0-11，而不是 1-12。

日期运算

时间差：毫秒数

两个时间对象是可以直接相减的，返回值为两者的毫秒数差：

let dt1 = new Date(2020, 2, 1);
let dt2 = new Date(2020, 3, 1);

// 求差值
let diff = dt2 - dt1;

// 一天的毫秒数
let ms = 24 * 60 * 60 * 1000;

console.log(diff / ms); // 31

可以看到，2020 年 3 月 1 日和 2020 年 4 月 1 日之间相差的时间正好为 31 天。

早晚比较：大小于符号

如果要比较两个时间的早晚，可以直接使用 > 或者 <：

let dt1 = new Date(2020, 2, 1);
let dt2 = new Date(2020, 3, 1);

console.log(dt1 > dt2); // false
console.log(dt1 < dt2); // true

解析日期字符串：Date.parse()

Date.parse 方法用来解析日期字符串，返回该时间距离时间零点（1970 年 1 月 1 日 00:00:00）的毫秒数：

let dt = Date.parse("2020-1-6");
console.log(dt); // 1578240000000

点击播放上述代码，查看结果：

代码演示

Date.parse() 方法可以把日期字符串转成距离时间零点的毫秒数。

时间对象中有三大类方法 to 方法、get 方法和 set 方法，这里我们会学习这两大类中的一部分方法。

时间对象转时间字符串：to 方法

to 方法有很多，我们来看其中的 toJSON() 方法：

let dt = new Date();
let dtStr = dt.toJSON();

console.log(dtStr); // 2020-01-03T09:44:18.220Z

点击播放上述代码，查看结果：

代码演示

仔细观察控制台中打印出的内容，你可能会感到疑惑，为什么打印的时间和当前的时间差 8 个小时，这是因为打印的时间是现在 UTC 时区的时间，而我们的时间是东八区时间，比国际标准时间快 8 个小时。

获取时间对象的年/月/日：get 方法

Date 对象提供了一系列 get 方法，用来获取实例对象某个方面的值：

let dt = new Date();
dt.getTime(); // 返回实例距离1970年1月1日00:00:00的毫秒数。
dt.getDate(); // 返回实例对象对应每个月的几号（从1开始）。
dt.getDay(); // 返回星期几，星期日为0，星期一为1，以此类推。
dt.getFullYear(); // 返回四位的年份。
dt.getMonth(); // 返回月份（0表示1月，11表示12月）。
dt.getHours(); // 返回小时（0-23）。
dt.getMilliseconds(); // 返回毫秒（0-999）。
dt.getMinutes(); // 返回分钟（0-59）。
dt.getSeconds(); // 返回秒（0-59）。

注意，所有这些 get*方法返回的都是整数，不同方法返回值的范围不一样： 分钟和秒：0 到 59 小时：0 到 23 星期：0（星期天）到 6（星期六） 日期：1 到 31 月份：0（一月）到 11（十二月）

• 除了“日期”外，其他的时间范围都是从 0 开始的。

以上方法了解即可，需要用到的时候在 MDN 上进行查询即可。

 dt.getFullYear() 来获取当前的完整年份：

let dt = new Date();
let year = dt.getFullYear();

console.log(year);

点击播放上述代码，查看结果：

代码演示

设置时间对象的年/月/日：set 方法

set 方法和 get 方法正好相反，它能够设置时间对象的某个方面的值。

let dt = new Date();
dt.setTime(ms); // 设置实例距离1970年1月1日00:00:00的毫秒数。
dt.setDate(date); // 设置实例对象对应每个月的几号（从1开始）。
dt.setFullYear(year); // 设置四位的年份。
dt.setMonth(month); // 设置月份（0表示1月，11表示12月）。
dt.setHours(hour); // 设置小时（0-23）。
dt.setMilliseconds(ms); // 设置毫秒（0-999）。
dt.setMinutes(min); // 设置分钟（0-59）。
dt.setSeconds(sec); // 设置秒（0-59）。

set 方法没有 setDay 方法，因为星期几是计算得到的。

同样的，以上方法了解即可，需要用到的时候在 MDN 上进行查询即可。

现在我们来尝试用 dt.getFullYear() 来获取当前的完整年份：

let dt = new Date();
dt.setFullYear(2030);

console.log(dt);