js练习题(14个)

	<script>
		function foo(val){
			if (val > 5)
			{
				console.log('aaa');
			}else if(val > 10 )
			{
				console.log('bbb');
			}else if(val > 15)
			{
				console.log('bbb');
			}
		}

		foo(6);
		foo(11);
		foo(16);

		//其实这里的if...else if相当于python
		// 中的if...elif,程序会依次评估寻找第一个结果为true的条件,并且执行对应语句块,结束后跳过整个if/elif/eles结构
		// 所以会控制台输出aaa aaa aaa

		var b = 10;
		(function b(){
			b = 20;
			console.log(b);
		});




	</script>



	<script>
		function demo(){
			console.log(arguments.callee)
		}
		demo();//这里采用的就是es3方法
		function test(){
			"use strict";//必须写在逻辑的最前面
			console.log(arguments.callee);
		}
		test();//这里用的就是es5模式
	</script>

<body>
	<*node block inline-block table inherit flex grid*> :display类型
</body>


	<script>
	//盒子模型	content->padding->border->margin
	//margin不占盒子的实际大小(长宽),比如我们自己写的width height就是内容区(content)的宽高
	// 改变padding,整个盒子的大小改变,但是margin不会变化
	</script>


<style>
	div{
		width: 100px;
		height: 100px;
		border: 3px solid red; 
		zoom: 3;
}
</style>
	</head>
	<body>
		<div>hello</div>
		<script>
			document.write(parseInt("10") + "<br>");
			document.write(parseInt("10.33") + "<br>");
			document.write(parseInt("34 45 66") + "<br>");
			document.write(parseInt(" 60 ") + "<br>");
			document.write(parseInt("40 years") + "<br>");
			document.write(parseInt("He was 40") + "<br>");
			document.write("<br>");
			document.write(parseInt("10",10)+ "<br>");
			document.write(parseInt("010")+ "<br>");
			document.write(parseInt("10",8)+ "<br>");
			document.write(parseInt("0x10")+ "<br>");
			document.write(parseInt("10",16)+ "<br>");
		</script>
	</body>


	<script>
		// var arr = [1,23,12,90,229];
		// //实现max方法,找到数组中最大值
		// function maz(arr){
		// 	var temp = arr[0];
		// 	for(var i = 1;i < arr.length;i++){
  		//       if(temp < arr[i]){
  		//          temp = arr[i];//打不过就加入,哈哈
  		//       }
		// 	}
		// 	return temp;
		// }
		// maz(arr);

		var arr = [1,2,3,4,5,67];
		function min(arr){
			var temp = arr[0];
			for(var i = 0;i < arr.length;i++){
				if(temp > arr[i]){
					temp = arr[i];
				}
			}
			return temp;
		}
		min(arr);

		var arr1 = [12,13,14,15,15,19];
		function max(arr){
			var temp = arr1[0];
			for(var i = 0;i < arr1.length;i++){
				if(temp < arr1[i]){
					temp = arr1[i];
				}
			}
			return temp;
		}
		max(arr1);//直接调用函数不能直接实现在控制台显示
		// var a = 10;
		// var b = 20;
		// console.log("a + b" + a + b);//字符串拼接问题,任何问题加字符串还是字符串

		// console.log("1" + "2");
		// console.log(11+"1" + "2");
		// console.log("A"  - "B" + "2");

		// 计算每个数组的平方,并且返回新的数组
		// function Square(arr){
		// 	var arrs = [];  //i:0 ~ arr.length-1,数组下标
		// 	for(var i = 0;i <arr.length;i++){
		// 		arrs.push(arr[i] * arr[i]);
		// 	}
		// 	return arrs;
		// }

		// var arr = [1,2,3,4];
		// // var arrs = Square(arr);
		// // Square(arr);

		// function S(arr){
		// 	return arr.map(function (item){
		// 		return item * item;
		// 	})
		// }

		// console.log(10 > 9 > 8);
		// //比较运算符返回结果是布尔值 TRUE / FALSE
		// 10 > 9 : True True > 8 发生隐式转换 -> 1 > 8? 不对,返回false

		// var arr = [1,2,3];
		// var arr1 = new Array(6);//6是数组长度,返回[undifined * 6] [empty * 6]
		// var arr2 = new Array(1,2,3,4); //[1,2,3,4]

		// 实现 Remove([1,2,2,2,3],2) -> return [1,3]这样的效果
		// function Remove(arr,item){
		// 	var arrs = [];
		// 	for(var i = 0;i < arr.length;i++){
		// 		if(arr[i] !== item){
		// 			arrs.push(arr[i]);
		// 		}
		// 	}
		// 	return arrs
		// }

		// Remove([1,2,2,2,3],2);

		// var num1 = 0.9;
		// var num2 = -0.9;
		// console.log(parseInt(num1));//0
		// console.log(Math.floor(num1));//0
		// console.log(parseInt(num2));//-0
		// console.log(Math.floor(num2));//-1
		// parseInt : 取整,去整数部分,取小数点之前的
		// Math.floor:向上取整<=当前数字的最大整数

		// // 求和实例
		// function sum(arr){
		// 	var total = 0;
		// 	for(var i = 0;i < arr.length;i++){
		// 		total += arr[i];
		// 	}
		// 	return total;
		// }

		// sum([1,2,3])


		// js思考一下下列控制台输出会是什么
		// console.log("1" + "2");
		// console.log(+ "1" + "2");
		// console.log("A" - "B" + 2);


		// 解析 首先我们要知道js当中这个+有两个作用,一个用来做运算,一个是是可以做字符串的拼接,
		// 比如你在pycharm经常看到+被用来当做字符串拼接,知道这个,那么我们就很轻松就会知道,第一个
		// 应该输出12,注意它是字符串类型的数据,你可以搜一下typeof方法,然后用typeof去检测它的数据类型
		// ,同理第二个应该也是12(str类型),那么第三个就需要你想想了,-运算符做-对于字符串,结果应该还是字符串,同理的*  /,"A" - "B"输出一个非数字,js当中叫NAN,Not A Number简写,然后再做字符串拼接,最后输出NAN2


	</script>



         //- var str=“hello world”;
         //请编写代码统计str中o和l总共出现了多少次?
         //(统计两个字母的总次数)
  //        var str = "Hello World";
  //        var GetTotal = function(str){
  //        var count = 0;
  //        str.split('').forEach(function (item){
  //        	if(item === "l" || item === "o"){
  //        		count++;
  //        	}
  //        })
  //        return count;
		// }
		// console.log(GetTotal(str))


