1.定时器
1.1 延迟性定时器
延迟性定时器,延长多长时间后做某件事。
- 设置定时器
var time = setTimeout(function, delayTime);设定定时器时会返回定时器编号,用于后期对定时器的管理;对于延迟性定时器而言,延后执行的操作在function回调函数内。 -管理定时器clearTimeout(time);对于定时器的管理通常就是清除定时器,多个定时器同时存在于同一段代码并作用相同时会出现混乱,故定时器需要进行管理。
1.2 间隔性定时器
间隔性定时器,间隔多长时间后再次做某事。
- 设置定时器
var time = setInterval(function, delayTime);设置定时器时会返回定时器的编号,用于后期对定期的管理;间隔时间后再次执行的操作在function内。 - 管理定时器
clearInterval(time);通常对定时器的管理是清除定时器,原因和延迟性定时器相同。
1.3 案例
- QQ延迟面板
- 图片自动切换(轮播图)
- 自动选项卡
1.4 其他
在编写JS代码是应避免直接声明全局数据(变量/函数),写在自执行匿名函数内(function(){// 代码})()。
2.日期
2.1 定义日期
获取当前日期var date = new Date();
2.2 系统时间
var date = new Date(); // 获取当前系统时间
date.getFullYear(); // 获取年份
date.getMonth(); // 获取月份,注意此时比常用月份小1,故应再加1
date.getDate(); // 获取日
date.getHours(); // 获取小时
date.getMinutes(); // 获取分钟
date.getSeconds(); // 获取秒
date.getMillseconds(); // 获取毫秒
date.getDay(); // 获取周几,注意0-1分别对应周日和周一至周六
Date(); // 获取当前时间,格式为Sat Nov 30 2019 23:10:32 GMT+0800 (中国标准时间)
date.getTime(); // 获取当前时间的时间戳,距离1970年1月1日0时国际标准时间(东八区)毫秒值
Date.now(); // 也是获取毫秒值
2.3 设置日期对象
var date = new Date();
date.setDate(); // 根据本地时间为指定的日期对象设置月份中的第几天,返回时间戳
date.setMonth(); // 根据本地时间为指定日期对象设置月份
date.setFullYear(); // 根据本地时间为指定日期对象设置完整年份(四位数年份是四个数字)
date.setHours(); // 根据本地时间为指定日期对象设置小时数。
date.setMinutes(); // 根据本地时间为指定日期对象设置分钟数
date.setSeconds(); // 根据本地时间为指定日期对象设置秒数
date.setTime(); // 通过指定从 1970-1-1 00:00:00 UTC 开始经过的毫秒数来设置日期对象的时间,对于早于 1970-1-1 00:00:00 UTC的时间可使用负值
2.4 案例
- 超酷时钟
3. 数组
在JS中,数组内不一定是只包含一种数据类型的数据。
3.1 数组基本操作
var arr = new Array(); // 正式的方式创建数组
var arr = []; // 非正式的方式创建数组
arr[index]; // 获取数组中的index索引的成员
arr.length; // 获取数组的成员长度,注意数组的长度是可操作的,这是JS中唯一可操作的长度,故最便捷的清空数组元素就是使length为0;
arr.push(newarrEle...); // 从数组的末尾添加元素
arr.unshift(newArrEle...); // 从数组的开头添加元素
arr.pop(); // 从数组的末尾删除元素,每次只能删除一个成员
arr.shift(); // 从数组的头部删除元素,每次只能删除一个成员
arr.splice(startindex,length,newData1,...); // 从数组的startIndex位置替换length个数据,不传递data就是删除元素,length为0时就是添加元素。
arr.join(分隔符); // 将数组转成字符串,并用指定分隔符分隔,不指定分隔符时,默认以逗号隔开;
arr.concat(arr2); // 合并两个数组
arr.reverse(); // 将数组元素反转
arr.sort(); // 将数组元素按照字典顺序进行排序
arr.sort(function(n1,n2){return res;}); // 按照某种规则进行排序,res大于等于零不交换元素,否则交换元素。
// ECMAScript5.1新增数组方法
arr.forEach(function(item,index){}); // 遍历数组
arr.filter(function(item,index){return true/false;}); // true为返回元素,否则不返回,最终返回一个新数组。
arr.map(function(item.insex){return newValue;}); // 根据当前项返回新结果,最终返回一个新数组。
arr.every(function(item,index){return true/false;}); // 只有每一项都是true才是true,只要有一项是false就返回false。
arr.some(function(item,index){return true/false;}); // 只要有一项是true就返回true;
arr.reduce(function(n1,n2){ return res;});
// 默认情况下,第一次n1是数组第0位,n2是数组第1位,第二次n1是第一次返回的结果,n2是数组第2位,以此类推,最后返回一个结果。
3.2 案例
- 查找替换文字
- 伪3D图片切换
- 文字搬运工
- 随机打乱图片
4.字符串
在JS中字符串就是一对引号(双引号或单引号)包裹的零至多个字符。
4.1 字符串操作
str[index]; // 获取指定索引的字符
str.length(); // 获取字符串长度
str.charAt(n); // 获取字符串指定位置的字符
str.indexOf(sonStr,index); // 从字符串的index位置查找子串第一次出现的位置,找到返回子串第一次出现的位置索引,没有返回-1;若没有设置index,默认从0开始查找。
str.lastIndexOf(sonStr, index); // 与indexOf();相反从后向前查找。
str.slice(startIndex, endIndex); // 从startIndex位置开始到endIndex截取字符串,并返回;若没有设置endIndex,默认到字符串末尾;会严格按照参数顺序进行截取。
str.subStr(stratIndex, length); // 从startIndex位置开始截取length长度的字符串,并返回;
str.substring(startIndex,endIndex); // 与slice()方法相似,只是会比较startIndex和endIndex的大小。
str.split(分隔符);// 按照指定分隔符分割字符串,并返回分割后的字符串数组;
str.toUpperCase(); // 将字符串的字符转成大写
str.toLowerCase(); // 将字符串的字符转成小写
str.concat(str2); // 连接字符串
str.trim(); // 去除字符串两端的空格
str.charCodeAt(index); // 将字符串指定位置字符转换为charCode编号
String.fromCharCode(charCode); // 将charCode转换成字符
// 字符串的比较时,是先将字符转成charCode然后再比较,若前面的已经出现比较结果时,将不会再比较后面的字符。
num.tofixed(n); // 保留数字的几位小数,不够补零,多了四舍五入,返回字符串
4.2 案例
- 文字搬运工
- 文字查找替换
5. 对象
5.1 对象基本操作
var obj = new Object(); // 正式的方式创建对象
var obj = {'name':value}; // 非正式的方式创建对象
obj[name] = value ; // 为对象添加属性
obj.name = value; // 为对象添加属性
obj[name] = newValue; // 为对象修改属性值
obj.name = newValue; // 为对象修改属性值
delete obj[name]; // 删除对象属性
'name' in obj ; // 判断对象中是否含有该属性
for(var key in obj){
obj[key]; // 遍历获取对象的所有属性值
}
6. json
json本质上就是一个对象格式的字符串,与对象在形式上的区分为必须在引号内包裹着,在本质上就是json是字符串。
- json与对象的相互转换
JSON.parse(jsonStr); // 将json转成对象
JSON.stringify(obj); // 将对象转成json字符串
7. next
下一章节分享Math对象、CSS3动画和JS动画、排序算法。