Nodejs初識

什麼是Nodejs

生活的理想，就是爲了理想的生活。——張聞天

nodejs文件是以 .js 結尾的文件，下面是我編寫的第一個nodejs代碼

console.log("hello world"); -> hello world

服務器端js和瀏覽器端js

• 過去我們說，js都是運行在瀏覽器端的.

  • ECMAScript: js語法(變量，數據類型，表達式，代碼結構(順序，循環，分支)…)
  • BOM: 瀏覽器對象模型，用js去操作瀏覽器窗口
  • DOM: 文檔對象模型，用js去操作頁面上的DOM樹

• 今天我們說，有了node.js也可以運行在服務器端的.

  • 在node.js中 不能寫DOM語法和BOM語法

  • 正常的符合js語法的代碼是不會報錯的.

  var name = "千里666";
  console.log(name); // 千里666
  

  因爲node.js中是不能執行BOM和DOM的，下面的代碼會報錯

  console.log(document); // 報錯
  
  var age = 39;
  alert(age); // 報錯
  

let關鍵字

• var 聲明變量

  • a. 有變量的提升

  • b. 沒有塊級作用域，是函數作用域

  • c. 可以重複聲明

  • d. 可以重新賦值

• let聲明變量

  • a. 沒有變量提升

  console.log(age);
  // var age = 38; // undefined
  // let age = 38; // Cannot access 'age' before initialization
  

  • b. 有塊級作用域

  for (var i = 0; i < 10; i++) {}
  // console.log(i); // 10
  
  for (let i = 0; i < 10; i++) {}
  // console.log(i); // i is not defined
  

  • c. 不能重複聲明

  var num = 10;
  var num = 20;
  console.log(num); // 20
  
  let num = 10;
  let num = 20;
  console.log(num); // Identifier 'num' has already been declared
  

  • d. 可以重新賦值

  var num = 10;
  num = 20;
  console.log(num); // 20
  
  let num = 10;
  num = 20;
  console.log(num); // 20
  

const關鍵字

• const關鍵字聲明常量的(一旦聲明就無法更改)

  • a. 沒有變量提升

  console.log(age);
  const age = 18; // Cannot access 'age' before initialization
  

  • b. 有塊級作用域

  {
     const num = 200;
  }
  console.log(num); // num is not defined
  

  • c. 不能重複聲明

  const num = 300;
  const num = 400;
  console.log(num); // Identifier 'num' has already been declared
  

  • d. 聲明必須要初始化值

  const num;
  console.log(num); // Missing initializer in const declaration
  

  • e. 不能重新賦值

  const num = 10;
  num = 20;
  console.log(num); // Assignment to constant variable.
  

• 使用場景：

  • a. 一些不會變化的值，比如圓周率PI

  • b. 大事件項目中，保存基地址的就可以用常量

對象的解構賦值

取對象中屬性的值，賦值給變量

聲明一個對象

let obj = {
  name: "波波",
  age: 38,
  gender: "男",
  score: 100,
};

es5:

let name1 = obj.name;
let age1 = obj.age;
let gender1 = obj.gender;
let score1 = obj.score;
console.log(name1, age1, gender1, score1); // 波波 38 男 100

es6:

// a.
let { name: name1, age: age1, gender: gender1, score: score1 } = obj;
console.log(name1, age1, gender1, score1); // 波波 38 男 100

// --> 如果變量名和對象名一致

// b.
let { name: name, age: age, gender: gender, score: score } = obj;
console.log(name, age, gender, score); // 波波 38 男 100

// --> 簡化

// c.
let { name, age, gender, score } = obj;
console.log(name, age, gender, score); // 波波 38 男 100

// d. 思考題
let { name, age, gender, fenshu } = obj;
console.log(name, age, gender, fenshu); // 波波 38 男 undefined
// obj中沒有fenshu這個屬性，所以這個fenshu變量就是聲明瞭沒有賦值，就是undefined

// e. 現在希望fenshu這個變量的值是obj對象中score屬性的值
let { name, age, gender, score: fenshu } = obj;
console.log(name, age, gender, fenshu); // 波波 38 男 100

// f. 給height變量默認值
let { name, age, gender, score: fenshu, height = 180 } = obj;
console.log(name, age, gender, fenshu, height); // 波波 38 男 100 180

// g. 相當於是用obj對象裏面的age屬性的值，對age變量重新賦值，所以age變量的值最後是38
let { name, age = 18, gender, score: fenshu, height = 180 } = obj;
console.log(name, age, gender, fenshu, height); // 波波 38 男 100 180

作業題：

4. 在對象的結構賦值中，var{a,b,c} = {"c":10, "b":9, "a":8} 結果中，a、b、c的值分別爲（B）
A. 10 9 8
B. 8 9 10
C. undefined 9 undefined
D. null 9 null

數組的解構賦值

就是把數組中每一個元素的值依次的賦值給變量

聲明瞭一個數組

let arr = [10, 20, 30, 40];

es5:

let num1 = arr[0];
let num2 = arr[1];
let num3 = arr[2];
let num4 = arr[3];
console.log(num1, num2, num3, num4); // 10 20 30 40

es6:

// a.
let [num1, num2, num3, num4] = arr;
console.log(num1, num2, num3, num4); // 10 20 30 40

// b.
let [num1, num2, num3, num4, num5] = arr;
console.log(num1, num2, num3, num4, num5); // 10 20 30 40 undefined

// c. 默認值
let [num1, num2, num3, num4, num5 = 50] = arr;
console.log(num1, num2, num3, num4, num5); // 10 20 30 40 50

