JavaScript基础语法笔记

JavaScript是什么？

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

JavaScript能干什么？

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

JavaScript的组成

• ECMAScript

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

比如：变量，分支语句，循环语句，对象等等。

• Web APIs

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

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

JavaScript书写位置

• 内部JavaScript

直接写在HTML文件里，用script标签包裹。

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

拓展：alert('你好JS')页面弹出警告对话框。

• 外部JavaScript

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

语法：通过script标签的src属性，引入到HTML页面中。

• 内联JavaScript

代码写在标签内部。

了解即可，后面vue会用到这种模式。

JavaScript注释

• 单行注释

符号：//

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

快捷键：CTRL + /

• 块注释

符号：/* */

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

快捷键：shift + alt + a

结束符

代表语句结束。

英文分号;。

可写可不写（现在不写结束符的程序员越来越多）。

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

因此在实际开发中有许多人主张写JavaScript代码时省略结束符。

但为了风格统一，要写结束符就每句都写，要么每句都不写。

输入输出语法

什么是语法：人和计算机打交道的规则约定，我们要按照这个规则去写。

输出和输入也可以理解为人和计算机的交互，用户通过键盘，鼠标等向计算机输入信息，计算机处理后再展示给用户，这便是一次输入和输出的过程。

• 输出语法

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

向body内输出内容。

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

alert('需要输出的内容')；

页面弹出警告对话框。

console.log('向浏览器控制台打印')；

控制台输出语法，调试使用。

• 输入语法

prompt('你叫什么？');

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

字面量

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

比如：

我的工资是1000，此时1000就是数字字面量。

'你好 世界' 字符串字面量。

[  ] 数组字面量，{  } 对象字面量等等。

变量是什么？

白话：变量就是一个装东西的盒子。

通俗：变量就是计算机存储数据的“容器”，使得计算机变得有记忆了。

声明变量

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

语法：

let 变量名

声明变量有两个部分构成：声明关键字，变量名（标识）。

let即关键字（let：允许，许可，让，要），所谓关键字就是系统提供的专门用来声明（定义）变量的词语。

举例：

let age

变量赋值

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

let age
//赋值 将18这个数据存入age中
age = 18
//这样age的值就成了18
document.write(age)

初始化变量

//声明变量的同时并赋值
let age = 18

更新变量

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

//声明了一个age变量 同时存了一个18的数据
let age = 18
//变量里面的数据发生变化 更新为19
age = 19
//页面输出的结果为19
document.write(age)

同时声明多个变量

一个变量不能多次声明，但可多次声明不同的变量。

let age = 18,uname = '靓仔'

变量案例-弹出姓名

需求：

浏览器中弹出对话框：请您输入姓名。页面中输出：用户输入的姓名。

1. 输入：用户输入框：prompt()。
2. 内部处理：保存数据。
3. 输出：页面打印document.write()。

案例代码：

//把用户输入的数据存到变量中（uname）
let uname = prompt('请您输入姓名')
//然后页面直接打印这个变量即可
document.write(uname)

变量案例-交换变量的值

需求：

有2个变量，num1里面放的是10，num2里面放的是20。

最后变为num1里面是20，num2里面放的是10。

目的：

1. 练习变量的使用。
2. 为了后面冒泡排序做准备。

案例代码：

let num1 = 10
let num2 = 20
let num3
num3 = num1
num1 = num2
num2 = num3
document.write(num1, num2)

变量的本质

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

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

变量命名规范于规则

规则：必须遵守，不然报错。

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

• 规则：

不能用关键字。

只能用下划线，数字，字母，$组成，且数字不能开头。

字母严格区分大小写，比如Age与age是两个不同的变量。

• 规范：

起名需要具有意义。

遵守小骆驼峰命名法，第一个单词首字母小写，后面每个单词首字母大写：userName

let与var的区别

let为了解决var的一些问题。

var声明：

• 可以先使用后声明（不合理）。
• var声明过的变量可以重复声明（不合理）。
• 比如变量提升，全局变量，没有块级作用域等等。

数组

数组（Array）是一中可以按顺序保存多个数据。

let arr = [ ]

数组声明语法

let 数组名 = [数据1,数据2,数据3,数据n...]

例式：

let arr = ['小明', '小红', '小花', '小美', '小哥']

数组是按顺序保存，所以每个数据都有自己的编号。

计算机中的编号从0开始，所以小明的编号为0，小红为1，以此类推。

在数组中，数据的编号也叫：索引或下标。

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

数组取值语法

//数组名[下标]
let arr = ['小妹', '小哥']
document.write(arr[0])
//输出结果为：小妹

一些术语

元素：

数组中保存的每个数据都叫数组元素。

下标：

数组中数据的编号。

长度：

数组中数据的个数，通过数组的length属性获得。

let arr = ['小美', '小梅', '小妹']
document.write(arr[0]) //小美
document.write(arr[2]) //小妹
document.write(arr.length) //3

