js引入方式
<!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>Document</title><style>.aa {color: red;}</style></head><body><h1>你好</h1><!-- 1. 行内脚本,直接与一个元素的事件属性绑定 --><!-- <button onclick="document.querySelector('h1').classList.toggle('aa')">Click</button> --><button onclick="toggleColor()">Click</button><!-- 2. 内部脚本,将js代码写到一对script标签中 --><!-- <script>function toggleColor() {document.querySelector("h1").classList.toggle("aa");}</script> --><!-- 3.外部脚本,实现了js代码的共享 --><script src="toggle.js"></script></body></html>
变量与常量的声明与使用方式
变量是用于存放数值的容器
要使用变量,先要声明变量
// 声明变量let userName;// 第一次赋值: 初始化userName = "你好"// 第二次赋值: 更新,修改userName = "再见";
函数与高阶函数
JavaScript 使用关键字 function 定义函数。
高阶函数: 使用函数为参数或者将函数做为返回值的函数
<script>//回调函数:函数做为参数document.addEventListener("click", function () {alert("大家晚上好");});// 2. 偏函数:将函数做为返回值let sum = function (a, b) {return function (c, d) {return a + b + c + d;};};let f1 = sum(1, 2);// f1是一个函数console.log(typeof f1);console.log(f1(3, 4));// 柯里化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);// 纯函数: 在函数内部没有引用外部数据的函数let c = 100;function add(a, b) {// c来自函数外部// return a + b + c;// 去掉c即为纯函数,此时函数的所有参数都必须是通过调用者传入的return a + b;}console.log(add(1, 2));</script>
函数的参数
<script>// 函数都是单值返回// 必选参数let sum = function (a, b) {return a + b;};// console.log(sum(1, 2));console.log(sum(1));// 默认参数sum = function (a, b = 10) {return a + b;};console.log(sum(1));console.log(sum(1, 15));// 归并参数,rest语法,将所有参数压到一个数组中来简化参数的获取过程sum = function (...arr) {console.log(arr);return arr.reduce((p, c) => p + c);};console.log(sum(1, 2, 3, 4, 5, 6, 7));// 返回多个值,使用数组或对象function getUser() {return [10, "admin", "admin@php.cn"];}function getUser() {return { id: 10, username: "admin", email: "admin@php.cn" };}console.table(getUser());</script>
箭头函数的语法与使用场景
<script>let sum = function (a, b) {return a + b;};//匿名函数,可以使用箭头函数来简化它sum = (a, b) => {return a + b;};console.log(sum(10, 20));//如果箭头函数的代码体只有一行语句,可以删除大括号与returnsum = (a, b) => a + b;//如果函数中要使用到this,就不要用箭头函数,不能当构造函数用</script>
立即执行函数的语法与使用方式
立即执行函数可以将声明调用二合一, 声明后直接执行
<script>(function (a, b) {console.log(a + b);})(100, 600);</script>
