51工具盒子QX-AI
GPT-4
QX-AI初始化中...
暂无预设简介，请点击下方生成AI简介按钮。
介绍自己
生成预设简介
推荐相关文章
生成AI简介
JS对象简介 {#JS对象简介}
尽管JavaScript里没有Java，但两者都是面向对象语言，按顺序学过java这部分也是大差不差。
在JavaScript中，对象是一组无序的相关属性 和方法 的集合。
对象中的属性均是键值对，属性名是键，属性值是值。
new关键字可以创建对象的实例。
|---------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 | var chuckle = ['轻笑', 19, '男']; //虽然数组也是个对象，这js中是引用类型，但这样定义chuckle，值的表示不直观 //使用对象来表示，结构会更清晰 var chuckle = {};//也可以new Object()来创建一个对象 chuckle.name = '轻笑'; chuckle.age = 19; chuckle.sex = '男'; console.log(chuckle); //{name: '轻笑', age: 19, sex: '男'} console.log(chuckle.name);//轻笑 |
对象的属性值可以是任何的数据类型，也可以是个函数
|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var obj = new Object(); obj.fun = function(){ console.log('这是一个函数'); }; console.log(obj.fun);//获取而不执行函数 console.log(obj.fun());//执行函数,这是一个函数 |
对象的属性也可以是另一个对象
|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var obj1 = new Object(); obj1.inObj; var obj2 = new Object(); obj2.name = "一个对象"; //将整个obj2对象，设置为obj1的属性，保存的是对象的地址 obj1.inObj = obj2; console.log(obj1.inObj);//{name: '一个对象'} console.log(obj1.inObj.name);//一个对象 |
对象变量保存的是对象的地址，当两个变量指向同一个对象时，两个变量都可以修改对象中的属性。
对象的分类:
- 内置对象: 由ES标准中定义的对象，如：Object、Math、Date、String、Array、Number、Boolean、Function等。
- 宿主对象: 由JS的运行环境提供的对象，如浏览器提供了BOM、DOM，console、document。
- 自定义对象: 开发者创建的对象。
基本包装类型 {#基本包装类型}
基本数据类型string无法绑定属性和方法，但将其转换为基本包装类型，就可以。
|---------------|-------------------------------------------------------------------------------------------|
| 1 2 3 | var str = ''; str.name = '一个字符串';//不会报错，但无法绑定 console.log(str.name);//输出undefined |
实际上，当我们对基本数据类型调用属性和方法(如str.length)时，js会自动将其临时转换为对应的基本包装类型（隐式类型转换），再调用内置方法。
基本包装类型 包括：Number 、Boolean 、String，它们都属于引用数据类型，可以绑定属性和方法。
|---------------|----------------------------------------------------------------------------------------------|
| 1 2 3 | var strObj = new String(''); strObj.name = '一个字符串'; console.log(strObj.name);//一个字符串 |
String()：将基本数据类型字符串，转换为 String 对象。Number()：将基本数据类型的数字，转换为 Number 对象。Boolean()：将基本数据类型的布尔值，转换为 Boolean 对象。
注意，在实际应用中一般不会使用基本数据类型的对象
在底层，字符串以字符数组的形式保存
|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var str = 'chuckle';//保存方式["c", "h", "u", "c", "k", "l", "e"] console.log(str.length);//7 console.log(str[2]); //因为是数组，可以直接访问下标，字符串中的第3个字符,u |
内置对象 {#内置对象}
内置对象 是语言自带的一些对象，提供了最基本最常用的属性 和方法。
Arguments (函数参数集合)，Array (数组)，Boolean (布尔对象)，Math (数学对象)，Date (日期时间)，Error (异常对象)，Function (函数构造器)，Number (数值对象)，Object (基础对象)，RegExp (正则表达式对象)，String(字符串对象)
字符串对象String {#字符串对象String}
字符串的所有方法，都不会改变原字符串
indexOf()/lastIndexOf()：获取字符串中指定内容的索引search()：获取字符串中指定内容的索引（参数里一般是正则）includes()：字符串中是否包含指定的内容startsWith()：字符串是否以指定的内容开头endsWith()：字符串是否以指定的内容结尾charAt()和str[index]：返回字符串指定位置(下标)的字符charCodeAt(index)：返回字符串指定位置的字符的 Unicode 编码slice()：截取指定范围的字符串，可传入负值，代表倒数第几个字符（截取时包括该字符）substring()：截取指定范围的字符串**，**不可**传入负值，传入负值转为0，自动调整参数的位置，如果第二个参数小于第一个，则自动交换substr()：从起始位置截取指定长度的字符串**，两个参数，起始位置，**截取指定长度**String.fromCharCode()：据字符的 Unicode 编码获取字符concat()：拼接两个字符串，不如直接用+号split()：字符串转换为数组 【重要】replace()：替换字符串内容repeat()：重复该字符串指定次数toUpperCase()和toLowerCase()：大小写转换trim()：去除字符串头尾的空格
查找字符 {#查找字符}
1、indexOf()/lastIndexOf()：获取字符串中指定内容的索引
indexOf()从前向后查找，lastIndexOf()从后向前，用法一致。
功能 ：检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其第一次出现的字符串底层数组下标（0代表在开头）；如果没有找到指定的内容，则返回 -1。
|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var str = 'abc cba'; console.log(str.indexOf('c'));//2 console.log(str.lastIndexOf('c'));//4 console.log(str.indexOf('a'));//0 console.log(str.lastIndexOf('a'));//6 |
|-------------|--------------------------------------------------------------------------------------|
| 1 2 | var str = 'chuckle'; console.log(str.indexOf('uc'));//2,代表uc第一个字符u是字符串中第三个字符 |
添加起始位置参数，指定查找的起始位置
|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var str = 'chuckle'; console.log(str.indexOf('uc',2));//从下标2即字符串第三个字符开始找起，输出2 console.log(str.indexOf('uc',3));//从下标3即字符串第四个字符开始找起，输出-1 |
案例：查找字符串"abcabcabc"中，所有 a 出现的位置以及次数
|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 | var str = "abcabcabc"; var num = 0;//记录次数 var index = -1;//记录位置下标，从-1开始 do{ index = str.indexOf('a', index + 1);//找到一个就从下一个字符下标开始找 if(index !== -1){ console.log(index);//输出下标0,3,6 } }while(index !== -1);//找到了就接着去找，直到找不到 |
2、search()：获取字符串中指定内容的索引（参数里一般是正则）
功能 ：检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其第一次出现的字符串底层数组下标（0代表在开头）；如果没有找到指定的内容，则返回 -1。
|---------------|-----------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var str = 'CHUCKLE'; console.log(str.search('uc')); //-1 console.log(str.search(/uc/i)); //2 正则写法，忽略大小写 |
3、includes()：字符串中是否包含指定的内容
功能：判断字符串中是否含有指定内容。有返回 true；否则返回 false。可以传入起始位置参数。
|-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var str = "chuckle"; console.log(str.includes('uc')); //true console.log(str.includes('ab')); //false console.log(str.includes('ab',5)); //false |
4、startsWith()：字符串是否以指定的内容开头
功能：判断字符串是否以指定的字符串开头。是返回 true；否则返回 false。可以指定起始位置下标，指定的位置则当做字符串开头。
|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var str = "chuckle"; console.log(str.startsWith('uc')); //false console.log(str.startsWith('c')); //true console.log(str.startsWith('uc',2)); //true |
5、endsWith()：字符串是否以指定的内容结尾
功能：判断字符串是否以指定的字符串结尾。是返回 true；否则返回 false。可以指定检索的字符串长度（检索到第几个字符）。
|-----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var str = "chuckle" console.log(str.endsWith('uc')); //false console.log(str.endsWith('e')); //true console.log(str.endsWith('uc',4)); //true |
获取指定位置的字符 {#获取指定位置的字符}
1、charAt()和str[index]：返回字符串指定位置(下标)的字符
|---------------|-------------------------------------------------------------------------------------|
| 1 2 3 | var str = "chuckle"; console.log(str.charAt(2));//u console.log(str[2]);//u |
2、charCodeAt(index)：返回字符串指定位置的字符的 Unicode 编码
判断字符串中是否有非英文字符
|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 | var str = "chuckle轻笑"; for(let i = 0; i < str.length; i++){ let char = str.charCodeAt(i);//保存该字符的Unicode编码 if(!(char >= 0 && char <= 127)){//英文字符的Unicode编码在0~127 console.log(`存在非英文,在第${i+1}个字符`);//存在非英文,在第8个字符,存在非英文,在第9个字符 } } |
字符串截取 {#字符串截取}
1、slice()：截取指定范围的字符串，可传入负值，代表倒数第几个字符（截取时包括该字符）
两个参数都是索引值。正数时包左不包右
|-----------|---------------------------------------|
| 1 | 新字符串 = str.slice(开始索引, 结束索引); |
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var str = "qxchuckle"; console.log(str.slice(2));//chuckle,从下标2开始截取到最后 console.log(str.slice(2,str.length));//chuckle console.log(str.slice(2, -1));//chuckl,从下标2开始截取到倒数第一个字符，包括，-0无效 console.log(str.slice(5, 2));//无效范围，返回空字符串 |
2、substring()：截取指定范围的字符串 ，不可传入负值，传入负值转为0，自动调整参数的位置，如果第二个参数小于第一个，则自动交换。
两个参数都是索引值。包左不包右
|-----------|-------------------------------------------|
| 1 | 新字符串 = str.substring(开始索引, 结束索引); |
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var str = "qxchuckle"; console.log(str.substring(2)); //chuckle,从下标2开始截取到最后 console.log(str.substring(2,str.length)); //chuckle console.log(str.substring(5, 2)); //chu，自动交换位置，相当于截取下标2到5 console.log(str.substring(2, -1)); //qx，-1看作0，然后自动交换位置 |
3、substr()：从起始位置截取指定长度的字符串 ，两个参数，起始位置，截取指定长度
|-----------|-----------------------------------------|
| 1 | 新字符串 = str.substr(开始索引, 截取的长度); |
|-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var str = "qxchuckle"; console.log(str.substr(2)); //chuckle,从下标2开始截取到最后 console.log(str.substr(2,100)); //chuckle，截取长度超过剩余长度时，只会截取剩余的字符 console.log(str.substr(100, 10)); //空字符串，截取不到任何字符 |
其它方法 {#其它方法}
String.fromCharCode()：据字符的 Unicode 编码获取字符
|-------------|-------------------------------------------------------------|
| 1 2 | var a = String.fromCharCode(97); console.log(a);//a |
concat()：拼接两个字符串，不如直接用+号，数组中也有此方法，用于两个数组的拼接，那边常用
|---------------|-------------------------------------------------------------------------------------|
| 1 2 3 | var str1 = "qx"; var str2 = "chuckle"; str2 = str1.concat(str2);//qxchuckle |
split()：字符串转换为数组 【重要】
功能：通过指定的分隔符，将字符串拆分成数组，分隔符不会出现在数组中。不传入参数则将整个字符串作为数组的一个元素存入。
|-----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var str = "qx,chuckle,轻笑"; console.log(str.split(',')); //['qx', 'chuckle', '轻笑'] console.log(str.split('')); //['q', 'x', ',', 'c', 'h', 'u', 'c', 'k', 'l', 'e', ',', '轻', '笑'] console.log(str.split()); //['qx,chuckle,轻笑'] |
replace()：替换字符串内容
功能：将字符串中的指定内容，替换为一段字符串，默认只会替换第一个被匹配到的字符。如果要全局替换，需要使用正则。
|-----------|-------------------------------------------|
| 1 | 新的字符串 = str.replace(被替换的子串，新的子串); |
|---------------|-----------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var str = "生活就像海洋，只有咕噜咕噜"; str = str.replace('咕噜咕噜','意志坚强的人才能到达彼岸'); console.log(str);//生活就像海洋，只有意志坚强的人才能到达彼岸 |
repeat()：重复该字符串指定次数
|---------------|-----------------------------------------------------------------------------------------------|
| 1 2 3 | var str = "chuckle!" str = str.repeat(2);//重复两次 console.log(str);//'chuckle!chuckle!' |
trim()：去除字符串头尾的空格
|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var str = ' a b c '; console.log(str);//' a b c ' console.log(str.length);//15 console.log(str.trim());//'a b c' console.log(str.trim().length);//9 |
toUpperCase() 和 toLowerCase()：大小写转换
|-------------------|----------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var str = 'abcdEFG'; //转换成小写 console.log(str.toLowerCase()); //abcdefg //转换成大写 console.log(str.toUpperCase()); //ABCDEFG |
html方法：不常用，多数是拼接成模板字符串返回
|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 | var str = "chuckle"; console.log(str.anchor('chuckle'));//<a name="chuckle">chuckle</a> console.log(str.big());//<big>chuckle</big> console.log(str.sub());//<sub>chuckle</sub> console.log(str.sup());//<sup>chuckle</sup> console.log(str.link('https://www.qcqx.cn/'));//<a href="https://www.qcqx.cn/">chuckle</a> console.log(str.bold());//<b>chuckle</b> |
数值对象Number {#数值对象Number}
Number数值型介绍---JavaScript基础笔记(1)
Number.isInteger()：判断是否为整数toFixed(num)：保留小数点后num位（四舍五入），返回字符串
Number.isInteger()：判断是否为整数
|-----------|-------------------------------------|
| 1 | 布尔值 = Number.isInteger(数字); |
|-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 | var a = 10; console.log(Number.isInteger(a));//true a = -10; console.log(Number.isInteger(a));//true a = 1.00; console.log(Number.isInteger(a));//true,虽然有小数点，但后面都是0，所以会被当做整数 a = 3.14; console.log(Number.isInteger(a));//false |
toFixed(num)：保留小数点后num位（四舍五入） ，返回字符串，将字符串转为整数可用Number() ，详见数据类型转换---JavaScript基础笔记(1)
注意返回字符串！
|-----------|--------------------------------|
| 1 | 字符串 = nb.toFixed(num); |
|-----------------|-------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var nb = 3.1415926; console.log(nb.toFixed(1));//3.1 console.log(nb.toFixed(3));//3.142 console.log(nb.toFixed(4));//3.1416 |
数学对象Math {#数学对象Math}
Math不是一个构造函数，无需创建对象即可直接使用其属性和方法，它是一个工具类，里面封装了数学运算相关的属性和方法。
Math.PI：圆周率Math.abs()：获取绝对值Math.random()：生成0-1之间的随机浮点数，[0,1)Math.floor()：向下取整（往小取值）Math.ceil()：向上取整（往大取值）Math.round()：四舍五入取整（正数四舍五入，负数五舍六入）Math.max(x, y, z)：返回多个数中的最大值Math.min(x, y, z)：返回多个数中的最小值Math.pow(x,y)：乘方：返回 x 的 y 次幂Math.sqrt()：开方：对一个数进行开方运算
Math.abs()：获取绝对值，可传入字符串，自动做隐式转换。
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | console.log(Math.abs(10));//10 console.log(Math.abs(-10));//10 console.log(Math.abs('-10'));//10 console.log(Math.abs(-3.14));//3.14 console.log(Math.abs('123abc'));//NaN |
Math.random()：生成0-1之间的随机浮点数，[0,1)
一些技巧
|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | //生成 [0, x) 之间的随机整数 Math.round(Math.random()*x); //生成 [x, y) 之间的随机整数 Math.round(Math.random()*(y-x)+x) //生成 [x, y]之间的随机整数 Math.floor(Math.random()*(y-x+1))+x; |
时间对象Date {#时间对象Date}
Date 用于处理日期和时间，Date是一个构造函数 ，需要new实例化后才能使用。
无参时获取系统时间
|---------------|---------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var date = new Date(); console.log(date);//Wed Mar 29 2023 15:08:02 GMT+0800 (中国标准时间) console.log(typeof date);//object |
传递参数 ,意思是给时间对象Date设定一个具体的时间，基准时间为1970年1月1日 00:00:00，具体小时差别要看时区，东八区+8小时。 使用方法
|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var date = new Date(传入毫秒数（时间戳）);//表示基准时间加上这个毫秒数 //至少要两个参数，不能缺少年，会自动进位，其余默认都是首时间 var date = new Date(年,月,日,时,分,秒,毫秒);//月份是0到11之间的整数值，表示从一月到十二月 //传入时间字符串，有格式要求，星期 月 日 年 时:分:秒 var date = new Date(时间字符串); //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间) |
|-----------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 | //传入2000毫秒，表示基准时间过2s var date = new Date(2000);//Thu Jan 01 1970 08:00:02 GMT+0800 (中国标准时间) //设定日期为2023年3月，传入2代表3月 var date = new Date(2023,2);//Wed Mar 01 2023 00:00:00 GMT+0800 (中国标准时间) //传入时间字符串，有格式要求，分隔符任意,可以看到，星期不对会自动修正 var date = new Date('Wed Apr 21 2023');//Fri Apr 21 2023 00:00:00 GMT+0800 (中国标准时间) var date = new Date("2023/3/29 11:11:11");//Wed Mar 29 2023 11:11:11 GMT+0800 (中国标准时间) |
常用方法
getFullYear()：获取年份getMonth()：获取月，0到11之间的整数值，表示从一月到十二月getDate()：获取日：1-31getDay()：获取星期：0-6，0代表星期日getHours()：获取小时：0-23getMinutes()：获取分钟：0-59getSeconds()：获取秒：0-59getMilliseconds()：获取毫秒setFullYear()：修改日期，参数：年,月,日,时,分,秒,毫秒。返回时间戳toUTCString()：将当日的日期（根据 UTC）转换为字符串toJSON()：将日期转为json格式getTime()：获取时间戳toLocaleString()格式化输出 2023/4/12 09:39:49
举例：
|------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 | var date = new Date(1680076326495);//Wed Mar 29 2023 15:52:06 GMT+0800 (中国标准时间) console.log(date.getFullYear());//2023 console.log(date.getMonth());//2 console.log(date.getDate());//29 console.log(date.getDay());//3 console.log(date.getHours());//15 console.log(date.getMinutes());//52 console.log(date.getSeconds());//6 console.log(date.getMilliseconds());//495 |
toUTCString()：将当日的日期（根据 UTC）转换为字符串
|-------------|--------------------------------------------------------------------------------------------------------------------------|
| 1 2 | var d = new Date();//Wed Mar 29 2023 16:11:02 GMT+0800 (中国标准时间) d.toUTCString()//'Wed, 29 Mar 2023 08:11:02 GMT' |
setFullYear()：修改日期，参数：年,月,日,时,分,秒,毫秒,返回时间戳
|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var d = new Date(2023,0); var t = d.setFullYear(2020,10); console.log(t);//1604160000000 console.log(new Date(t));//Sun Nov 01 2020 00:00:00 GMT+0800 (中国标准时间) |
toJSON()：将日期转为json格式
|---------------|-------------------------------------------------------------------------------------------------|
| 1 2 3 | var d = new Date(2023,0); var t = d.toJSON(); console.log(t);//2022-12-31T16:00:00.000Z |
获取时间戳 {#获取时间戳}
getTime()：获取时间戳，也就是返回从基准时间至今的毫秒数(时间戳也可以是秒数，但函数返回的是毫秒数)。
|-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var date = new Date(2023,0); console.log(date);//Sun Jan 01 2023 00:00:00 GMT+0800 (中国标准时间) var time = date.getTime();//1672502400000 var date = new Date(time);//Sun Jan 01 2023 00:00:00 GMT+0800 (中国标准时间) |
还有其它方法可以获取时间戳：
|---------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var time1 = +new Date(); console.log(time1);//1680076996003 var time2 = new Date().getTime(); console.log(time2);//1680076996003 var time3 = new Date().valueOf(); console.log(time3);//1680076996003 var time4 = new Date() * 1; console.log(time4);//1680076996003 var time5 = Number(new Date()); console.log(time5);//1680076996003 |
获取当前时间的时间戳可以用这种方法
|-----------|-------------------------------------------------|
| 1 | console.log(Date.now());//1680077268109 |
转为指定格式 {#转为指定格式}
使用 toLocaleString() 简单格式化输出
|-------------|------------------------------------------------------------|
| 1 2 | new Date().toLocaleString(); // 2023/4/12 09:39:49 |
也可以通过Date的prototype属性 在原型上添加自定义的属性和方法，给Date对象添加**format()**方法，该方法封装如下：
|---------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours(), //小时 "m+" : this.getMinutes(), //分 "s+" : this.getSeconds(), //秒 "q+" : Math.floor((this.getMonth()+3)/3), //季度 "S" : this.getMilliseconds() //毫秒 }; if(/(y+)/.test(fmt)) { fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(var k in o) { if(new RegExp("("+ k +")").test(fmt)){ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); } } return fmt; } |
使用案例,分隔符任意
|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 | var date = new Date(1680076326495);//Wed Mar 29 2023 15:52:06 GMT+0800 (中国标准时间) var time = date.format("yyyy-MM-dd hh:mm:ss"); console.log(time);// 2023-03-29 15:52:06 time = date.format("yyyy/MM/dd"); console.log(time);// 2023/03/29 time = date.format("yyyy年MM月dd日 hh时mm分ss秒"); console.log(time);// 2023年03月29日 15时52分06秒 |
还可引入各种时间库 来处理，如momentjs、Day.js
数组对象Array {#数组对象Array}
下面是一个普通对象和数组对象：
|-------------|-----------------------------------------------------------------------------|
| 1 2 | var obj = {name: 'chuckle' , age: 19 }; var arr = ["chuckle","19"]; |
普通对象使用字符串作为属性名，而数组使用数字作为索引，数组适合用于存储同类型的一组数据，如列表数据。
数组中的元素可以是任意的数据类型 ，可以是对象、函数、数组。也可以同时存储不同类型数据。
1、使用字面量创建数组：
|-------------|------------------------------------------------------------|
| 1 2 | var arr = []; // 创建空数组 arr = [1, 2, 3]; // 带初始值的数组 |
2、使用构造函数创建数组对象：
|---------------|----------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var arr = new Array(); // 创建空数组 arr = new Array(4); // 创建大小为4的数组，初始值都为空属性 arr = new Array(1,2,3); // 带初始值的数组 |
JS中的数组会自动扩容 ，当我们访问数组大小以外的下标时，会返回undefined，但可以直接给超过数组大小的下标赋值，并自动给扩容的下标赋空属性，注意，空属性也会计入数组的长度 arr.length。
|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 | var arr = [1, 2, 3]; console.log(arr); // [1, 2, 3] console.log(arr.length); // 3 console.log(arr[6]);// undefined arr[6] = 7; console.log(arr); // [1, 2, 3, 空属性 × 3, 7] console.log(arr[4]); // undefined console.log(arr.length); // 7 |
解构赋值 {#解构赋值}
解构赋值是ES6中新增的一种赋值方式。可以方便地把数组中的元素按顺序赋值给其他多个变量。
|-------------------|-----------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var arr = [1, 2, [3,4]]; var [a, b, c] = arr; console.log(a);// 1 console.log(b);// 2 console.log(c);// [3,4] |
先指定变量的默认值，会被覆盖
|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var arr = [1, 2, [3,4]]; var [a, b = 0, c = 0, d = 0] = arr; console.log(a);// 1 console.log(b);// 2 console.log(c);// [3,4] console.log(d);// 0,数组中无第四个元素，保持原值 |
ES6中新增的扩展运算符 ...打包剩余的数据 作为一个新数组 。打包时扩展运算符只能写在最后。
|---------------|-----------------------------------------------------------------------------------|
| 1 2 3 | var [a, ...b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // [2, 3] |
数组属性和方法 {#数组属性和方法}
arr.length：数组的长度，数组中元素的个数
数组的方法：
- 类型相关方法：
Array.isArray()：判断是否为数组toString()：将数组转换为字符串join()：将数组转换为字符串,可以指定分隔符Array.from()：将伪数组或可遍历对象转为真数组Array.of(a,b,c)：将多个值按顺序转为数组- 字符串的方法：
split()：将字符串按指定的分隔符，组装为数组
- 元素的添加和删除：
push()：从数组尾部插入 任意数量元素，返回新数组的长度 ，改变原数组pop()：删除数组中最后一个 元素，返回被删除的元素，改变原数组unshift()：从数组头部插入 任意数量元素，返回新数组的长度 ，改变原数组shift()：删除数组中第一个 元素，返回被删除的元素，改变原数组splice()：从数组中删除指定的 任意数量元素，返回被删除元素 组成的新数组，改变原数组slice()：从数组中提取指定的 任意数量元素，返回新数组 ，不改变原数组concat()：合并多个数组，返回合并后的新数组，不改变原数组fill()：用固定的值填充数组 ，返回新数组，改变原数组
- 数组排序：
reverse()：反转数组，返回反转后的数组，改变原数组sort()：排序，元素默认按照Unicode编码 ，从小到大进行排序，改变原数组
- 查找数组元素：
indexOf()：从前往后 搜索数组中的元素，并返回它首次所在位置的索引。lastIndexOf()：从后往前 搜索数组中的元素，并返回它首次所在位置的索引。includes()：判断数组是否包含一个指定的值，返回布尔find(function())：返回第一个符合传入测试（函数）条件的数组元素。findIndex(function())：返回第一个 符合传入测试（函数）条件的数组元素的索引。every(function())：检测数组所有元素 是否都 符合指定(函数)条件，返回布尔some(function())：检测数组是否存在 符合指定(函数)条件的元素，返回布尔valueOf()：返回数组本身，意义不大，数组名就代表该数组了
- 遍历数组：
for循环遍历，大多数语言对于数组通用的遍历方法forEach()传入一个回调函数作为参数，它由我们创建但是不由我们调用，数组中有几个元素，该回调函数就会执行几次，没用返回值for of，ES6新增循环遍历数组方法map()，遍历数组，并对数组中的每一项进行加工。filter()：数组中的每一项运行回调函数，回调函数返回结果是true 的项（符合条件的项），组成新数组返回，不改变原数组reduce()：参数是接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值返回
类型相关方法 {#类型相关方法}
Array.isArray()：判断是否为数组
|-----------------|--------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var a = []; console.log(Array.isArray(a));//true a = {}; console.log(Array.isArray(a));//false |
toString()：将数组转换为字符串，每一项用逗号分割。
大多数的数据类型都可以使用.toString()方法，将其转换为字符串。
|-------------|--------------------------------------------------------------------------------------------------------------------------------|
| 1 2 | var a = [1,[2,3],{name:'chuckle',age:19},function(){}]; console.log(a.toString());//1,2,3,[object Object],function(){} |
还可以使用String()将数组转换为字符串
|-------------|-----------------------------------------------------------------------------------------------------------------------------|
| 1 2 | var a = [1,[2,3],{name:'chuckle',age:19},function(){}]; console.log(String(a));//1,2,3,[object Object],function(){} |
join()：将数组转换为字符串,可以指定分隔符，默认为逗号分割。
|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var a = [1,[2,3],{name:'chuckle',age:19},function(){}]; console.log(a.join());//1,2,3,[object Object],function(){} console.log(a.join(' '));//1 2,3 [object Object] function(){} console.log(a.join('|'));//1|2,3|[object Object]|function(){} |
可以使用JSON.stringify()将某个对象转换成 JSON 字符串形式，数组中的空属性会转为null。
|-----------------|---------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var arr = []; arr[5] = 6; console.log(arr); // [空属性 × 5, 6] console.log(JSON.stringify(arr)); // [null,null,null,null,null,6] |
字符串的方法：split()：将字符串按指定的分隔符，组装为数组，默认为逗号分割，找不到指定分隔符时也会用逗号分割
|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var str = "qx,chuckle,轻笑" console.log(str.split());//['qx,chuckle,轻笑'] console.log(str.split(''));//['q', 'x', ',', 'c', 'h', 'u', 'c', 'k', 'l', 'e', ',', '轻', '笑'] console.log(str.split('-'));//['qx,chuckle,轻笑'] console.log(str.split('c'));// ['qx,', 'hu', 'kle,轻笑'] |
Array.from()：将伪数组或可遍历对象转为真数组
伪数组 也有length属性，可以使用索引对数据进行操作，但是没有真数组的方法，因为该对象的原型不指向Array，需要将伪转真才能调用数组的方法。
伪数组一般不会直接创建，而是通过一些js操作得到，通过浏览器方法获取标签、字符串、接受实参的函数arguments得到参数的伪数组，因为伪数组具有长度和索引，所以可以使用循环语句遍历。
|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var str = "chuckle"; str.push('qx');//报错str.push is not a function var a = Array.from(str); console.log(a);//['c', 'h', 'u', 'c', 'k', 'l', 'e'] a.push('qx') console.log(a);// ['c', 'h', 'u', 'c', 'k', 'l', 'e', 'qx'] |
Array.of(a,b,c)：将多个值按顺序转为字符串 ，和new Array()差不多，区别是只有一个参数时，在new Array() 表示数组的长度，而在**of()**仍然代表数组的元素
|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var arr = Array.of(1, [2,3], 'qx'); console.log(arr);// [1, Array(2), 'qx'] arr = Array.of(3); console.log(arr);// [3] arr = new Array(3); console.log(JSON.stringify(arr));// [null,null,null] |
元素的添加和删除 {#元素的添加和删除}
push()： 从数组尾部插入 任意数量元素，返回新数组的长度 ，改变原数组
|---------------|-----------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var arr = [1,2,3]; console.log(arr.push(4,5,'123'));// 6 console.log(JSON.stringify(arr));// [1, 2, 3, 4, 5, '123'] |
pop()： 删除数组中最后一个 元素，返回被删除 的元素，改变原数组
|---------------|--------------------------------------------------------------------------------------------------|
| 1 2 3 | var arr = [1,2,3]; console.log(arr.pop());// 3 console.log(JSON.stringify(arr));// [1,2] |
unshift()： 从数组头部插入 任意数量元素，返回新数组的长度 ，改变原数组
|---------------|-------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var arr = [1,2,3]; console.log(arr.unshift('0123',0));// 5 console.log(JSON.stringify(arr));// ["0123",0,1,2,3] |
shift()： 删除数组中第一个 元素，返回被删除 的元素，改变原数组
|---------------|----------------------------------------------------------------------------------------------------|
| 1 2 3 | var arr = [1,2,3]; console.log(arr.shift());// 1 console.log(JSON.stringify(arr));// [2,3] |
splice()： 从数组中删除指定的 任意数量元素，返回被删除元素 组成的新数组，改变原数组
语法，索引值为负代表从倒数第几个开始删
|---------------|--------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | 新数组 = 原数组.splice(起始索引); 新数组 = 原数组.splice(起始索引, 需要删除的个数); 新数组 = 原数组.splice(起始索引, 需要删除的个数, 新的元素1, 新的元素2...); |
|---------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var arr = [1,2,3,4,5]; console.log(arr.splice(1));// 删除下标1后的所有元素，[2, 3, 4, 5] console.log(JSON.stringify(arr));// [1] arr = [1,2,3,4,5]; console.log(arr.splice(1,2));// 从下标1开始删两个元素，包括下标1，[2, 3] console.log(JSON.stringify(arr));// [1,4,5] arr = [1,2,3,4,5]; console.log(arr.splice(1,2,'a','b'));// 删完后再从删除的起始位置插入'a','b'元素，[2, 3] console.log(JSON.stringify(arr));// [1,"a","b",4,5] arr = [1,2,3,4,5]; console.log(arr.splice(-2));// 从倒数第2个元素开始删后面的所有元素，[4, 5] console.log(JSON.stringify(arr));// [1,2,3] |
搭配indexOf()，删除指定内容的元素
|---------------|----------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var arr = [1,2,3,4,5]; console.log(arr.splice(arr.indexOf(3), 1));// 删除3这个元素，[3] console.log(JSON.stringify(arr));// [1,2,4,5] |
slice()：从数组中提取指定的 任意数量元素，返回新数组 ，不改变原数组
语法，负数代表倒数索引
|-------------|---------------------------------------------------------------------------------------------|
| 1 2 | 新数组 = 原数组.slice(开始位置的索引); 新数组 = 原数组.slice(开始位置的索引, 结束位置的索引);//提取的元素中，包含开始位置，不包含结束位置 |
|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var arr = ['a', 'b', 'c', 'd']; console.log(arr.slice()); // 不带参数提取所有元素,['a', 'b', 'c', 'd'] console.log(arr.slice(2)); // 从下标2提取后面所有元素，['c', 'd'] console.log(arr.slice(-2)); // 提取最后两个元素,['c', 'd'] console.log(arr.slice(1,3)); // 提取[1,3)索引的元素,['b', 'c'] console.log(arr.slice(3,1)); // 范围内无元素，提取为空数组,[] |
concat()： 合并多个数组，返回合并后的新数组，不改变原数组
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr3 = [7, 8, 9]; console.log(arr1.concat(arr2,arr3));// [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arr1);// 不改变原数组 [1, 2, 3] |
数组合并的另一种方式： 使用扩展运算符...
|---------------|-----------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var a = [0, ...arr1, ...arr2, 7];//[0, 1, 2, 3, 4, 5, 6, 7] |
fill()： 用固定的值填充数组 ，返回新数组，改变原数组
|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | // 数组中每一个元素都替换为该值 新数组 = 数组.fill(固定值); //从起始位置开始填充 新数组 = 数组.fill(固定值, 起始索引); //从起始位置到结束位置填充，左闭右开 新数组 = 数组.fill(固定值, 起始索引, 结束索引); |
|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var arr = new Array(6).fill(0)//创建一个元素均为0，长度为6的数组 console.log(arr);// [0, 0, 0, 0, 0, 0] arr.fill('a',2);//索引2后的所有元素填充为'a' console.log(arr);// [0, 0, 'a', 'a', 'a', 'a'] arr.fill('b',2,4);//索引[2,4)的元素填充为'b' console.log(arr);// [0, 0, 'b', 'b', 'a', 'a'] |
数组排序 {#数组排序}
reverse()：反转数组，返回反转后的数组，改变原数组
|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var arr = ['a', 'b', 'c', 'd', 'e']; console.log(arr.reverse());// ['e', 'd', 'c', 'b', 'a'] console.log(arr);// ['e', 'd', 'c', 'b', 'a'] |
sort()：排序，元素默认按照Unicode编码 （逐个字符比较，非字符串先隐式转换为字符串），从小到大进行排序，返回排序后的新数组，改变原数组
|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var arr = ['c', 'e', 'a', 'd', 'b'];// 乱序 console.log(arr.sort());// ['a', 'b', 'c', 'd', 'e'] console.log(arr);// ['a', 'b', 'c', 'd', 'e'] |
当数组内元素是数字时，不能直接使用sort()排序，因为默认是按逐个字符的Unicode编码进行排序
|---------------|----------------------------------------------------------------------------------------------------------------|
| 1 2 3 | var arr = [7, 3, 11, 4, 1, 5]; //11排到了3的前面，没有按我们所想的从小到大排 console.log(arr.sort());//[1, 11, 3, 4, 5, 7] |
对于非字符串排序（数字的排序 ），需要传入一个比较函数，有两个参数 a 和 b（可以是数组中任意元素）
arr.sort(Fun(a, b))，a：第一个 用于比较的元素，b：第二个 用于比较的元素，数组按照比较函数的返回值进行排序，而不是Unicode编码。
JS规定了Fun(a, b)返回值的效果：
- 返回值小于0 ，让a排b前面
- 返回值大于0 ，让a排b后面
- 返回值等于0 ，a,b的相对位置不变
对于[7, 3, 11, 4, 1, 5]这个数组，比较11和4时，不带比较函数，会按Unicode编码从小到大排序，11会排在4前面，带比较函数后，因为a-b=7大于零，所以会让4排11前面。
|-----------------|-------------------------------------------------------------------------------------------|
| 1 2 3 4 | //实现整体升序(小到大) arr.sort((a, b) => a - b); //实现整体降序(大到小) arr.sort((a, b) => b - a); |
实际用用
|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var arr = [7, 3, 11, 4, 1, 5]; arr.sort();//[1, 11, 3, 4, 5, 7] arr.sort((a, b) => a - b);// [1, 3, 4, 5, 7, 11] arr.sort((a, b) => b - a);// [11, 7, 5, 4, 3, 1] |
**Fun(a, b)**具体比较什么，什么情况返回大于0的数，什么时候返回小于0，需要自己去编写，所以可以实现商品的按价格排序：
|---------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | //这个数组中存放了几个商品对象，试着让它们按价格升序排序 var commodityList = [ { name: 'biscuit', price: 10, }, { name: 'Coke', price: 3, }, { name: 'toy', price: 8, }, { name: 'bread', price: 5, }, ]; commodityList.sort((a, b) => { // 比较价格，规范起见，都进行parseInt()转换，也可以用parseFloat()，看业务需要 return parseInt(a.price) - parseInt(b.price); }); console.log(JSON.stringify(commodityList)); |
输出如下
|---------------------|----------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | [ {"name":"Coke","price":3}, {"name":"bread","price":5}, {"name":"toy","price":8}, {"name":"biscuit","price":10} ] |
查找数组元素 {#查找数组元素}
indexOf()： 从前往后 搜索数组中的元素，并返回它首次 所在位置的索引。
lastIndexOf()： 从后往前 搜索数组中的元素，并返回它首次所在位置的索引。
找到元素返回其索引，没找到返回**-1** ，严格类型约束，类似===。
|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var arr = ['1', 2, 1, '2']; console.log(arr.indexOf(1));// 2 console.log(arr.indexOf('1'));// 0 console.log(arr.indexOf('2'));// 3 console.log(arr.indexOf(2));// 1 console.log(arr.indexOf(3));// -1 |
可以指定第二个参数，指定查找的起始位置，包括该位置
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var arr = [1, 2, 3, 4, 3, 2, 1]; //正着从数组一半开始找 console.log(arr.indexOf(1, parseInt(arr.length/2)));// 6 //倒着从数组一半开始找 console.log(arr.lastIndexOf(1, parseInt(arr.length/2)));// 0 |
includes()： 判断数组是否包含一个指定的值，严格类型约束 ，返回布尔，可以加上第二个参数规定查找的起始位置。
|-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var arr = [1, 2, '3', '4']; console.log(arr.includes(1)); // true console.log(arr.includes('1')); // false console.log(arr.includes(2, 2)); // false console.log(arr.includes('3', 2)); // true |
find(function())： 返回第一个 符合传入测试（函数）条件的数组元素。
findIndex(function())： 返回第一个 符合传入测试（函数）条件的数组元素的索引。
找到符合条件的第一个元素就停止查找，没找到返回find()返回undefined ，findIndex()返回-1 找到大于30的第一个元素
|------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var arr = [10, 20, 30, 40, 50, 60]; //用find var result = arr.find((item, index, array) => { // item是元素内容，index是该元素索引，array是该数组 return item > 30; }); console.log(result);// 40 //用findIndex var result = arr.findIndex((item, index, array) => { // item是元素内容，index是该元素索引，array是该数组 return item > 30; }); console.log(result);// 3 |
every(function())：检测数组所有元素 是否都 符合指定(函数)条件，返回布尔 ，有一项返回 false 立刻停止遍历。
some(function())：检测数组是否存在 符合指定(函数)条件的元素，返回布尔，有一项返回 true 立刻停止遍历。
every()： 全部真，才为真，**some()：**一个真，就为真， every举例
|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var arr = [10, 20, 30, '40', '50', '60']; var result = arr.every((item, index, array) => { // item是元素内容，index是该元素索引，array是该数组 return item > 0;// 判断数组中元素是否都大于0，字符串会隐式转为数值 }); console.log(result);// true |
some举例
|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var arr = [10, 20, 30, '40', '50', '60']; var result = arr.some((item, index, array) => { // item是元素内容，index是该元素索引，array是该数组 return item > 30;// 判断是否有大于0的元素，字符串会隐式转为数值 }); console.log(result);// true |
遍历数组 {#遍历数组}
for循环遍历，大多数语言对于数组通用的遍历方法
|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } //1 2 3 4 5 console.log(JSON.stringify(arr));//[1,2,3,4,5] |
这不够优雅，JS有更简单便捷遍历数组的方法
forEach() 传入一个回调函数作为参数，它由我们创建但是不由我们调用，数组中有几个元素，该回调函数就会执行几次，没用返回值
|---------------|----------------------------------------------------------------|
| 1 2 3 | arr.forEach(function (item, index, array) { //做些事情 }); |
回调函数中传递三个参数：
- **参数1（item）：**当前正在遍历的元素
- **参数2（index）：**当前正在遍历的元素的索引
- **参数3（array）：**正在遍历的数组
|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var arr = [1, 2, 3, 4, 5]; arr.forEach(function (item, index, array) { console.log(`${index}:${item}`); }); //0:1 1:2 2:3 3:4 4:5 |
在forEach() 的回调函数中不能通过参数1（item）直接修改数组中的元素，但元素是一个对象时，可以访问并修改该对象的属性，这是因为数组中存放的是该对象的引用（地址）
|------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var arr = [1, 2, 3, 4, 5]; arr.forEach(function (item, index, array) { item += 1;//试图让数组中的元素都加1 }); console.log(JSON.stringify(arr));//[1,2,3,4,5]很显然，做不到 var arr = [{name: 'qx', age: 19}]; arr.forEach(function (item, index, array) { item = {name: 'chuckle', age: 19}//试图修改数组中的元素 }); console.log(JSON.stringify(arr));//[{"name":"qx","age":19}]很显然，做不到 var arr = [{name: 'qx', age: 19}]; arr.forEach(function (item, index, array) { item.name = 'chuckle';//试图访问该对象的属性并修改 }); console.log(JSON.stringify(arr));//[{"name":"chuckle","age":19}]很显然，这是可以的 |
如果要修改数组中的元素，需通过参数2（index）和3（array） ，array[index]来访问数组元素并修改
|------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var arr = [1, 2, 3, 4, 5]; arr.forEach(function (item, index, array) { array[index] += 1;//试图让数组中的元素都加1 }); console.log(JSON.stringify(arr));//[2,3,4,5,6]可以做到 var arr = [{name: 'qx', age: 19}]; arr.forEach(function (item, index, array) { array[index] = {name: 'chuckle', age: 19}//试图修改数组中的元素 }); console.log(JSON.stringify(arr));//[{"name":"chuckle","age":19}]可以做到 var arr = [{name: 'qx', age: 19}]; arr.forEach(function (item, index, array) { array[index].name = 'chuckle';//试图访问该对象的属性并修改 }); console.log(JSON.stringify(arr));//[{"name":"chuckle","age":19}]可以做到 |
纯粹只是遍历数组，可以用forEach()，但同时要修改元素时，最好使用map()，避免一些低级错误
for of，ES6新增循环遍历数组方法
|---------------------|---------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | var arr = [1, 2, 3, 4, 5]; for(let item of arr) { //item是元素的拷贝，无法直接修改item来修改元素值 console.log(item); } // 1 2 3 4 5 |
**for in**用于遍历无序的对象的属性，而不是有序的数组
|---------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 | var obj = { name: 'chuckle', age: '19' }; for(let key in obj) { //key是属性名，obj[key]可以修改属性值 console.log(`属性名：${key}，值：${obj[key]}`); } //属性名：name，值：chuckle //属性名：age，值：19 |
map()，遍历数组，并对数组中的每一项进行加工。
对数组中每一项运行回调函数，返回每一项加工后的结果，组成的新数组，不改变原数组。 语法
|-----------------|---------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | var newArr = arr.map((item, index, array) => { // item是元素内容，index是该元素索引，array是该数组 return newItem;//返回该项加工后的结果 }); |
|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var arr = [1, 2, 3, 4, 5]; var newArr = arr.map((item, index, array) => { return item += 1;//返回每一项加一 }); console.log(JSON.stringify(newArr));//[2,3,4,5,6] |
**常用案例：**将 A 数组(通常存对象)中某个属性的值，存储到 B 数组中。
|------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var arr = [ { name: '张三', age: 19 }, { name: '李四', age: 18 }, { name: '王五', age: 20 }, ]; //把属性name都提取出来 var newArr = arr.map((item) => item.name);//返回每个item的name属性 console.log(JSON.stringify(newArr));//["张三","李四","王五"] //重新组一个对象，改键名 newArr = arr.map((item) => ({ myName: item.name, myAge: item.age, }));//把属性拿出来重新组一个对象 console.log(JSON.stringify(newArr)); //[{"myName":"张三","myAge":19},{"myName":"李四","myAge":18},{"myName":"王五","myAge":20}] |
filter()： 数组中的每一项运行回调函数，回调函数返回结果是true 的项（符合条件的项），组成新数组返回，不改变原数组
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var arr = [7, 2, 3, 6, 7, 4]; var newArr = arr.filter(item => { return item > 4;//item > 4回调函数返回true，filter()就把该元素放进新数组里 }); console.log(JSON.stringify(newArr));//[7,6,7] |
|------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 | var arr = [ { name: '张三', age: 19 }, { name: '李四', age: 18 }, { name: '王五', age: 20 }, ]; //筛选出年龄大于18的同学 var newArr = arr.filter((item) => item.age > 18); console.log(JSON.stringify(newArr));//[{"name":"张三","age":19},{"name":"王五","age":20}] //再用map()筛选出名字 var resultArr = newArr.map((item) => item.name); console.log(JSON.stringify(resultArr));//["张三","王五"] |
**reduce()：**参数是接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值返回
reduce() 对于空数组不会执行回调函数 语法
|-----------|----------------------------------------------------------------------------------|
| 1 | var result = arr.reduce((prev, item, index, array) => {}, initialValue); |
回调函数参数解释：
- prev ：必填，上一次 调用回调函数时的返回值
- item ：必填，当前正在处理的数组元素
- index ：可选，当前正在处理的数组元素下标
- array ：可选，该数组
- initialValue ：可选，作为第一次调用回调函数时传给prev的值，最好手动初始化为0
举例 1、数组求和：
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | var arr = [1, 2, 3, 4, 5, 6]; var result = arr.reduce((prev, item) => { return prev + item;// 累计求和 }); console.log(`总和:${result}`); // 总和:21 |
举例 2、统计某个元素出现的次数：
|---------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | var arr = [5, 2, 6, 4, 3, 6]; //统计函数，传入数组arr和要统计的value，返回value出现的次数 function arrCount(arr, value){ return arr.reduce((prev, item)=>{ //判断当前项item是否等于value，是则让prev计数加一并返回 return prev += item === value ? 1 : 0; }, 0); } console.log(arrCount(arr, 6)); // 2 console.log(arrCount(arr, 7)); // 0 |
举例 3、找到最大的元素：
|---------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | var arr = [5, 2, 6, 7, 3, 6]; //传入数组arr,返回最大元素(首次找到)的下标 function maxValue(arr){ return arr.reduce((prev, item, index, arr) => { //prev初始值为0，默认下标0的元素最大，每一项与arr[prev]比较，大于就更新prev为当前下标index return prev = item > arr[prev] ? index : prev; }, 0) } console.log(maxValue(arr));// 3 console.log(arr[maxValue(arr)]);// 7 |
