1 数组常用操作
1.1 添加元素 arr.push()到数组的最后
arr.push() 从后面添加元素，返回添加后的数组的长度
let arr = [1, 2, 3]
// 返回新的数组的长度 4
console.log(arr.push(4))
// 新的数组为：[1,2,3,4]
console.log(arr)
1.2 添加元素 arr.unshift()到数组最前面
arr.unshift() 从前面添加元素, 返回添加后的数组的长度
let arr = [1, 2, 3]
// 返回新的数组的长度 4
console.log(arr.push(4))
// 新的数组为：[4,1,2,3]
console.log(arr)
1.3 删除元素arr.pop() 从后面开始删除
arr.pop() 从后面删除元素，无参数，返回值是删除的元素
let arr = [1, 2, 7]
// 返回值是删除的值 7
console.log(arr.pop())
// 新的数组为：[1,2]
console.log(arr)
1.4 删除元素arr.shift() 从前开始删除
arr.shift() 从前面删除元素，无参数， 返回值是删除的元素
let arr = [1, 2, 7]
// 返回值是删除的值 1
console.log(arr.pop())
// 新的数组为：[2,7]
console.log(arr)
1.5 arr.splice(index,n) 增删改元素
1.5.1 新增
array.splice(index,0,newP)
1.5.2 删除指定数组中指定下标的值
array.splice(index,1)
1.5.3 更新数组
array.splice(index,1,newP);
1.6 获取指定位置的数组
arr.slice(start,end) 获取下标start到end的数组，并且不包含end索引的值，返回值是筛选出来的数组
let arr = [1, 2, 3, 4, 5]
// 获取从 下标1 到 下标4 位置的数组：[2,3，4] 不包含end索引的值
console.log(arr.slice(1,4))
// 原数组保持不变 [1,2,3,4,5]
console.log(arr)
1.7 合并数组
arr.concat() 将两个数组合并，返回值是合并后的新数组，原始数组保持不变
let arr1 = [1, 2, 3];
let arr2 = [7, 8];
// 返回值：合并后的数组 [1,2,3,7,8]
console.log(arr1.concat(arr2))
1.8 将字符串转换为数组
str.split() 将字符串转化为数组
let str = '12345'
// 返回值：数组 ["1", "2", "3", "4", "5"]
console.log(str.split(''))
1.9 数组排序
arr.sort() 将数组进行排序，默认是按照最左边的数字进行排序，不是按照数字大小排序
// 默认排序
let arr = [2, 10, 6, 1, 4, 22, 3]
console.log(arr.sort()) // [1, 10, 2, 22, 3, 4, 6]
// 从小到大的排序
let arr1 = arr.sort((a, b) => a - b)
console.log(arr1) // [1, 2, 3, 4, 6, 10, 22]
// 从大到小的排序
let arr2 = arr.sort((a, b) => b - a)
console.log(arr2) // [22, 10, 6, 4, 3, 2, 1]
1.10 数组反转
arr.reverse() 将数组反转，改变原始数组
let arr = [1, 2, 3, 4, 5]
// 返回值：反转后的数组 [5,4,3,2,1]
console.log(arr.reverse())
// 原始数组：反转后的数组 [5,4,3,2,1]
console.log(arr)
复制数组 ...运算符
let arr1 = [1, 2, 3]
let arr2 = [...arr1] // 新的数组
let arr3 = Array.from(arr1) // 新的数组
// 返回：[1,2,3]
console.log(arr2, arr3)
1.11 将伪数组转换为数组 Array.from()
Array.from() 将伪数组(必须有length属性)变成数组
let str = '12345'
// 返回值：数组 ["1", "2", "3", "4", "5"]
console.log(Array.from(str))
let obj = {0:'a',1:'b',length:2}
// 返回值：数组 ["a", "b"]
console.log(Array.from(obj))
1.12 将一组值转换成数组 Array.of()
Array.of() 将一组值转换成数组，类似于声明数组
let str = '11'
// 返回值：一个数组：['11']
console.log(Array.of(str))
// 等价于
console.log(new Array('11'))
// 注意：但是new Array()有缺点，就是参数问题引起的重载
console.log(new Array(2)) //[empty × 2] 是个空数组
console.log(Array.of(2)) // [2]
1.13 复制数组到指定位置 arr.copywithin()
arr.copyWithin() 将指定位置的数组复制到其他位置，会覆盖原数组项，返回当前新的数组
参数如下：
- target ：(必选) 索引开始位置
- target --start：(可选) 索引从该位置开始读取数组项，默认为0.如果为负值，则从右往左读
- end：(可选) 索引结束为止，默认是
Array.length，如果是负值，表示倒数
let arr = [1,2,3,4,5,6,7]
let arr1 = arr.copyWithin(1)
// [1, 1, 2, 3, 4, 5, 6]
console.log(arr1)
// [1, 3, 4, 5, 6, 7, 7]
let arr2 = arr.copyWithin(1,2)
console.log(arr2)
// [1, 3, 4, 4, 5, 6, 7]
let arr3 = arr.copyWithin(1,2,4)
console.log(arr3)
1.14 查找符合条件的值array.find()
arr.find(callback) 返回数组中第一个符合条件的值，如果没有找到，返回 undefined
let arr = [1, 5, 6, 10, 9];
// 查找大于4的值
let arr1 = arr.find((value, index, array) => value > 4);
// 返回值：返回第一个符合条件的值 5
console.log(arr1)
1.15 查找符合条件的值的下标array.findIndex()
arr.findIndex(callback) 返回数组中第一个符合条件的值的下标，如果没有找到，返回 undefined
let arr = [1, 5, 6, 10, 9];
// 查找大于4的值
let arr1 = arr.find((value, index, array) => value > 4);
// 返回值：返回第一个符合条件的值 1下标
console.log(arr1)
1.16 填充数组arr.fill
使用给定的值，填充生成一个新的数组，会改变原数组
参数：arr.fill(target, start, end)
- target：填充的数据
- start：开始位置
- end：结束位置（不包括该位置)
let arr = ['a', 'b', 'c'];
// 新、老数组都是返回：['eee','eee','eee']
console.log(arr, arr.fill('eee'));
// 从第2个位置开始插入 eee
let arr = ['a', 'b', 'eee', 'eee', 'eee'];
// 新、老数组都是返回：['a','eee','eee']
console.log(arr, arr.fill('eee', 2));
// 从第2个位置开始插入 eee 第3个位置结束（不包含结束位置下标）
let arr = ['a', 'b', 'c', 'd', 'f'];
// 新、老数组都是返回： ['a', 'b', 'eee', 'eee', 'f']
console.log(arr, arr.fill('eee', 2, 4));
1.17 判断数组中是否包含某个值
1.17.1 arr.includes()
arr.includes() 判断数中是否包含某个值，返回值是true或false
let arr = [1, 2, 3, 4, 5]
let arr1 = arr.includes(2)
console.log(arr1) // ture
let arr2 = arr.includes(7)
console.log(arr2) // false
let arr3 = [1, 2, 3, undefined].includes(undefined)
console.log(arr3) // true
1.17.2 arr.indexOf()
arr.indexOf() 如果找不到元素，返回-1；否则就返回查找元素所在的下标
let arr = ['a', 'b', 'c']
console.log(arr.indexOf('b')) // 下标：1
console.log(arr.indexOf('ee')) // 没有找到，返回 -1
arr.lastIndexOf()和arr.indexOf()的功能一样，不同的是从后往前查找
1.18 遍历数组的键名 arr.keys()
let arr = [1, 2, 3, 4]
for (let key of arr.keys()) {
console.log(key); // 0,1,2,3
}
1.19 遍历数组键值 arr.values()
let arr = [1, 2, 3, 4]
for (let key of arr.values()) {
console.log(key); // 1,2,3,4
}
1.20 遍历数组的键名和键值 arr.entries()
let arr = [1, 2, 3, 4]
for (let key of arr.entries()) {
console.log(key); // [0,1] [1,2] [2,3] [3,4]
}
1.21 for ... of循环
let arr = ['aaa', 'bbb', 'ccc'];
for (let val of arr) {
// 返回：aaa bbb ccc
console.log(val)
}
// 获取数组的下标
let arr = ['aaa', 'bbb', 'ccc'];
for (let index of arr.keys()) {
// 返回：0 1 2
console.log(index)
}
// 获取数组的实体
let arr = ['aaa', 'bbb', 'ccc'];
for (let [index, val] of arr.entries()) {
// 返回值：0 aaa 1 bbb 2 ccc
console.log(index, val)
}
1.22 判断是否是数组或对象
instanceof
console.log(arr instanceof Array); // 返回 true或false
console.log(obj instanceof Object); // 返回 true或false
Array.isArray(数组)
H5新增的方法 ie9以上版本支持
Array.isArray(arr)
1.23 数组转换为字符串
arr.toString() // 默认使用 , 分割
arr.join('分隔符')
var arr = ['苹果', '香蕉', '梨子'];
console.log(arr.toString()); // 返回：苹果,香蕉,梨子
console.log(arr.join('|')); // 返回：苹果|香蕉|梨子
2 对象常用操作
2.1 合并对象Object.assign()
Object.assign(目标对象，源头对象1，源头对象2，......)
源头对象2会覆盖源头对象1中的同名数据
let newObj=Object.assign({},defaultObj,newOptions)
2.2 获取对象的键值和键名
// 获取键名 获取对象自身所有的属性
// 返回一个给定对象的所有可枚举属性值的数组
Object.keys(obj)
// 获取键值
Object.values(obj)
// 获取实体（包含键值对的对象）
// 返回一个给定对象自身可遍历属性 [key,value] 的数组；
Object.entries(obj)
let person = {
name: 'Jack',
age: 18,
sex: 'man'
}
// 获取键名（对象名）
for (let key of Object.keys(person)) {
// 返回：name age sex
console.log(key)
}
// 获取键值（对象值）
for (let val of Object.values(person)) {
// 返回：Jack 18 man
console.log(val)
}
// 获取键值对
for (let obj of Object.entries(person)) {
// 返回：name Jack ; age 18; sex man
console.log(obj)
}
for (let [key, val] of Object.entries(person)) {
// 返回：name Jack ; age 18; sex man
console.log(key, val)
}
2.3 比较2个对象是否严格相等 Object.is()
比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）
NaN与任何数值做===比较都是false，跟他自己也如此！
Object.is(a,b) 返回值是true或false
2.4 Object.defineProperty()
定义对象中新属性或修改原有的属性
Object.defineProperty(obj, prop, descriptor)
参数说明：
obj：目标对象 (必需)
prop：需定义或修改的属性的名字 (必需)
descriptor：目标属性所拥有的特性 (必需)
第三个参数 descriptor 说明： 以对象形式 { } 书写
- value：设置属性的值，默认为undefined
- writable： 值是否可以重写。true | false 默认为false
- enumerable:：目标属性是否可以被枚举（遍历）。 true | false 默认为 false
- configurable:：目标属性是否可以被删除或是否可以再次修改特性 true | false 默认为false
// 定义一个对象 obj
var obj = {
id: 1,
pname: '小米',
price: 1999
};
// 1. 修改原有的属性
Object.defineProperty(obj, 'pname', {
value: '小米1'
});
// 2. 设置新的属性 num
Object.defineProperty(obj, 'num', {
value: 1000
});
// 3. 设置id值不可以重写
Object.defineProperty(obj, 'id', {
writable: false // 默认就是false，不可以被重写
});
// 就算重写了id，id的值依然是 1
obj.id = 90;
console.log(obj)
2.5 Object.getOwnPropertyDescriptors()
返回指定对象所有自身属性的描述对象
2.6 将对象转为Map
let school = {
name: "訾博",
age: 24,
sex: "男"
}
const map = new Map(Object.entries(school));
console.log(map);
2.7 Object.fromEntries
将二维数组或者map转换成对象
// 将map或二维数组转化为对象 Object.fromEntries
// 1. 将map转化为 对象
const map = new Map();
map.set('name', '小米');
map.set('age', 18);
console.log(Object.fromEntries(map)); // {name: '小米', age: 18}
// 2. 将二维数组 转化为 对象
const arr2 = [
['name', '小米'],
['age', 90]
];
console.log(Object.fromEntries(arr2)); // {name: '小米', age: 90}
3 ES6 常用数组操作
常用函数： map reduce filter forEach some every
- 回调函数的参数一般是：value index arr(原始数组)
- 一般都会配合return使用
3.1 循环遍历数组 arr.forEach
循环遍历数组 arr.forEach，无返回值，不修改原数组，作用就相当于普通的 for 循环
let arr = ['a', 'b', 'c']
arr.forEach((value, index, arr) => {
console.log(`value:${value},index:${index},arr:${arr}`)
})
// value:a, index:0, arr:a,b,c
// value:b, index:1, arr:a,b,c
// value:c, index:2, arr:a,b,c
3.2 映射数组 arr.map
arr.map(callback) ： 映射（遍历）数组，有return返回值，返回一个新的数组，如果数组不做处理，就跟arr.forEach()作用一样
返回一个由原数组中的 每个元素 调用一个 指定方法后 的返回值所组成的新数组
let arr = [1, 2, 3]
let newArr = arr.map((value, index, array) => {
value = value * 2
})
console.log(arr) // [1, 2, 3]
console.log(newArr) // [2,4,6]
let arr = [
{ name: 'a', hot: false },
{ name: 'b', hot: true },
{ name: 'c', hot: false }
]
let newArr = arr.map(value => {
return value.hot == true ? '热门' : value.hot
})
console.log(newArr) // [false,'热门',false]
3.3 arr.forEach() 和arr.map() 的区别
arr.forEach() 是和for 循环一样
arr.map() 修改数组其中的数据，并返回新的数组
arr.forEach() 没有return返回值 ， arr.map() 有return返回值
3.4 过滤数组 arr.filter(callback)
arr.filter(callback) ：过滤数组，返回一个符合条件的新数组，原数组不变
主要用于筛选数组，返回的是一个新数组
let arr = [1, 2, 3, 4, 5]
// 返回value小于3的值
let arr1 = arr.filter(value => value < 3)
console.log(arr1) // [1, 2]
let arr = [
{ title: 'aa', hot: false },
{ title: 'bb', hot: true },
{ title: 'cc', hot: false },
]
// 返回hot为true的数据
let newArr = arr.filter(val => !val.hot);
// 返回新的数组：[{ title: 'aa', hot: false }, { title: 'cc', hot: false }]
console.table(newArr);
3.5 arr.every(callback)
类似于查找功能：依据判断条件，如果数组中的每一个元素都符合条件，则 返回 true , 只要有一个条件不满足，就返回 false
let arr = [1, 2, 3, 4, 5]
let arr1 = arr.every((i, v) => i < 3)
console.log(arr1) // false
let arr2 = arr.every((i, v) => i < 10)
console.log(arr2) // true
3.6 arr.some(callback)
类似于查找功能：依据判断条件，只要数组中的有一个元素符合条件，就 返回 true；如果所有都不符合条件，就返回 false
查找数组中是否有满足条件的元素，如果有，返回true，否则返回false
只要找到一个满足条件的元素，则终止循环，不在继续查找
如果查询数组中唯一的元素, 用some方法更合适
let arr = [1, 2, 3, 4, 5]
let arr1 = arr.some((i, v) => i < 3)
console.log(arr1) // true
let arr2 = arr.some((i, v) => i > 10)
console.log(arr2) // false
3.7 arr.reduce
一般是用于做累加或汇总数据操作，迭代数组中的所有项，数组中的每个值（从左到右）的合并，最终计算为一个值
arr.reduce(callback, initialValue)
参数如下：
3.7.1 callback(preValue,curValue,index,array) 回调函数
分别表计算的值、当前值、当前值下标、原始数组
- preValue（必选），上一次调用回调返回的值（累加值），或者是提供的初始值（initialValue）
- curValue（ 必选） ：当前值
- index（可选）：当前值的下标
- array（可选 ）：原数组
3.7.2 initialValue
初始化值，可选
3.7.3 reduce执行过程
- 回调函数第一次执行时，preValue 和 curValue 可以是一个值
- 如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；
- 如果initialValue 未被提供，那么preValue 等于数组中的第一个值
let arr = [1, 2, 3]
// 计算数组中数据的和
let arr1 = arr.reduce((preValue, curValue) => preValue + curValue)
console.log(arr1) // 6
// 计算数组中数据的和 设置了一个初始化数据 5
let arr2 = arr.reduce((preValue, curValue) => preValue + curValue, 5)
console.log(arr2) // 11
4 Math 对象常用操作
Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
常用的Math对象使用如下：
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
// 1.绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 1 隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs('TOM')); // NaN
// 2.三个取整方法
// (1) Math.floor() 向下取整 往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil() 向上取整 往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它是往大了取
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 这个结果是 -1
4.1 Math.random 随机数
random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
console.log(Math.random()); // 返回 0-1 之间的随机小数
封装一下：得到一个两数之间的随机整数，包括两个数在内
function getRandom(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
5 Date 日期对象 常用参数
Date 对象是一个构造函数，所以需要实例化后才能使用，Date 实例用来处理日期和时间
实例化Date对象：
// 没有参数，返回 当前时间
var now = new Date(); // 实例化 Date 对象
console.log(now); // 返回：Thu Mar 31 2022 10:17:20 GMT+0800 (中国标准时间)
// 有参数，就返回 输入的时间
var date1 = new Date('2022-12-23 12:20:20');
console.log(date1); // 返回：Fri Dec 23 2022 12:20:20 GMT+0800 (中国标准时间)
参数：
如果Date()不写参数，就返回当前系统时间
如果Date()里面有参数，就返回括号里面输入的时间
日期格式化
| 方法名 | 说明 |
|---|---|
| getFullYear() | 获取 年 |
| getMonth() | 获取 月（从0开始） |
| getDate() | 获取 日 |
| getHours() | 获取 小时 |
| getMinutes() | 获取 分钟 |
| getSeconds() | 获取 秒 |
| getDay() | 获取 星期 （返回是 0=周日 123456） |
var date1 = new Date('2019-08-08');
var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
// 注意：date1.getDay() 返回星期几，是 0 1 2 3 4 5 6 的方式
console.log(date1.getFullYear() + '年' + (date1.getMonth() + 1) + '月' + date1.getDate() + '日 ' + weeks[date1.getDay()]);
// 返回：2019年8月8日 星期四
// 将当前时间 或者 指定时间 转换为 指定格式时间 XXXX-XX-XX XX:XX:XX
function getTimer(dateText) {
var date = dateText ? new Date(dateText) : new Date();
var Year = date.getFullYear(); // 年
var Month = date.getMonth() + 1; // 月
var Day = date.getDate(); // 日
var Hours = date.getHours(); // 小时
var Minutes = date.getMinutes(); // 分钟
var Seconds = date.getSeconds(); // 秒
Month = supply(Month);
Day = supply(Day);
Hours = supply(Hours);
Minutes = supply(Minutes);
Seconds = supply(Seconds);
return Year + '-' + Month + '-' + Day + ' ' + Hours + ':' + Minutes + ':' + Seconds
}
// 小于10的话，补0
function supply(num) {
return num < 10 ? '0' + num : num;
}
console.log(getTimer('2020-12-12 12:12:12'));
console.log(getTimer());
获取时间戳：单位(毫秒)
不是当前时间的毫秒数 而是距离1970年1月1号到现在的总毫秒数
// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(now.valueOf())
console.log(now.getTime())
// 2. 简单写可以这么做
var now = + new Date();
console.log(now);
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();
console.log(now);
倒计时计算
// 倒计时计算
function countDown(time) {
// 获取当前时间的时间戳
var now_timeStamp = new Date().getTime();
// 获取指定时间的时间戳
var time_timeStamp = new Date(time).getTime();
// 相差的时间戳 ：时间戳的单位是毫秒
var diff_timeStamp = time_timeStamp - now_timeStamp;
// 剩余时间总的秒数
var times = diff_timeStamp / 1000;
// 将时间戳转化为 日期格式 XXXX-XX-XX XX:XX:XX
// d = parseInt(总秒数/ 60/60 /24); // 计算天数
// h = parseInt(总秒数/ 60/60 %24) // 计算小时
// m = parseInt(总秒数 /60 %60 ); // 计算分数
// s = parseInt(总秒数%60); // 计算当前秒数
var Day = parseInt(times / 60 / 60 / 24); // 天
var Hours = parseInt(times / 60 / 60 % 24); // 时
var Minutes = parseInt(times / 60 % 60); // 分
var Senonds = parseInt(times % 60); // 秒
Day = supply(Day);
Hours = supply(Hours);
Minutes = supply(Minutes);
Senonds = supply(Senonds);
return Day + ' ' + Hours + ':' + Minutes + ':' + Senonds + '';
}
// 小于10的话，补0
function supply(num) {
return num < 10 ? '0' + num : num;
}
setInterval(function () {
var time = countDown('2022-03-31 16:00:00');
document.getElementById('time').innerHTML = time;
}, 1000);
6 字符串对象
6.1 indexOf 查找某个字符在字符串中出现的位置
返回指定内容在字符串中的位置下标（只返回第一个符合条件的字符的位置），从0开始，如果没有查找到，返回-1
如果传参 开始位置，可以指定从 开始位置 开始查找
indexOf('要查找的字符'[,开始位置])
// 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及总次数
var str = 'oabcoefoxyozzopp';
var sum = 0;
for (var i = 0; i < str.length; i++) {
if (str[i].indexOf('o') != -1) {
console.log('字符o出现的位置：' + i)
sum++;
}
}
console.log('字符o出现的总次数是：' + sum)
6.2 根据位置下标返回指定字符
6.2.1 str.chartAt(index)--推荐
返回指定位置的字符
6.2.2 charCodeAt(index)
返回指定位置的字符的ASCII码
6.2.3 srt[index]--推荐
返回指定位置的字符，h5新增，IE8支持
6.3 concat 连接字符串
concat(str1,str2,str3,...) 连接2个或多个字符串，即拼接字符串，功能和 + 相同
6.4 截取字符串
substr(start,length)--推荐
从 start位置开始，截取 length长度的字符
slice(start,end)
从 start位置开始，截取 到 end位置，其中end位置取不到
substring(start,end)
从 start位置开始，截取 到 end位置，其中end位置取不到，不接收负值，（与sllice功能一样）
6.5 替换字符串 replace
在字符串中用一些字符替换另一些字符
replace(被替换的字符串， 要替换为的字符串)；
6.6 将字符串切分为数组
split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组
var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]