Array | 小苏同学的知库

# Array

# 数组长度

数组名.length

//数组中数据的个数，通过数组的length属性获得

例如：
	let arr = [10,20,30,40,50,60,70]
  console.log(arr.length)   //7

# 添加元素

//将一个或多个元素添加到数组的末尾，并返回该数组的新长度
数组名.push(新增的内容) 

例如:
	let arr = [10,20,30]
  console.log(arr.length)   //3

  arr.push(40,50,60)
	console.log(arr)   //[10,20,30,40,50,60]
	console.log(arr.length)   //6

//将一个或多个元素添加到数组的开头，并返回该数组的新长度
数组名.unshift(新增的内容) 

例如：
	let arr = [10,20,30]
  console.log(arr.length)   //3

	arr.unshift(7,8,9)
	console.log(arr)   //[7,8,9,10,20,30]
	console.log(arr.length)   //6

# 删除元素

//删除数组中最后一个元素，并返回该元素的值
数组名.pop() 

例如：
	let arr = [10,20,30,40]
  console.log(arr.pop())   //40

	console.log(arr)   //[10,20,30]
	console.log(arr.length)   //3

//删除数组中第一个元素，并返回该元素的值
数组名.shift() 

例如：
	let arr = [10,20,30,40]
  console.log(arr.shift())   //10

	console.log(arr)   //[20,30,40]
	console.log(arr.length)   //3

# 从任意位置插入数据或删除数据

//从任意位置插入数据
数组名.splice(从哪里插入(索引), 移除数据的个数 , 数据) 

例如：
	let arr = ['钢铁侠','蜘蛛侠','绿巨人','美队']
	arr.splice(3,0,'黑寡妇')
	console.log(arr)   //['钢铁侠', '蜘蛛侠', '绿巨人', '黑寡妇', '美队']

//删除数组中的指定元素
数组名.splice(从哪里开始删除(索引),删除几个)

例如：
	let arr = ['钢铁侠','蜘蛛侠','绿巨人','美队']
	arr.splice(1,2)
	console.log(arr)   //['钢铁侠', '美队']

# 数组连接

数组.concat(另一个数组名)

例如：
	let arr = ['钢铁侠','蜘蛛侠','绿巨人','美队']
  let add = ['奇异博士','雷神','黑豹']
  let newArr = arr.concat(add)
	console.log(newArr)   //['钢铁侠', '蜘蛛侠', '绿巨人', '美队', '奇异博士', '雷神', '黑豹']

# 将数组转为字符串

数组.join('任意字符')

例如：
	let arr = ['钢铁侠','蜘蛛侠','绿巨人','美队']
  console.log(arr.join(','))   //钢铁侠,蜘蛛侠,绿巨人,美队

# 数组倒序

数组.reverse()

例如：
	let arr = ['钢铁侠','蜘蛛侠','绿巨人','美队']
  arr.reverse()
	console.log(arr)   //['美队', '绿巨人', '蜘蛛侠', '钢铁侠']

# 数组截取

数组.slice('从哪里开始截取(索引)','截取到哪里(索引)')

例如：
	let arr = ['钢铁侠','蜘蛛侠','绿巨人','美队']
  console.log(arr.slice(1,2))   //['蜘蛛侠']

注意：
	不包含结尾，比如上面案例 截取到索引2，则截取的内容不包含索引2

# 数组删除

delete 数组[索引]

例如：
	let arr = ['钢铁侠','蜘蛛侠','绿巨人','美队']
  delete arr[3]
	console.log(arr)   //['钢铁侠', '蜘蛛侠', '绿巨人', empty]

注意：
	被删除的值变为 empty  但是索引还在

# 遍历数组

forEach()
语法结构：
	数组名.forEach(匿名函数)
	数组名.forEach(function(e){
    这个e就代表数组的每一个值
  })

例如：
let arr = [10,20,30,40,50]
arr.forEach(function (e){
  console.log(e)   //10 20 30 40 50
})

当function这个匿名函数里面写两个参数的时候，前面的参数代表数组的值，第二个参数代表数组的索引
arr.forEach(function (e,i){
  console.log(e)   //10 20 30 40 50 
  console.log(i)   //0  1  2  3  4
})

