前端路线--ES6（day03）

最新推荐文章于 2024-07-24 23:00:08 发布

喝西瓜汁的兔叽Yan

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量1k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/Yan9_9/article/details/124220238

版权

前端专栏收录该内容

106 篇文章 5 订阅

订阅专栏

day03-01-箭头函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this指向问题
        // 1、普通函数默认this指向Window

        // 定义一个普通函数
        function fn() {
            console.log("fn");
            console.log(this);
        }
        fn()

        // 将fn函数改造成箭头函数
        // 箭头函数是一个匿名函数
        var fn2 = () => {
            console.log("fn2");
        }
        fn2()


        // 函数传递参数，并且给一个默认值
        function fn3(username, age = 18) {
            console.log(username, age);
        }
        fn3("二哥", 28)
    </script>
</body>

</html>

day03-02-函数传递参数-注意事项

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this指向问题？
        // 1、普通函数默认this指向Window

        // 箭头函数和普通函数的区别？
        // 1、箭头函数内部是没有arguments，取而代之的是...扩展运算符
        // 2、箭头函数是匿名函数，不能作为构造函数，不能使用new关键字

        function fn(username, username) {
            console.log(username); //undefined
        }
        fn("二哥")

        // 如果函数有默认值，不能有同名参数
        // function fn2(username, username = "好谷") {
        //     console.log(username); //报错了
        // }
        // fn2("二哥")

        // 定义一个求和函数
        function sum() {
            console.log(arguments); //是一个类数组（伪数组）
            var sum = 0
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i]
            }
            return sum
        }
        console.log(sum(1, 2, 3, 4, 5)); //15

        // 将sum函数变成箭头函数
        var sumFn = (...rest) => {
            console.log(rest); //获得到一个真正的数组
            var sum = 0
            for (var i = 0; i < rest.length; i++) {
                sum += rest[i]
            }
            return sum
        }

        console.log(sumFn(1, 2, 3, 4, 5)); //15


    </script>
</body>

</html>

day03-03-箭头函数的this指向

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this指向问题？
        // 1、普通函数默认this指向Window
        // 2、对象中的方法如果是普通函数this指向对象本身，对象中的箭头函数，this指向上下文(父级)

        // 箭头函数和普通函数的区别？
        // 1、箭头函数内部是没有arguments，取而代之的是...扩展运算符
        // 2、箭头函数是匿名函数，不能作为构造函数，不能使用new关键字
        // 3、箭头函数的this使用指向父级上下文，普通函数中的this指向调用者
        function foo() {
            console.log(this);  //指的是Window
        }
        window.foo()

        var a = 200;
        let obj = {
            a: 100,
            fn: function () {
                console.log(this.a);  //100   this指的是obj
            },
            fn2: () => {
                console.log(this.a); //200  对象中的箭头函数，this指向上下文(父级)
            }
        }
        obj.fn() //100 
        obj.fn2() //200

    </script>
</body>

</html>

day03-04-箭头函数的this指向

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this指向问题？
        // 1、普通函数默认this指向Window
        // 2、对象中的方法如果是普通函数this指向对象本身，对象中的箭头函数，this指向上下文(父级)

        // 箭头函数和普通函数的区别？
        // 1、箭头函数内部是没有arguments，取而代之的是...扩展运算符
        // 2、箭头函数是匿名函数，不能作为构造函数，不能使用new关键字
        // 3、箭头函数的this使用指向父级上下文，普通函数中的this指向调用者
        // 4、箭头函数不能通过call(),apply(),bind()来改变this指向
        let obj = {
            a: 10,
            b: function (n) {
                let f = (n) => {
                    console.log(this);  //指的obj对象
                    return n + this.a
                }
                return f(n)
            },
            c: function (n) {
                let f = (n) => {
                    return n + this.a
                }
                let m = {
                    a: 20
                }
                return f.call(m, n)  //11
            },
            d: function (n) {
                let f = function (n) {
                    return n + this.a
                }
                let m = {
                    a: 20
                }
                return f.call(m, n)  //21
            }
        }
        console.log(obj.b(1)); //11
        console.log(obj.c(1)); //11
        console.log(obj.d(1)); //21
    </script>
