前端零基础 JS 教学 第六天 06 - 静态实例成员与 Date日期,包装类型,字符串方法...

复习:

今天我们复习大量之前学过的练习题,加上昨天前端面试,好久都没看东西,问啥忘记啥。

练习题1、 生成十六进制的随机数颜色
<!--这里我们声明一个函数,给两个形参,一般都是先从小到大-->
function getRadnom(min,max){
    <!--这里记住要使用谁就需要return 出去,-->
    return Math.floor(Math.random()*(max - min + 1) + min);
}

function getColor(){
    <!--这里我们声明一些随机数颜色-->
    var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
    <!--这时候我就要想16进制是从哪里开始的呢16是从#啊所以-->
   var str = '# '  <!-- 这里声明了一个变量是并给了井-->
   <!--在往下我们就会想到16进制的颜色是几位的啊啊是6位的对吧所以开始for 循环-->
   for(var i=0; i<6; i++){
        <!--这里我们拿到一个6位的随机数赋值给str 这里写的简便形式-->
       str+=arr[getRadnom(0,15)];
   }
    <!--这里我们把已经拿到的6位数字 return 出去 -->
    return str;
}
console.log(getColor()); <!--就会发现已经打印出了一个随机颜色-->
复制代码

对象封装方法 求最大值 最小值 对象里面写函数 就是方法 谨记

