js高级笔记-3

最新推荐文章于 2024-06-13 10:05:02 发布

Mr丶_____

最新推荐文章于 2024-06-13 10:05:02 发布

阅读量67

点赞数

分类专栏：笔记文章标签： js javascript 字符串 es6

本文链接：https://blog.csdn.net/Mllmlu/article/details/115661519

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1-let的应用

let声明的变量

	<body>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
	</body>
	<script type="text/javascript">
		/* let的应用 */
		var btns = document.getElementsByTagName("button");
		for (var i = 0; i < btns.length; i++) {
			btns[i].onclick = function() {
				// btns[i].style.color = 'red'; 无法获取到对应索引值的下标所以无法获取
				// 如果将声明方式 var改成let 上述方式就可以使用
				this.style.color = 'red';
			}
		}
	</script>

var声明的变量

<body>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
		<button type="button">按钮</button>
	</body>
	<script type="text/javascript">
		/* let的应用 */
		let btns = document.getElementsByTagName("button");
		for (let i = 0; i < btns.length; i++) {
			btns[i].onclick = function() {
				btns[i].style.color = 'red'; 
				// 如果将声明方式 var改成let 上述方式就可以使用
				// this.style.color = 'red';
			}
		}
	</script>

2-字符串的扩展

1、模板字符串---在常量和变量拼接的时候，整个字符串使用`${变量}`的方式

		/* 标签模板的使用 */
		var stu = {
			name:'张三',
			age:25
		}
		txt.innerText = `学生的姓名：${stu.name},学生的年龄是${stu.age}`;

2、标签模板-----模板字符串不仅仅可以按照上述方式使用，还可以跟在一个函数名后面    ---    该函数将被调用来处理这个模板字符串

		/* 模板字符串的使用 */
		function fun(x,y,z){
			console.log(x,y,z);
			// console.log(arguments);
		}
		let a = 'world';
		let b = 'China';
		let c = 'Shanghai';
		/* 函数调用以后返回的第一个参数是个数组，数组里面保存每一个用变量分开的常量
		 * 第一个参数['one','two','three','']
		 * 第二个参数是x的值
		 * 第三个参数是y的值
		 */
		fun`one${a}two${b}three${c}`
		let m = 10;
		let n = 100;
		let j = 1000;
		/* 在函数调用时，如果只有变量，会将所有的变量拼接成一个字符串
		 * 第一个参数是变量拼接成的一个数组['10 100 1000']
		 * 第二个参数 undefined
		 * 第三个参数 undefined
		 */
		fun`${m}${n}${j}`
		fun`10 100 1000`

3-解构赋值

在es6中，允许按照一定的模式，从数组和对象中提取值，按照一定的规则对变量进行赋值

			/* 数组的解构赋值：就是按照数组的顺序依次赋值 */
			let [a,b,c] = [1,2,3];
			console.log(a,b,c);
			/* 交换值 */
			let m = 'js高级';
			let n = 'hello';
			[m,n] = [n,m]
			console.log(m,n);
			/* 对象的解构赋值：对象的解构按照属性来赋值 */
			let stu = {
				name:'zs',
				age:28
			}
			let {name,age,address} = stu;
			console.log(stu);
			/* 字符串的解构赋值：把字符串中的字符解析依次赋值,如果有多余的不会报错，只是没有变量赋值 */
			let [x,y,z] = 'hello'
			console.log(x,y,z);
			/* 字符串有长度属性，因此可以使用属性解构赋值 */
			let {length:len} = 'hello'
			console.log(len);
			/* 函数的解构赋值：类似于数组的解构赋值 */
			function fun([x,y]){
				console.log(x,y);
			}
			fun([2,4])

4-数组的扩展

			数组的遍历 arr.forEach(function(item,index,arr){})
			forEach()只能遍历数组
			Array.form(类数组)----可以将类数组转化为数组之后，使用上述方式
			new Array(n)---表示输入的是长度为n的数组
			Array.of(n)----表示输入的是一个n的元素，不是长度
			arr.find(function(){}) --- 得到的是数组中第一个符合条件的值
			arr.filter(function(){}) ---可以把所有符合条件的数过滤出来
			arr.splice(x,y,z) x --- 开始操作的位置 y --- 删除的个数 z --- 插入的元素
			arr.copyWithin(x,y,z) x --- 替换开始的位置 y --- 赋值开始的位置 z --- 赋值结束的位置 含开始不含结束(赋值数组中的一段元素替换)
			如果值为正数 从左往右
			如果值为负数 从右往左 从-1 依次递减

			var arr = [1,2,3,4,5,6,7,8,9,0]
			arr.forEach(function(item,index,arr){
				         /* 元素 下标 数组 */
				console.log(item,index,arr)
			})
			
			var btns = document.getElementsByTagName('button');
			/* 将类数组转化为数组 */
			var arra = Array.from(btns);
			arra.forEach(function(item,index){
				console.log(item,index)
			})
			/* 声明了一个长度为5的数组 */
			var ar1 = new Array(5)
			/* 声明了一个元素值为5的数组 */
			var ara = Array.of(5)
			console.log(ara);
			let score = [99,96,84,80,79,75,60]
			/* 查找第一个符合条件的值 */
			let sco = score.find(function(m){
				return m >= 80;
			})
			console.log(sco);
			let m = score.findIndex(function(n){
				return n < 80;
			})
			console.log(m);
			let n = score.filter(function(n){
				return n < 80;
			})
			console.log(n);
			
			/*   0  1  2  3  4  5  6 */
			/*  [99,96,84,80,79,75,60] */
			/*   -7 -6 -5 -4 -3 -2 -1 */
			// let copy = score.copyWithin(1,3,6); // 99 80 79 75 79 75 60
			// let copy = score.copyWithin(2,3,7); // 99 96 80 79 75 60 60
			// let copy = score.copyWithin(1,3,9); // 99 80 79 75 60 75 60
			// let copy = score.copyWithin(0,0,5); // 99 96 84 80 79 75 60
			// let copy = score.copyWithin(0,4,10); // 79 75 60 80 79 75 60
			// let copy = score.copyWithin(-1,-4,-1); // 99 96 84 82 79 75 80
			let copy = score.copyWithin(-3,-6,-2); // 99 96 84 80 96 84 80
			console.log(copy);

5-函数的扩展

			function fun(x,y=5){
				console.log(x*y);
			}
			fun(3,2) // 如果有两个参数，输出的结果是两个数相乘
			fun(3) // 如果只有一个参数，输出结果就是这个数乘以5
			/* rest剩余参数 ...参数名 用于获取函数多余的实参，是一个数组 */
			function funs(x,y=5,...vaLues){
				console.log(x*y*vaLues);
				console.log(vaLues);
				var arr = vaLues.push(x,y)
				console.log(vaLues);
			}
			funs(1,2,3,4,5,6,7,8,9)
			/* 获取数组中所有的实参，并放入数组 */
			// var arr = vaLues.push(x,y)
			
			/* 箭头函数 --- 取出了function (){}之间用=> */
			// setInterval(()=>{console.log(1);},1000)
			var fn = (x,y) => {
				console.log(x+y);
			}
			fn(2,3)
			/* 如果函数体只有一句话，可以省略{} 如果有return可以直接省略return */
			var f = (x,y) => console.log(x*y);
			f(2,3)

Mr丶_____

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js高级笔记-3

1-let的应用let声明的变量 <body> <button type="button">按钮</button> <button type="button">按钮</button> <button type="button">按钮</button> <button type="button">按钮</button> <button type="button">按
复制链接

扫一扫