<body>
	<p><span>你好</span></p>
	<p><a href="">好什么</a></p>
	<script>
		var a = 10;
		function test(){
			// var a;虚拟位置,但是确实是在
			a = 100;
			console.log(a);
			console.log(this.a);
			var a;
			console.log(a)
		}
		test();

		//解析现在函数外声明一个全局变量a并且赋值100,a = 100是个坑,因为未声明的变量未使用会变成全局变量,那么这个a的值是否会覆盖前面的值呢?之后两次打印a,然后在函数内部声明一个a,这里其实就是一个预编译问题,也就是预处理,代码执行之前干的事,什么变量声明提升,函数整体提升,提升到那,形参,实参范围等等知识点,所以这里的var a;相当于变量提升,也就是到了a = 100;的上一行
		//this.a默认为window.a,test执行,this指向window,也就是全局


		var str = "abc123def456gh789"
		var reg0 = /\d{3}/g;//数组形式输出
		var reg1 = /\d+/g;//数组形式输出
		var reg2 = /(.*?)/g;
		console.log(str.match(reg0));
		console.log(str.match(reg1));
		console.log(str.match(reg2));


	<!-- display: flex;弹性布局,实现垂直居中要的一个东西 -->
	<!-- flex:1;===flex-grow:1;flex-shrink:1(压缩);flex-basis:0%; flex-grow:1;是把剩余空间分成1分给我,剩余部分是300-100-100=100-->
	<div class="flex" style="width: 300px;display: flex;background: black;">
		<div class="left" style="width: 100px;height: 100px;background: red;"></div>
		<div class="right" style="width: 100px;height: 100px;flex: 1;background: blue;"></div>
	</div>



	<script>
		// es6当中的结构赋值,对应位置相等(原理),b = 1为默认值,当他为undifined/null时,才会默认相等
		// var [a,b = 1] = [2,null];
		// console.log(a,b);  -->2 null


		// css3
		// transition和animation的区别
		// 1.前者是过渡 后者是动画
		// 2.transition只能从一种状态过渡到另一种状态
		// 3.animation可以定制复杂动画,可以定义动画的区间等
		// 4.Transition必须通过一些行为才能触发(js或者伪类),animation可以直接触发

		var [a = b,b = 1] = [];//这是es6中的结构赋值(原理是对应位置赋值),[a = b,b = 1]相当于声明两个变量,一个是a,一个是b,只不过在执行a = b,b是undifined,之后b = 1,所以a是undifined b为1
		console.log(a,b);//undifined 1
		let [x = y,y = 1];//对于let而言,必须先声明后使用,当执行x = y时y还未定义(声明),所以会报出Uncaught SyntaxError: Missing initializer in destructuring declaration这样的错
