JavaScript基础 第一天

本套笔记是通过学习B站Pink老师JavaScript核心进阶 前端必学总结的学习笔记，希望自己之后在使用的过程中能够将所学知识融会贯通

学习目标

1. 理解变量是存储数据的容器

2.理解什么是数据并知道数据的类型

3.知道JavaScript数据类型转换的特征

学习目录

1.JavaScript介绍

2.变量

3.数组

4.常量

5.数据类型

6.类型转换

一.JavaScript介绍

1.1.JavaScript是什么

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

1.2.JavaScript 作用是什么

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

1.3.JavaScript的组成

• ECMAScript ：基本语法(变量，分支语句，循环语句，对象)

• Web APIs：

    ① DOM 操作文档，比如对页面元素进行移动，大小，添加删除等操作

    ② BOM 操作浏览器，比如页面弹窗，检测窗口宽度，存储数据到浏览器等

1.4.查询权威网站  : MDN

1.5.JavaScript的书写位置

① 内部JS

• 直接写在HTML文件里，用script标签包住
• 规范：script标签写在</body>的上方
•  将<Script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML,如果先加载的JavaScript期望修改下方的HTML，那么它可能由于HTML尚未被加载而失效，因此，将JavaScript代码放在HTML页面底部附近通常是最好的策略

② 外部JS

• 代码写在以.js结尾的文件里
• 通过script标签，引入到html页面中
•  外部js <script> 标签中间不要写内容，就算写了也不会执行
• 外部JavaScript会使代码更加有序，更易于复用，没有脚本的混合，HTML也会更加易读

③ 内联JS

• 代码写在标签内部

1.6.JavaScript中的注释写法以及结束符写法

 ① 注释

• 单行注释

        （1）符号：//

        （2）作用：// 右边这一行的代码会忽略

        （3）快捷键：ctrl + /

       

• 块注释

          （1）符号:  /*   */

          （2）作用：在/*    */之间的所有内容都会被忽略

          （3）快捷键：shift + alt + a

       

 ② 结束符

• 作用：使用英文的；代表语句的结束
• 实际情况：实际开发中，可写可不写，浏览器可以自动推断语句的结束位置
• 现状：实际开发中，越来越多的人主张，书写javascript代码时省略结束符
• 约定：为了风格统一，可以按照团队要求，要么每句都写，要么每句都不写

1.7.JavaScript输入输出语法

• 输入:显示一个对话框，对话框中包含一条文字信息，用来提示用于输入文字

prompt("请输入您的姓名：")

 

 

• 输出:

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

   向body内输出内容，如果输出的内容写的是标签，也会被解析为网页元素

document.write('hello')
document.write('<h1>hello</h1>')

② alert('要输出的内容')

页面弹出警示对话框

alert('hi')

③ 控制台输出语法: 给程序员用于调试

console.log("hello")

• JS的代码执行顺序

    ① 按HTML文档流顺序执行JavaScript代码

    ② alert() 和 prompt() 会跳出页面渲染先被执行

1.8 字面量

概念：在计算机科学中，字面量是在计算机中描述  事/物

举例：1000 就是数字字面量， ‘hello’就是字符串字面量 

二.变量 

学习目录：

1.变量基本使用

2.变量的本质

3.变量命名规则与规范

2.1 变量的基本使用

① 概念：变量是计算机存储数据的容器，不是数据本身，仅仅是一个用来存储数据的容器

② 变量的声明：想使用变量，首先需要创建变量，创建变量也成为声明变量或者定义变量

③ 变量声明的语法： 

•   let  变量名
• let是关键字，所谓关键字就是系统提供的专门用来声明变量的词语
• 举例 :age是变量的名称，也称为标识符

let age

  ④ 变量赋值：定义一个变量后，你就能够初始化它，在变量名之后跟上一个=，然后是数值

   举例：

age = 18

⑤ 通过变量名来获取变量里面的数据

console.log(age)

⑥ 更新变量：变量赋值后，还可以通过简单地给它一个不同的值来更新它, let 不允许多次声明一个变量

let age = 18
age = 19

⑦ 声明多个变量：变量赋值后，还可以通过简单地给它一个不同的值来更新它，多个变量中间用逗号隔开(不推荐，为了更好的可读性，请一行只声明一个变量)

let age = 18, uname = 'hello'

2.2 变量的本质

① 变量的本质是程序在内存中申请的一块用来存放数据的小空间，然后给这个小空间取一个名字，把一个数据存储到这个空间中，程序想访问的话就用这个名字访问

2.3 变量命名规则与规范

① 规则：是必须遵守的，如果不遵守就会报错

• 不能使用关键字，关键字是一些有特殊含义的字符，JavaScript中内置的一些英语词汇，比如 let var if for
• 只能使用下划线，字母，数字，$组成，且数字不能开头
• 字母严格区分大小写，比如Age和age是不同的变量

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

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

2.4 let和var的区别