注意：
	使用for循环，不光是数组，伪数组也可以使用
	forEach只能给真正的数组，伪数组不能使用

冒泡排序（性能比较低，开发中很少用）
- 冒泡排序是一种简单的排序算法。
- 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
- 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
- 比如数组[2,3,1,4,5]经过排序成为了[1,2,3,4,5]或[5,4,3,2,1]

数组里面可以放任何的数据类型

//数组里面可以放任何的数据类型
let arr = [1,'小苏',true,undefined,null,{},[]]

//在开发中，数组中主要放数组对象
let arr = [
	{uname:'小苏',age:18,sex:'男'},
	{uname:'小星',age:19,sex:'男'}
]

//调用数组对象
arr[0].uname  //小苏

# String

# 查看字符串长度

字符串.length

例如：
	let str = 'asdwdsd'
  console.log(str.length)   //7

# 去除字符串两端的空格

字符串.trim()

例如：
	let str = ' hello world! '
  console.log(str.length)   //14

	let newStr = str.trim()
	console.log(newStr)   //hello world!
	console.log(newStr.length)   //12

# 通过索引获取指定位置的字符

字符串属于伪数组的一种，索引也是从0开始

//第一种
字符串.charAt(某个索引)

例如：
	let str = 'qwertyuiop'
  console.log(str.charAt(7))   //i

//第二种
字符串[某个索引]

例如：
	let str = 'qwertyuiop'
  console.log(str[7])   //i

# 字符串拼接

//第一种
使用 + 号进行拼接

例如：
	let str = 'qwertyuiop'
  let newStr = str + '苏'
  console.log(newStr)   //qwertyuiop苏

//第二种
使用concat进行拼接

例如：
	let str = 'qwertyuiop'
  let newStr = str.concat('苏','东','旭')
  console.log(newStr)   //qwertyuiop苏东旭

# 字符串截取

字符串.substr('从哪里开始截取(索引)','截取几个')

例如：
	let str = 'qwertyuiop'
  let newStr = str.substr(3,4)
  console.log(newStr)   //rtyu
	
如果要是不写第二个参数，就会一直截取到字符串的最后

例如：
	let str = 'qwertyuiop'
  let newStr = str.substr(3)
  console.log(newStr)   //rtyuiop

# 将字符串转成数组

//根据指定的分隔符将一个字符串分割成一个字符串数组
字符串.split('分割符')

例如：
	let str = '1,2,3,4'
  let newStr = str.split(',')
  console.log(newStr)   //['1', '2', '3', '4']

# 将字母全部转换为大写

字符串.toUpperCase()

例如：
	let str = 'qwertyuiop'
  let newStr = str.toUpperCase()
	console.log(newStr)   //QWERTYUIOP

# 字符串替换

字符串.replace('要替换的内容','替换成什么')

例如：
	let str = 'qwertyuiop'
	let newStr = str.replace('qwe','苏东旭')
  console.log(newStr)   //苏东旭rtyuiop

# 查找字符

返回一个字符串中，某个字符第一次出现的位置，如果找到了就返回对应的索引,要是没找到,就返回-1

字符串.indexOf('要查的字符')

例如：
	let str = 'qwertyuiopy'
  console.log(str.indexOf('y'))   //5
	console.log(str.indexOf('s'))   //-1

返回一个字符串中,某个字符最后一次出现的位置 lastIndexOf 如果找到就返回对应的索引,没找到就返回-1

字符串.lastIndexOf('要查的字符')

例如：
	let str = 'qwertyuiopy'
  console.log(str.lastIndexOf('y'))   //10
	console.log(str.lastIndexOf('s'))   //-1

# Math

Math 对象提供了众多方法用来进行数学计算，下面我们介绍常用的方法，更多方法使用请查看 MDN 官网 (opens new window) (opens new window)了解。

# 取极限值

使用 min 与 max 可以取得最小与最大值。

console.log(Math.min(1, 2, 3));

console.log(Math.max(1, 2, 3));

使用apply 来从数组中取值

console.log(Math.max.apply(Math, [1, 2, 3]));

# 舍入处理

取最接近的向上整数

console.log(Math.ceil(1.111)); //2

得到最接近的向下整数

console.log(Math.floor(1.555)); //1

四舍五入处理

