21数组.html
/* 早期的版本：
1// push()
功能：在数组末尾添加一个或多个元素
参数：添加的元素序列
返回值：返回的是原数组增加元素后的长度
特点 会改变原数组
2// unshift() 用法基本与push()一样，只是在数组前面添加元素 %unshift:取消移动%
3// pop()
功能：在数组末尾删除一个元素
参数：无参数
返回值：返回的是删除的那个元素
特点 会改变原数组
4// shift() 用法基本与pop()一样，只是在数组前面删除元素
5// splice() 删除 添加 替换
功能：在数组末尾删除一个元素
参数：第一个参数表示从什么位置开始 第二个参数表示删除的元素个数 当第二个参数为0 可以表示添加元素
从第三个参数开始 都是添加的元素
返回值：返回的是删除的元素组成的数组
特点 会改变原数组
6// reverse()
功能：以数组元素进行翻转
参数：无参数
返回值：返回的是翻转后的数组
特点 会改变原数组 "1,3,5"=>'5,3,1'
7// slice()
功能：对数组进行截取
参数：第一个参数表示从什么位置开始 第二个参数表示到什么位置结束(不包含)
返回值：返回的是截取的元素组成的新数组
特点 不会改变原数组
8// concat()
功能：合并数组
参数：放需要合并的数组或值
返回值：返回的是合并后的新数组
特点 不会改变原数组
9// toString() 把数组转成字符串
10// indexOf() 10-1 lastIndexOf() 10-2 findIndex(function(item,index,arr){})
*/
var arr = [1, 3, 5, 3];
var res = arr.findIndex(function (item, index, arr) {
return item === 3;
});
console.log(arr); // 打印结果：[1, 3, 5, 3]
console.log(res); // 打印结果：1
/*
功能：在数组中查找元素
参数：需要查找的元素
返回值：数字，-1代表没有找到，或者找到的序号
特点 不会改变原数组, 找到第一个满足条件为止
11// Join()
功能：以指定的符号连接数组的每个元素
参数：指定的符号或者为空(不传参数 默认以逗号)
返回值：返回的是连接后的字符串
特点 不会改变原数组
# es6的版本：
Vue是声明式编程，for是命令式。
<!-- 12.forEach 13.filter 14.map 15.some 16.every 17.reduce 18.Array.isArray() 19.sort()
instanceof 和 isArray
当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.
-->
//sort()
功能：对数组进行排序
参数：接受一个函数,可选
返回值：拍好序的新数组
特点 会改变原数组
*/
var arr = [1, 3, 5, 12];
arr.sort(); // arr打印结果：[1, 12, 3, 5]
var res = arr.sort(function (a, b) {
return b - a; // arr打印结果：[12, 5, 3, 1]
return a - b; // arr打印结果：[1, 3, 5, 12]
});
/*
arr.sort(function (a, b) {
if (a > b) {
return 1;
} else if (a < b) {
return -1;
}
return 0;
});
// forEach()
功能：对数组进行循环 和for作用类似
参数：接受一个函数
返回值：undefined
特点 不会改变原数组
*/
var arr = [1,3];
var res = arr.forEach(function(item,index,arr){
// item代表每一次循环的元素值 index代表每一次循环的元素下标 arr代表当前数组
console.log(item);
console.log(index);
console.log(arr);
});
console.log("自己实现forEach-------------------");
Array.prototype.forEach01 = function(ary,fn){
for (let i = 0; i < arr.length; i++) {
fn(arr[i],i,arr);
}
}
arr.forEach01(arr,function(item,index,arr){
console.log(item);
console.log(index);
console.log(arr);
});
/*
// filter()
功能：在数组中过滤元素
参数：接受一个函数
返回值：满足条件的元素组成的数组
特点 不会改变原数组
var arr = [1, 3, 5, 7];
var res = arr.filter(function (item, index, arr) {
return item % 3 === 0;
});
console.log(res); // 打印结果：[3]
// some() 似同filter()
功能：在数组中找有没有满足条件的元素
参数：接受一个函数
返回值：布尔值 找到满足条件返回true 否则返回false
特点 不会改变原数组 只要找到第一个满足条件的元素终止循环 则返回true
// every()
功能：看数组中元素是否都满足条件
参数：接受一个函数
返回值：布尔值 只要找到一个不满足返回false，全部满足返回true
特点 不会改变原数组 只要找到第一个不满足条件的元素终止循环 则返回false
// map()
功能：对原数组进行映射，新数组的元素值是每次循环函数的返回值决定
参数：接受一个函数
返回值：与原数组对应的新数组
特点 不会改变原数组
*/
var arr = [1, 3, 5, 7];
var res = arr.map(function (item, index, arr) {
return item + 3 ;
});
console.log(res); // 打印结果：[4,6,8,10]
/*
// reduce() reduceRight()-> <%从右到左%>
功能：求和
参数：接受一个函数
返回值：返回currentValue->item
特点 不会改变原数组
应用一：求数组元素和
*/
var sum = arr.reduce(function (pre, item, index, arr) {
return pre + item;
},0); //0可省，代表index从0开始
//应用二：数组去重 [1,3,5,3]
//判断val是否存在于数组arr当中
function has1(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === val) {
return true;
}
}
return false;
}
//
function fn(arr){
var newArr = [];
arr.forEach(function(item,index,arr){
//判断新数组是否有，item
if(!has1(newArr,item)){
newArr.push(item);
}
});
return newArr;
}
console.log(fn([10, 2, 3, 4, 2, 2, 11,"7","o","o","7","7",null,null]));
// 打印结果：[10, 2, 3, 4, 11, "7", "o", null]
21字符串.html
var str = "github1:cnamep1"; // 底层： new String(str)
//var str2 = new String('hello');
/*
charAt()
1.功能 求指定位置的字符
2.参数 表示位置的整数 从0开始
3.返回值 对应位置的字符
4.特点
indexOf() 用法基本与数组的indexOf类似
lastIndexOf()
toUpperCase()
toLowerCase()
*/
console.log(str.charAt(0)); //g
console.log(str.charAt(str.length - 1)); //1
console.log(str.indexOf('1')); // 6
console.log(str.indexOf('0')); // -1
console.log(str.lastIndexOf('1')); //14
/*
substr()
substring()
slice()
*/
console.log(str.substr(5)); //b1:cnamep1
console.log(str.substr(5,2)); //b1
console.log(str.substring(5,2)); //thu
console.log(str.substring(2,5)); //thu
console.log(str.slice(5,2)); //数字大的不能放第一个参数
console.log(str.slice(2,5)); //thu
console.log(str); //github1:cnamep1
/*
charCodeAt()
String.fromCharCode(122)
*/
var str1 = "abc012ABC";
console.log(str1.charCodeAt(0)); // 97 ascii码
console.log(str1.charCodeAt(3)); // a 97 z (97+25=122) A 65 '0'-> 48
console.log(String.fromCharCode(122)); // 'z'
22Math对象.html
var a = [];
console.log(Array.isArray(a)); //true
console.log(Math);
console.log(Math.PI);
console.log(Math.abs(-1));
// ceil() 向上取整 floor() 向下取整
console.log(Math.ceil(10.9)); // 11
console.log(Math.ceil(10.01)); // 11
console.log(Math.ceil(-10.9)); // -10
console.log(Math.floor(10.9)); // 10
console.log(Math.floor(10.05)); // 10
console.log(Math.floor(-10.9)); // -11
// round() 四舍五入 往数大的去靠
console.log(Math.round(0.5)); //1
console.log(Math.round(-4.5)); //-4
console.log(Math.round(-4.6)); //-5
console.log(Math.round(4.5)); //5
// max,min
console.log(Math.max(10, 23, -4));
// pow(a,b) a的b次方
console.log(Math.pow(2, 4));
// random() [0,1)
for (var i = 0; i < 100; i++) {
console.log(Math.random());
}
23日期对象.html
//23日期对象
//1.产生一个日期对象
var date = new Date();
console.log(date); // Thu Jul 30 2020 07:05:04 GMT+0800 (中国标准时间)
console.log(date.toLocaleString()); // 2020/7/30 上午7:05:04
//2.常用日期方法
var year = date.getFullYear();
var month = date.getMonth(); // 0-11月
var day = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
console.log(year + "-" + (month + 1) + "-" + day +
" " + hour + ":" + minutes + ":" + seconds);
//2020-7-30 7:26:47
//星期几,0-6,搞个数组
var weekday = date.getDay();
var array = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
console.log(array[weekday]); // 星期四
- 23-1. dateToString()同date.toLocaleString()：
var date = new Date();
console.log(date.toLocaleString()); // 2020/7/30 上午8:08:59
function toTwo(h) {
return h < 10 ? "0" + h : h;
}
function dateToString(date) {
var year = date.getFullYear();
var month = date.getMonth();
month = toTwo(month + 1);
var day = toTwo(date.getDate());
var hour = toTwo(date.getHours());
var minutes = toTwo(date.getMinutes());
var seconds = toTwo(date.getSeconds());
var weekday = date.getDay();
var array = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
console.log(year + "-" + month + "-" + day +
" " + hour + ":" + minutes + ":" + seconds);
console.log(array[weekday]);
}
dateToString(date);
/*
2020-07-30 08:08:59
星期四
*/
- 23-2. StringToDate：
var str = "2022-11-11";
// 2022/11/11或2022-11-11
var d = new Date(str);
console.log(d.getMonth()); // 10
console.log(Date.parse(str));
/*
1-6681-2480-0000 一千多亿
1970年1月1日到该时间经历的毫秒数
*/
var d2 = new Date(Date.parse(str));
console.log(d2.getMonth()); //10
- 23-2. 加天数：
dateObj.setDate(dayValue):
例如当前为4月，如果setDate(-2),则为3月29日
var d = new Date();
console.log(d.toLocaleDateString());
// 2020/7/30
d.setDate(d.getDate() + 5);
/*
加5天,
setMonth(),setHours()等同理
*/
console.log(d.getMonth());// 7
console.log(d.getDate());// 4
- 23-2. 时间差：
//倒计时，时间差，双十一。
/*
显式调用： Date.parse(dateString)
隐式调用: new Date(dateString).getTime()
*/
var endTime = new Date("2020-10-1");
var now = new Date();
console.log(endTime - now);// 5406624675
console.log(endTime.getTime() - now.getTime());
// 5406624675
var chaDate = new Date(endTime.getTime() - now.getTime());
console.log(chaDate.toLocaleTimeString());// 下午9:50:24
1.html
/*
Dom元素的创建，删除，查找，修改，复制
Dom操作，查找元素，设置元素的样式，增加元素
事件
是系统预先定义好的行为，单击，双击
事件三要素：1.事件源 2.事件处理 3.事件
*/
let i = 0;
setInterval(()=>{
console.log(i++);
},1000);
2事件.html
3元素的显示与隐藏.html
4鼠标移入与移出.html
5表单相关事件.html
6获取元素n种方式.html
let a = 1;
console.log(a);
7类样式操作.html
8操作元素内容.html
9表单属性.html
10自定义属性.html
11tab.html
12节点层级.html
13元素创建与添加.html
14微博发布内容.html
15元素克隆.html
16创建元素总结.html
17事件机制.html
18事件流.html
19事件委托.html