</body>

</html>

day03-05-箭头函数是没有原型属性的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this指向问题？
        // 1、普通函数默认this指向Window
        // 2、对象中的方法如果是普通函数this指向对象本身，对象中的箭头函数，this指向上下文(父级)

        // 箭头函数和普通函数的区别？
        // 1、箭头函数内部是没有arguments，取而代之的是...扩展运算符
        // 2、箭头函数是匿名函数，不能作为构造函数，不能使用new关键字
        // 3、箭头函数的this使用指向父级上下文，普通函数中的this指向调用者
        // 4、箭头函数不能通过call(),apply(),bind()来改变this指向
        // 5、箭头函数没有原型prototype属性


        // 箭头函数
        var fn = () => {
            return 100
        }
        console.log(fn.prototype); //undefined

        // 普通函数
        var fn2 = function () {
            return 200
        }
        console.log(fn2.prototype); //{constructor: ƒ}

    </script>
</body>

</html>

day03-06-箭头函数的写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this指向问题？
        // 1、普通函数默认this指向Window
        // 2、对象中的方法如果是普通函数this指向对象本身，对象中的箭头函数，this指向上下文(父级)

        // 箭头函数和普通函数的区别？
        // 1、箭头函数内部是没有arguments，取而代之的是...扩展运算符
        // 2、箭头函数是匿名函数，不能作为构造函数，不能使用new关键字
        // 3、箭头函数的this使用指向父级上下文，普通函数中的this指向调用者
        // 4、箭头函数不能通过call(),apply(),bind()来改变this指向
        // 5、箭头函数没有原型prototype属性


        // 箭头函数
        let fn = () => {
            return 100
        }
        console.log(fn()); //100

        // 等价于--如果return后面只有一行代码，可以省掉大括号和return，直接写结果
        let fn2 = () => 100
        console.log(fn2()); //100


        // 传递参数的写法
        let fn3 = (username) => {
            return username
        }
        console.log(fn3("二哥")); //二哥
        // 等价于--箭头函数有一个参数是可以省掉小括号
        let fn4 = username => username
        console.log(fn4("二哥")); //二哥

        // 多个参数，或者没有参数用小括号包裹起来
        let fn5 = (username, age) => username + age
        console.log(fn5("二哥", 18)); //二哥18
    </script>
</body>

</html>

day03-07-面试题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this指向问题？
        // 1、普通函数默认this指向Window
        // 2、对象中的方法如果是普通函数this指向对象本身，对象中的箭头函数，this指向上下文(父级)
        // 3、定时器中函数如果是普通函数的this指向window，如果是箭头函数this指向上下文(父级)

        // 箭头函数和普通函数的区别？
        // 1、箭头函数内部是没有arguments，取而代之的是...扩展运算符
        // 2、箭头函数是匿名函数，不能作为构造函数，不能使用new关键字
        // 3、箭头函数的this使用指向父级上下文，普通函数中的this指向调用者
        // 4、箭头函数不能通过call(),apply(),bind()来改变this指向
        // 5、箭头函数没有原型prototype属性


        // 面试题
        {
            var username = "二哥"
            var age = 28
            var obj = {
                username: "好谷就业力",
                age: 18,
                fn: function () {
                    setTimeout(function () {
                        // 定时器中的函数是普通函数this指向window
                        console.log(this.username + this.age); //二哥28
                    }, 0)
                }
            }
            obj.fn()
        }

        {
            var username = "二哥"
            var age = 28
            var obj = {
                username: "好谷就业力",
                age: 18,
                fn: function () {
                    setTimeout(() => {
                        // 箭头函数中的this指向上下文（父级）
                        console.log(this.username + this.age); //好谷就业力18
                    }, 0)
                }
            }
            obj.fn()
        }
    </script>
