js的基础-CSDN博客

本文链接：https://blog.csdn.net/axzzy/article/details/105972726

!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
		       *