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>
function fn() {
console.log("fn");
console.log(this);
}
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>
function fn(username, username) {
console.log(username);
}
fn("二哥")
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));
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));
</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>
function foo() {
console.log(this);
}
window.foo()
var a = 200;
let obj = {
a: 100,
fn: function () {
console.log(this.a);
},
fn2: () => {
console.log(this.a);
}
}
obj.fn()
obj.fn2()
</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>
let obj = {
a: 10,
b: function (n) {
let f = (n) => {
console.log(this);
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)
},
d: function (n) {
let f = function (n) {
return n + this.a
}
let m = {
a: 20
}
return f.call(m, n)
}
}
console.log(obj.b(1));
console.log(obj.c(1));
console.log(obj.d(1));
</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>
var fn = () => {
return 100
}
console.log(fn.prototype);
var fn2 = function () {
return 200
}
console.log(fn2.prototype);
</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>
let fn = () => {
return 100
}
console.log(fn());
let fn2 = () => 100
console.log(fn2());
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));
</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>
{
var username = "二哥"
var age = 28
var obj = {
username: "好谷就业力",
age: 18,
fn: function () {
setTimeout(function () {
console.log(this.username + this.age);
}, 0)
}
}
obj.fn()
}
{
var username = "二哥"
var age = 28
var obj = {
username: "好谷就业力",
age: 18,
fn: function () {
setTimeout(() => {
console.log(this.username + this.age);
}, 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>
function User() { }
let user = new User()
console.log(user);
let obj = new Object()
console.log(obj);
obj.__proto__ = User.prototype
var result = User.call(obj)
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());
console.log(it.next());
console.log(it.next());
console.log(it.next());
</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 User {
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());
</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 Parent {
constructor(car, house, money) {
this.car = car;
this.house = house;
this.money = money
}
fn() {
return this.car + this.house + this.money
}
}
class Child extends Parent {
constructor(car, house, money) {
super(car, house, money)
}
}
let child = new Child("奔驰", "别墅", "100W")
console.log(child.fn());
</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">
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(){
this.contents[this.index].style.display='block';
this.btns[this.index].style.background='pink';
}
hide(){
for(let i=0;i<this.btns.length;i++){
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.btns[i].onclick=()=>{
console.log(this);
this.index=i;
this.hide();
this.show();
}
}
}
}
class AutoPlay extends Tab{
constructor(obj2) {
super(obj2);
this.autoCahnge();
}
changeIndex(){
console.log(this.index);
this.index++;
if(this.index>this.btns.length-1){
this.index=0;
}
this.hide();
this.show();
}
autoCahnge(){
setInterval(()=>{
this.changeIndex();
},1000);
}
}
let tab=new Tab({
container:".tabs",
tabli:".item",
content:".content",
activeIndex:0
});
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)=>{
(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>