// 		如何定义一个变量?
// 首先,我们需要起一个变量名,然后用等号(=),等号叫做赋值符号,等号右侧是要往这个变量里面存的值,它的含义就是将值赋给变量。
// 注意,它跟我们正常的阅读顺序是不一样的。正常阅读是变量名等于值,实际上程序在执行的时候,是把值存到一个叫这个变量名的空间中,这是赋值等号的含义,是把等号右端的值存到这个空间中。这个空间在内存中就叫这个“变量名”。
		console.log(x,y);//报错


		// 脱离文档流:float/position:absolute;  
		// 触发BFC元素:position:absolute float position:flexed;
		// A.reletive B.float C.flex D.overfloat:hidden;
	</script>


	<SCRIPT>
		function foo(y = 2,x){
			x = x || 1;
			console.log(x,y);
		}
		foo();//1,2
		foo(null,null);//1,null

		//解析:y = 2;默认值(默认参数)
		//foo();没有传参数,所以对于y而言,
		//y是undifined,走他的默认值(记住),如果不是undifined,那么以他传过来的参数来走(默认值不是unidifined),因为null对应的boolean值是false


        if(a in window){
        	var a = 10;
        }
        console.log(a);
        //考察的是in运算符,就是说这个值/属性是不是这个对象里面,也就是有没有window.a,之后就是考察预编译,var a = 10;变量提升,相当于有一个var a;在if语句上面,那么a在window上了,因为a已经被定义了,尽管a是undifined,但是a这个属性已经被定义了,所以返回10


	<script>
		//哪些方法可以判断数据类型
		1.  Typeof
		2.  constructor:可被修改
		3.  instanceof
		4.  Object.prototype.tostring.call() [object content]
	</script>


	<style>
		*{
			color: red;
		}
		p{
			color: green;
		}
	</style>
</head>
<body>
	<p><span>你好</span></p>
	<p><a href="">好什么</a></p>
	<script>
		var a = 10;
		function test(){
			// var a;虚拟位置,但是确实是在
			a = 100;
			console.log(a);
			console.log(this.a);
			var a;
			console.log(a)
		}
		test();

		//解析现在函数外声明一个全局变量a并且赋值100,a = 100是个坑,因为未声明的变量未使用会变成全局变量,那么这个a的值是否会覆盖前面的值呢?之后两次打印a,然后在函数内部声明一个a,这里其实就是一个预编译问题,也就是预处理,代码执行之前干的事,什么变量声明提升,函数整体提升,提升到那,形参,实参范围等等知识点,所以这里的var a;相当于变量提升,也就是到了a = 100;的上一行
		//this.a默认为window.a,test执行,this指向window,也就是全局


		var str = "abc123def456gh789"
		var reg0 = /\d{3}/g;//数组形式输出
		var reg1 = /\d+/g;//数组形式输出
		var reg2 = /(.*?)/g;
		console.log(str.match(reg0));
		console.log(str.match(reg1));
		console.log(str.match(reg2));


	</script>


	<script>
		//let const var的区别

        // 1/块级作用域{内面内容}
        1.if(){}
        2.for(){}
        3.{
             key:value;
          }
        //2/重复声明,var可以重复 let和const不能,会报错
        //3/暂存性死区 TDZ ,起到对let和const约束作用(先声明后使用的规则)
        //4/变量声明提升,--> var
        //5/变量的初始值const声明的是常量,一方面不能更改,一方面还必须有值
        //6/全局挂载 用var声明的变量会放到作用window上的属性,全局使用
	</script>

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值