练习题1、
<!--这里我们声明一个 叫myMath 的对象-->
var myMath = {
<!--这里前面是属性 后面是值PI 冒号 值-->
    PI:3.141592657,
    <!--因为我们要求出最大值是不知道用户输入的什么所以我们用学过的arguments-->
    max:function(){
        <!--这里我们先把伪数组的第一位给max-->
        var max = argument[0];
        <!--这里使用for 循环进行遍历整个伪元素 -->
        for(var i=0; i<arguments.length;i++){
            <!--这里进行判断max是否小于伪元素传过来的内容-->
            if(max < arguments[i]){
                <!--不小于的化就进行赋值操作-->
                max = arguments[i];
            }
        }
        <!--这里使用return 出去-->
        return max;
    },
    <!--min方法是一样的我这里就不写了-->
    min:function(){
        var min = arguments[0];
        for(var i=0;i<arguments.length;i++){
            if(min > arguments[i]){
                min = arguments[i];
            }
        }
        return min;
    }
}
console.log(myMath.max(1,2,3,412,123,124123,123);
console.log(myMath.min(1,2,3,412,123,124123,123);

就是为了告诉大家方法怎么写调用就是对象名点方法,一定谨记return 和对象里面写函数是方法,
复制代码

写一个我老范的错误啊,date 与data 搞混之前一直都是data是数据 date 是日期

对象的静态成员和实例成员

 1、实例成员,需要通过new 出对象实例,然后通过对象实例成员来调用
 2、静态成员,直接通过对象成员来调用,不需要new 直接能使用的 就是静态成员 
复制代码

日期对象 Date

// Date 对象 和 Math 对象不一样,他是一个构造函数,所以我们需要实例化使用
// 创建Date 实例用来处理日期和时间,Date 对象基于1970年1月1日世界标准时间起的毫秒数
	
var date = new Date() //日期是大的范围,所有要具体指向所以用 new 


//如果date()没有参数 就返回当前的日期和时间 -时-分-秒
		var date = new Date();
		console.log(date);

// 给date 里面参数写上时间就 返回指定的日期时间 
	var date = new Date('2019-3-1'); //这是一种写法
	var date = new Date('2019/3/1'); //这两种写法都是正确的但是仅限于这两种写法 
	
	console.log(date);
复制代码

获取日期的毫秒数

         var date = new Date ();
	 // 第一种方法获取返回字符串的毫秒数 
	 console.log(date.valueOf());
	 // 第二种方法获取第毫秒数
	 console.log(date.getTime());

	 // 第三种方法使用  +  号获取毫秒数 
	 var  date1 = +new Date();
	 console.log(date1);

	 // 4、 Date.now(); 第四种方法有兼容问题HTML5版本使用 
	 console.log(Date.now());
复制代码

年月日时分秒 的打印

	var date = new Date();
	console.log(date.getFullYear());  //年
	console.log(date.getMonth() +1); //获取的是当月,但是取得是0-11之间。  月
	console.log(date.getDate());	//日 
	console.log(date.getDay());  //星期几 周日是0 周六6
	console.log(date.getHours()) ; //时
	console.log(date.getMinutes()); //分
	console.log(date.getSeconds()); //秒 
	
输出: 年月日 
    function getD(){
        <!--这里日期对象需要new 一下因为是实例成员-->
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth() + 1;  //这里记得加1 因为这里是0-11
        var d = date.getdate();
        var x = date.getDay() //今天是星期六思考一下如何输入星期日
        return y + '年' + m +'月' + d '日' + '星期'+ x
    }
    console.log(getd());
    
    
 打印出:2019年月3日2星期六   方法
 
  function getDa(){
	 	var arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
	 	<!--这里日期对象需要new 一下因为是实例成员-->
	 	var date = new Date();
	 	var y = date.getFullYear();
	 	var m = date.getMonth()+1;
	 	var d = date.getDate();
	 	// 这里使用 数组 getDay 是0-6 所有 使用星期天 这里使用数组存储 
	 	var x = arr[date.getDay()];
	 	return y + '年' +  '月'+ m + '日' + d + x;
	 }

	 console.log(getDa());
复制代码

输出时分秒 需要注意的地方 输出 22:50:10

// 输出 22:50:10 
	// 时间如果小于 10 前面我们要补 '0'
	// 日期 对象需要new 
	function getTime(){
			// 日期对象需要new 
			var date = new Date();
			var h = date.getHours(); //获得小时
			var m = date.getMinutes() // 获得分钟
			var s = date.getSeconds() // 获得秒数 

			// 这里使用 if 进行判断 出现 0 的情况 下面我们扩展一下 
			if(h < 10){
				h = '0' + h;
			}

			if(m < 10){
				m = '0' + m;
			}

			// if(s < 10){
			// 	// 这里需要是字符串
			// 	// 还有这里谨记不能使用简写 方式  
			// 	s = '0' + s;
			// }


			// 这里我们扩展一下使用三元运算符 
			/*
				h = h < 10 ? '0' + h : h;
				m = m < 10 ? '0' + m : m;
			*/

			s = s < 10 ? '0' + s : s ;


			return h + ':'  + m +':' + s 
		}
		
			// 这里写了一个定时器,后面会讲到
		setInterval(function (){
				console.log(getTime());
		},1000)
复制代码

完整版代码 年月日 时分秒 制作

	//输出 2019年 3月2日 时分秒

	function getDat(){
		var arr = ['星期日','星期1','星期2','星期3','星期4','星期5','星期6'];
		// 这里需要 使用实例成员 new 出一个日期 对象 
		var date = new Date();
		var y = date.getFullYear();
		var m = date.getMonth() + 1; //月份需要加1
		var d = date.getDate();
		var x = arr[date.getDay()]  //星期是从0-6 开始 把 方法放到数组里面
		var s = date.getHours();
		var mn = date.getMinutes();
		var mmm = date.getSeconds();
		s = s <  10 ? '0' + s : s;
		mn = mn < 10 ? '0' + mn : mn;
		mmm = mmm < 10 ? '0' + mmm : mmm;
		return y + '年' + m + '月' + d + '日' + x + ' ' + s + '时' + mn +'分' + mmm +'秒'
	}
	console.log(getDat());
    <!--这里是定时器-->
	// setInterval(function(){
	// 	console.log(getDat());
	// },1000);
复制代码

倒计时 制作

//倒计时效果,使用结束的天数,减去现在的日期就是剩下的日期

	function getTim(endTime){
		// 剩余的时间    输入的时间 减去当前的时间
		//  new Date() 输入时间显示的是输入的时间, 
		//  new Date() 不输入时间 显示当前的时间
		// 所以用输入的时间减去当前的时间 得到时间差 毫秒数 
		// 时间减去时间得到毫秒数 
		<!--这里要记住要加括号 因为 不然的话就会先算除法-->
		var countTime =(new Date(endTime) - new Date() )/ 1000; //1秒等于1千毫秒 这里我们除以1000
		//毫秒等到我们剩余的秒数 
		return countTime;
	}
	console.log(getTim('2019-3-15'));
	

倒计时 计算公式
	d = parseInt(总秒数/60/60/24) //计算天数
	h = parseInt(总秒数/60/60%24)//计算小时
	m = parseInt(总秒数/60%60) //计算分数
	s =parseInt(总秒数 % 60) //计算当前秒数 
	
完整版 倒计时代码

function getCountTime(endTime){
		// 这里进行局部变量的声明 
		var d,h,m,s;
		// 这里谨记 用输入的时间,减去现在的时间,要记住除以 /1000毫秒 
		var countTime = parseInt((new Date(endTime) - new Date())) / 1000;
		<!--这里使用parseInt 进行取整 -->
			d = parseInt(countTime / 60 / 60 / 24); //天
			h = parseInt(countTime / 60 / 60 % 24); //时
			m = parseInt(countTime / 60 % 60); //分
			s = parseInt(countTime % 60); //秒s
		return '距离3月15日还有'	+ d + '天' + h + '时' + m + '分' + s + '秒'
	}

	console.log(getCountTime('2019-3-15 16:43:00'))
复制代码

基本包装类型

var  str = 'andy';
console.log(str.length);
之前我们学 只有 对象 包含属性 和 方法

var s = new String('red');
console.log(s.length);
复制代码

解答:基本包装类型,就是把简单数据类型包装成复杂数据类型,这样基本数据类型就有了属性和方法

 var str = 'adny';
 console.log(str.length);

 // 1、var  temp = new String('adny');
 // 2、var str = temp
 // 3、temp = null;
 js会把基本数据类型包装为复杂数据类,执行过程如下,生成临时变量把简单类型包装为复杂数据类型
赋值给 我们声明的 字符变量 最后销毁
复制代码

String 对象

解答: 字符串的不可变,指的是里面的值(字符值)不可变,看上去可以改变内容,其实地址改变了,就是新开辟了一个内存空间

    //声明一个变量字符串 叫 lisi 
	// 其实lisi 一直都在 所有 字符串的不可变性,字符值 不可变 
	var  str = 'lisi';
	// 这里新开辟了一个空间 叫 zhangsan
	str = 'zhangsan';
	console.log(str);
	
解答: 实际开发中减少字符串拼接,因为会一直开辟内存空间会很卡

var  str = new String('andy');
console.log(str);
解答:这么打印出来就会看到
复制代码

字符串对象的常用方法

注意:字符串所有的方法,都不会修改字符串本身字符串是不可变的,操作完成会返回一个新的字符串


根据位置获取字符 
方法名			    说明
charAt(index)  		返回指定位置的字符就是index的索引号
charCodeAt(index)       获取指定位置字符串的ASCLL码
str[index]  		获取指定位置的处字符 html5 新增加的方法ie8 以上 
解答:注意index 都是所有 索引号都是从0 开始 


	var str = 'adny';
	var s = str.charAt(1);
	console.log(str.charAt(0));  返回指定位置的值 
	console.log(s);
	
	多个情况下使用遍历
	
	var str = 'dany';
	for(var i=0; i<str.length;i++){
	    console.log(str.charAt(i));
	}
	
	这里的charCodeAt 返回的是ASCLL码 对应相互的键盘位置 
	var str = 'adny';
	console.log(str.charCodeAt(0)); //97
	


字符串操作方法
方法名:				说明
concat()  		 	  concat() 方法用于连接两个或多个字符串拼接字符串,等于加
substr()   			  从start位置开始(索引号) length取的个数,
slice()   			  从start位置开始截取到end 位置, end 取不到(他们俩都是索引号)
substring()  		从start位置开始 ,截取到end 位置 end 取不到,基本和slice相同,但是不接受负值


var str = 'lisi';
var str1 = 'wangwu';
// 这里的意思是 str 连上 str1 
console.log(str.concat(str1,'你发现拼接字符串'));
多用于两个数组进行链接 concat()


// substr(start.length); start 索引号 开始的位置 length 取的个数
var str = 'adny';
console.log(str.substr(0,2)); //ad 这里的意思是从0开始到后面取2个


这里是slice  和substring 方法 
var s = '我爱中华人民';
	var ss = s.slice(0,2)
	var ss = s.slice(-3,-2) //华 负值从后面算起,前面的从前面
	console.log(ss);//我爱


var str = '我爱中华人民';
	var str1 = s.substring(0,2);
	console.log(str1)//我爱
	


获取字符串位置方法
    方法名					说明
        indexOf()  			 返回指定内容在元字符串中的位置,如果找不到返回-1
	lastIndexOf()    	从后往前找值找第一个匹配的
	
	var str = 'my name is woxiangjingjing';
	var str1 = str.indexOf('Q'); //-1 没找到返回 
	var str1 = str.indexOf('s'); //就返回第一满足条件的位置 
	console.log(str1);
	
	
	var str = 'my name is  woxiangjingjing';
	var str1 = str.lastIndexOf('q'); //-1
	var str1 = str.lastIndexOf('j'); //23

	console.log(str1);
复制代码

##indexOf()方法的 案例

// 因为indexof 只能查找一个所以我们应该有用循环,这里使用 do while 
	// 只要能找到o 就一直查询,找不到就退出循环
	// 存储当前的位置
	var str ='abcxcdeceocoscosocsocso';
	// 这里要记住使用的是-1 因为上面的 开始要是o的话就会取不到 
	var index = -1;
	// 这里使用 do的原因是因为 index !== -1 要是用while上来就满足条件所有就会失败
	// do 至少会执行一次 
	do{
		// 这里 一定要index + 1不然就会死循环 
		// index++ 和 index +1 是不一样的
		// index+1原先地方加1不改值 ++ 是改值 
		<!--这里-1 + 1 等于0 --->
	 index = str.indexOf('o',index + 1);
	 if(index !== -1){
	 	console.log(index);
	 }
	}while(index !== -1);//只要不等于-1 我们就一直查询 
	
	
	
替换: replace 
    var str = 'abcdefcabcedfabcac';
	do{
	    // 找到一个替换一个比如找到第一个a替换成了m然后继续找知道不等于-1退出 
		str = str.replace('a','MM');
		
	} while(str.indexOf('a') !== -1);
	console.log(str);
	
	
	var str = '我不喜欢京东不知道为什么';
	var s = str.replace('京东','**');
	console.log(s);
复制代码

判断一个字符串中出现次数最多的字符,统计这个次数

//判断一个字符串中出现次数最多的字符,统计这个次数
	var str = 'abcdefcabcedfabcac';
	//县遍历给每个字母都遍历一次 for
	// 这里我们声明一个新对象,对象的功能追加没有的新属性
	var o = {};
	// 比如这样o.name = 'name'; 动态语言
	// 使用for 进行遍历 
	for(var i=0; i<str.length;i++){
		// 取出str 字符里面所有的字母使用charAt()存入到item 
		var item = str.charAt(i);
		// 这里使用if 进行判断 你会发现 o 这个对象里面有 a 属性吗?
		// 当然是没有然后走到else 里面 a :1是一个然后再走哒哒,走到发现a然后有了加1加加
		<!--当然这里永远是先执行else 开始的因为一开始是都没有的-->
		if(o[item]){
			o[item]++;
		}else{
			o[item] = 1;
		}
	}
	console.log(o);
	
	
	
// 遍历对象 求最大值 和那个字母
    	var str = 'abcdefcabcedfabcac';
	var obj = {}
	for(var i=0; i<str.length;i++){
		var item = str.charAt(i) ;
		if(obj[item]){
			obj[item]++;
		}else{
			obj[item] = 1;
		}
	}
	console.log(obj)
	// 遍历对象 求最大值 和那个字母
	// 最大的数
	var max = 0;
	// 最多的字符
	var char;
	for(k in obj){
		// k 属性名  obj[k] 属性值
		if(max < obj[k]){
			max = obj[k];
			char = k;
		}
	}
	console.log(max);
	console.log(char)
复制代码

转换大小写,切割字符串

        var str = 'asd';
	var s = str.toUpperCase(); //转换为大写
	console.log(s); //ASD 大写的 


	var str1 = 'ASD';
	var s1 = str.toLowerCase();  //转换为小写
	console.log(s1); //asd
复制代码
split 切割字符串
	var sp = '1,2,3,4,5,6';
	var s = sp.split(',');  //split(字符)把字符转换为数组
	console.log(s);


	var sp1 = '1-2-3-4-5-6';
	var s1 =sp1.split(',');
	var s2 =sp1.split('-'); //这里面谨记用什么分割的就用什么隔开他
	console.log(s1);//["1-2-3-4-5-6"] 这里是一个数组
	console.log(s2);//["1", "2", "3", "4", "5", "6"] 这里是正确的
	


么么哒 我是爱你们的  静静复制代码

转载于:https://juejin.im/post/5c77edefe51d453ed12f33c1

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值