js简单介绍、变量、数据类型、数据类型转换

不要图透
198 阅读9分钟

JavaScript介绍

介绍

js是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

作用

  1. 网页特效（监听用户的一些行为让网页作出对应的反馈）；
  2. 表单验证（针对表单数据的合法性进行判断）；
  3. 数据交互（获取后台的数据，渲染到前端）；
  4. 服务端编程（node.js）

image-20220325142055066

js的组成

  1. ECMAScript：

    1. 规定了js基础语法和核心知识。比如：变量、分支语句、循环语句、对象等等。

  2. Web APIs：

    1. DOM操作文档，比如对页面元素进行移动、大小、添加删除等操作。
    2. BOM操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等。
    3. 注意DOM属于BOM

    ----------权威网站：MDN（可以用于前端知识查询）。

总结

image-20220325152622554

js的书写位置

内部

直接写在html文件里，用script标签包住；

规范： script标签写在body结束标签上面。

image-20220325153013599

注意：

image-20220325153358402

内联

代码写在标签内部

语法：

由onclick=""引入。

image-20220325211311324

外部

代码写在以.js结尾的文件里；

语法：通过script标签，引入到html页面中。

image-20220325153125604

注意：

image-20220325153252298

js注释

  1. 单行注释

    符号：//；

    作用：//右边这一行的代码会被忽略；

    快捷键：ctrl + /。

  2. 块注释

    符号：/* */；

    作用：在/* 和 */ 之间的所有内容都会被注释。

js结束符

  1. 代表语句结束；
  2. 用英文分号“;”表示语句的结束；
  3. 可写可不写（现在不写结束符的程序员越来越多）；
  4. 但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）。

注意：

换行符（回车）会被识别成结束符，所以一个完整的语句，不要手动换行。

js输入语法&输出语法

语法：

  1. 人和计算机打交道的规则约定；
  2. 我们要遵循这个规则去写；
  3. 我们程序员需要操控计算机，需要计算机能看懂。

输出语法：

前言：

计算机是没有生命的，它虽然能解决我们生活中的很多问题，但是它是如何解决的我们并不知道，不过，过程不重要，重要的是，我们需要知道它计算过后的结果，所以伟大的程序员就研发出了输出语法，输出语法是程序员让计算机在显示器上显示结果的命令。

输出： 它是计算机把数据经过一定的处理，然后输出在显示器上的一种计算机反馈行为。

常见的几种输出语句：
  1.  document.write('要输出的内容')

    1. 向body内输出内容

    2. 如果输出的内容写的是标签，也会被解析成网页元素

      image-20220325220252298

  2. alert('要输出的内容');

    1. 页面弹出警告对话框，

      image-20220325220624273

  3. console.log('要输出的内容');

    1. 控制台输出语法，程序员调试使用，

      image-20220325220707633

输入语法

介绍：

输入语法是收集人们经过敲打键盘、鼠标等物理硬件而产生的指令，再把它打包发送给计算机，让计算机进行相应的工作。

常用的输入语句是：image-20220325223248781

运行结果：

image-20220325223359313

会显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字，获取的输入内容是字符串。

总结：

image-20220325224634593

变量

含义：

  1. 白话：变量就是一个装东西的盒子。
  2. 通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

注意：

变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

作用：

在需要用到数据的时候可以直接拿变量这个盒子来用，因为，数据已经赋值给盒子了；解决了在没有变量这个定义时，对数据取用非常麻烦的问题。变量是一个固定搭配。

原理：

变量：是程序在内存中申请的一块用来存放数据的小空间。

变量的基本使用

1、声明变量

要想使用变量，首先需要创建变量（专业说法：声明变量）；

语法：
 let 变量名;
  1. 声明变量有两部分构成：声明关键字、变量名（标识）
  2. let即关键字，所谓let关键字是系统提供的专门用来声明（定义）变量的词语

例如：

 let age;

age即变量的名称，也叫标识符。

注意：

