博客列表 >js语法:数据类型、函数,作用域/作用域链、闭包

js语法:数据类型、函数,作用域/作用域链、闭包

Leo的博客
Leo的博客原创
2021年10月11日 22:16:44559浏览

变量与常量的区别

1.变量

一.蛇形:user_name ,多单词之间用下划线,用在常量。

二.驼峰:userName,getUserName , 第二个单词首字母大写,用在变量、函数

三.大驼峰:UserName,帕斯卡命名,用在类/构造函数

变量的声明 let
声明不赋值, 默认就是undefined;

第一次赋值,有一个清新的叫法,初始化

第二次赋值,更新/修改

  1. let num;
  2. num = 60;
  3. num = 80;
  4. console.log(num);

let禁止重复声明,它解决了一个var一个bug

二合一

  1. let price = 99;
  2. console.log(price);

2.常量

就是在代码执行期间不允许更新数据
声明时必须赋值
声明用const

  1. const APP_NAME = "在线商城";
  2. console.log(APP_NAME);

只有和同类型的数据,他们之间的运算才有意义

  1. console.log(100 * "hello");
  1. console.log(100 + 40);
  2. console.log("hello" + ",未来");

输出:

函数的种类与参数类型

对于重复的计算过程,应该考虑用函数进行封装,实现”代码重复”

  1. let num1 = 3;
  2. let num2 = 5;
  3. let total = 0;
  4. total = num1 + num2;
  5. console.log("total=", total);
  6. num1 = 6;
  7. num2 = 10;
  8. total = num1 + num2;
  9. console.log("total=", total);

" class="reference-link">输出:


function,函数声明的关键字
sum1: 函数名称
(num1 ,num2) 参数列表
(12,34):调用参数,实际参数(实参),与上面的参数列中的参数一一对应

  1. function sum1(num1, num2) {
  2. let total = 0;
  3. total = num1 + num2;
  4. console.log("total=", total);
  5. }
  6. sum1(12, 34);
  7. sum1(5, 22);

第二个声明
参数不足,给函数设置默认参数来解决

  1. console.log("---------");
  2. sum1(20);
  1. function sum2(num1, num2 = 0) {
  2. let total = 0;
  3. total = num1 + num2;
  4. console.log("total=", total);
  5. }

参数过多用rest参数,将所有参数压缩到一个数组中

  1. console.log("-------");
  2. function sum3(...args) {
  3. console.log(args);

数据求和

第一种求和 args[0]+args[1]+…..

第二种求和 循环 for()…

引用求和
…:用在函数的形象中,就是rest,归并操作,压到一个数组中
…:用在函数的调用参数中,就是扩展/展开,spread

  1. console.log(
  2. "total =",
  3. args.reduce((p, c) => p + c)
  4. );
  5. }
  1. const arr = [10, 20, 30, 40, 50, 60];
  2. sum3(...arr);

>
匿名函数:没有匿名名称
匿名函数有两种,第一种是一次性的叫立即调用函数,iifee

  1. console.log("------------");

一次性数组

  1. (function (a, b) {
  2. console.log(a + b);
  3. })(10, 50);

如果这个匿名函数不是一次性的,应该使用”函数表达式”

  1. let add = function (a, b) {
  2. return a + b;
  3. };
  4. console.log(add(40, 50));

作用域与闭包的关系与实现

作用域有两种:全局作用域,函数作用域

函数外面叫全局作用域,函数里面叫函数作用域
函数外面与里面的区别

  1. let uesrname = "猪老师";
  2. function demo1() {

函数作用域
console.log(uesrname);

  1. let uesrname = "欧阳";
  2. console.log(uesrname);

username 是先在函数内部查询,如果有就直接访问
如果没有,就向上一个作用域查询,一级一级向上,直到全局
全局有username,查询成功,返回 undefiend
作用域链,查询变量用的
函数外部是无法访问到内部的

作用域是单向的

> 由外向内传递,但是由内向外是禁止

闭包

1.父子函数
2.自由变量

父函数

  1. function parent(a) {

子函数

  1. function f(b) {
  1. let c = 6;
  2. return a + b + c;
  3. }
  4. // 返回
  5. return f;
  6. }

这个时候外部调用这个函数parent()会返回 一个函数,此时闭包就产生了

  1. console.log(parent(5));

parent()调用结束,应该将空间和参数全部释放

但是父函数parent中的一个变量a,被它的一个子函数正在引用,所以不能销毁

  1. const f1 = parent(5);
  2. console.log(f1);
  3. console.log(f1(8));

经典闭包场景

n是自由变量,它不属于子函数

  1. let counter = (function (n) {
  2. return function () {

子函数变量只有两种
1.外部参数
2.自己声明的变量

  1. return n++;
  2. };
  3. })(5899);

执行

  1. console.log(counter());
  2. console.log(counter());
  3. console.log(counter());
  4. console.log(counter());
  5. console.log(counter());
  6. console.log(counter());
  7. console.log(counter());

模板字符串与标签函数的使用方式

传统字符串, 多行和表达式变量的混写非常的麻烦

  1. console.log("hello");
  2. let lang = "html\n" + "css\n" + "js";
  3. console.log(lang);
  4. let a = 10,
  5. b = 20;
  6. let res = a + " + " + b + " = " + (a + b);
  7. console.log(res);

输出:


es6使用模板字符串, 可以解决
使用反引来来声明, 不用引用
反引号 ` , 在 esc 键下面

  1. lang = `hello`;
  2. console.log(lang);
  3. lang = `html
  4. css
  5. js`;
  6. console.log(lang);

输出:


使用 ${…} 插值占位符,可以将变量或表达式嵌入到字符串

  1. res = `${a} + ${b} = ${a + b}`;
  2. console.log(res);

输出:


标签函数, 使用模板字符串为参数的函数

  1. alert`hello ${10} ${20} ${30} world`;
  2. console.log`hello ${10} ${20} ${30} world`;

标签函数(第一个参数是字符串字面量组成的数组,从第二个参数起, 是插值表达式)
num: 数量
pricce: 单价

  1. nction total(num, price) {
  2. console.log(num * price);
  3. }

模板字符串参数中的占位符比较多,可以用rest进行归并

  1. sum`计算多个数之和: ${5}${6}${7}${8}${9}`;
  2. function sum(strings, ...args) {
  3. console.log(`${args.join()}之和是 ${args.reduce((p, c) => p + c)}`);
  4. }

输出:

总结

模板字符串: 可以使用插值表达式的字符串

标签函数: 可以使用”模板字符串”为参数的函数

标签函数,就是在”模板字符串”之前加一个标签/标识符,而这个标签,就是一个函数名

标签函数的参数是有约定的, 不能乱写, 第一个是字面量数组,从第二起才是内部的占位符参数

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议