JS基础 day1 | JS介绍、变量常量、数据类型及转换

csyldjy

已于 2022-06-18 21:07:44 修改

阅读量634

点赞数

分类专栏：前端 JS基础文章标签： javascript 前端

于 2022-05-26 11:20:17 首次发布

本文链接：https://blog.csdn.net/csyldjy/article/details/124920966

版权

前端同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

JS基础

6 篇文章 0 订阅

订阅专栏

1 JavaScript 介绍

1.1 JavaScript 是什么

1.1.1 JavaScript （是什么？）

1.1.2 作用（做什么？）

1.1.3 JavaScript的组成（有什么？）

1.5 JavaScript 输入输出语法

4.1 数据类型 – 数字类型（Number）

4.3 数据类型 – 布尔类型（boolean）

4.4 数据类型 – 未定义类型（undefined）

1 JavaScript 介绍

1.1 JavaScript 是什么

1.1.1 JavaScript （是什么？）

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

除此之外编程语言还有c,c++,python等.

1.1.2 作用（做什么？）

– 网页特效 (监听用户的一些行为让网页作出对应的反馈)

– 表单验证 (针对表单数据的合法性进行判断)

– 数据交互 (获取后台的数据, 渲染到前端)

– 服务端编程 (node.js)(后台开发)

1.1.3 JavaScript的组成（有什么？）

javascript由如下三(两)部分组成:

◇ ECMAScript: [JS基础所学内容]

规定了js基础语法核心知识。

比如：变量、数据类型、运算符、流程控制(分支/循环语句)、数组、函数、对象等等

◇ Web APIs:

DOM (document Object mod 文档对象和模型 )操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM ( Browser Object mode 浏览器对象和模型 )操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

注: 关于Web APIs的介绍见: 一文解释什么是API 和 Web APIS-一一网络

权威网站：

MDN JavaScript https://developer.mozilla.org/zh-CN/docs/Web/JavaScripthttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript

1.2 JavaScript 书写位置

1.2.1 行内JavaScript

    <!-- onclick 点击该元素则...   alert('...') 弹窗...  括号\引号必加 -->
    <button onclick="alert('不能点!')">说了别点</button>

1.2.2 内部JavaScript

    <!-- 2 内部JavaScript -->
    <script>
        alert('我是内部')
    </script>
</body>
<!-- 推荐写在body结束标签上方-->

1.2.3 外部JavaScript

新建.js文件并引入

    <!-- 3 外部JavaScript -->
    <script src="./01-外部.js">
    </script>

注意:

外部 js 标签常写在body结束标签前
外部 js 标签中不要写代码，否则会被忽略

    <script src="./01-外部.js">
        alert('我是哈皮')
    </script>

如上代码为错误写法,"我是哈皮"弹窗不会显示.

1.3 JavaScript 的注释

◇单行注释

符号：//
作用：//右边这一行的代码会被忽略
快捷键：ctrl + /

◇块注释

符号：/* */
作用：在/* 和 */ 之间的所有内容都会被忽略
快捷键：shift + alt + A

1.4 JavaScript的结束符

作用：使用英文的 ; 代表语句结束
实际情况：实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置
现状：在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符
约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求.）
特殊情况: 多个立即执行函数需用;隔开

即:如无约定要求,不写即可

1.5 JavaScript 输入输出语法

什么是语法：

人和计算机打交道的规则约定
我们程序员需要操控计算机，需要计算机能看懂

1.5.1 输入语法：

语法:

prompt('请用户输入:')
//注意之间无空格

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

效果:

1.5.2 输出语法

语法1：

        document.write('所要输出的内容')

作用：向body内输出(打印)内容

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

        document.write('俺滴百年榆木老楼梯!')
        document.write('<button>按钮</button>')

语法2：

        alert('输入错误')

作用：页面弹出警告对话框

注意:多个弹窗,弹窗内容按照从上往下书写顺序显示

语法3：

        console.log('它 会魔法吧')

作用：控制台输出(打印)语法，程序员调试使用

1.6 字面量

在计算机科学中，字面量（literal）是在计算机中描述事/物的量(字面是啥就是啥)

2 变量

2.1 变量是什么？

1. 变量：

白话：变量就是一个装东西的盒子。
通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。
注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

2.2 变量基本使用☆

1 声明变量

语法：

声明变量有两部分构成：声明关键字、变量名（标识）
let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

举例：

我们声明了一个age变量
age 即变量的名称，也叫标识符

赋值简写:

简单点，也可以声明变量的时候直接完成赋值操作,这种操作也称为变量初始化。

2. 变量赋值

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

2.3 变量的本质

内存：计算机中存储数据的地方，相当于一个空间

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

2.4 变量命名规则与规范

规则：必须遵守，不遵守报错 (强制)

规范：建议，不遵守不会报错，但不符合业内通识（建议）

2.4.1 规则

不能用关键字

关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等

只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量

2.4.2 规范

起名要有意义
遵守小驼峰命名法: 第一个单词首字母小写，后面每个单词首字母大写。例：userName

二. 变量拓展-let和var的区别

let 和 var 区别：

在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let。

var 现在开发中一般不再使用它，只是我们可能在老版程序中看到它。

let弥补了var存在的的一些问题。

可以先使用,再声明 (不合理)
var 声明过的变量可以重复声明(不合理)

结论： var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let