JavaScript 是弱类型语言，可以不需要声明变量而直接使用。这样虽然简单但不易发现变量名方面的错误，所以不建议这样做。

2、变量赋值

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

image-20220325231355981

**注意：**是通过变量名来获得变量里面的数据。

我们也可以声明变量的时候同时给变量初始化。

image-20220325231629656

3、调用：

image-20220326012328626

拓展：

1、更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

image-20220325231754532

注意： let不允许多次声明同一个变量。

2、声明多个变量（逗号隔开）

如：image-20220325231921008

变量命名规则与规范

变量的命名规则

说明：

规则，不遵守就是出错“不合法”。

命名要求：
  1. 不能用关键词
  2. 不能以数字开头，可以用来命名的字符有，
    1. 英文字母、下划线、$、数字。
  3. 区分大小写

变量命名的规范

说明：

可以不遵守，但建议遵守，能使你的代码更规范。

命名建议：
  1. 使用有语意的词组命名；
  2. 建议使用驼峰写法-----第一个单词首字母小写，后面每个单词首字母大写，如：userName。

总结

image-20220325232632472

数据类型

说明：

计算机程序可以处理大量的数据，为什么要给数据分类？

  1. 更加充分和高效的利用内存；
  2. 也更加方便程序员的使用数据；
  3. 把拥有不同规则不同运算方式或有特定功能的数据进行分类，防止他们混在一起时，因规则不同造成混乱。

数据类型分为两大类：

1、基本数据类型：

数字类型（number）

在js中，把数学中的正数、负数、小数等，统一称为数字类型。

作用：

  1. 数字类型的数据，可以用来计算，

  2. 数字类型的数据也可以用来计数，

  3. .....

字符串型（string ）

通过单引号（ ''） 、双引号（ ""）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。例如：

image-20220326092956086

注意：
  1. 无论单引号或是双引号必须成对使用；
  2. 单引号/双引号可以互相嵌套，但是不可以自己嵌套自己（外双内单或者内双外单）；
  3. 必要时可以使用转义符\，输出单引号或双引号；
  4. prompt输入语句输入的值默认为字符串数据类型。