// d.
let [num1 = 100, num2, num3, num4, num5 = 50] = arr;
console.log(num1, num2, num3, num4, num5);

// e. 可以用逗號留空取後面的值
let [num1, , , num4] = arr;
console.log(num1, num4); // 10 40

解構賦值結合函數聲明

es5:

// 聲明一個函數，形參有多個
function test1(name, age, gander) {
  console.log(name, age, gander);
}
test1("波波", 18, "男");

// 如果形參有多個，最好把形參寫成一個對象
function test1(obj) {
  console.log(obj.name, obj.age, obj.gander); // 波波 18 男
}
test1({
  name: "波波",
  age: 18,
  gander: "男",
});

es6:

// 聲明一個函數，形參有多個
function test2({ name, age, gander }) {
  console.log(name, age, gander); // 波波 18 男
}
test2({
  name: "波波",
  age: 18,
  gander: "男",
});

作業題：

function sb([a, b, c, d = 5]) {
  console.log(a + b + c + d);
}
sb([10, 20, 30]); // 65

function sb2([a, b, c, d]) {
  console.log(a + b + c + d);
}
sb2([10, 20, 30]); // NaN

箭頭函數

說白了就是 匿名函數的 一個簡寫

• 簡寫規則:

  • a. function 改成=> =>可以讀成goesto

  • b. 如果只有一個形參，那就可以省略形參小括號.

  • c. 如果不是一個形參,0個或者多個形參，那就不能省略這個形參小括號了

  • d. 如果函數體只有一句話，那就可以省略函數體的大括號

  • e. 如果函數體只有一句話，並且這一句話是return 返回值，那return也要省略.

  • f. 如果函數體不是一句話，那就不能省略這個大括號. |

  箭頭函數的 this 和以前說的函數的this有些不一樣

// 普通的匿名函數
let fn = function (name) {
  console.log("我的名字是" + name);
};
fn("波波");

// 箭頭函數
let fn = (name) => console.log("我的名字是" + name);
fn("波波");

let fn = (name) => false;

let fn2 = function (num1, num2) {
  console.log(num1 + num2);
  return num1 + num2 + 30;
};

let fn2 = (num1, num2) => {
  console.log(num1 + num2);
  return num1 + num2 + 30;
};
let res = fn2(100, 200);
console.log(res);

對象成員簡寫

let name = "波波";
let age = 18;
let gender = "男";
let score = 100;

es5:

let obj = {
  name: name,
  age: age,
  gender: gender,
  score: score,
  sayHi: function () {
    console.log("哈哈,雷猴啊");
  },
};
console.log(obj);
obj.sayHi();

es6:

let obj = {
  name,
  age,
  gender,
  score,
  sayHi() {
    console.log("哈哈,雷猴啊");
  },
};
console.log(obj);
obj.sayHi();

let obj = {
  name,
  age,
  gender,
  score,
  fenshu, // fenshu is not defined
  sayHi() {
    console.log("哈哈,雷猴啊");
  },
};
console.log(obj);
obj.sayHi();

let obj = {
  name,
  age,
  gender,
  score,
  fenshu: score,
  sayHi() {
    console.log("哈哈,雷猴啊");
  },
};
console.log(obj);
obj.sayHi();

對象展開

// 聲明一個對象
let chinese = {
  skin: "黃色皮膚",
  hair: "黑色頭髮",
  sayHi() {
    console.log("你好,你吃了嗎???");
  },
};

// 聲明一個對象
let zhuBo = {
  skill: "唱跳rap打籃球,老鐵雙擊666",
  song: "唱大碗寬面",
};

// 聲明一個對象
let linge = {
  //   skin: "黃色皮膚",
  //   hair: "黑色頭髮",
  //   sayHi() {
  //     console.log("你好,你吃了嗎???");
  //   },
  //   skill: "唱跳rap打籃球,老鐵雙擊666",
  //   song: "唱大碗寬面",

  // 展開語法
  ...chinese,
  ...zhuBo,
  gender: "男",
  hair: "白髮蒼蒼", // 重新給hair這個屬性賦值,會覆蓋以前的值
};
console.log(linge);

數組展開

使用場景:

• a. 數組拼接

• b. 利用Math.max()/Math.min()來求數組中的最大值/最小值

eg01

let arr1 = [10, 20, 30];
let arr2 = [...arr1, 40, 50];
console.log(arr1); // [ 10, 20, 30 ]
console.log(arr2); // [ 10, 20, 30, 40, 50 ]

eg02

let arr1 = [10, 20, 30];
let arr2 = [40, 50, 60];
let arrNew = [...arr1, ...arr2];
console.log(arrNew); // [ 10, 20, 30, 40, 50, 60 ]

eg03

// 求數組中的最大值
let arr1 = [10, 8, 7, 66, 65, 34];
console.log(Math.max(...arr1));
console.log(Math.max.apply(this, arr1));

eg01

let arr1 = [10, 20, 30];
let arr2 = [...arr1, 40, 50];
console.log(arr1); // [ 10, 20, 30 ]
console.log(arr2); // [ 10, 20, 30, 40, 50 ]

eg02

let arr1 = [10, 20, 30];
let arr2 = [40, 50, 60];
let arrNew = [...arr1, ...arr2];
console.log(arrNew); // [ 10, 20, 30, 40, 50, 60 ]

eg03

// 求數組中的最大值
let arr1 = [10, 8, 7, 66, 65, 34];
console.log(Math.max(...arr1));
console.log(Math.max.apply(this, arr1));