JavasScript 第二天课 课后笔记 2022.3.24
目录
1.引用方式
2.常量
3.数据类型
4.函数的提升与重写
5.函数的参数与返回值
6.高阶函数
7.箭头函数
8.立即执行函数(IIFE)
1.引用方式
事件属性:事件属性都有一个前缀,就是 on
事件属性,与某一个事件绑定,on+事件名称 如:on +click
普通属性
在button中加入的 class="a" id="b" 属于普通属性
<button οnclick="alert(1)">Click</button>
这时点击Click按钮会有一个弹窗显示1
1.行内脚本,直接与一个元素的事件属性绑定
<button οnclick="document.querySelector('h1').classList.toggle('active')">Click</button>
2.内部脚本,将js代码写到一对script标签中
<script>
function toggleColor() {
document.querySelector('h1').classList.toggle('active');
}
</script>
3.外部脚本,实现了js代码的共享
<script src="toggle.js"></script>
2.常量
<button>Btn</button>
传统的方式,在es6之前没有常量
"peter@php.cn":字面量,直接量
变量:可以实现数据的共享,数据的重复使用
let email = "admin@php.cn";//变量
console.log("email");
console.log("email");
console.log("email");
1.变量:用let进行声明
声明
let userName;
console.log(userName);//underfined
第一次赋值:初始化
userName = '天蓬老师';
console.log(userName);
第二次赋值:更新,修改
userName = '灭绝老师';
console.log(userName);
userName = null;
console.log(userName);
推荐声明是直接初始化
let email = "admin@php.cn";
let price = 99;
price = 199;
2.常量, 常量通常全大写,多个单词之间使用下划线,常量不能用 let 声明,要用 const
因为常量不能被更新,所以声明时必须赋值(初始化)
const GENDER = "female";
gender = "male";
console.log(GENDER);//推荐首选常量
3.标识符
只允许使用字母,数字,下划线,$,并且禁止数字开头
严格区分大小写
let a = 10;
let A = 20;
console.log(a, A)
//let a = 10; let A = 20; 是两个变量
不能保留字或关键字,比如家里装电话号码不能110,120等有特殊性,要特殊保留的
错误师范
let let = "abc";
console.log(let);
正确示范
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));
js推荐使用:驼峰式
3.数据类型
一旦将数据类型确定,那么基于这个数据的允许的操作也就确定了
console.log(100 * 3); *号两边的数值类型需要一样
1.原始类型:数值,字符串,布尔
let price = 999;
console.log(price, typeof price);
let email = 'admin@php.cn';
console.log(email, typeof email);
//布尔只有两个值,ture真,false假
let isEmpty = ture;
console.log(isEmpty, typeof isEmpty);
//undefined, null 特殊值
let num;
console.log(num, typeof num);
let obj = null;
console.log(obj, typeof null);
2.将原始值以某种规则进行组合,就构成了复合类型
//引用类型(对象):对象 object,数组 array,函数 function
function getName() { }
既然函数是对象,那么对象就允许添加属性或方法
getName.userName = '朱老师';
console.log(fetName.useName);
let str = new String("hello world");
console.log(str.valueOf());
类型转换:通常只有相同类型的数据才在一起参与计算,这样的运行结果才有意义
console.log(100 + 100); //200
// + 除了表示加法,也是字符串拼接运输符
console.log(100 + "100", typeof (100 + "1000")); //100 100
console.log(100 + Number("100")); //200
//"==":非严格判断,只检查值,不检查类型
//"==":两边类型不同时,会自动触发类型转的自动转换
console.log(100 == "100");
//"===":要求值相等,且类型与相等才返回ture
//'===':不会触发类型的自动转换
console.log(100 === "100");
// 以后尽可能只用三个等号"==="
4.函数的提升与重写
声明语句,一个函数一定要有返回值
function getName(name) {
console.log('Wellcome to', name);
return "welcome:" + name
}
调用语句
getName('天蓬老师');
console.log(getName('天蓬老师'));
函数允许重写 (严谨来说应该叫:函数声明的提升)
function getName(name) {
return "欢迎:" + name;
}
调用语句可以写到函数声明语句之前,输出结果一样
console.log(sum(1, 6));
//1.命名函数声明提升
function sum(a, b) {
return a + b;
}
//如果不希望函数提升,必须先声明再使用,用匿名函数
// 匿名函数:就是把function后面的名字 sum 删了,不要了,在function前面声明一个变量来引用它
let sum = function (a, b) {
return a + b;
};
console.log(sum(1, 6));
// 匿名函数就是将一个函数的声明作为值,赋值给一个变量或常量
//通常这个变量或常量来引用这个函数
5.函数的参数与返回值
函数都是单值返回,如果没有设参数,空值时,默认返回值为undefined
必选参数
let sum = function (a, b) {
console.log(a, b);
return a + b;
// NaN:not a number
// return a + undefined;
};
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));
sum = function (a, b, c, d) {
return a + b + c + d
};
console.log(sum(1, 2, 3, 4));
归并参数,rest语法,将所有参数压到一个数组中来简化参数的获取过程
sum = function (...arr) {
console.log(arr)
let t = o;
for (let i = 0; i < arr.length; i++) {
t += arr[i];
}
return t;
//reduce()
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());
6.高阶函数
高阶函数:使用函数为参数或者将函数做为返回值的函数
function demo(f) {
console.log(f);
return function () {
return "abc";
};
}
函数做为参数,这就是传说中的:回调函数
let a = demo(function () {});
console.log(a);
console.log(a());
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);
// f1是一个函数
console.log(typeof fi);
console.log(f1(3, 4));
//柯里化
sum = function (a) {
return function (b) {
return function (c) {
return function (d) {
return a + b + c + d;
};
};
};
};
纯函数:在函数内部没有引用外部数据的函数
let c = 100
function add(a, b) {
//c来自函数外部,不是我自己的
// return a + b + c;
//去掉c就是纯函数,此时函数的所有参数都必须是通过调用者传入的
return a + b;
}
console.log(add(1, 2));
7.箭头函数
匿名函数
let sum = function (a, b) {
return a + b;
};
匿名函数,可以使用箭头函数来简化它
sum = (a, b) => {
return a + b;
};
console.log(sum(1, 4));
进一步简化 如果箭头函数的代码体只有一行语句,可以删除大括号,自带return功能
sum = (a, b) => a + b;
// 如果只有一个参数,连参数列表的圆括号 都可以删除
let tips = (name) => console.log("欢迎:" + name);
tips("php中文网的学员");
如果函数中使用到this,就不要用箭头函数,不能当构造函数用
8.立即执行函数(IIFE)
声明
function sum(a, b) {
console.log(a + b);
}
调用
sum(100, 200);
立即执行函数,声明合二为一,声明后直接执行
(function (a, b) {
console.log(a + b);
})(100, 600);
在很久很久之前,js是不支持块作用域
if (true) {
var b = 100;
}
(function () {
if (true) {
var b = 100;
}
})()
console.log(b);
一旦将代码块用一个立即执行函数套住,那么内部声明的变量b就不会泄露到全局中
JavasScript 第二天课 课后笔记 2022.3.24相关推荐
- 2018-06-30 第十九次课 课后笔记
第十九课预习任务 11.25 配置防盗链 11.26 访问控制Directory 11.27 访问控制FilesMatch 11.28 限定某个目录禁止解析php 11.29 限制user_agent ...
- 管理学(第二课)笔记
管理学(第二课)笔记 前言 统计:60%想了解管理学.25%想考研.15%为其他. 有决定.有态度.有方法: 不划重点:慕课学习.上课学习: 不直接念PPT. 问卷,预访谈,沟通: 我的看法. 之前原 ...
- 会计学(第二课)笔记
会计学(第二课)笔记 前言 会计学内容没管理学好学.知识好零散,没有思维导图.教材上的重点不突出,猛地一下还找不到知识点. 但还是需要提前学,走在前头,才不怕掉了链子跟不上,被滚雪球. 学习永远都是越 ...
- 深度学习笔记第二门课 改善深层神经网络 第一周:深度学习的实践层面
本文是吴恩达老师的深度学习课程[1]笔记部分. 作者:黄海广[2] 主要编写人员:黄海广.林兴木(第四所有底稿,第五课第一二周,第三周前三节).祝彦森:(第三课所有底稿).贺志尧(第五课第三周底稿). ...
- 【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第二十一课:Cocos2D-X网格特效1-3
[麦可网]Cocos2d-X跨平台游戏开发---学习笔记 第二十一课:Cocos2D-X网格特效1-3 ================================================ ...
- [北大肖臻-区块链技术与应用笔记]第二节课
文章目录 [北大肖臻-区块链技术与应用笔记]第二节课 一.哈希指针 二.区块链 三.Merkle Tree 结点 参考资料 [北大肖臻-区块链技术与应用笔记]第二节课 一.哈希指针 普通的指针存储的是 ...
- 微观经济学(第二课)笔记
微观经济学(第二课)笔记 教材:<微观经济学>张雪峰著(第二版) 教师:张雪峰,毕业于清华大学经济管理学院,获数量经济学博士学位.主要研究领域是博弈论与机制设计.计量经济分析. 前言 之前 ...
- 比特鹏哥第二节课笔记
c语言第二节课 使用部分c语言库的时候vs2010会提醒 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HECFY2ou-1649683114214)(C:\Users ...
- 在等吴恩达深度学习第5课的时候,你可以先看看第4课的笔记
大数据文摘作品 编译:党晓芊.元元.龙牧雪 等待吴恩达放出深度学习第5课的时候,你还能做什么?今天,大数据文摘给大家带来了加拿大银行首席分析师Ryan Shrott的吴恩达深度学习第4课学习笔记,一共 ...
- EDA实验课课程笔记(四)——TCL脚本语言的学习2
EDA实验课课程笔记(四)--TCL脚本语言的学习2 控制流 if 循环命令 while for foreach break和continue命令 switch source 过程(procedure ...
最新文章
- vue后台增删改查_Vue 原生实现商城购物车增删改查
- 19-7-14 学习笔记
- spring_security权限应用
- python循环指令_Python循环
- 提高你的Java代码质量吧:使用valueof前必须进行校验
- RabbitMq、ActiveMq、ZeroMq、kafka比较
- dnf显示与服务器数据异常怎么办啊,DNF:你这该死的数据异常网络中断连接,让我心在痛泪在流...
- 带圆圈的数字和markdown常用表达式记录
- 程序人生之六:写在 2010 年最后一晚,我这两年的工作总结
- Notepad++的列编辑模式_小技巧
- 接入交换机下pc获取不了ip问题处理
- 多指标评价方法-变异系数法的pathon实现
- dns被劫持怎么办、如何完美解决网站DNS域名被劫持
- 反弹shell,报错 ambiguous redirect
- 使用IE浏览器下载文件,文件名乱码问题
- 关于4G 5G 基站覆盖范围的几个重要数据
- 仿某板兔网站源码 laysns模版 基于laysns系统开发 2.55可用
- ak09918c磁力计参数文档
- 每个程序员1小时内必须解决的5个编程问题
- 将自己的jar上传到mavn仓库中遇到的问题