</body>

</html>

day03-08-面试题-new操作符都干了啥

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this指向问题？
        // 1、普通函数默认this指向Window
        // 2、对象中的方法如果是普通函数this指向对象本身，对象中的箭头函数，this指向上下文(父级)
        // 3、定时器中函数如果是普通函数的this指向window，如果是箭头函数this指向上下文(父级)

        // 箭头函数和普通函数的区别？
        // 1、箭头函数内部是没有arguments，取而代之的是...扩展运算符
        // 2、箭头函数是匿名函数，不能作为构造函数，不能使用new关键字
        // 3、箭头函数的this使用指向父级上下文，普通函数中的this指向调用者
        // 4、箭头函数不能通过call(),apply(),bind()来改变this指向
        // 5、箭头函数没有原型prototype属性

        // 普通函数和构造函数的区别?
        // 1、在使用的时候有没有使用new关键字


        // new 操作符具体干了什么？面试题

        // 定义一个构造函数User
        function User() { }
        let user = new User() //生成一个user实例对象
        console.log(user);

        // new 干了什么
        // 1、创建一个空对象
        let obj = new Object()
        // 2、链接到原型
        // 把obj的proto指向构造函数User的原型对象prototype，建立的obj对象的原型链
        console.log(obj);
        obj.__proto__ = User.prototype
        // 3、绑定this的值
        var result = User.call(obj)  //让User构造函数的this指向obj
        // 4、返回一个新的对象
        if (typeof result == "object") {
            user = result
        } else {
            user = obj
        }
    </script>
</body>

</html>

day03-09-迭代器-iterator

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const items = ["zero", "one", "two"];  //定义一个数据（可遍历的数据）
        const it = items[Symbol.iterator](); //创建一个迭代器对象

        console.log(it.next()); //遍历1次  {value: 'zero', done: false}
        console.log(it.next()); //遍历2次  {value: 'one', done: false}
        console.log(it.next()); //遍历3次  {value: 'two', done: false}
        console.log(it.next()); //{value: undefined, done: true} //done为true是说明遍历结束
    </script>
</body>

</html>

day03-10-class类

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // class 是一个关键字
        // class类的本质就是一个function
        class User {
            // constructor构造函数
            constructor(username, age) {
                this.username = username;
                this.age = age
            }
            // 这里不要添加任何标点符号
            fn() {
                return this.username + this.age
            }
        }

        let user = new User("二哥", 18)
        console.log(user);
        console.log(user.fn()); //二哥18
    </script>
</body>

</html>

day03-11-class类实现继承

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // class 是一个关键字
        // class类的本质就是一个function
        // 定义一个父类（car,house,money）
        // 定义一个子类
        // 定义一个父类
        class Parent {
            constructor(car, house, money) {
                this.car = car;
                this.house = house;
                this.money = money
            }
            // 父类中定义一个方法
            fn() {
                return this.car + this.house + this.money
            }
        }
        // 定义一个子类Child通过extends来继承Parent父类
        class Child extends Parent {
            constructor(car, house, money) {
                super(car, house, money) //调用父类中的构造函数
            }
        }

        let child = new Child("奔驰", "别墅", "100W")
        console.log(child.fn()); //奔驰别墅100W
    </script>
</body>

</html>

