1,数组的操作
定义:
var arr = [];
var arr = new Array();
调用:
arr[索引下标]
索引下标是从0开始
新增:
对不存在的索引下标进行赋值
修改:
对已经存在的索引下标进行赋值
删除:
通过length来删除
2,数组的函数
两个写入和两个删除
数组.push() 末位写入
数组.pop() 末位删除
数组.unshift() 首位写入
数组.shift() 首位删除
数组删除指定单元
数组.splice(起始索引,删除个数,之后都是替换内容)
数组的排序
数组.sort()
数组.sort(function(a,b){return a-b;}) 从小到大
数组.sort(function(a,b){return b-a;}) 东大到小
数组和字符串的转化
数组.join(间隔符号) 数组转字符串
字符串.split(间隔符号) 字符串转数组
数组的倒叙
数组.reverse()
判断是否是数组的数据
数组.indexOf(查询数据,起始索引)
如果有匹配的数据,返回值是索引下标
如果没有匹配的数据,返回值是-1
3,数组的循环遍历
for(var i = 0 ; i <= 数组.length-1 ; i++){程序}
可以通过操作i的数值,控制数组循环遍历的进程
for(var 变量 in 数组){程序}
变量中存储,数组的索引下标
数组.forEach(function(v,k){程序})
第一个参数存储数组的数据,第二个参数存储数组的索引
第二个参数可以不写
4,数组的去重
(1) , 先排序,再去重
相邻的两个单元,如果数值相同,就删除后面的,同时要防止数组坍塌的影响
var arr = [];
arr.sort(function(a,b){return a-b;})
for(var i = 0 ; i <= arr.length-1-1 ; i++){
if(arr[i] === arr[i+1]){
arr.splice(i+1 , 1);
i--;
}
}
(2) , 双层for循环
从第一个单元的数值开始,跟之后每一个单元比较数据,如果相同就删除之后单元,反之数组坍塌的影响
var arr= [];
for(var i = 0 ; i <= arr.length-1-1 ; i++){
for(var j = i+1 ; j <= arr.length-1 ; j++){
if(arr[i] === arr[j]){
arr.splice( j , 1);
j--;
}
}
}
(3) , 新建一个数组,从原始数组中获取数据,写入到新数组中
新数据组中没有的原始数组中的数据,再执行写入操作
var arr = [];
var newArr = [];
arr.forEach(function(v){
if(newArr.indexOf(v) === -1){
newArr.push(v);
}
})
(4) , 利用对象不会有重复的键名
var arr = [];
var obj = {};
var newArr = [];
arr.forEach(function(v){
obj[v] = ‘随便‘;
})
for(var key in obj){
newArr.push(key);
}
5,数组的排序算法
冒泡排序
核心概念:相邻的两个单元比较数值,如果前面的数据较大,交换存储位置
核心优化:当前单元和下一个单元比较,只需要循环到倒数第二个单元
已经比较出的最大值,不参与下一次比较
n个单元比较,只需要执行 n-1 次循环
选择排序
核心概念:默认第一个单元是最小数值单元,从下一个单元开始比较存储的数据,如果有更小值,存储这个单元你的索引
循环结束,判断索引下标是否是默认起始单元的索引下标,如果不是,交换存储的数据
核心优化:已经比较出的最大值,不参与下一次比较
n个单元比较,只需要执行 n-1 次循环
6,字符串的操作
字符串是一个包装类型,支持通过搜索引下标操作获取字符串中的独立字符
支持length属性
字符串.indexOf() 获取第一次出现的索引下标
字符串.lastIndexOf() 获取最后一次出现的索引下标
字符串.substr(起始位置,字符个数) 截取字符串
字符串.substring(起始位置,结束位置) 截取字符串
字符串.toUpperCase() 字符大写
字符串.toLowerCase() 字符小写
字符串.replace(原始内容,替换内容) 字符串内容替换
demo: 屏蔽关键词 随机验证码
7, Math内置对象
Math.random() 0-1的随机数,可以是0,不能是1
生成 a - b 的随机整数,可以是a可以是b
parseInt(Math.random()*(b+1-a)+a)
浮点数取整
Math.round() 四舍五入取整
Math.floor() 向下取整
Math.ceil() 向上取整
Math.pow() 幂运算
Math.abs() 绝对值
Math.sqrt() 平方根
Math.PI 圆周率
保留指定位数的小数
方法1 : 乘以 100
使用 Math 内置对象提供的方法,获取整数部分
除以 100
方法2 : 数值.toFixed(保留小数位数)
执行结果是字符串
只能四舍五入保留小数
8, Date()内置对象
设定获取时间对象
(1),不定义参数 获取当前时间
var d = new Date()
(2),设定字符串参数
var d = new Date(‘2020-7-6 10:19:50‘);
(3),设定数值参数 月份的数值是 0-11 对应 1-12月
var d = new Date(2020,6,6,10,19,50);
获取时间对象中的时间数据
时间对象.getFullYear() 获取4位年份
时间对象.getMonth() 获取月份 0-11 对应 1-12月
时间对象.getDate() 获取日期
时间对象.getDay() 获取星期 0-6 对应 日一二三四五六
时间对象.getHours() 获取小时
时间对象.getMinutes() 获取分钟
时间对象.getSeconds() 获取秒
时间对象.getTime() 获取时间戳 距离格林尼治时间标准时间:1970年1月1日0点0分0秒的时间差,单位是毫秒
设定时间对象中的时间数据
时间对象.setFullYear() 设定4位年份
时间对象.setMonth() 设定月份 0-11 对应 1-12月
时间对象.setDate() 设定日期
时间对象.setDay() 设定星期 0-6 对应 日一二三四五六
时间对象.setHours() 设定小时
时间对象.setMinutes() 设定分钟
时间对象.setSeconds() 设定秒
时间对象.setTime() 设定时间戳
demo,时钟,倒计时
9,DOM操作
获取标签对象的方法
不管使用什么方法,获取的都是标签对象,包括匹配标签的所有设定(所有的属性和属性值)和内容
document.getElementById(‘id属性值‘);
document.getElementsByClassName(‘class属性值‘);
document.getElementsByTagName(‘标签名称‘);
document.getElementsByName(‘标签name属性值‘);
document.querySelector(‘匹配方式‘)
document.querySelectorAll(‘匹配方式‘)
说明:
1,在标签中写id和class,别写 # 和 点
2,getElementById , getElementsByClassName 只写属性值,也是没有 # 和 点的
3,querySelector 和 querySelectorAll
写标签名称就直接写 div
写id属性值,添加 #
写class属性值,添加 点
4,推荐使用 querySelector 和 querySelectorAll 可以匹配任意HTML和CSS支持的语法
5,区别:
getElementById 匹配id属性值,结果是唯一对象
getElementsByClassName 匹配class属性值,结果是伪数组,不能forEach
getElementsByTagName 匹配标签名称,结果是伪数组,不能forEach
getElementsByName 匹配name属性值,结果是伪数组,可以forEach
querySelector 匹配第一个符合条件的标签对象,结果还是唯一对象
querySelectorAll 匹配所有符合条件的标签对象,结果是伪数组,可以forEach
属性操作
可以直接操作的
标签对象.id
标签对象.className
其他属性操作方法
标签对象.setAttribute(属性,属性值) 设定属性和属性值
标签对象.getAttribute(属性) 获取属性的属性值
