02、JavaScript变量及数据类型

小莫前端小菜鸡
155 阅读5分钟

js组成

  • ECMAScript:js的语法规范
  • DOM:document object model 文档对象模型 : 提供一系列的属性和方法，让我们获取元素以及操作元素
  • BOM：browser object model 浏览器对象模型：提供一系列的属性和方法，让我们操作浏览器

2.webp

一、js书写位置

1、Javascript可以写在script标签内（内嵌方式）

  • JS写在<script>标签对儿里面，type属是类型，text/javascript就是纯文本的javascript；注意，这个type必须写准确，可以不写，但是要写，一定要写准确，否则失效。
<script type="text/javascript">
    document.write('I am a inner JS');
</script>

2、Javascript可以写在单独的文件中（外联方式）

1.创建以.js结尾的文件并且写入Javascript代码
2.hello.js(文件名任意):
    document.write('Hello World');
3.在html文件中使用Javascript代码文件
<script type="text/javascript"  src=’hello.js’></script>

3、JavaScript可以写在HTML标签的事件属性中

onclick点击事件（用户点击），属性值：点击时，执行的js代码。
<button onclick=” alert(250); ”>点击我</button>
用户点击，button的时候会提示250；

二、注释

    javascriptJavaScript里面的注释：
    单行注释： //我是一行注释
    多行注释: /* 我是多行注释 */
    注释的符号不能嵌套

三、变量

  • 变量：可变的量，在编程语言中，变量其实就是一个名字，用来存储和代表不同值的东西
    1、变量声明的方式 declare
        传统方案:var/function
            var a;
            function(){}; 声明一个变量叫fn,只不过存储的数据值是一个函数
        新的方案:let/const/import
            let m;
            const x;
            import z from '../xx'  ES6Model中的模块导入，把导入的模块存储到z变量中
    2、变量赋值
        a = 10;
    3、定义变量并赋值
        var a = 10;
    4、同时定义多个变量
        var a,b,c;
    5、同时定义多个变量，并对其中的某些变量赋值
        var a,b=1,c=2;
    6、同时定义多个变量，并设置相同值
        var a=b=0;
    7、变量声明的提升
         a = 100;
         var a; //这行定义变量会自动提升到所有语句之前
         console.log(a);
     记住，js只能提升变量的声明，而不能提升变量的赋初值

四、企业开发中命名规范

1、由字母、数字、下划线、$构成

    var $box; //=>一般用JQ获取的以$开头
    var _box; //=>一般公共变量都是_开头
    var 1box; //=>不可以，但是可以写box1

2、不可以以数字开头

3、不可以是JS中的关键字和保留字

    当下有特殊含义的是关键字，未来可能会成为关键字的叫做保留字
    var let const function ...
    var var = 10; //=>肯定不行的

4、严格区分大小写

    var Test=100;
    console.log(test);//=>无法输出，因为第一个字母小写了

5、使用驼峰命名法：首字母小写，其余每一个有意义单词的首字母都要大写（命名尽可能语义化明显，使用英文单词）

    var myEnglishName 
    var MyEnglishName
    常用的缩写：add/insert/create/new（新增）、update（修改）、delete/del/remove/rm（删除）、sel/select/query/get（查询）、info（信息）...

6、见名知意

  • 代码强迫症（代码洁癖）：良好的编程习惯、极客精神

七、JS中的数据类型

1、原始数据类型(基本数据类型/值类型)

  • 数字 Number
  • 字符串 String,
  • 布尔 Boolean,
  • 空Null
  • 未定义 Undefined,
  • 唯一值 symbol
  • 大数字 bigint
 Number数字类型 
    包含:正数/负数/小数/零
        ```js
         var a = 3.14;
         var b = 1;
        ```
    Infinnity 代表无穷大的值
    NaN:not a number 不是一个数字，但是属于number类型
        `var num = 10 - 'A'; //NaN`
    NaN和任何值（包括自己）都不相等：NaN!=NaN，所以我们不能用相等的方式判断是否为有效数字
       ` NaN == NaN; //false NaN和NaN本身都不相等(它和谁都不相等)`
    需求：验证一个值是否为有效数字？
        ```js
            if (num == NaN) {
                // 这样处理不行，因为 num==NaN 永远不会成立
                alert('num不是有效数字!');
            }
        ```
    isNaN[value]:检测一个值是否为非有效数字，如果不是有效数字返回true，反之是有效数字返回false
      如果[value]并不是数字类型的值，则浏览器默认会把[value]转换为数字类型 '隐式转换 浏览器默认私下处理的'
      在隐式类型转换中，浏览器是基于Number([value]) 来实现数据类型转换的
        ```js
            if (isNaN(num)) {
                alert('num不是有效数字!');
            }
        ```

