一、 js 引入方式

1.行内脚本

<style>
  .active {
    color: red;
    background-color: yellow;
  }
</style>
<h1>www.php.cn</h1>
<!-- 事件属性,与某一个事件绑定, on+事件名称, 点击事件 on + click -->
<!-- 1. 行内脚本,直接与一个元素的事件属性绑定 -->
<button onclick="document.querySelector('h1').classList.toggle('active')">Click</button>

2.内部脚本

<style>
  .active {
    color: red;
    background-color: yellow;
  }
</style>
<h1>www.php.cn</h1>
<button onclick="toggleColor()">Click</button>

<!-- 2. 内部脚本,将js代码写到一对script标签中 -->
<script>
  function toggleColor() {
    document.querySelector("h1").classList.toggle("active");
  }
</script>

3.外部脚本

<!-- 3.外部脚本,实现了js代码的共享 -->
<script src="toggle.js"></script>

二、变量与常量

1.变量(let)：数据共享,重复使用

// 1. 变量
// 声明
let userName;
console.log(userName); // undefined
// 第一次赋值: 初始化
userName = '小明';
console.log(userName); // 小明
// 第二次赋值: 更新,修改
userName = '小华';
console.log(userName); // 小华
// 变量赋值为 null,将被删除
userName = null;
console.log(userName);

// 推荐声明时直接初始化
let price = 99;
price = 199;

2.常量(const)

常量通常全大写，多个单词之间使用下划线;因为常量不能被更新,所以声明时必须赋值(初始化)

const GENDER = 'female';
console.log(GENDER);

3.标识符

标识符：字母，数字，下划线，$,并且禁止数字开头;严格区分大小写;不能使用保留字或关键字

// 字母，数字，下划线，$,并且禁止数字开头, 123abc, abc@123,
// 严格区分大小写
let a = 10;
let A = 20;
console.log(a, A);

// 不能使用保留字或关键字
let let1 = "abc";
console.log(let1);

4.命名方式

// 驼峰式: userName, unitPrice; 推荐使用
// 帕斯卡式: UserName, UnitPrice, 大驼峰式,用在类/构造函数
// 蛇形式: user_name, unit_price
// 匈牙利式: 将数据类型放在变量的最后前
const oBtn = document.querySelector("button");
console.log(oBtn);
const aNumbers = [1, 2, 3];
console.log(Array.isArray(aNumbers));

三、数据类型

1.原始类型

// 一旦将数据类型确定,那么基于这个数据的允许的操作也就确定了
// 1. 原始类型: 数值,字符串, 布尔,  undefined, null 特殊值
let price = 999;
console.log(price, typeof price);
let email = "admin@php.cn";
console.log(email, typeof email);
// 布尔只有二个值,true真,false假
let isEmpty = true;
console.log(isEmpty, typeof isEmpty);

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

2.引用类型(对象)

// 2. 将原始值以某种规则进行组合,就构成了复合类型
// 引用类型(对象): 对象 object, 数组 array, 函数 function
function getName() {}

// 既然函数是对象,那么对象就允许添加属性或方法
getName.userName = "朱老师";
console.log(getName.userName);

let str = new String("hello world");
console.log(str.valueOf());

// 通常只有相同类型的数据才在一起参与计算，这样的运行结果才有意义
console.log(100 + 100);
// + 除了表示加法,也是字符串拼接运行符
console.log(100 + "100", typeof (100 + "100"));
console.log(100 + Number("100"));

// "==":非严格判断,只检查值,不检查类型
// "==", 二边类型不同时，会自动触发类型的自动转换
console.log(100 == "100");
// "===": 要求值相等,且类型与相等才返回true
// '===': 不会触发类型的自动转换
console.log(100 === "100");

// 以后尽可能只能三个等号"==="

四、函数提升与重写

函数是一个可重用的代码块，用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复书写相同代码。