console.log(Math.round(1.5)); //2

# random

random 方法用于返回 >=0 且 <1 的随机数（包括 0 但不包括 1）。

返回 0~5 的随机数，不包括 5

const number = Math.floor(Math.random() * 5);
console.log(number);

返回 0~5 的随机数，包括 5

const number = Math.floor(Math.random() * (5+1));
console.log(number);

下面取 2~5 的随机数（不包括 5）公式为：min+Math.floor(Math.random()*(Max-min))

const number = Math.floor(Math.random() * (5 - 2)) + 2;
console.log(number);

下面取 2~5 的随机数（包括 5）公式为：min+Math.floor(Math.random()*(Max-min+1))

const number = Math.floor(Math.random() * (5 - 2 + 1)) + 2;
console.log(number);

下面是随机点名的示例

let stus = ['小明', '张三', '王五', '爱情'];
let pos = Math.floor(Math.random() * stus.length);
console.log(stus[pos]);

随机取第二到第三间的学生，即 1~2 的值

let stus = ['小明', '张三', '王五', '爱情'];
let pos = Math.floor(Math.random() * (3-1)) + 1;
console.log(stus[pos]);

# Date

网站中处理日期时间是很常用的功能，通过 Date 类型提供的丰富功能可以非常方便的操作。

# 声明日期

获取当前日期时间

let now = new Date();
console.log(now);
console.log(typeof date); //object
console.log(now * 1); //获取时间戳

//直接使用函数获取当前时间
console.log(Date());
console.log(typeof Date()); //string

//获取当前时间戳单位毫秒
console.log(Date.now());

计算脚本执行时间

const start = Date.now();
for (let i = 0; i < 2000000; i++) {}
const end = Date.now();
console.log(end - start);

当然也可以使用控制台测试

console.time("testFor");
for (let i = 0; i < 20000000; i++) {}
console.timeEnd("testFor");

根据指定的日期与时间定义日期对象

let now = new Date('2028-02-22 03:25:02');
console.log(now);

now = new Date(2028, 4, 5, 1, 22, 16);
console.log(now);

使用展示运算符处理更方便

let info = [2020, 2, 20, 10, 15, 32];
let date = new Date(...info);
console.dir(date);

# 类型转换

将日期转为数值类型就是转为时间戳单位是毫秒

let hd = new Date("2020-2-22 10:33:12");
console.log(hd * 1);

console.log(Number(hd));

console.log(hd.valueOf())

console.log(date.getTime());

有时后台提供的日期为时间戳格式，下面是将时间戳转换为标准日期的方法

const param = [1990, 2, 22, 13, 22, 19];
const date = new Date(...param);
const timestamp = date.getTime();
console.log(timestamp);
console.log(new Date(timestamp));

# 对象方法

格式化输出日期

let time = new Date();
console.log(
  `${time.getFullYear()}-${time.getMonth()}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`
);

封装函数用于复用

function dateFormat(date, format = "YYYY-MM-DD HH:mm:ss") {
  const config = {
    YYYY: date.getFullYear(),
    MM: date.getMonth() + 1,
    DD: date.getDate(),
    HH: date.getHours(),
    mm: date.getMinutes(),
    ss: date.getSeconds()
  };
  for (const key in config) {
    format = format.replace(key, config[key]);
  }
  return format;
}
console.log(dateFormat(new Date(), "YYYY年MM月DD日"));

下面是系统提供的日期时间方法，更多方法请查看 MDN 官网(opens new window) (opens new window)

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()	返回 1970 年 1 月 1 日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	请使用 toUTCString() 方法代替。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

# moment.js

Moment.js 是一个轻量级的 JavaScript 时间库，它方便了日常开发中对时间的操作，提高了开发效率。

更多使用方法请访问中文官网 http://momentjs.cn (opens new window) (opens new window)或英文官网 https://momentjs.com(opens new window) (opens new window)

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>

获取当前时间

console.log(moment().format("YYYY-MM-DD HH:mm:ss"));

设置时间

console.log(moment("2020-02-18 09:22:15").format("YYYY-MM-DD HH:mm:ss"));

十天后的日期

console.log(moment().add(10, "days").format("YYYY-MM-DD hh:mm:ss"));

← 函数