js基础知识
数组的方法
数组的增删改
1.push()
方法的定义：
- 向数组末尾增加内容
方法的参数：
- 传递多个值
方法的返回值：
- 新增数组的length
原有数组是否发生改变：
- 是
let ary = [12,23,34];
console.log(ary.push(12,66,'erYa'))//6 方法的返回值
console.log(ary)//[12,23,34,12,66,'erYa']
//ary[ary.length] = 'xxx' //增
ary = []
2.unshift()
方法的定义：
- 向数组开头增加内容
方法的参数：
- 传递多个值
方法的返回值：
- 新增数组的length
原有数组是否发生改变：
- 是
let ary = [12,23,34];
console.log(ary.unshift(12,66,'erYa'))//6 方法的返回值
console.log(ary)//[12,66,'erYa',12,23,34]
3.pop()
方法的定义：
- 向数组末尾删除一项内容
方法的参数：
- 无
方法的返回值：
- 删除的那一项
原有数组是否发生改变：
- 是
let ary = [12,23,45];
console.log(ary.pop())//45
console.log(ary)//[12,23]
//ary.length--
//ary.length-=2
//ary.length = 0 //清空数组
4.shift()
方法的定义：
- 向数组开头删除一项内容
方法的参数：
- 无
方法的返回值：
- 删除的那一项
原有数组是否发生改变：
- 是
let ary = [12,23,45];
console.log(ary.shift())//12
console.log(ary)//[23,45]
5.splice()
方法的定义：
- 实现数组增删改
方法的参数：
- 不一定
方法的返回值：
- 一个新的数组，数组里存储的是删除的内容
原有数组是否发生改变：
- 是
//(n,m):从索引n开始，删除m个,
//(n)如果只传一个参，从索引n开始删除到末尾
//()如果不传参，什么都不干。返回空数组
//(n,m,x)如果传三个参，及三个以上的参，从索引n开始，删除m个，用x替换,可以插入无数个。
//(n,0,x)从索引n开始删除0个，把x插到索引n对应值的的前边
let ary = [12,23,45,'erYa'];
console.log(ary.splice(1,2))//[23,45]
console.log(ary)//[12,'erYa']
console.log(ary.splice(0,n))//删除数组开头的任意几项
console.log(ary.splice(ary.lengh-1,1))//删除数组的最后一项
console.log(ary.splice(ary.lengh-n,n))//删除数组的最后n项
console.log(ary.splice(0))//清空数组 [12,23,45,'erYa']
console.log(ary)//[]
// (n,m):从索引n开始，删除m个
// (n)：如果只传一个参数，那就是从索引n开始,删除到末尾
let ary =[12,23,45,'erYa'];
// console.log(ary.splice(0,1)) // [12] // 删除数组的开头一项
// console.log(ary.splice(0)); // 清空数组，从索引0开始，删除到末尾
// console.log(ary.splice()) // [] 啥也不干
// console.log(ary.splice(3,0)); // [] 啥也不干
// console.log(ary); // [12,'erYa']
// (n,m,x):从索引n开始，删除m个，用x替换
// (n,0,x):从索引n开始，删除0个，把x放到索引n对应的值的前面
// console.log(ary.splice(1,2,'erGou', 'gouDan')); // [23, 45]
// console.log(ary.splice(0,0,'daGou')) // [] 项数组开头 增加一项
// console.log(ary.splice(ary.length,0,'huangRong')) // 向数组末尾增加一项
// console.log(ary.splice(-1,2))
console.log(ary) // [12, "erGou", "gouDan", "erYa"]
数组增删方法
删除数组最后一项
ary.length--
pop
splice(ary.length-1)
删除数组第一项
shift
splice(0,1)
数组开头增加
unshift
splice(0,0,x)
[x,...ary]
数组末尾增加
push
ary[ary.length]='xxx'
splice(ary.length,0,x)
数组的截取、拼接
1.截取slice()
方法的定义：
- 实现数组的截取（查询）
方法的参数：
- 不一定
方法的返回值：
- 一个新的数组，数组里存储的是截取的内容
原有数组是否发生改变：
- 否
(n,m):从索引n开始，截取到索引m（索引m不算）
let ary = ['siMao','sanMao','erYa',12,23,45]
//(n,m):从索引n开始，截取到索引m（索引m不算）
console.log(ary.slice(1,2)) // ['sanMao']
console.log(ary.slice(2,5)) // ["erYa", 12, 23]
console.log(ary.slice(0,ary.length)) // 克隆数组
console.log(ary.slice(0))// 克隆数组 从索引0开始，截取到末尾
console.log(ary)
2.拼接concat()
方法的定义：
- 实现数组的拼接
方法的参数：
- 可以是多个值
方法的返回值：
- 拼接后的新数组
原有数组是否发生改变：
- 否
let ary =[12,23,45,45];
console.log(ary.concat([12,23],[66],true)) //[12, 23, 45, 45, 12, 23, 66, true]
console.log(ary.concat()) // 克隆数组
console.log(ary)
数组的排序
1.reverse()//倒序
方法的定义：
- 实现数组的倒序
方法的参数：
- 无
方法的返回值：
- 排序后的数组
原有数组是否发生改变：
- 是
let ary = [12,23,45,67,13];
console.log(ary.reverse()); // []
console.log(ary)
2.sort()//排序
方法的定义：
- 实现数组的排序
方法的参数：
- 无，可以传一个函数
方法的返回值：
- 排序后的数组
原有数组是否发生改变：
- 是
如果没有传参，按照数组每一项的第一位的大小排列，从小到大排列
如果传一个函数
(a,b)=>{return a-b},从小到大排
(a,b)=>{return b-a},从大到小排
// 如果不传参，只能排列一位数的数组（按照左边第一位从小到大排列）
// let ary = [5,2,1,3,5];
// console.log(ary.sort())
// console.log(ary)
let ary =[29,31,114,9,20];
// console.log(ary.sort())
// 传一个函数
console.log(ary.sort( (a,b)=>{
// 如果a-b那就是从小到大排列，反之(b-a)就是从大到小排列
return a-b
} ))
检测数组中是否包含某一项
1.indexOf()
方法的定义：
- 检测数组中是否包含某一项
方法的参数：
- 一个参：检测的那一项；两个参：检测的那一项，开始检测的位置
方法的返回值：
- 如果检测到该项，就返回该项的索引，如果没有，就返回-1
原有数组是否发生改变：
- 否
找的是检测的值第一次出现的位置
(n,m):n是被检测的值，m是开始检测的位置
(n):从头开始检测
不传参 按没有找到的处理
// indexOf是找的检测的值第一次出现的位置
// (n,m):n是被检测的值，m是开始检测的位置
//(n):从头开始检测
let ary = [12,23,45,23,45,36];
console.log(ary.indexOf(23,2)) // 3
console.log(ary.indexOf(23)) // 3
console.log(ary.indexOf(89)) // -1
2.lastIndexOf()
方法的定义：
- 检测数组中是否包含某一项
方法的参数：
- 一个参：检测的那一项；两个参：检测的那一项，检测到的位置
方法的返回值：
- 如果检测到该项，就返回该项的索引，如果没有，就返回-1
原有数组是否发生改变：
- 否
找的是检测的值最后一次出现的位置
(n,m):n是被检测的值，m是检测的最后一个位置
(n):检测到末尾
不传参 按没有找到的处理
// lastIndexOf: 是找的检测的值最后一次出现的位置
// (n,m):n是被检测的值，m是检测到的位置
// (n):检测到末尾
console.log(ary.lastIndexOf(23,2)) // 1
console.log(ary.lastIndexOf(23)) // 1
3.includes()
方法的定义：
- 检测数组中是否包含某一项
方法的参数：
- 检测的值
方法的返回值：
- 如果检测到该项，就返回true，如果没有，就返回false
原有数组是否发生改变：
- 否
let ary =[12,23,45,66];
console.log(ary.includes(12))
console.log(ary.includes(122))
数组转字符串
join()
方法的定义：
- 把数组以特定的分隔符 转换为字符串
方法的参数：
- 字符串格式的分隔符
方法的返回值：
- 字符串
原有数组是否发生改变：
- 否
如果不传参，分隔符就是逗号
let ary = [12,23,45,67];
console.log(ary.join('%'))//'12%23%45%67'
console.log(ary)//[12, 23, 45, 67]
遍历数组
1.forEach()
方法的定义：
- 遍历数组
方法的参数：
- 函数
方法的返回值：
- undefined
原有数组是否发生改变：
- 否
如果不传参，分隔符就是逗号
ary.forEach((item,index)=>{
item为数组的每一项
index为每一项的索引
数组有多少项就循环多少次
})
//let ary = [12,23,45,67,34];
//ary.forEach((item,index)=>{})
let ary = [12,23,34,45,56,67,78,89,NaN,true]
let fn = (...arg)=>{
let total = null;
console.log(arg);
arg.forEach((item,index)=>{
console.log(item)
if(!isNaN(Number(item))){
console.log(3)
total+=item
}
})
return total
}
console.log(fn(...ary)
let ary =[1,true,2,NaN,3];
// ary.forEach((item, index)=>{
// // item是数组的每一项
// // index是每一项的索引
// // 有多少项就循环多少轮
// console.log(item, index)
// })
// 任意数求和
let fn = (...arg)=>{
let total = null;
arg.forEach((item,index)=>{
// item是数组的每一项
// index是数组的每一项的索引
// 数组有多少项就会循环多少轮
if(!isNaN(Number(item))){
total+=item
}
})
return total
}
console.log(fn(1,true,2,NaN,3))
)
2.map()
方法的定义：
- 遍历数组
方法的参数：
- 函数
方法的返回值：
- 改变后的新数组
原有数组是否发生改变：
- 否
// ``:反引号（模板字符串）${}里可以识别变量
// let ary = [1,2,3,4,5]
// 修改数组的值
// let num = ary.map((item, index)=>{
// item是数组的每一项
// // index是每一项的索引
// 数组有多少项就循环多少次
// return `我是第${item}个li`
// })
// console.log(num)
// console.log(ary)
let box = document.getElementById('box');
// 获取ul元素
let ary = [1, 2, 3, 4, 5];
// 遍历数组，把数组处理成我们想要的标签结构
let newAry = ary.map(item => {
// return `<li style="background:black" class="box">我是第${item}个li</li>`
// 模板字符串，${}里可以识别变量
return '<li class="box">我是第' + item + '个li</li>';
// 字符串拼接
})
console.log(newAry);
// ["<li class="box">我是第1个li</li>", "<li class="box">我是第2个li</li>", "<li class="box">我是第3个li</li>", "<li class="box">我是第4个li</li>", "<li class="box">我是第5个li</li>"]
let str = newAry.join('');
console.log(str);
// <li class="box">我是第1个li</li><li class="box">我是第2个li</li><li class="box">我是第3个li</li><li class="box">我是第4个li</li><li class="box">我是第5个li</li>
box.innerHTML = str;
// 把这些字符串插入到ul元素当中
字符串的方法
字符串的所有方法都不改变原字符串
返回值都是你处理之后的字符串
// 字符串的方法
// let str = 'asdfgh';
// 字符串有length代表字符串的长度
// str[0] // 'a'
// str[str.length-1]
// console.log(str)
字符串的获取
1.charAt()
含义
- 通过索引获取对应的字符串
- charAt(n):通过索引或对应的字符串
- 字符串的所有方法都不改变原字符串
- 返回值都是你处理之后的字符串
字符串的获取
// 1、charAt(n):通过索引获取对应的字符串
// let str = 'absdfgh';
// console.log(str.charAt(0)) // 'a'
// console.log(str[0])
// console.log(str.charAt(100))// ''
// console.log(str[100]) // undefined
2.charCodeAt()
含义
- 通过索引或对应的ASCII码（unicode），获取对应的字符串
charCodeAt():通过索引获取对应的ASCLL码（unicode）
let str = 'absdfgh';
String.fromCharCode(98):把ASCLL转换为对应的字符
console.log(str.charCodeAt(1))
字符串的截取
1.substr()
substr():从0开始截取到末尾
substr(0):从0开始截取到末尾
substr(n,m):从索引n开始截取m个
let str = 'absdfgh';
//substr(n,m)：从索引n开始，截取m个
console.log(str.substr(1,3)) //'bsd'
console.log(str.substr(0)) // 克隆 截取到末尾
console.log(str.substr()) // 克隆 截取到末尾
2.substring()
substring(n,m):从索引n开始截取到索引m，不包括索引m
substring(0):从0开始截取到末尾
substring():从0开始截取到末尾
//substring(n,m):从索引n开始，截取到索引m（不包括m对应的那一项）
let str = 'absdfgh';
console.log(str.substring(1,3)) // 'bs'
console.log(str.substring(0)) // 克隆 截取到末尾
console.log(str.substring()) // 克隆 截取到末尾
3.slice()
支持负数，遇到负的参数时，拿参数加length，获取对应索引值
slice(n,m):从索引n开始截取到索引m，不包括索引m
slice(0):从0开始截取到末尾
slice():从0开始截取到末尾
//slice(n,m)从索引n开始，截取到索引m（不包括m对应的那一项）[支持负数:把参数加上length]
let str = 'absdfgh';
console.log(str.slice(-5,-1)) // 'sdfg'
字符串转数组
split()
含义
把字符串以特定的分隔符转数组
//split():把字符串以特定的分隔符转数组
let str = 'as|da|sd|asd'
console.log(str.split('|')) //["as", "da", "sd", "asd"]
console.log(str.split('')) //["a", "s", "|", "d", "a", "|", "s", "d", "|", "a", "s", "d"]
let str = 'sasasasas';
console.log(str.split('a').join('')) // ["s", "s", "s", "s", "s"] => 'sssss'
字符串中的替换
replace()
replace(n,m):把字符串中的n替换为m(只替换第一个)
replace(n,m):把字符串中的n替换为m(只替换第一个)
// let str = 'asdsfsgh';
// console.log(str.replace('s', '$').replace('s', '$'))
// console.log(str.replace(/s/g, '$')) // 全部替换
// console.log(str.replace('z','x')) //如果替换不成功，返回原字符串
检测字符串中是否包含某一项
1.indexOf()
方法的定义：
- 检测字符串中是否包含某一项
方法的参数：
- 一个参：检测的那一项；两个参：检测的那一项，开始检测的位置
方法的返回值：
- 如果检测到该项，就返回该项的索引，如果没有，就返回-1
原有字符串是否发生改变：
- 否
找的是检测的值第一次出现的位置
(n,m):n是被检测的值，m是开始检测的位置
(n):从头开始检测
不传参 按没有找到的处理
2.lastIndexOf()
方法的定义：
- 检测字符串中是否包含某一项
方法的参数：
- 一个参：检测的那一项；两个参：检测的那一项，检测到的位置
方法的返回值：
- 如果检测到该项，就返回该项的索引，如果没有，就返回-1
原有字符串是否发生改变：
- 否
找的是检测的值最后一次出现的位置
(n,m):n是被检测的值，m是检测的最后一个位置
(n):从头开始检测
不传参 按没有找到的处理 字符串大小写转化
1.toUpperCase()
转大写
2.toLowerCase()
转小写
字符串去空格
1.trim()
去空格
2.trimLeft()
去左空格
3.trimRight()
去右空格
字符串实例：
处理字符串格式的时间
// 把'2019-1-2 17:46' 改为 '2019年11月12日 17分46秒'
/* 这是不足十，补零的方法
// function addZero(val){
// if(val.length === 1){
// return '0'+ val
// }
// else {
// return val
// }
// }
*/
let addZero = val => val.length === 1 ? '0' + val : val;
let str = '2019-1-2 17:46' // '2019年11月12日 17分46秒'
// str = str.replace('-', '年').replace('-', '月').replace(' ', '日 ').replace(':',
'时') + '分'
// console.log(str)// 2019年11月12日 17时46分
let y = str.indexOf('-');
let m = str.lastIndexOf('-');
let d = str.indexOf(' ');
let year = str.substring(0, y);
let month = str.substring(y + 1, m);
let day = str.substring(m + 1, d);
// console.log(year, month, day)
let res = addZero(year) + '年' + addZero(month) + '月' + addZero(day) + '日'
console.log(res)
Math数学对象
1.圆周率
Math.PI
2.取绝对值
Math.abs()
Math.abs(-1) // 1
3.向上取整
Math.ceil()
console.log(Math.ceil(3.0))
4.向下取整
Math.floor()
console.log(Math.floor(3.01))
5.取最大值
Math.max()
取一堆数里的最大值 取不上就是NaN 比较的几个值中有NaN也是NaN
console.log(Math.max(...[12, 23,34 ,56]))
console.log(Math.max(true, false, null))
console.log(Math.max(true, false, null,NaN))
6.取最小值
Math.min()
取一堆数里的最小值 取不上就是NaN 比较的几个值中有NaN也是NaN
console.log(Math.min(...[12, 23,34 ,56]))
7.四舍五入
Math.round()
console.log(Math.round(3.5))
8.开平方
Math.sqrt()
console.log(Math.sqrt(9))//3
console.log(Math.round(Math.sqrt(8)))//3
9.取幂
Math.pow()
取幂有两个参，第一个参为要取幂的数据，第二个参为取几次幂
console.log(Math.pow(2, 3))
console.log(Math.pow(2,10)) // 1024
10.取随机数 0~1之间
Math.random()
取n到m之间的随机整数，包括n跟m
Math.round(Math.random()*(m-n)+n)
console.log(Math.round(Math.random()))
//取n到m之间的随机整数（包括n和m）
Math.round(Math.random()*(m-n)+n)
//取3到5的随机整数，（包括3和5）
console.log(Math.round(Math.random()*(2)+3))
// - 1、PI：3.1415926 获取圆周率周派
// - 2、abs():给一个数取绝对值
// - 3、ceil(): 向上取整
// - 4、floor(): 向下取整
// - 5、round(): 四舍五入
// - 6、max(): 一组数的最大值
// - 7、min(): 一组数的最小值
// - 8、sqrt(): 开平方
// - 9、pow(n,m): 求一个数的多少次幂(n为幂的值，m为幂的次方)
// + 1024b=>1kb
// 1024kb=>1mb
// 1024mb=>1Gb
// 1024Gb=>1Tb
// - 10、random: 获取一个随机数
Date的实例
Date的用法
Date 是一个函数（类），我们使用的是他new出来的实例对象，有很多属性方法供我们使用。
let time = new Date();//获取当前时间 获取的是电脑的本地时间，不能用作比较重要的计时，或者获取时间等操作
let year = time.getFullYear();//获取年
let month = time.getMonth()//获取月 0~11，所以要 +1
let date = time.getDate()//获取日
let day = time.getDay()//获取星期 0--周日
let hour = time.getHours()//获取时
let min = time.getMinutes()//获取分
let sec = time.getSeconds()//获取秒
let mill = time.getMilliseconds()//获取秒
let sss = time.getTime();//时间戳，它是现在距离1970年1月1日00时00分00秒的时间差（毫秒）
// console.log(time,year,month,date,day,hour,min,sec,mill)
// let cur = year + '年' + month+'月'+date+'日'+date+'时'+min+'分'+sec+'秒'
// console.log(cur)
// console.log(sss)
let time = new Date('2018-11-13 13:23:56')
console.log(time.getFullYear())
console.log(time)