// 声明 
function getName(name) {
    return "welcome to: " + name;
}
// 调用,按名
console.log(getName('天蓬老师')); 
// 函数允许重写
  function getName(name) {
      return "欢迎: " + name;
  }

// 调用语句写到了函数声明语句之前
// console.log(sum(1,6));
// 1. 命名函数声明提升
// function sum(a,b) {
//     return a + b;
// }

// 如果不希望函数提升,必须先声明再使用，用匿名函数
let sum =function (a,b) {
      return a + b;
  };
console.log(sum(1,6));

// 匿名函数就是将一个函数的声明做为值赋值给一个变量或常量
// 通常这个变量或常量来引用这个函数

五、函数的参数与返回值

• 函数的参数：必选参数，默认参数，归并参数

// 1.必选参数,函数调用时需要传两个值
let sum = function (a, b) {
  return a + b;
};
sum(1, 2);

// 2.默认参数：函数调用时可只传一个值，b 使用默认值 10
sum = function (a, b = 10) {
  return a + b;
};
sum(1);

// 3.归并参数,rest语法,将所有参数压到一个数组中来简化参数的获取过程
sum = function (...arr) {
  // 获取传入数值，逐个相加
  let t = 0;
  for (let i = 0; i < arr.length; i++) {
    t += arr[i];
  }
  return t;
  //   return arr.reduce((p, c) => p + c);
};
sum(1, 2, 3, 4, 5, 6, 7);

• 函数的返回值

// 返回一个值
function getName() {
  return username;
}

// 返回多个值,使用数组或对象
function getUser() {
  return { id: 10, username: "admin", email: "admin@php.cn" };
}
console.table(getUser());

六、高阶函数

1.高阶函数概念

// 高阶函数: 使用函数为参数或者将函数做为返回的函数
function demo(f) {
  return function () {
    return "abc";
  };
}

// 函数做为参数,这就是传说中的:回调函数
let a = demo(function () {});
console.log(a);
console.log(a());

2.高级函数的应用

// 1. 回调函数
document.addEventListener("click", function () {
  alert("大家晚上好");
});
// 2. 偏函数
//   let sum = function (a, b, c, d) {
//     return a + b + c + d;
//   };
let sum = function (a, b) {
  return function (c, d) {
    return a + b + c + d;
  };
};
let f1 = sum(1, 2);
console.log(typeof f1);// f1是一个函数
console.log(f1(3, 4));

// 3.柯里化
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);

// 4.纯函数: 在函数内部没有引用外部数据的函数
let c = 100;
function add(a, b) {
  // c来自函数外部,不是我自己的
  // return a + b + c;
  // 去掉c就是纯函数,此时函数的所有参数都必须是通过调用者传入的
  return a + b;
}
console.log(add(1, 2));

七、箭头函数

// 匿名函数: 是将一个函数的声明做为值赋值给一个变量或常量，通常这个变量或常量来引用这个函数
let sum = function (a, b) {
  return a + b;
};
// 匿名函数,可以使用箭头函数来简化它
sum = (a, b) => {
  return a + b;
};
console.log(sum(10, 20));

// 如果箭头函数的代码体只有一行语句,可以删除大括号,自带return 功能
sum = (a, b) => a + b;
// 如果只有一个参数,连参数列表的圆括号 都可以删除
let tips = (name) => console.log("欢迎: " + name);
tips("php中文网的学员");

// 如果函数中要使用到this,就不要用箭头函数,不能当构造函数用

八、立即执行函数( IIFE )

声明调用二合一, 声明后直接执行,使用()()实现

// 立即执行函数: 声明调用二合一, 声明后直接执行
(function (a, b) {
  console.log(a + b);
})(100, 600);

// 在很久很久之前,js是不支持块作用域
// if (true) {
//   var b = 100;
// }

(function () {
  if (true) {
    // 一旦将代码块用一个立即执行函数套住,那么内部声明的变量b就不断泄露到全局中
    var b = 100;
  }
})();

console.log(b);