• 在旧的JavaScript中，使用关键词var来声明，而不是用let
• var现在开发中一般不再使用它，只是我们可能在老版本程序中看到它
• let为了解决var的一些问题：

             ① var声明可以先使用后声明（`不合理）

             ② var声明过的变量可以重复声明（不合理）

             ③ 比如变量提升，全局变量，没有块级作用域                  

• 声明变量统一使用let

三. 数组

① 数组的概念：将一组数据存储在单个变量名下的优雅方式

② 语法： let 数组名 = [ 数据1，数据2， 数据3]

③ 数组是按顺序保存，所以每个数据都有自己的编号，编号被称为索引或下标，索引从0开始

④ 访问某个数据： 数组名[索引号]

⑤ 数组可以存储任意类型的数据

let week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
console.log(week[6])

⑥ 数组的一些术语

• 元素：数组中保存的每个数据都叫数组元素
• 下标：数组中数据的编号
• 长度：数组中数据的个数，通过length属性获得

四.常量

① 概念：使用const声明的变量称为“常量”

② 使用场景：当某个变量永远不会改变的时候，旧可以使用const来声明，而不是let

③ 命名规范：和变量的命名规范一致

④ 常量使用：

const PI = 3.14;
console.log(PI);
// PI = 3.15;  不允许再次赋值

⑤ 注意: 常量不允许重新赋值，声明的时候必须赋值，也就是说常量必须进行初始化

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

五.数据类型

1.数据类型

2.检测数据类型

5.1 数据类型

① JS中数据类型分为两大类

• 基本数据类型：number 数字型   string 字符串型   boolean 布尔型  undefined 未定义型

      null 空类型

• 引用数据类型：object对象

5.1.1  number 数字型

•  可以是正数，小数，正数，负数，这些统称为数字类型
• JS是弱数据类型，变量到底是属于哪种类型，只有赋值之后，才能确认
• Java是强数据类型，比如 int a = 3  必须是整数

let age = 18
let price = 99.0

• 数字可以有很多操作，比如加减乘除，所以经常和算术运算符一起，算术运算符是指数学运算符，主要包括加减乘除，取余（+  -  *  /）
• 优先级相同时从左到右依次执行
• 优先级与算术运算符优先级相同，先乘除后加减，有括号先算括号中的
• NaN : 表示一个计算错误，它是一个不正确的或者一个未定义的数学操作所得到的结果
• NaN是粘性的，任何对NaN的操作都会返回NaN

5.1.2  string 字符串型

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

注意：

• 无论单引号或是双引号必须成对使用
• 单引号/双引号可以互相嵌套，但不能以自己嵌套自己（可以外单内双，或者内单外双）
• 必要时可以使用转义符\，输出单引号或双引号

let uName = 'hello'

② 字符串拼接

• 场景：  + 运算符可以实现字符串拼接

console.log('cherry' + '老师')

③ 模板字符串（重要）

• 场景：拼接字符串和变量
• 语法：使用`` （反引号，就是tab键上面的那个键），在拼接变量时，用${}包住变量

document.write(`大家好,我叫${name}, 今年${age}岁了` )

5.1.3  boolean 布尔类型

• 表示肯定或者否定时在计算机中对应的是布尔类型
• 有两个固定的值true 或者 false,true表示真的，false表示假的

5.1.4  undefined 未定义类型

• 未定义类型是比较特殊的值，只有一个值undefined
• 什么情况下会出现未定义类型：只声明变量，不赋值的情况下，变量默认值为undefined
• 工作中使用的场景：在开发中经常声明一个变量，等待数据传过来，我们不知道这个数据是否传递过来，这个时候就可以通过检测这个变量是不是undefined，判断用户是否有数据传过来

5.1.5  null空类型

① 概念：null代表"空","无"，“值未知”的特殊值，把null作为尚未创建的对象

② null和undefined的区别

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

5.2 检测数据类型

通过typeof关键字检测数据类型

• typeof运算符可以返回被检测的数据类型，它支持两种语法形式

       ① 作为运算符： typeof x  

       ② 函数形式： typeof(x)

    let num = 10
    console.log(typeof num)
    let str = 'hello'
    console.log(typeof str)
    let obj = null
    console.log(typeof obj)

5.3 类型转换

① 为什么需要类型转换

在收取表单数据的时候，通常收取到的都是字符串类型，就不能进行算术运算，所以这个时候就需要转换变量的数据类型，就是需要把一种数据类型的变量转换为我们需要的数据类型

② 隐式转换和显示转换

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

• 规则

        （1）+ 两边只要有一个是字符串，就会把另外一个转成字符串

        （2）除了 + 以外的算术运算符，比如 -  *  /  等都会把数据转换为数字类型   

• 缺点

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

• 技巧

          (1)  + 作为正号解析可以转换为数字型, 下面得到的结果就是数字型       

console.log(+'123')

        （2）任何数据和字符串相加的结果都是字符串

显示转换

编码时过度依赖系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律，为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换

概念：自己告诉代码需要转成什么类型

① 转换为数字型

    Number(数据)

• 如果字符串内容中有非数字，转换失败时结果为NaN
• NaN也是number类型的数据，表示非数字

    let str = '123'
    console.log(Number(str))

   parseInt(数据)：只保留整数，不会进行四舍五入

   parseFloat(数据)：保留小数