目录

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相关推荐

  1. 2018-06-30 第十九次课 课后笔记

    第十九课预习任务 11.25 配置防盗链 11.26 访问控制Directory 11.27 访问控制FilesMatch 11.28 限定某个目录禁止解析php 11.29 限制user_agent ...

  2. 管理学(第二课)笔记

    管理学(第二课)笔记 前言 统计:60%想了解管理学.25%想考研.15%为其他. 有决定.有态度.有方法: 不划重点:慕课学习.上课学习: 不直接念PPT. 问卷,预访谈,沟通: 我的看法. 之前原 ...

  3. 会计学(第二课)笔记

    会计学(第二课)笔记 前言 会计学内容没管理学好学.知识好零散,没有思维导图.教材上的重点不突出,猛地一下还找不到知识点. 但还是需要提前学,走在前头,才不怕掉了链子跟不上,被滚雪球. 学习永远都是越 ...

  4. 深度学习笔记第二门课 改善深层神经网络 第一周:深度学习的实践层面

    本文是吴恩达老师的深度学习课程[1]笔记部分. 作者:黄海广[2] 主要编写人员:黄海广.林兴木(第四所有底稿,第五课第一二周,第三周前三节).祝彦森:(第三课所有底稿).贺志尧(第五课第三周底稿). ...

  5. 【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第二十一课:Cocos2D-X网格特效1-3

    [麦可网]Cocos2d-X跨平台游戏开发---学习笔记 第二十一课:Cocos2D-X网格特效1-3 ================================================ ...

  6. [北大肖臻-区块链技术与应用笔记]第二节课

    文章目录 [北大肖臻-区块链技术与应用笔记]第二节课 一.哈希指针 二.区块链 三.Merkle Tree 结点 参考资料 [北大肖臻-区块链技术与应用笔记]第二节课 一.哈希指针 普通的指针存储的是 ...

  7. 微观经济学(第二课)笔记

    微观经济学(第二课)笔记 教材:<微观经济学>张雪峰著(第二版) 教师:张雪峰,毕业于清华大学经济管理学院,获数量经济学博士学位.主要研究领域是博弈论与机制设计.计量经济分析. 前言 之前 ...

  8. 比特鹏哥第二节课笔记

    c语言第二节课 使用部分c语言库的时候vs2010会提醒 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HECFY2ou-1649683114214)(C:\Users ...

  9. 在等吴恩达深度学习第5课的时候,你可以先看看第4课的笔记

    大数据文摘作品 编译:党晓芊.元元.龙牧雪 等待吴恩达放出深度学习第5课的时候,你还能做什么?今天,大数据文摘给大家带来了加拿大银行首席分析师Ryan Shrott的吴恩达深度学习第4课学习笔记,一共 ...

  10. EDA实验课课程笔记(四)——TCL脚本语言的学习2

    EDA实验课课程笔记(四)--TCL脚本语言的学习2 控制流 if 循环命令 while for foreach break和continue命令 switch source 过程(procedure ...

最新文章

  1. vue后台增删改查_Vue 原生实现商城购物车增删改查
  2. 19-7-14 学习笔记
  3. spring_security权限应用
  4. python循环指令_Python循环
  5. 提高你的Java代码质量吧:使用valueof前必须进行校验
  6. RabbitMq、ActiveMq、ZeroMq、kafka比较
  7. dnf显示与服务器数据异常怎么办啊,DNF:你这该死的数据异常网络中断连接,让我心在痛泪在流...
  8. 带圆圈的数字和markdown常用表达式记录
  9. 程序人生之六:写在 2010 年最后一晚,我这两年的工作总结
  10. Notepad++的列编辑模式_小技巧
  11. 接入交换机下pc获取不了ip问题处理
  12. 多指标评价方法-变异系数法的pathon实现
  13. dns被劫持怎么办、如何完美解决网站DNS域名被劫持
  14. 反弹shell,报错 ambiguous redirect
  15. 使用IE浏览器下载文件,文件名乱码问题
  16. 关于4G 5G 基站覆盖范围的几个重要数据
  17. 仿某板兔网站源码 laysns模版 基于laysns系统开发 2.55可用
  18. ak09918c磁力计参数文档
  19. 每个程序员1小时内必须解决的5个编程问题
  20. 将自己的jar上传到mavn仓库中遇到的问题

热门文章

  1. Windows 10 文件名太长 无法删除 复制 重命名
  2. Spring核心接口ObjectProvider
  3. 抖音新版抓包方案,绕过sslpinning 直接修改so
  4. 【深度相机系列五】脑补了和库克的对话后,我发现了iPhone X深度相机选择的秘诀和方法
  5. C++计算三角形周长和面积
  6. 计算机信息技术结束语,新学期初二年级计算机信息技术课第四节结尾
  7. 阿里云高校训练营-class6-感悟
  8. 支持笔锋效果的手写签字控件
  9. C++ - std::srand
  10. 三角学(一)公式,恒等式,函数和难题