js
!js 常见
//time问题
new Date() //当前时间
new Date(year, month-1, day, hours, minutes, seconds, milliseconds) //设置的时间传递的参数
//2020 1月1号是周几
new Date(2021,0,1)==>>"2021/1/1"
let week = new Date(2021,0,1).getDay() ==>>5
//使用new Date(year,month,0)的方式,可以获取该月的最后一天
var lastDay= new Date(2020,5,0).getDate() //31
new Date(milliseconds) //正为1970年 1 月 1 日加上100 000 000 000{传的毫秒数}毫秒
new Date(date string) //Wed Mar 25 2015 08:00:00 GMT+0800 (中国标准时间) 直接toLocaleDateString 或则toDateString就可以传递
var date1 = new Date("2017,06,06"); //正确
var date2 = new Date(“2017/06/06”) //正确
var date3 = new Date("2009-1-1"); //错误
// 获取Date总的毫秒数（时间搓） 不是当前时间的毫秒数 而是距离1970年1月1日过了多少毫秒树
// 1.通过 valueOf() getTime()
var date = new Date()
console.log(date.valueOf());
console.log(date.getTime());
// 2.简单的写法（最常用的写法）
var date1 = +new Date()
console.log(date1);
// 3.H5新增的 获得总的毫秒数
console.log(Date.now());
//获取日期 定时间的问题
new Date(). getDate() 以数值返回天（1-31）
getDay() 以数值获取周名（0-6）
getFullYear() 获取四位的年（yyyy）
getHours() 获取小时（0-23）
getMilliseconds() 获取毫秒（0-999）
getMinutes() 获取分（0-59）
getMonth() 获取月（0-11）//实际月份要加一
getSeconds() 获取秒（0-59）
getTime() 获取时间（从 1970 年 1 月 1 日至今）
//设置日期 可用于测试
new Date(). setDate() 以数值（1-31）设置日
setFullYear() 设置年（可选月和日）
setHours() 设置小时（0-23）
setMilliseconds() 设置毫秒（0-999）
setMinutes() 设置分（0-59）
setMonth() 设置月（0-11）
setSeconds() 设置秒（0-59）
setTime() 设置时间（从 1970 年 1 月 1 日至今的毫秒数）
//倒数前几天/月/年？
var nowDate = new Date();
//i为天数 1天的豪秒数：24*3600*1000
var oneweekdate = new Date(nowDate-i*24*3600*1000);//距离现在前多少天的毫秒数
var oneweekyear = oneweekdate.getFullYear();
var oneweekmonth = oneweekdate.getMonth()+1;
var oneweekday = oneweekdate.getDate();
//数字问题
Math.random()
Math.min() 和 Math.max()
Math.floor(x) 的返回值是 x 下舍入最接近的整数 Math.floor(2.7); // 返回 2
Math.ceil() 返回值是 x 上舍入最接近的整数 Math.ceil(6.4); // 返回 7
Math.round() 四舍五入为最接近的整数 Math.round(6.8); // 返回 7
Math.sqrt()返回 x 的平方根 Math.sqrt(64); // 返回 8
Math.pow(x,y)
es6 取幂运算符（**）将第一个操作数提升到第二个操作数的幂 var x = 5; var z = x ** 2;
js的数组 字符串处理方法
// * 数组
push(item) // 末尾添加 改变了原数组，返回新数组的长度
pop() // 删除末尾 改变了原数组，返回删除的元素
shift() // 删除开头 改变了原数组，返回删除的元素
unshift() // 开头添加 改变了原数组，返回新数组的长度
sort() // 排序 改变了原数组，必须使用一个排序函数（可以是对象里的属性排序）
//对象某个属性排序
function sort(a,b){
return a.index-b.index
}
arr.sort(sort) //不需传参数
//如果需要安传递的属性排序
function sortName(porperty){
return function sort(a,b){
return a.porperty-b.porperty
}
}
arr.sort(sortName(sum))
reverse() // 反转 改变了原数组
不影响原数组 slice(start, end) // 截断拷贝, 接收起始和结束位置两参数并返回相应的数组，
splice(index, num) // 切片，取出从index位置开始的num个值，原数组被截取
splice(index, 0, sth) // 插入sth
splice(index, 1, sth) // 替换为sth
无返回值 ▲forEach(item, index, array){} // 对每一项执行某些操作
var a=new Array(1,2,3,4,5,6);
a.forEach(function(e,i,array){
array[i]=e+1;//array：当前数组，i：当前索引，e：当前元素
});
console.log(a); //[2, 3, 4, 5, 6, 7]
for in
for of //循环只能遍历索引数组 //无法遍历关联数组
//无法访问 对象的value 只能以Obj.key的形式访问value
//详情见下 对象理解
//用于 数组去重 求交集并集 new Set（）一般用于 数组去重 求交集并集
new Set() //接受参数为数组 返回一个不重复的新数组
let newArr= new Set([1,2,5,1,3,2])
newArr=[1,2,5,3]
// 还可以用于数组的合并求交集 添加元素add() 删除元素delete() 参数智能为一个值
newArr.add(x) [1,2,5,x]
arr1=new Set([... [1,5,3],...[2,5,4]]) Set(5) {1, 5, 3, 2, 4}
/// 转为数组[...new Set([... [1,5,3],...[2,5,4]])] ==>>>[1, 5, 3, 2, 4]
arr2=new Set([1,5,3].filter(x=>x==[2,5,4].has(x))) Set(1) {5}
不影响原数组▲ filter(item, index, array) // 返回满足条件(true)的项组成的数组
有返回值 ▲ map(item, index, array) /// 返回对每一项执行某些操作组成的数组
find(item, index, array) //方法返回通过测试（函数内判断）的数组的第一个元素的值 找不到返回unidefined //IE 11 及更早版本不支持 find() 方法。
findindex(item, index, array)//直到找到第一个返回为true的成员的索引值，如果所有的成员都不符合返回-1
every(item, index, array) // 如果该函数对每一项都返回true，则返回true
some(item, index, array) // 如果该函数对某一项返回true，则返回true
数组迭代 reduce() / 从头到尾逐个遍历，迭代数组中的所有项
var a=new Array(1,2,3,4,5,6);
console.log(a.reduce(function(v1,v2,index,array){
return v1+v2;
})); // 21
console.log(a.reduceRight(function(v1,v2,index,array){
return v1-v2;
} ,100)); // 79 value，一个初始值，可选 ：100
// 字符串
indexOf(值，start) //返回最开始的下标值，找不到返回-1
lastIndexOf(值)
▲▲▲ es6 includes(sth, index); // 检测数组中是否含有sth，index代表开始查找的位置，返回布尔值
toUpperCase() //英文转大写
toLowerCase() //英文转小写
charAt(下标值)
slice(start,end) // [start,end) 截取的长度为end-start，负数代表倒数
substr(start,count)
subString(strat,end) //mn不分大小；负转正
split() // 按照指定的字符将字符串分割为数组
es6 startsWith()//判断字符串以什么开头
es6 endsWith()//判断字符串以什么/结尾
eg: //let str1 = "file:///C:/Users/iTAze/Desktop/1.html";
// console.log(str1.startsWith("https://"))// false;
repeat(cont) //生成重复字符串
eg: const eightBits = '1'.repeat(8)
console.log(eightBits) // "11111111"
padStart(cont,string)|padEnd(count,string)
eg: // 在开头添加 "0"，直到字符串的长度为 8。
const eightBits = '001'.padStart(8, '0')
console.log(eightBits) // "00000001"
//在末尾添加“ *”，直到字符串的长度为5。
const anonymizedCode = "34".padEnd(5, "*")
console.log(anonymizedCode) // "34***"
test()
replace(value1,value2) //value1是查找的字符串，可以用正 则表达式/ ...../ g(全局查找) i(忽略大小写) value2是替代的字符串
match(value) //查找匹配的字符串 如果没有g(查找到了第一个就返回查找结果) 有就 返回数组
eg: str.match(/^(\d{4})-(\d{2})-(\d{2})/g) ;
search(value) //查找匹配字符 ，用于全局匹配的 “g” 然而并没有什么卵用，原因是search()只返回第一个匹配元素的起始位置。始终返回的是“第一个”匹配项的“索引”
*
* 区别：match返回的是数组
search返回的是一个number
match返回的是满足条件的匹配项
search返回的是满足条件的索引
match没有找到匹配项时，返回null
search没有找到匹配项时，返回-1
apply call
* func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])
*
* 改变（当前作用域）调用该方法/属性的对象
*
* 三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！
es6 默认参数 调用时可以不传
function throwIf() {
throw new Error('少传了参数');
}
function ajax(url=throwIf(), async=true, success) {//提示url 是必传项
// do something
}
ajax(); // Error: 少传了参数
/*/函数原型链 继承 作用域链
每个函数都有一个prototype属性，这个属性指向函数的原型对象
每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，
如果还查不到，就去找原型的原型，一直找到最顶层为止
从当前环境向父级一级一级查找变量的过程（作用域链）
访问实例对象的属性和方法时，先从自身的构造函数中寻找，如果没有就通过__proto__去原型（原型链）
//对象
//对象的访问 obj.name或者obj[name] 数组的也是对象
// 每个对象的属性都有value 等特性不能用.访问
//用Object.defineProperty(对象名,"属性名"，{要修改的特性})
//vue的双向数据劫持绑定（主要应用于表单中）的原理就是利用Object.defineProperty来检测数据的变化。
var tom={
id:1001,
name:"tom",
salary:12000
}
Object.defineProperty(tom,'name',{ //修改name属性的特性，值为haha,并且name属性不能修改值
value:'haha',
writable:false//以此种方式定义的属性，默认值是false。
})
tom.name="hehe"//试图修改tom的name 在严格模式下会报错 因为已经将writable改为false 非严格模式下不会改变name的值
Object.defineProperty(tom,'name',{
set(newValue){
console.log('set');
this.name = newValue //设置或修改属性时，会调用set函数，把设置的值通过参数传进去后，用一个变量或属性保存。并且当调用get，return就是返回的这个值
},
get(){
return this.name; //当读取属性时 返回return的值
}
})
//将tom对象的id属性修改为只读不能被修改值
//以下代码可以代替
Object.defineProperties(tom/*保护的对象*/,{/*保护的对象属性和他的开关*/
id:{
writable:false,//只读
configurable:false
},
name:{configurable:false},
salary:{enumerable:false/*禁止遍历*/,configurable:false/*禁止删除 禁止修改前面两个开关*/}
}
})
//单独对某个属性保护
Object.defineProperty(tom,"id",{
writable:false,//只读
configurable:false //禁止修改writable 只要修改属性都要双保险 禁止删除该属性
// 只要configurable设为false 就不可逆不能再下一次对tom的 configurable设为true
})
tom.id=1002;//试图修改tom的id 在严格模式下会报错 因为已经将writable改为false
console.log(tom.id)
//将tom的name属性设置为不能删除
Object.defineProperty(tom,"name",{
configurable:false//禁止修改writable和 禁止修改前面两个开关
})
delete tom.name//试图删除tom的name属性
//将tom的salary属性设为不能被遍历
Object.defineProperty(tom,"salsry",{
enumerable:false,//不能被遍历
configurable:false//禁止修改writable和禁止修改前面两个开关
})
!jsDom
e.target 是你当前点击的元素
e.currentTarget 是你绑定事件的元素
#获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
#获得点击元素的第一个子元素
e.currentTarget.firstElementChild
# 获得点击元素的下一个元素
e.currentTarget.nextElementSibling
# 获得点击元素中id为string的元素
e.currentTarget.getElementById("string")
# 获得点击元素的string属性
e.currentTarget.getAttributeNode('string')
# 获得点击元素的父级元素
e.currentTarget.parentElement
# 获得点击元素的前一个元素的第一个子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML
* style.cssText批量修改样式
* /**修改当前box-shadow */
* 这样会有一个问题，会把原有的cssText清掉，比如原来的 style 中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
为了解决这个问题，可以采用cssText累加的方法：
Element.style.cssText +="样式1；样式2"
//eg: e.currentTarget.style.cssText = "box-shadow:none;border:1px solid #999 ";
* 查找元素
* 1全局找 doucument.getElementById()/TagName()/ClassName()/Name()
* querySlector()/querySelectorAll()
* 2节点件关系找
* Element.parentNode/childNodes/firstChild/lastChild/nextSibling/previousSibling
* |
* parentElement/children/firstElementChild
*
*
*
* 修改元素
* 核心dom .setAttribute()/.getAttribute()
* HTMLdom Element.属性名/Element.属性名="新属性值"
*
* 添加元素
* Element.appendChild()/insertBefor/replaceChild
*
793
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