数组取值案例

需求：

定义一个数组，里面存放周1 ~ 周7（7天），页面中打印出周7。

代码：

let arr = ['周1', '周2', '周3', '周4', '周5', '周6', '周7']
document.write(arr[6])

数据类型

计算机中的万事万物都是数据。

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

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

JS数据类型基本分为两大类：

• 基本数据类型

number:数字型

string:字符串型

boolean:布尔型

undefined:未定义型

null:空型

• 引用数据类型

object:对象

function:函数

array:数组

数字类型（number）

即数学中的数字，可以是整数，小数，负数，，正数。

let num1 = 100  //正整数
let num2 = 100.1  //小数
let num3 = -100  //负数

JavaScript是弱数据类型，变量到底属于什么类型，只有赋值后才确定。

字符串类型（string）

通过单引号 '  ' 或者双引号 "  " 包裹的数据都叫字符串。

单引号和双引号本质上没有什么区别，推荐单引号。

let name = '好好学习，天天向上'
let str = '666'
let age = "18"
let str1 = '牛掰'
let str2 = ' '

字符串拼接

document.write('我是' + '刘德华') //我是刘德华
let str1 = '我非常非常地'
let str2 = '霸气侧漏'
document.write(str1 + str2) //我非常非常地霸气侧漏

字符串拼接案例

需求：

页面弹出输入框要求输入用户姓名。

然后弹出：我的姓名是：xxx

代码：

let pro = prompt('您的姓名？')
let name = '我的姓名是：'
alert(name + pro)

模板字符串

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

符号：``

在英文输入键tap上方的按键。

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

let name = '刘德华'
let age = 18
document.write(`大家好，我叫${name},今年${age}岁了`)
//大家好，我叫刘德华，今年18岁了

模板字符串案例

需求：

页面弹出对话框，输入姓名和年龄，页面显示：大家好，我叫xxx，今年xx岁了。

代码：

let name = prompt('请输入您的姓名！')
let age = prompt('请输入您的年龄！')
alert(`大家好，我叫${name},今年${age}岁了`)

布尔类型（boolean）

表示肯定或者否定时，在计算机中对应的时布尔值。

它有两个固定的值：true和false，true(真），false(假）。

//胡歌帅不帅？
let shuai = true  //是
let bushuai = false //否

未定义类型（undefined）

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

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

只声明变量，不赋值得情况下，变量的默认值为undefined，一般很少（直接）给某个变量赋值为undefined。

let name
console.log(name)
//只声明不赋值，输出结果为undefined

undefined工作中的使用场景

我们开发中经常声明一个变量，等待传送过来的数据。

如果我们不知道这个数据是否传输过来，此时我可以通过检测这个变量的值是否为undefined，就判断用户是否有数据传递过来。

空类型（null）

null表示值为空。

let obj = null

null和undefinde的区别

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

null工作中的使用场景

官方解释：把null作为尚未创建的对象。

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

通过typeof检测数据类型

let age = 18
let name = '刘德华'
let flag = false
let unde
console.log(typeof age) //number
console.log(typeof name) //string
console.log(typeof flag) //boolean
console.log(typeof unde) //undefined

为什么需要类型转换

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

坑：

使用表单，prompt获取过来的数据默认是字符串类型，因此就不能直接简单的相加减运算了。

此时我们需要把一种数据类型转换成需要的类型。

隐式转换

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

规则：

+ 号两边只要有一个是字符串，都会把另外一个转成字符串。

除了 + 以外的算术运算符，比如 - * / 等都会把数据转成数字类型。

缺点：

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

小技巧：

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

console.log(11 + 11)  //22
console.log('11' + 11)  //1111
console.log(11 - 11)  //0
console.log('11' - 11)  //0
console.log(1 * 1)  //1
console.log('1' * 1)  //1
console.log(typeof '123')  //string
console.log(typeof +'123')  //number
console.log(+'11' + 11)  //22

显式转换

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

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

概念：

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

转换为数字型：

• Number(数据)

let num = '10'  //string
console.log(Number(num))  //10
console.log(typeof Number(num))  //number

转成数字类型。

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

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

• parseInt(数据)

只保留整数

let num = '10.1'
console.log(parseInt(num))  //10

• parseFloat(数据)

可以保留小数

let num = '10.9999'
console.log(parseFloat(num))  //10.9999

Number与parseFloat的区别：

Number只认数字的字符串，否则返回NaN（not a number,非数字）。

parseFloat会自动忽略已数字开头后面的非数字的字符串。

转换为字符型

• String(数据)

let str = 10
console.log(String(str))  //'10'

• 变量.toString(进制)

let str = 18
console.log(str.toString())  //'18'

算术运算符

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

• + :求和
• -  :就差
• *  :求积
• /  :求商
• %:取模（取余数）