js引入方式
引入方式效果图
代码实现
<!DOCTYPE html><html lang="en"><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>JS的引入方式</title></head><body><!-- 外部鸡屎代码 --><!-- function FsayHello(content) {document.write(content + "<br>");} --><!-- JS外部引用方式 --><script src="jswb.js"></script><script>FsayHello('今日系鱼人节，兄弟姐妹们收好你地条尾啦~~');</script><!-- JS内部引用方式 --><script>document.write('万一被人踩到，就扑街咯~~~</br>')console.log('学个鸡屎学到头晕、身庆')</script><!-- 属性事件方式 --><button onclick="alert('学鸡屎的难度系数：\n 五颗星！！！')">收到</button></body></html>
变量与常量的声明与使用方式
命名方式;
1) 由字母，数字，下划线，$组成，禁止数字开头.
2) 严格区分大小写.
3) 不能使用系统关键字和保留字命名方案;
1) 驼峰式【推荐使用】:userName;
2) 帕斯卡式【大驼峰】:UserName 常应用与类及构造函数
3) 蛇形式：user_name
4) 匈牙利式：oBtn 将数据类型放在变量最前面 aNmubers常量的值不允许被修改
<!DOCTYPE html><html lang="en"><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>变量与常量的使用方式</title></head><body><!-- 命名方式;由字母，数字，下划线，$组成，禁止数字开头，严格区分大小写 ，不能使用系统关键字和保留字命名方案;驼峰式【推荐使用】:userName;帕斯卡式【大驼峰】:UserName 常应用与类及构造函数蛇形式：user_name匈牙利式：oBtn 将数据类型放在变量最前面 aNmubers --><script>let a = 1;let A = 2;// 以上两个变量是不同的// 判断变量是否为数组使用命令:Array.isArray(变量)返回值为布尔型true,false;// 变量的数据类型:// 1.原始类型：数值，字符串，布尔// boolean[布尔型]\null[空值]\number[数值]\string[字符串]\undefined[未定义]\// typeof 变量 ，可以查看变量的类型let price = 999;console.log(price, typeof price);let userName = "php";console.log(userName, typeof userName);// 把变量赋值为null即可userName = null;// 将原始值以某种规则进行组合，就构成了复合类型;// 引用类型（对象）：对象(Object),数组（array），函数(function)// 函数允许添加属性或方法// 生成一个字符串let str = new String('hello word');// console.log(str);// 拿到字符串的原始值console.log(str.valueOf());let sum = 200;sun = sum++ + ++sum;console.log(sum);// 为什么会等于202呢？// 下面解析说明一下let sum1 = 10;document.write(sum1++, ",", sum1, "<br>")// 第一个sum1++这个时候输出仍为10 ,后面的sum1才得到自增后的结果document.write(++sum1, ",", sum1)// 第一个sum1++这个时候输出为12，再11的基础上自增了1并赋值给了自己// 所以 上面的sum算式理解为 200 +（201+1）=202// 常量的值不允许被修改const myName = "Tigon";</script></body></html>
函数与高阶函数，函数参数，归并参数、箭头函数的语法与使用场景、执行函数的语法与使用方式实例演示
代码区
<!DOCTYPE html><html lang="en"><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>函数与高阶函数</title></head><body><!-- 函数允许重写 --><script>console.log(sum(50));function sum(num) {let m = 0;for (let i = 0; i <= num; i++) {m += i;}return m;}// 如果不希望函数提升，必须先声明再使用，可以使用匿名函数// 通过变量或者常量来引用这个函数let sum1 = function (num) {let m = 0;for (let i = 0; i <= num; i++) {m += i;}return m;}console.log(sum1(50));// ...归并参数，rest语法，将所有参数压到一个数组中来简化参数的获取过程let sum2 = function (...arr) {let k = 0;for (let index = 0; index < arr.length; index++) {k += arr[index];}return k;}console.log(sum2(1, 2, 3, 4));let sum3 = function (...arr) {// reduce 计算数组所有内容求和return arr.reduce((p, c) => p + c);}console.log(sum3(1, 2, 3, 4));//返回多个值的办法,用数组或者对象返回function getuser() {return { id: 1, name: "php", email: "php@qq.com" };}console.table(getuser());// 高阶函数：使用函数为参数或者将函数做为返回值的函数// 函数作为参数传参的就是回调函数// 1.回调函数document.addEventListener("click", function () {alert("大家晚上好");});// 2.偏函数let sum4 = function (a, b) {return function (c, d) {return a + b + c + d;}}let f1 = sum4(1, 2);console.log(f1(3, 4));// 进一步优化,柯里化sum4 = function (a) {return function (b) {return function (c) {return function (d) {return a + b + c + d;}}}}let res = sum4(1)(2)(3)(4);console.log(res);// 纯函数，没有引入外部变量的，如果引入了就不是纯函数了let ccc = 100;function add(a, b) {return a + b + c;// 这里去掉C就是纯函数了}// 箭头函数let sum5 = function (a, b) {return a + b;}// 简化 匿名函数可以使用箭头函数来简化它sum5 = (a, b) => {return a + b;}console.log(sum5(10, 20));// 可以再次简化， 如果箭头函数的代码体只有一行语句，可以删除大括号，同时return也要去掉,因为自动了return功能sum5 = (a, b) => a + b;//如果只有一个参数的时候参数的括号也可以去掉，不过不建议去掉，容易搞混console.log(sum5(20, 20));// 立即置行函数(这里放函数)(这里放参数) --IIFE(function add2(a, b) {console.log(a + b);})(100, 200);// 因为是立即调用的关系可去掉函数名function (a, b) {console.log(a + b);}) (100, 200);</script></body></html>