3 常量

概念：使用 const 声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
命名规范：和变量一致
注意：常量不允许重新赋值,声明的时候必须赋值（初始化）

        const name=('u')
//二次赋值
        name=('me')
        document.write(name)

此时二次赋值无效,会报错

总结：不需要重新赋值的数据使用const

4 数据类型

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

1. 更加充分和高效的利用内存
2. 也更加方便程序员使用数据

JS 数据类型整体分为两大类：(5+3)

4.0 数据检测

4.0.1 控制台输出语句：

控制台语句经常用于测试结果来使用。
可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

4.0.2 typeof运算符

typeof 运算符可以返回被检测的数据类型。

它支持两种语法形式：

作为运算符： typeof x （常用的写法）
函数形式： typeof(x)

换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

4.1 数据类型 – 数字类型（Number）

4.1.1 数字类型

JavaScript 中的正数、负数、小数、整数、NaN等统一称为数字类型。

注意:

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认

Java是强数据类型例如 int a = 3 必须是整数

4.1.2 算术运算符

1 数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

+：求和
-：求差
*：求积
/：求商
%：取模（取余数） [开发中经常作为某个数字是否被整除]

        // 取余
        let name =(112%3)
        document.write(name)
        // 求商
        let name2 =(112/3)
        document.write(name2)

2 同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。

JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。(同数学运算法则)

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级
总结：先乘除后加减，有括号先算括号里面的~~~

2/5 余2 即运算结果为10

4.1.3 计算错误

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

4.2 字符串类型(string)

4.2.1 字符串

通过引号[单引号（ ''）、双引号（ ""）或反引号( ` )] 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号(解析速度更快)。

注意事项：

1. 无论单引号或是双引号必须成对使用

2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

3. 必要时可以使用转义符 \，输出单引号或双引号?

4.2.2 字符串拼接

1 原方法:

场景： + 运算符可以实现字符串的拼接。口诀：数字相加，字符相连

◇使用场景

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

2 模板字符串

◇语法

`` (反引号)
在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
内容拼接变量时，用 ${ } 包住变量

◇ 好处:

更方便地在字符串中放入变量
书写代码时可以任意换行

        //任意换行 
        // 在()中,标签都起效,但在书写代码时,单/双引号不能任意换行,而反引号可以
        document.write(`
    <div>
        <h3>这是标题</h3><br>
        <p>这是段落</p>
    </div>
        `)

4.3 数据类型 – 布尔类型（boolean）

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

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

4.4 数据类型 – 未定义类型（undefined）

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

什么情况出现未定义类型？

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined

工作中的使用场景：

我们开发中经常声明一个变量，等待传送过来的数据。如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来.

undefined 运算

◇undefined+数值→NaN

undefined 转化为数值NaN,NaN与任何数相加都为NaN

◇undefined +'字符串'→'字符串'

4.5 数据类型 – null（空类型）

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

null 和 undefined 区别：

undefined 表示没有赋值
null 表示赋值了，但是内容为空

null 开发中的使用场景：

把 null 作为尚未创建的对象大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null(占个位置)

5 类型转换

5.1 为什么要类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

坑：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

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

5.2 隐式转换

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

规则：

+ 号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型
null 经过数字转换之后会变为 0
undefined 经过数字转换之后会变为 NaN

缺点：

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

小技巧：

+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

5.3 显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。

为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

概念：

自己写代码告诉系统该转成什么类型

1 转换为数字型：

以下两种只适用纯数字:

(如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字)

注: NaN也是number类型的数据，代表非数字

◇+

◇Number(数据)

        let n=('123')
        // 字符串转数字 (必须为纯数字字符串)
        console.log(Number(n))
        console.log(+(n))

        let m=('mm')
        console.log(Number(m))

        // 布尔值转数字
        console.log(Number(true)) //true=1
        console.log(Number(false)) //true=0

以下两种非字符串也适用:

◇parseInt(数据)

只保留整数

◇parseFloat(数据)

可以保留小数

        //parseInt和parseFloat  可以转非顺数字字符串
        let nm=('30.33')
        // parseInt 转整数
        console.log(parseInt(nm))
        // parseFloat转小数
        console.log(parseFloat(nm))

2 转换为字符型:

补充-加号的功能

1 数字求和

2 字符串连接(数字转字符串)

3 字符串转数字

6 扩展

6.1 术语

6.2 扩展-基本数据类型和引用数据类型

堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。

其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

引用数据类型存放到堆里面

1. 简单类型的内存分配

值类型（简单数据类型）： string ，number，boolean，undefined，null
值类型变量的数据直接存放在变量（栈空间）中

2. 复杂类型的内存分配

引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

7 案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息分析： ①：保存输入的3个数据，所以需要3个变量来存储 price count address ②：计算总的价格 price * count ③：页面打印生成表格，里面填充数据即可 ④：使用模板字符串

套路(公式):

1\准备静态标签+样式(HTML+CSS)

2\准备数据(声明变量)

3\展示数据(通过document.write()+模板字符串)

8 每日错题

csyldjy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础 day1 | JS介绍、变量常量、数据类型及转换

1 JavaScript 介绍1.1 JavaScript 是什么1.1.1JavaScript （是什么？）是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。除此之外编程语言还有c,c++,python等.1.1.2作用（做什么？）– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)......
复制链接

扫一扫