javascript 第二节课

js 第二节课

变量和常量

变量

• 作用：数据共享，重复使用

let email = "aimin@php.cn";
console.log(email);
console.log(email);
console.log(email);

• 声明 let

let userName;
console.log(userName); //没有赋值 undefined
// 第一次赋值：初始化
userName = "天蓬元帅";
console.log(userName); // 天蓬元帅

// 第二次赋值：更新修改
userName = "灭绝师太";
console.log(userName); //灭绝师太
userName = null;
console.log(userName); //null

// 建议声明时直接初始化
let price = 90;

常量

• 概念：常量通常全大写，多个单词之间使用下划线
  因为常量不能被更新，所以声明时必须赋值（初始化）

• 声明 const

const GENDER = "female";
console.log(GENDER); //female
GENDER = "admin";
console.log(GENDER); //female

标识符（变常量内的定义字符）

• 命名规则：
  • 字母、数字、下划线、$组成
  • 并且禁止数字开头，错误示范：123abc， abc@123，
  • 严格区分大小写
  • 不能使用保留字或者关键字

let a = 10;
let A = 20;
console.log(a,A) // 10,20

let let = "abc";
console.log(let); // error!

命名方案

• 驼峰式：userName，unitPrice
• 帕斯卡式：UserName，UnitPrice 又称为大驼峰式，用在类/构造函数
• 蛇形式：user_name，unit_prise
• 匈牙利式：将数据类型放在变量的首尾
  • js 推荐使用驼峰式

const oBtn = docunment.querySelector("botton"); //对象
console.log(oBtn);
const aNumbers = [1, 2, 3];
console.log(Array.isArray(aNumbers)); // 数组

数据类型和运算符

数据类型

1. 原始类型：数值，字符串，布尔和特殊值：undefined、null
   提醒：一旦将数据类型确定，那么基于这个数据的允许的操作也就确定了
   通常只有相同类型的数据才在一起参与计算，这样的允许结果才有意义

let price = 99;
console.log(price, typeof price); // 99 类型：int
let email = "admin@php.cn";
console.log(email, typeof email); // admin@php.cn 类型：string

//布尔只有两个值： true真、false假
let isEmpty = true;
console.log(isEmpty, typeof isEmpty); // true ,bool

let num;
console.log(num, typeof num); // undefined
let obj = null;
console.log(obj, typeof null); // null , object

• 引用类型（对象）: 对象 object， 数组 array， 函数 function

函数是对象，那么函数可以添加属性或者方法

function getName() {}

getName.userName = "张老师"; //给函数添加userName属性
console.log(getName.userName);

let str = new String("hello world");
console.log(str.valueOf()); //hello world
//valueOf() 方法返回指定对象的原始值。

运算符

• + 除了表达加法，也是字符串拼接运行符

console.log(100 + Number("100")); // 200
console.log("admin" + "345"); // admin345

• ==:非严格判断，只检查值，不检查类型
  两边类型不同时，会自动触发类型的自动转换

• ===:要求值相等，且类型与相等才返回 true
  不会触发类型的自动转换

console.log(100 == "100"); //true

console.log(100 === "100"); // false
// 以后尽可能只能三个等号“===”

函数参数与函数

函数的声明与重写

声明与调用

• 使用 function 声明函数，并用 rentrun 用于返回值

function getName(name) {
  return "welcome to :" + name;
}

• 函数的调用

console.log(getName("悟空")); // welcome to :悟空

函数的重写

• 函数允许重写

function getName(name) {
  return "welcome to :" + name; // welcome to 悟空
function getName(name) {
  return "欢迎:" + name;// 欢迎悟空
}

• 因为命名函数会提升，哪怕调用语句写到了函数声明语句之前，也仍然可以进行调用

conlose.log(sum(2, 3)); //5

function sum(a, b) {
  return a + b;
}

• 如果不希望函数提升，要求必须先声明再使用，则可以使用匿名函数
• 补：匿名函数是将一个函数的声明作为值赋予给一个变量或者常量，通常用这个常量或者变量来引用这个函数

console.log(sum(2, 3)); //undified -- 无法找到sum

let sum = function (a, b) {
  return a + b;
};

console.log(sum(2, 3)); // 5

函数参数

必选参数

• 即 函数命名时小括号里面的参数

// 此时的（a ，b）是必须参数
let sum = function (a, b) {
  console.log(a, b);
  // 2 ， 1
  // 2 ， underfined
  return a + b;
};
console.log(sum(2, 1)); // 3
// 若在引用时缺少参数
console.log(sum(2)); //NaN--not a number

默认参数

• 可以给必选参数添加一个默认值,避免没添加参数时报错。

let sum = function (a, b = 10) {
  return a + b;
};
console.log(sum(1)); //11
console.log(sum(1, 15)); //16

归并参数

• rest 语法，将所有参数压倒一个数组中来简化参数的获取过程

• 当函数内需要多个参数时

let sum = function(a+b+c+d+e){
  return a+b+c+d+e;
}
console.log(sum(1,2,4,23,3)); //33

• 我们可以使用归并参数进行优化

let sum = function(...arr){
  console.log(arr); //arr--填进去的所有参数组成的一个数组
  let f = 0;
  for(i=0,i<arr.length,i++){
    f += arr[i];
  }
  renturn f;
}
console.log(sum(1,2,42,5,3,2,1,1)) //57

如何返回多个值

• 使用数组或者对象

function getUser() {
  return [10, "admin", "admin@php.cn"];
}
console.table(getuser());

function getUser() {
  return { id: 10, username: "admin", email: "admin@php.cn" };
}
console.table(getUser());

函数

高阶函数（回调函数）

• 使用函数为参数或者将函数作为返回值的函数

function demo(f) {
  console.log(f); // f会取代function的位置---f(){}
  return function () {
    return "abc";
  };

  let a = demo(function () {});
  console.log(a); //function() { return "abc"} --打印函数
  cnsole.log(a()); // abc
}
document.addEventListener("click", function () {
  alert("大家晚上好");
});

偏函数（函数柯里化）

let sum = function(a,b){
  renturn function(c,d){
    //里层函数可以调用外层函数的参数
    return a+b+c+d;
  };
};
ley f1 = sum(1,2);
// f1 是sum的返回值，是函数
console.log(fi(3,4)); //10

sum = function(a){
  return function(b){
    return function(c){
      return function(d){
        return a+b+c+d;
      };
    };
  };
};

let res = sum(1)(2)(3)(4);
console.log("res=",res); //res=10

纯函数

• 在函数内部没有引用外部数据的函数

let c = 100;

function add(a, b) {
  // 此时函数的所有参数都是调用者传入的
  return a + b;
}

function add1(a, b) {
  // C 来自函数外部，不是函数本身的，所有此函数不是纯函数
  return a + b + c;
}

箭头函数

• 可以简化匿名函数
• 如果函数中要使用到 this，就不要使用箭头函数，并且不能当构造函数用

let sum = function (a, b) {
  return a + b;
};
// 使用箭头函数简化上列函数
sum = (a, b) => {
  return a + b;
};
// 如歌代码体只有一行语句，可以删除大括号，自带return
sum = (a, b) => a + b;

立即执行函数

• 声明调用二合一，声明后直接立即执行
• 一旦将代码快用一个立即执行函数套住，那么内部声明的变量，就不会泄露到全局中
• 格式：（）（）

function sum(a, b) {
  console.log(a + b);
}
sum(10, 2); //12
//使用立即执行函数
(function (a, b) {
  console.log(a + b);
})(10, 2); //12

(function () {
  if (ture) {
    var b = 100;
  }
})();
console.log(b); //underfider