<!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>