数组、对象等常用操作

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]