第一绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//什么是函数?
/*
1.什么是函数?
函数是专门用于封装代码的, 函数是一段可以随时被反复执行的代码块
2.函数格式
function 函数名称(形参列表){
被封装的代码;
}
*/
function toLeft()
{
console.log("打左转向灯");
console.log("踩刹车");
console.log("向左打方向盘");
console.log("回正方向盘");
}
function toRight()
{
console.log("打右转向灯");
console.log("向右打方向盘");
console.log("回正方向盘");
}
toLeft();
// 向右变道
toRight();
// 向左变道
toLeft();
</script>
</body>
</html>优点：减少重复代码。。
第二绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//减少重复的代码把。
function getSum(a,b)
{
let res=a b;
return res;
}
let num1 = 10;
let num2 = 20;
let result = getSum(num1, num2);
console.log(result);
</script>
</body>
</html>
第三绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function getSum(a, b) {
console.log(a, b);
return a b;
}
let res = getSum(10, 20)
</script>
</body>
</html>
//记住，核心是return返回的值返回到原来调用的函数的地方哈，然后传给res.//关于函数可以有形参变量也可以没有形参变量，没有就是0，有就是等于大于1 //什么是形参? //定义function时的右边的括号()里面的参数叫做形参. //比如 //function say() //{ // //} //一个函数function中可以有返回值也可以没有. //函数没有通过return明确返回值, 默认返回undefined /4.return的作用和break相似, 所以return后面不能编写任何语句(永远执行不到) // break作用立即结束switch语句或者循环语句 // return作用立即结束当前所在函数 / 什么是实参? 调用函数时把值传入function里面的形参里面,我们把值叫做实参. function getSum(a, b) { console.log(a, b); return a b; } // let res = getSum(10, 20); //定义实参的目的是把值传给形参. //示例一下 */
第四绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function getSum() {
console.log(arguments);
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
let res = getSum(10, 20, 30, 40);
console.log(res);
</script>
</body>
</html>
// 注意点: 每个函数中都有一个叫做arguments的东东 //arguments其实是一个伪数组
代码语言：javascript复制/*
1.因为console.log();也是通过()来调用的, 所以log也是一个函数
2.log函数的特点
可以接收1个或多个参数
3.为什么log函数可以接收1个或多个参数
内部的实现原理就用到了arguments
4.arguments的作用
保存所有传递给函数的实参
*/第五绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let [a, ...b] = [1, 3, 5];
console.log(a,b);
let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let arr = [...arr1, ...arr2];
console.log(arr);
function getSum(...values,a) {
console.log(a);
console.log(values);
}
getSum(10, 20 , 30);
//最后的报错
</script>
</body>
</html>
/1.扩展运算符在等号左边, 将剩余的数据打包到一个新的数组中 注意点: 只能写在最后/ //2.扩展运算符在等号右边, 将数组中的数据解开 //注意点: 和在等号左边一样, 也只能写在形参列表的最后 /function getSum(…values) { console.log(values); } let res = getSum(10, 20, 30, 40);/
第六绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function getSum(a = "贵哥的编程之路", b = getDefault()) {
console.log(a, b);
}
getSum();
// getSum(123, "abc");
function getDefault() {
return "陈业贵"
}
</script>
</body>
</html>
// 从ES6开始, 可以直接在形参后面通过=指定默认值 // 注意点: ES6开始的默认值还可以从其它的函数中获取
第七绝·：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
/*let say=function()
{
console.log("hello world");
}
say();
let fn=say;
fn();
// 将函数作为其他函数的参数
function test(fn) { // let fn = say;
fn();
}*/
/*function test()
{
let say=function()
{
console.log("牛逼");
}
return say;
}
let fn=test();
fn();*/
//这个可以解析为:
function test()
{
return function()
{
console.log("牛逼");
};
}
let fn=test();
fn();
//好了完成
</script>
</body>
</html>
第八绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS匿名函数核心 16</title>
</head>
<body>
<script>
/*
1.什么是匿名函数?
匿名函数就是没有名称的函数
*/
//第一作为其他函数的参数
/*function say(fn)//fn=
{
fn();
//这一步相当于
function()
{
console.log("hello world");
}();
//注意点就是必须在匿名函数的前后加上小括号。这是写法.
}
say(function()
{
console.log("hello world");
});*/
//解析:.....
/*(function()
{
console.log("hello world");
})();*/
//第二作为其他函数的返回值
/*
function test() {
return function () {
console.log("hello lnj");
};
}
let fn = test(); // let fn = say;
fn();
*/
//下面为解析,加个变量即可:
function test() {
let say= function () {
console.log("hello lnj");
};
return say;
}
let fn = test(); // let fn = say;
fn();//这一步相当于
(function () {
console.log("hello lnj");
})();
//完成
</script>
</body>
</html>
第九绝：
/*4.箭头函数的注意点 4.1在箭头函数中如果只有一个形参, 那么()可以省略 4.2在箭头函数中如果{}中只有一句代码, 那么{}也可以省略 */
第十绝：
Document
第十一绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function login()
{
let pwd = prompt("请输入密码");
if(pwd!=="123456")
{
login();
}
alert("欢迎回来");
}
login();
</script>
</body>
</html>/*1.什么是递归函数? 递归函数就是在函数中自己调用自己, 我们就称之为递归函数 递归函数在一定程度上可以实现循环的功能
代码语言：javascript复制 2.递归函数的注意点
每次调用递归函数都会开辟一块新的存储空间, 所以性能不是很好
*/第十二绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function login()
{
let pwd = prompt("请输入密码");
if(pwd!=="123456")
{
login();
}
alert("欢迎回来");
}
login();
</script>
</body>
</html>/*1.什么是递归函数? 递归函数就是在函数中自己调用自己, 我们就称之为递归函数 递归函数在一定程度上可以实现循环的功能
代码语言：javascript复制 2.递归函数的注意点
每次调用递归函数都会开辟一块新的存储空间, 所以性能不是很好
*/
第十三绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>80-JavaScript-变量作用域</title>
<script>
/*
1.在JavaScript中定义变量有两种方式
ES6之前: var 变量名称;
ES6开始: let 变量名称;
*/
// 2.两种定义变量方式的区别
// 2.1是否能够定义同名变量
/*
1.通过var定义变量,可以重复定义同名的变量,并且后定义的会覆盖先定义的
var num = 123;
var num = 456;
console.log(num);
2.2如果通过let定义变量, "相同作用域内"不可以重复定义同名的变量
let num = 123;
let num = 456; // 报错
*/
// 2.2是否能够先使用后定义
/*
2.3通过var定义变量, 可以先使用后定义(预解析)
console.log(num);
var num = 123;
2.4通过let定义变量, 不可以先使用再定义(不会预解析)
console.log(num); // 报错
let num = 123;
*/
// 2.3是否能被{}限制作用域
/*
2.5无论是var还是let定义在{}外面都是全局变量
var num = 123;
let num = 123;
2.6将var定义的变量放到一个单独的{}里面, 还是一个全局变量
{
var num = 123;
}
console.log(num); //不会报错
2.7将let定义的变量放到一个单独的{}里面, 是一个局部变量
{
let num = 123;
}
console.log(num); //会报错
*/
/*
1.在JavaScript中{}外面的作用域, 我们称之为全局作用域
2.在JavaScript中函数后面{}中的的作用域, 我们称之为"局部作用域"
3.在ES6中只要{}没有和函数结合在一起, 那么应该"块级作用域"
4.块级作用域和局部作用域区别
4.1在块级作用域中通过var定义的变量是全局变量
4.2在局部作用域中通过var定义的变量是局部变量
5.无论是在块级作用域还是在局部作用域, 省略变量前面的let或者var就会变成一个全局变量
*/
/*
{
// 块级作用域
}
if(false){
// 块级作用域
}
while (false){
// 块级作用域
}
for(;;){
// 块级作用域
}
do{
// 块级作用域
}while (false);
switch () {
// 块级作用域
}
function say() {
// 局部作用域
}
*/
/*
{
// 块级作用域
var num = 123; // 全局变量
}
console.log(num);
function test() {
var value = 666; // 局部变量
}
test();
console.log(value);
*/
/*
if(true){
var num = 666;
}
console.log(num);
*/
/*
{
// var num = 678; // 全局变量
// let num = 678; // 局部变量
num = 678; // 全局变量
}
console.log(num);
*/
function test() {
// var num = 123; // 局部变量
// let num = 123; // 局部变量
num = 123; // 全局变量
}
test();
console.log(num);
</script>
</head>
<body>
</body>
</html>
第十四绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//var num=666;//0级作用域
function demo()
{
var num=123;//一级作用域
function test()
{
//var num=789;//二级作用域
console.log(num);
}
test();
}
demo();
</script>
</body>
</html>/* 注意点: 初学者在研究"作用域链"的时候最好将ES6之前和ES6分开研究
代码语言：javascript复制 1.需要明确:
1.ES6之前定义变量通过var
2.ES6之前没有块级作用域, 只有全局作用域和局部作用域
3.ES6之前函数大括号外的都是全局作用域
4.ES6之前函数大括号中的都是局部作用域
2.ES6之前作用域链
2.ES6之前作用域链
1.1.全局作用域我们又称之为0级作用域
2.2.定义函数开启的作用域就是1级/2级/3级/...作用域
2.3.JavaScript会将这些作用域链接在一起形成一个链条, 这个链条就是作用域链
0 ---> 1 ----> 2 ----> 3 ----> 4
2.4.除0级作用域以外, 当前作用域级别等于上一级 1
3.变量在作用域链查找规则
3.1先在当前找, 找到就使用当前作用域找到的
3.2如果当前作用域中没有找到, 就去上一级作用域中查找
3.3以此类推直到0级为止, 如果0级作用域还没找到, 就报错
*/
第十六绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 全局作用域 / 0级作用域
//let num=123;
{
let num=456;
function test()
{
//let num=789;
console.log(num);
}
test();
}
</script>
</body>
</html>/* 注意点: 初学者在研究作用域的时候最好将ES6之前和ES6分开研究
代码语言：javascript复制 1.需要明确:
1.ES6定义变量通过let
2.ES6除了全局作用域、局部作用域以外, 还新增了块级作用域
3.ES6虽然新增了块级作用域, 但是通过let定义变量并无差异(都是局部变量)
2.ES6作用域链
1.1.全局作用域我们又称之为0级作用域
2.2.定义函数或者代码块都会开启的作用域就是1级/2级/3级/...作用域
2.3.JavaScript会将这些作用域链接在一起形成一个链条, 这个链条就是作用域链
0 ---> 1 ----> 2 ----> 3 ----> 4
2.4.除0级作用域以外, 当前作用域级别等于上一级 1
3.变量在作用域链查找规则
3.1先在当前找, 找到就使用当前作用域找到的
3.2如果当前作用域中没有找到, 就去上一级作用域中查找
3.3以此类推直到0级为止, 如果0级作用域还没找到, 就报错
*/第十六绝：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//怎么写预解析代码?
var num;
console.log(num);
num=123;
// 如果将函数赋值给一个var定义的变量, 那么函数不会被预解析, 只有变量会被预解析
//核心:是先解析完代码,然后再执行。
</script>
</body>
</html>
/* 1.什么是预解析? 浏览器在执行JS代码的时候会分成两部分操作：预解析以及逐行执行代码 也就是说浏览器不会直接执行代码, 而是加工处理之后再执行, 这个加工处理的过程, 我们就称之为预解析
代码语言：javascript复制 2.预解析规则
2.1将变量声明和函数声明提升到当前作用域最前面
2.2将剩余代码按照书写顺序依次放到后面
3.注意点
通过let定义的变量不会被提升(不会被预解析)
*/
// 如果将函数赋值给一个var定义的变量, 那么函数不会被预解析, 只有变量会被预解析
//核心:是先解析完代码,然后再执行。
