Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:
引入方式效果图
代码实现
<!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>