因为笼统地叫前端学习日志可能确实是太大了,可能最后变成超巨大的大连载
所以还是决定把HTML、CSS和JS的部分分开比较好
综上这里就是JS学习日志的第一趴啦
JavaScript输出语句
弹窗:alert()语句
alert的意思是警报,这意味着它会弹出一个警告框,在弹窗中显示一条信息并等待用户按下“OK”键。
多条该语句可以导致弹出多个弹窗,每点击一个确定,当前弹窗消失,下一个弹窗弹出
弹窗:confirm()语句
代码运行后,页面上会显示一个弹窗,弹窗上有“确认”和“取消”两个按钮,用户点击确定返回true,点击取消的时候返回false
弹出输入框:prompt()语句
该语句可以弹出一个输入框,用户输入的内容会以字符串形式作为prompt()的返回值来返回, 也即可以用一个变量来接收用户输入的内容。
网页内容区域输出:document.write()语句
document.write
是JavaScript中对document.open
所开启的文档流(document stream操作的API方法,它能够直接在文档流中写入字符串,一旦文档流已经关闭,那document.write
就会重新利用document.open
打开新的文档流并写入,此时原来的文档流会被清空,已渲染好的页面就会被清除,浏览器将重新构建DOM并渲染新的页面。
控制台输出:console.log()打印日志
console表示控制台,在页面中按f12即可打开,console.log语句中的内容会显示在控制台中
console语句可以设置不同的打印登记,log、warn、error
然而并没有什么卵用,三种打印等级只是颜色背景上的区别,warn和error也不会导致你的网页寄掉毕竟这玩意是你自己设置的(乐
因为普通人基本不会看控制台里面的内容,所以console,log里面的内容最好不要期待用户会看到(可以用来埋彩蛋
所以这是否提醒我们以后没事可以看看各个网站控制台里面的信息来瞧一瞧哪里有玄机
做前端开发的时候经常要用控制台来调试,我们甚至可以直接在控制台输入js语句然后执行打印结果
常量和变量
常量包含以下几种:
- 数字常量(数值常量)
- 字符串常量
- 布尔常量
- 自定义常量
数字常量甚至不需要声明,不需要任何其他符号,既可以是整数也可以是浮点数
1 | // 不需要加引号 |
字符串常量需要用单引号或双引号括起来,可以是单词、句子等。
只要是单引号或双引号括起来的内容都是字符串常量
1 | console.log('开心,快乐,尊重,祝福'); |
布尔常量就是表达真或假,只有true
和false
两种或取值
1 | if (true) { |
自定义常量const
const用来声明常量,格式为:
1 | const 常量名称 = 常量取值; |
这样写更符合程序设计的直觉,也易于维护,是已经很常规的思路
变量的声明可以通过var
关键字来进行,比如:
1 | var name; // 定义一个名为 name 的变量。name是变量名。 |
ES6语法及之后的版本中可以通过let
定义变量,变量的初始化以及赋值和其他编程语言大同小异。
如果一个变量没有进行初始化那么这个变量中存储的值是**undefined
**,可以对变量先定义再赋值也可以直接进行初始化
JS中的变量可以重复定义,不会报错,后定义的变量会覆盖先定义的变量
标识符、关键字、保留字
首先,JS大小写敏感
变量建议使用驼峰命名法,命名要有可读性,命名规则和其他编程语言大同小异
标识符也略过了,下面列举一些JS的关键字:
1 | if、else、switch、break、case、default、for、in、do、while、 |
保留字就是预留的“关键字”它们虽然现在还不是关键字,但是未来可能成为关键字,JS保留字如下:
1 | enum、await |
不同版本的说法中保留字也不同
基本数据类型和引用数据类型
数据分为静态数据和动态数据
静态数据指一些永久性数据,一般以文件形式存储在硬盘中,如文档、照片、视频等只要不主动删除就一直存在
动态数据是在程序运行过程中动态产生的临时数据,电脑关闭后这些数据会被清除
在JS中,定义所有变量都可以使用var
关键字,JS是一种弱类型语言,或者说是一种动态语言,这意味着不需要提前声明变量类型,在程序运行过程中,变量的类型会自动根据等号右边的值来确定。
也就是说,变量的数据类型是可以变化的
真是史无前例绝无仅有
1 | var name = 'Ishikami'; |
JS 中一共有八种数据类型
- 基本数据类型(值类型):String 字符串、Number 数值、BigInt 大型数值、Boolean 布尔值、Null 空值、Undefined 未定义、Symbol。
- 引用数据类型(引用类型):Object 对象。
注意:内置对象 Function、Array、Date、RegExp、Error 等都是属于 Object 类型。也就是说,除了那七种基本数据类型之外,其他的,都称之为 Object 类型。
数据类型之间最大的区别:
- 基本数据类型:参数赋值的时候,传数值。
- 引用数据类型:参数赋值的时候,传地址。
什么杂糅怪
栈内存和堆内存
我们首先记住一句话:JS 中,所有的变量都是保存在栈内存中的。
然后来看看下面的区别。
基本数据类型:
基本数据类型的值,直接保存在栈内存中。值与值之间是独立存在,修改一个变量不会影响其他的变量。
引用数据类型:
对象是保存到堆内存中的。每创建一个新的对象,就会在堆内存中开辟出一个新的空间;而变量保存了对象的内存地址(对象的引用),保存在栈内存当中。如果两个变量保存了同一个对象的引用,当一个通过一个变量修改属性时,另一个也会受到影响。
String字符串
注意事项:
1、单引号和双引号不能混用。比如下面这样写是不可以的:
1 | var str = 'hello"; // 报错:Uncaught SyntaxError: Invalid or unexpected token |
2、同类引号不能嵌套:双引号里不能再放双引号,单引号里不能再放单引号。
3、单引号里可以嵌套双引号;双引号里可以嵌套单引号。
4、字符串不可变,当给字符串赋值时,表面上改变了变量的值,实际上已经开辟了新的内存地址用于存放新字符串
转义字符:
在字符串中我们可以使用\
作为转义字符,当表示一些特殊符号时可以使用\
进行转义。
\"
表示"
双引号\'
表示'
单引号\\
表示\
\r
表示回车\n
表示换行。n 的意思是 newline。\t
表示缩进。t 的意思是 tab。\b
表示空格。b 的意思是 blank。
String类型的变量含有length
属性,可以获取整个字符串的长度
字符串可以拼接,具体用法为:
1 | 字符串 + 任意数据类型 = 拼接之后的新字符串; |
拼接规则:拼接前,会把与字符串相加的这个数据类型转成字符串,然后再拼接成一个新的字符串。
ES6中引入了新的字符串拼接方式:模板字符串
1 | console.log(`我是${name},age:${age}`); |
注意这条语句中的引号为反引号(Tab键上方那个
我们可以在模板字符串中插入表达式,并且在表达式中可以并不需要通过转义字符来表达格式
模板字符串中可以调用函数,字符串中调用函数的位置,将会显示函数执行后的返回值,such as:
1 | function getName() { |
模板字符串支持嵌套使用
Number类型
- 最大值:
Number.MAX_VALUE
,这个值为: 1.7976931348623157e+308 - 最小值:
Number.MIN_VALUE
,这个值为: 5e-324
如果使用 Number 表示的变量超过了最大值,则会返回 Infinity。
- 无穷大(正无穷):Infinity
- 无穷小(负无穷):-Infinity
注意:typeof Infinity
的返回结果是 number。
NaN-非数值
1 | console.log('abc' / 18); //结果是NaN |
注意事项:
typeof NaN
的返回结果是 number。- Undefined 和任何数值计算的结果为 NaN。NaN 与任何值都不相等,包括 NaN 本身。
Number类型涉及到加号的使用,若加号两边都是Number类型即是数字相加,否则加号表示连字符,用来连接字符串
隐式转换
-
、*
、/
、%
这几个符号会自动进行隐式转换。
比如“2” + 1
得到的结果是字符串21
,但是“2” - 1
的到的结果是数字1
浮点数运算
JS中整数运算可以保证精确,但是小数运算可能会得到一个不精确的结果,千万不要用JS进行对精确度要求比较高的运算
就连0.1+0.2都能算错了