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));