<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高阶函数</title>
</head>
<body>
<script>
// // 高阶函数：将函数作为参数或返回值的函数
// // 1.作为参数
// function f1 () {
// console.log("后天好");
// }
// function f2 (callback) {
// callback();
// }
// f2(f1);
// // 2.返回值
// function demo () {
// return function () {
// return "php.cn";
// }
// }
// console.log(typeof demo());
// let f = demo ();
// console.log(f());
// // 1.回调函数
// // 调用页面，alert使浏览器弹出一个对话框,document.addEventListener用于像文档或某个元素添加事件监听器
// document.addEventListener("click",() => alert("好吃吗?"));
// // 2.偏函数
// let sum = function (a, b, c, d) {
// return a + b + c + d;
// }
// console.log (sum(1, 2, 3, 4));
// sum =(a, b, c, d) => (a + b + c + d);
// console.log (sum(1, 2, 3, 4));
// // 将a,b,c,d四个参数2个一组的传入
// sum = function (a,b) {
// return function (c,d) {
// return a + b + c + d;
// }
// }
// f1 = sum (1,2);
// console.log (f1(3.4));
// sum = (a,b) => (c,d) =>a + b + c + d;
// console.log(sum(1,2)(3,4));
// // 3.柯里化：偏函数的特例，将参数一个一个打散传进去，有几个值，就写几个返回函数
// sum = function (a, b, c, d) {
// return a + b + c + d;
// }
// sum = function (a) {
// return function (b) {
// return function (c) {
// return function (d){
// return a + b + c + d;
// }
// }
// }
// }
// console.log(sum(1)(2)(3)(4));
// // 可读性非常的差
// sum = a =>b=>c=>d=>a+b+c+d;
// console.log(sum(1)(2)(3)(4));
// 4.纯函数
let a = 250;
function demo (x,y) {
// 并非纯函数，应为函数内部引入一个外部变量a
return a + x + y;
}
console.log (demo(200,300));
function demo1 (a, b, c) {
return a + b + c;
}
console.log (demo1(a,200,300));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.值传递
let x = 10
let y = x
console.log (x,y);
x=20
console.log ("x= %d , y=%d", x,y );
// x已更新，但y没变化，说明连个变量没有任何关系，
// 2.引用传递
let obj1 = {
x:10,
y:20,
};
// console.log("obj1 = %o",obj1);
console.table (obj1);
let obj2 = obj1;
// obj2就是obj1这个对象的引用/别名，实际就是指向同一个对象
console.table(obj2);
obj1.x = "今天你吃了嘛";
console.table (obj1);
console.table (obj2);
// 3.传参：永远都是"值传递"，不存在引用传递
const f1 = x => (x = 10);
console.log (f1(5));
// 传入原始数据类型的值，是值传递，number, string,bool
const f2 =x => (x ={});
// console.log(f2({x:1,y:2}));
let o = {x:1,y:2};
console.log(f2(o));
console.log(o.x);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let username = "admin";
// <!-- 模板字面量ES6中引用的 -->
// let str = `hello
// ${username}`;
// console.log(str);
// let nav = ["首页","骄傲","文章",];
// let html = `
// <nav>
// <a href ="">${nav[0]}</a>
// <a href ="">${nav[1]}</a>
// <a href ="">${nav[2]}</a>
// </nav>`;
// console.log(html);
// document.body.insertAdjacentHTML("beforeend", html);
// 2.标签函数：自定义模板字面量的行为
// let hello = name => alert ("hello " + name);
// hello ("小猪猪");
// 换一种方式赖掉用
// hello ('小猪佩奇');
// hello `小猪`;
// 其实这就是标签函数
// show:将3个参数打印出来
let show = (strs, a ,b) => {
console.log(strs);
console.log(a);
console.log(b);
console.log(c);
console.log(a + b + c);
};
show = (strs, ...args) => {
console.log(strs);
console.log(args);
console.log(args[0]+args[1]+args[2]);
};
show ("php", 10, 80);
// 计算10+80=?
let a =10;
let b =80;
let c =30;
show `${a}+${b}+${c}=`;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr =[10,20,30]
let a =arr[0];
let b =arr[1];
let c =arr[2];
console.log(a,b,c);
[a,b,c]=[10,20,30];
console.log(a,b,c);
[a,b,c="666"]=[10,20];
console.log(a,b,c);
[a,b,c]=[10,20,30,40,50,60];
console.log(a,b,c);
[a,b,c,...d]=[10,20,30,40,50,60];
console.log(a,b,c);
console.log(d);
a=10,
b=20
c;
console.log("a=%d,b=%d",a,b);
c=a;
a=b;
b=c;
console.log("a=%d,b=%d",a,b);
a=10,
b=20;
console.log("a=%d,b=%d",a,b);
[b,a]=[a,b]
console.log("a=%d,b=%d",a,b);
let item ={id :10, name:"电脑"};
let id=item.id;
let name=item.name;
console.log(id ,name);
// {id ,name} = {id:10 , name="电脑"};
// console.log(id ,name);
let sum = ([a,b])=>a+b;
console.log(sum([10,20]));
sum=(...[a,b])=>a+b;
console.log(...[10,20,30,40,50,60]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<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>对象字面量的简化</title>
</head>
<body>
<script>
let person = {
name: "朱老师",
email: "498668472@qq.com",
getInfo: function () {
// 在对象中使用 this 来访问自边的成员
return `${this.name} : ( ${this.email} )`;
},
};
console.table(person.getInfo());
// 对象解构
let { name, email } = person;
console.log(name, email);
// name = '朱老师';
// email = '498668472@qq.com'
let user = {
name: name,
email: email,
getInfo: function () {
return `${this.name} : ( ${this.email} )`;
},
};
console.log(user);
user = {
name,
email,
getInfo: function () {
return `${this.name} : ( ${this.email} )`;
},
};
console.log(user);
user = {
name,
email,
getInfo() {
return `${this.name} : ( ${this.email} )`;
},
};
user = {
name,
email,
getInfo: () => `${this.name} : ( ${this.email} )`,
};
console.log(user);
</script>
</body>
</html>
