1.js引入方式
1.内部脚本
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js引入方式一</title></head><body><script>alert('hello world!!!');</script></body></html>
2.外部脚本
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js引入方式</title></head><body><script src="demo.js"></script></body></html>
3.内联脚本
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js引入方式</title></head><body><h1 onclick="alert('hello world!')">hello world!</h1></body></html>
2.变量与常量的声明与使用方式
1.变量声明
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js引入方式</title></head><body><script>let a = '123';// 切记变量不可重复定义，但可以进行更新console.log(a)a ='321';console.log(a)</script></body></html>
效果图
2.常量声明
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js引入方式</title></head><body><script>const A = '123';console.log(A)// 常量定义后不能更新A = '321';console.log(A)</script></body></html>
效果图
3.函数
1.普通函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>function getName(name) {return 'hello' + name;}console.log(getName('地球'))</script></body></html>
2.匿名函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>// 匿名函数就是将一个函数的声明作为值赋给一个变量或常量let sum = function (a,b) {return a + b;}console.log(sum(1,2));</script></body></html>
3.函数的归并参数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>归并参数</title></head><body><script>let sum = function (...arr) {console.log(arr);return arr.reduce((p, c)=>p + c);}console.log(sum(1,2,3,4))</script></body></html>
4.高阶函数：回调函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>高阶函数</title></head><body><!-- 高阶函数：使用函数作为参数或者将函数作为返回的函数--><script>function demo(f) {console.log(f)return function f1() {return 'abc';}}// 函数作为参数,这就是回调函数let a = demo(function () {});console.log(a());</script></body></html>
5.高阶函数：偏头函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>偏头函数</title></head><body><script>// 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);// 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;}}}}console.log(sum(1)(2)(3)(4));</script></body></html>
6.纯函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>纯函数</title></head><body><script>let c = 100;function add(a,b) {// return a+b+c;// 去掉c就是纯函数return a+b;}console.log(add(1,2))</script></body></html>
7.箭头函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>箭头函数</title></head><body><script>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;console.log(sum(3,2));// 如果只有一个参数，连参数列表的圆括号都可以删除let tips = (name) => console.log(100+name);tips(123);// 如果函数中要用到this，就不要用箭头函数了，不能当构造函数用</script></body></html>
8.立即执行函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>立即执行函数(IIFE)</title></head><body><script>//声明let sum = (a,b) => console.log(a+b);sum(100,200);//调用// 立即执行函数((a,b) => console.log(a+b))(100.200);// 在很久之前，js是不支持块作用域// if (true) {// var b = 100;// }(function () {if (true) {// 一旦将代码块用一个立即执行函数套住，那么内部声明的变量b就不会泄露到全局var b = 100;}})()console.log(b);</script></body></html>
