博客列表 >Js基础解析、作用域闭包浅谈及变量与常量的区别;

Js基础解析、作用域闭包浅谈及变量与常量的区别;

月缺
月缺原创
2021年10月01日 17:25:041236浏览

JS基本数据类型浅谈及作用域闭包分析

变量与常量的区别

先上一段代码演示,常量与变量的区别

示例一

  1. let a = 1;
  2. let b = 2;
  3. const c = 3;
  4. a = 5;
  5. c = 6;
  6. console.log(a);/* 打印5 */
  7. console.log(c);/* 报错,const声明的变量无法修改,js中对无法重新赋值的变量称为常量 */
  8. // 将c =6 的重新赋值操作注释掉即可正常运行

结论:变量可以进行重新赋值操作,而常量不行

示例二

  1. let a = 1;
  2. const b = 2;
  3. a++;
  4. // b++;
  5. console.log(a); /* 打印2 */
  6. console.log(b); /* 报错,const声明变量无法进行数值运算 */

结论:常量无法进行数值运算

示例三

  1. let a = '李四';
  2. const b = '张三';
  3. a+=', 你好';
  4. // b+=', 你好';
  5. console.log(a); /* 打印2 */
  6. console.log(b); /* 报错,const声明变量无法进行字符串拼接,注释变量b的操作 */
  7. const c = true;
  8. // c = false;
  9. console.log(c); /* 报错, boolean变量c无法重新赋值 */
  10. const arr = [];
  11. // arr.push(1);
  12. console.log(arr); /* 打印 [1],说明数组新增成功,得出引用数据类型可以进行新增操作 */
  13. // arr = [1, 2];
  14. console.log(arr); /* 报错,const声明变量无法重新赋值 */

结论:基本数据类型时,const声明的常量无法做任何赋值、增删操作,引用数据类型时,重新赋值操作无法进行,但是可以对引用数据类型变量进行增删操作。并且const声明的变量就是常量这句话仅对当前变量数据类型为基本数据类型时正确

Js基本数据类型及函数解析

Js基本数据类型与引用数据类型

  • 常说的数据类型有6种基础数据类型

    实际上常用的时5种为null、undefined、number、string、boolean,第6种为ES6 引入的一种新的原始数据类型,表示独一无二的值,不常用

  • 引用数据类型

    Object、Array、Date、Function等


引言: 我们一般说Js7种基本数据类型泛指为null、undefined、number、string、boolean、symbol、Object或者是null、undefined、number、string、boolean、object、array两类。
从语言层面来讲,指的是前面7种;
从应用层面来讲,指的时后面7种;(为什么没有Date、Function这些,因为这些引用数据类型本身数据类型都是对象,而相比较而言,数组的应用层面较高,所以我们泛指的时候可以把他带进去)
就像对于外行,PHOTOSHOP和PS是两样东西一样,这7种不管说哪一类都是可以的。

函数的种类与参数类型

函数种类分为三种
1、普通函数

  1. function name() {}

2、匿名函数

  1. cosnt name = fucntion (){}

3、箭头函数

  1. cosnt name = () => {}

参数类型分为形参与实参;

  • 指的是函数声明时,函数圆括号内部的参数;
  • 指的是函数使用时,函数名后面圆括号内部的参数;

参数声明时不确定函数所需参数个数时,可采用归内参数也叫剩余参数、不定参数,如下:

  1. function name(...args) {};

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

作用域种类

  1. 全局作用域
  2. 函数作用域
  3. 块作用域

作用域是单向的,由外向内传递可以,由内向外不行;

闭包形成的条件

  1. 父子函数
  2. 自由变量
  3. 子函数调用父函数的自由变量,父函数外部调用父函数内部的子函数
    闭包函数示例:
    1. const countTo = ((a) => {
    2. return () => a++;
    3. })(2000);
    4. console.log(countTo)); // 2000
    5. console.log(countTo)); // 2001

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

模板字符串作用

相较于传统字符串与变量拼接更加简洁
传统字符串拼接,示例:

  1. const a = 10;
  2. const b = 15;
  3. console.log(a+'+'+b+'='+(a+b)); // 打印 10+15=25
  4. `

模板字符串拼接,示例:

  1. const a = 10;
  2. const b = 15;
  3. console.log(`${a}+${b}=${a+b}`); // 打印 10+15=25

标签函数

  1. // 模板字符串: 可以使用插值表达式的字符串
  2. // 标签函数,使用模板字符串作为参数的函数
  3. console.log`hello ${10} ${20} ${30} world`;
  4. // 标签函数参数:第一个参数是字符串字面量组成的数组,从第二个参数起,是插值表达式
  5. // 函数total第一个参数strings为字符串字面量组成的数组, 后续参数插值表达式
  6. function total(strings, ...args) {
  7. let res = `${strings[0]}:${args.join()}之和是${args.reduce((p, c)=>p+c, 0)}`;
  8. console.log(res);
  9. }
  10. total`hello${10}${12}${13}${5}`; // 打印hello:10,12,13,5之和是40
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议