day03-12-Table栏面向对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul li{
				list-style: none;
				cursor: pointer;
			}
			.tabs,#tabs{
				width: 600px;
				height: 300px;
				background-color: #ccc;
				margin: 20px auto;
			}
			.tabul{
				width: 100%;
				height: 30px;
			}
			.item{
				width: 100px;
				height: 30px;
				background-color: orange;
				float: left;
				margin: 0 10px;
				text-align: center;
				line-height: 30px;
			}
			.content{
				width: 600px;
				height: 240px;
				background-color: cadetblue;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="tabs">
			<ul class="tabul">
				<li class="item">CF</li>
				<li class="item">LOL</li>
				<li class="item">王者荣耀</li>
			</ul>
			<div class="content">欢迎来到CF</div>
			<div class="content">欢迎来到LOL</div>
			<div class="content">欢迎来到王者</div>
		</div>
		
		<div id="tabs">
			<ul class="tabul">
				<li class="item">电影</li>
				<li class="item">娱乐</li>
				<li class="item">短视频</li>
			</ul>
			<div class="content">欢迎来到电影</div>
			<div class="content">欢迎来到娱乐</div>
			<div class="content">欢迎来到短视频</div>
		</div>
	</body>
	<script type="text/javascript">
	
	//定义Tb类
		class Tab{
			constructor(obj) {
				//传入属性
			    this.wrap=document.querySelector(obj.container);
				this.btns=this.wrap.querySelectorAll(obj.tabli);
				this.contents=this.wrap.querySelectorAll(obj.content);
				this.index=obj.activeIndex;
				this.toggleTabs();
			}
			//显示的方法
			show(){
				//让当前选中的li和内容展示
				this.contents[this.index].style.display='block';
				this.btns[this.index].style.background='pink';
			}
			//隐藏
			hide(){
				for(let i=0;i<this.btns.length;i++){
					//让所有的li和内容展示
					this.contents[i].style.display='none';
					this.btns[i].style.background='orange';
				}
			}
			//切换的方法
			toggleTabs(){
				this.hide();
				this.show();
				//循环添加点击事件
				for(let i=0;i<this.btns.length;i++){
					//用箭头函数添加事件，箭头函数内的this指的是Tab(大盒子)
					this.btns[i].onclick=()=>{
						console.log(this);
						//让全局的Tab的index等于当前的i值
						this.index=i;
						//隐藏所有的btn和内容框
						this.hide();
						//让激活的显示
						this.show();
					}
					  // 思考：点击事件如果不使用箭头函数该如何实现（用改变this指向的方法）
				}
			}
		}
		
	//定义一个自动播放的子类,继承父类的Tab切换
	class AutoPlay extends Tab{
		constructor(obj2) {
		    super(obj2);
			this.autoCahnge();
		}
		//切换index的方法
		changeIndex(){
			console.log(this.index);
			this.index++;
			//如果当前的index大于了btn的长度,rangindex=0
			if(this.index>this.btns.length-1){
				this.index=0;
			}
			this.hide();
			this.show();
		}
		//定义个自动播放的方法
		autoCahnge(){
			//此处的this指的当前的实例化对象
			setInterval(()=>{
				this.changeIndex();
			},1000);
			 // 思考题:改造这个案例让鼠标经过停止，鼠标离开继续播放
		}
	}
	
	
	
	
	
	
	
	
	
	
	//实例化对象1
	let tab=new Tab({
		container:".tabs",
		tabli:".item",
		content:".content",
		activeIndex:0	//激活选中的那个
	});
	
	
	//实例化对象2(既有切换方法,又有自动切换的方法)
	let tab2=new AutoPlay({
		container:"#tabs",
		tabli:".item",
		content:".content",
		activeIndex:0	//激活选中的那个
	});
	</script>
</html>

扩展–查找数组中出现次数最多的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=['a','w','d','s','d','r','g','w','e','d','a','a','w','d','a'];
		let newArr=arr.reduce((total,current)=>{
			// console.log(total,current);
			(current in total)?total[current]++:total[current]=1;
			return total;
		},{})
		console.log(newArr);
		
		let ele='';
		let max=0;
		for(let key in newArr){
			if(max<newArr[key]){
				ele=key;
				max=newArr[key];
			}
		}
		console.log(ele,max);
	</script>
</html>

喝西瓜汁的兔叽Yan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端路线--ES6（day03）

day03-01-箭头函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