拓展：

  1. 字符串是一个整体，好比如，let gender = “男abc”；我们对它进行输出指令，那么输出设备上就会出现“男abc”字，也就是说字符串的内容就是引号里面的内容--不包括引号。

  2. 字符串拼接：我们通过“加号”，可以把两个或多个字符串拼接显示，例如：

    image-20220326095221324

    这里强调（数字型数据用加号是表示数字相加）

  3. 模板字符串：

    作用： 拼接字符串和变量，在没有它之前，要拼接变量比较麻烦，例如：

    使用前：

    image-20220326095740578

    使用后：

    image-20220326100007016

    可以看到，使用了模板字符串，代码就变得很有条理也省去了拼接的符号，代码也更简洁了。

    属性：

    1. 反引号 ``， 用来把显示内容一并概括；

    2. 内容拼接变量时，用 ${变量名} 包住变量。

    单引号（ ''） 、双引号（ ""）、反引号( ` )的区别：

    1. ${}必须和反引号`一起 使用，跟其它两个引号使用无效；

    2. 单引号和双引号只是单行输出，而反引号可以多行输出。

      alert("我是双引号，我只能单行输出，
        我转行输出无效")
      alert('我是单引号，我只能单行输出，
        我转行输出无效')
           alert(`我是反引号，我可以多行输出，
             我转行输出有效`)

      3.输出内容多类时，反引号输出不易出错。

布尔类型（boolean）

  1. 表示肯定或否定时在计算机中对应的是布尔类型数据。

  2. 它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

    image-20220326101623633

​ -----布尔数据类型一般搭配循环语句使用。

未定义类型（undefined）
说明：

  1. 未定义是比较特殊的类型，只有一个值 undefined；

  2. 只声明变量，不赋值的情况下，变量的默认值就为 undefined。

    image-20220326101918085

工作中的使用场景：
  1. 我们开发中经常声明一个变量，等待传送过来的数据。
  2. 如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就能判断用户是否有数据传递过来。
null 空类型
说明：

将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null 。

------null 表示 值为 空。

null 和 undefined 区别：

  1. undefined 表示没有赋值；

  2. null 表示赋值了，但是内容为空。

2、引用数据类型：

  1. object 对象；
  2. function 函数；
  3. array 数组。

注意：

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认；而Java是强数据类型 例如 int a = 3 必须是整数。

检测数据类型

作用：

当我们忘记一个变量是什么数据类型的时候，就可以通过”typeof“属性来查看变量的数据类型，也可以用来排查错误。

例如：

 <script>

        let age = 3;
        let namee = '12';
        let he;
        he = age + namee;

        /* 根据上面的式子，我们预想he值为15 */
        console.log(he);//结果却为312

        /* 通过typeof属性检查知道，he为字符串数据类型 */
        console.log(typeof he)

        /* he值是age和namee相加的结果，那么我们就可以在这两个变量中查找问题 */
        /* 经过typeof属性检测，我们可以知道namee为字符串数据类型，那么相对于字符串类型，加号就为拼接，所以结果才是312。 */
        console.log(typeof age)
        console.log(typeof namee)

        /* 总结来说我们可以通过typeof属性来检查哪里出错了 */

    </script>

image-20220326111848197

使用方法：

//输出语句   检测属性  变量
console.log(typeof age)

类型转换

介绍：

通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

作用：

为了解决，两个数据间因不同规则，使得他们不能一起”运算或处理“的问题。

例如：image-20220326113714529

转换后：image-20220329144355465 '10000'和'2000'是字符串数据，加号对它两来说是拼接的意思，所以它两不能进行常规的数学计算；如果想要它两进行数学计算，就需要把他们转化成数字数据类型。

两种转换方式：

1、隐式转换

介绍：

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则：
  1. +号两边只要有一个是字符串，都会把另外一个转成字符串；
  2. 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型。
缺点：

转换类型不明确，靠经验才能总结。

小技巧：

+号作为正号解析可以转换成Number；

image-20220326114731148

2、显式转换

前言：
  1. 编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
  2. 为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
说明：

通过自己书写属性，明显的对数据类型进行转换。

作用：

显示转换能更好的表示一个数据是经过数据转换的，它比隐式转换简洁易懂。

转换为数字型：
Number（数据）
  1. 转成数字类型；
  2. 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字；
  3. NaN也是number类型的数据，代表非数字；

例如：

  <script>
  
        /* 声明characterString和赋初值 */
        let characterString = '123';
        /* 检查数据类型   1 */
        console.log(typeof characterString)//string



        /* 使用显式转换（Number）对字符串进行数字类型转换 */
        characterString = Number('123');
        /* 检查数据类型   2 */
        console.log(typeof characterString);//number



        /* 字符串里有非数英文 */
        characterString = '123a';
        /* 对字符串进行数字类型转换 */
        characterString = Number(characterString);
        /* 检查转换后的结果 3 */
        console.log(characterString);//NaN
        /* 检查数据类型   4 */
        console.log(typeof characterString);//number


  </script>

结果 ：image-20220326122154995

parseInt(数据)

特点：只保留整数。

用法和上面一样。

parseFloat(数据)

特点：可以保留小数。

用法和上面一样。

转换为字符型

含义：把数据转换为字符型数据类型。

String(数据)

用法和上面一致。

变量.toString(进制)

用法：

  /* 声明number和赋初值 */
        let number = 123;
        /* 检查数据类型   1 */
        console.log(typeof number);
        /* 对数字类型进行字符串类型转换 */
        number = number.toString();
        /* 检查数据类型   2 */
        console.log(typeof number);

结果：image-20220326123243693

总结

image-20220329150535318.png image-20220329145901622.png

image-20220329145954926.png

image-20220329150020648.png

avatar
文章
阅读
粉丝