String字符串数据类型
   所有用单引号''、双引号""、反引号 `` （撇 ES6模板字符串）包起来的都是字符串
   一个字符串是由零到多个字符组成，每一字符都有一个自己的位置'索引'，有一个length存储字符串长度
  
    var str = '我爱字符串';
    `` 反引号 ES6新增的模板字符串，有助于字符串拼接
    ${} 存放的是js表达式
    js表达式：执行代码可以有返回结果的，例如变量/三元运算符
    
        var x = 10;
        var y = 20;
        var tsr = "x+y=x+y"//这样写的话。所有东西都是字符串中的一个字符
        str = x + "+" + y + "=" +(x + y);
        str = "" + x + "+" + y + "=" + (x + y) + "";
        `${x} + ${y} = ${x + y}`;
    
Boolean布尔值
  只有两个值 true/false
    var a = true;
    
undefined未定义
  undefined：意料之外（不是我能决定的）
    var c;
    
null空对象指针
    null：意料之中（一般都是开始不知道值，我们手动先设置为null，后期再给予赋值操作）

2、引用值(引用数据类型)

  • 对象数据类型 Object
    • 普通对象{} [类数组、实例、原型对象]
    • 数组对象[]
    • /^[+-]?(\d|([1-9]\d+))(.\d+)?$/ RegExp正则对象
    • Wed Sep 09 2020 11:58:24 GMT+0800 (中国标准时间) Math数学函数对象 Date日期对象
    • ...
    特殊对象：数组或者类数组对象（集合）
      属性名(成员/键)是数字，而且数字从零开始，逐级递增=>有顺序和规律的数字属性名被称为"索引"，记录每一项的位置信息的
      有一个length成员，存储集合的长度
      数组/类数组[索引]进行成员访问以及相关的操作

    普通对象
       1.对象是由零到多组键值对[属性名和属性值]组成的
           {key:value,...}
           属性名(键)不是变量，它是对象的一个属性(特征)
           属性名一般都是一个字符串(当然也可以是数字或者Symbol等基本类型的值)
           对于Symbol类型的属性名，需要基于[]包裹起来，保证语法正确性
           属性名不能是对象，对象作为属性名，浏览器会把其转换为字符串
获取一个对象中某个属性名对应的属性值

1.对象.属性名 这种方式不适用于"数字或者Symbol"的类型的属性名,这样的情况只能基于 对象[属性名]来访问

2.对象[属性名] 这种方式必须指定好数据的类型 obj[name]和obj["name"]不是一个情况

  • 函数 Function
    • function函数数据类型
    函数数据类型
        函数:就是一个方法，可以实现某个功能

函数的创9建方式

  • 1.匿名函数(没有函数名字)

    正常的创建：声明一个变量叫fn（函数名）,只不过存储的值是一个函数

    function fn(){}

    自执行函数：创建函数和执行函数一起完成了 自执行函数：第一个小括号中存放的是创建的函数，第二个小括号是把函数执行

    (function(x) {})(100)

    除了用小括号把函数包裹起来可以解决语法错误的问题，在前面加 ～、+、-、! 也都可以让语法正确

    `~ function(x) {}(100) `

  • 2."函数表达式"创建函数：和上面方式的效果是一样的(在变量提升中有一些区别)

    var fn = function(){ // 里面也相当于函数表达式，创建一个匿名函数，把其作为值返回 return function(){} }

  • 3.ES6中“创建函数”的新方式：“箭头函数”「所有箭头函数都是函数表达式创建方式」

    创建函数的语法不一样
执行函数是一致的

     var xxx = ([形参])=>{
            [函数体]
     }

3、js中常用的输出方案

  • 浏览器中弹出一个窗口
    • alert
    • confirm
    • prompt
  • 控制台输出: F12/FN+F12
    • console.log
    • console.time/timeEnd
    • console.dir
    • console.table
    • ...
  • 直接写入到页面中
    • document.write
    • [element].innerHTML/innerText
    • input.value
    • ...
alert([content]) 一般用于项目中，给客户提供一些提示信息的

如果[content]不是"字符串数据类型"的，则会默认转换为字符串，然后再输出

console.log([content]) 一般用于项目中，给客户提供一些提示信息的

[content]本身啥类型，在控制台输出的就是啥类型

    Symbol唯一值
    console.log(Symbol() == Symbol()); //false 创建了两个唯一值
    var n = Symbol();
    console.log(n == n); //true
    console.log(Symbol('AA') == Symbol('AA')); //false 加标识只是为了方便调试
    
    BigInt 大数
        真实场景:从服务器获取数据，服务器端存储数据的时候，如果用的是大数存储的，返回到客户端的信息，很可能超过最大安全数，这样导致后续计算可能不准确
        Number.MAX_SAFE_INTEGER  //最大安全数 9007199254740991 16位
        Number.MIN_SAFE_INTEGER  //最小安全数 -9007199254740991
        超过最大安全数，在进行计算，结果是不准确的
avatar
文章
阅读
粉丝