javascript 基础
书写位置
第一种: 写在script
标签中
第二种: 引入一个 js 文件
注意:
- script 可以放在很多地方,但是我们一般规范写在 body 的最后面;
- 使用 src 引入的标签不能再在标签内写 js 代码 (写了不会执行)
!> 通过 src
请求到的 js
文件,会被解析到 script
标签内,并且覆盖原 script
标签内的 js
代码
!> script 标签的 src 属性可以写任何路径或文件,并不仅仅只能写 js 文件
注释
注释代码不会被执行,仅仅起到一个提示的作用。注释可以对复杂的代码进行解释,方便后期的维护和开发。
单行注释 :
// 这是单行注释, 单行注释只能写一行代码
// 快捷键: ctrl + /多行注释 :
/*
这是多行注释,在多行注释中可以
换行
快捷键 ctrl + shift + /
不可嵌套
*/
输出语句 (5 种)
alert : 警告框
// alert会弹出一个警告框
alert('hello world')confirm : 确认框
// confirm弹出一个确定框
confirm('我帅吗?')prompt : 输入框
// prompt:弹出一个输入框,可以输入值
prompt('请输入你的真是年龄')document.write : 网页中写入内容
// 可以识别标签
document.write('hello world')
document.write('<h1>hello world</h1>')
document.write(Date()) // 输出当前时间console.log:控制台输出
// F12打开控制台,在console中可以看到打印的信息
console.log('hello word')
变量
// var 声明变量 |
变量命名要求(变量是[标识符][1]的一种)
- 以字母、下划线或美元符号($)开头
- 由字母、下划线、美元符号($)和数字组成
- 标识符区分大小写
- 标识符不能使用关键字和保留字
- 如果重新声明 JavaScript 变量,该变量的值不会丢失
var car='yellow'; var car
car 的值依然是 ‘yellow’
关键字 (有特殊意义的一些单词)
break
do
instanceof
typeof
case
else
new
var
in
catch
finally
return
void
continue
for
switch
while
try
debugger
function
this
with
default
if
throw
delete
保留字
abstract
enum
int
short
boolean
export
interface
static
extends
long
super
Char
final
native
Class
synchronized
package
throws
Const
goto
private
transient
degubber
implements
volatile
double
import
public
byte
float
protected
交换两个变量的值
- 使用临时变量 (必须掌握)
var temp = a |
- 不使用临时变量
a = a + b |
基本数据类型
Number
- 浮点数
var num = 3.1416 // 3.1416 |
- 整数
var num = 10 // 10 |
- 特殊值
NaN
Infinity
var num = 1 / 0 // Infinity (无穷大) |
通过
isNaN(num)
可以判断是否是一个数字,返回 false 的时候,表示是一个数字
- 浮点数精度丢失问题
// 在进行浮点数运算的时候,可能会出现精度丢失的问题 |
String
只要是在单引号或双引号内的就是 String
类型
var name1 = 'hello' |
若在字符串中使用引号,字符串中的引号不要与字符串的引号相同,或在字符串添加转义字符
\
字符串可以是对象
var x = 'john' |
Boolean
布尔型,只有 true
和 false
两个值,且是小写
true : 1
、2
、1.1
、-1
、'0'
、'1'
、[]
、Infinity
、-Infinity
、…
false : 0
、''
、null
、NaN
、undefined
所有非 0 数都是 true,0 是 false
真值: 在 JavaScript 中,**Truthy**(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false
、0
、""
、null
、undefined
和 NaN
以外皆为真值)
Array
var car = new Array() |
关键词
new
用于声明新变量的类型
Object
由花括号分隔,属性和方法的容器;对象的属性以名称和值对的形式 (name : value) 来定义;多个属性由逗号分隔。对象的方法定义了一个函数,并作为对象的属性存储。对象方法通过添加 ()
调用
var cat = new Object() |
对象属性有两种访问方式:
name = cat.name |
对象方法的访问:
eat = cat.eat() // 输出函数执行结果 |
Null
只有一个值:null
,表示对象不存在
var cat = null // 将cat的值清空 |
- str.match()方法匹配不到返回 null
- 通过 document.querySelector、getElementById() 获取不到元素返回 null
Undefined
只有一个值:undefined
- 已声明未赋值的变量
var a |
- 没有明确返回值的变量
// 获取对象不存在的属性 |
typeof 操作符
是一个操作符而不是函数,圆括号可以使用,但不是必需的
var num |
判断语句
if 语句
- 单独的 if 语句
// 语法 |
if..else
语句
// 语法 |
if..else if ..else
语句
if (条件1) { |
三元运算符
条件 ? 表达式1 : 表达式2 |
switch 语句
if..else 适用于范围的判断,switch..case 适用于具体的值的判断
// 语法 |
注意 :
break 可以省略,如果省略,代码会继续执行下一个 case
switch 语句在比较值时使用的是 全等 操作符, 因此不会发生类型转换(例如,字符串’10’ 不等于数值 10)
循环语句
while 循环
基本语法 :
// 当循环条件为true时,执行循环体 |
代码示例:
// 计算1-100之间所有数的和 (讲) |
do..while 循环
do..while 循环和 while 循环非常像,二者经常可以相互替代,但是 do..while 的特点是不管条件成不成立,都会执行一次。
基础语法 :
do { |
代码示例 :
// 初始化变量 |
for 循环
for 循环语法:
// 1. for循环使用分号分隔 |
执行顺序:1243 —- 243 —–243(直到循环条件变成 false)
- 初始化语句
- 判断语句
- 自增或者自减
- 循环体
for 循环代码示例:
// 打印1-5之间所有数 |
思考 1:
// 1 求1-100之间所有数的和、平均值 |
思考 2:
// 1 计算1-100之间不能被7整除的数的和 |
思考 3(双重 for 循环):
// 1 网页打印5*5方形★阵 document.write() |
for ..in 循环
详见遍历对象
break 和 continue
break: 结束/中止循环(可以用在 switch 语句和循环语句中)
立即跳出当前整个循环,即循环结束,开始执行循环后面的内容(直接跳传出大括号)
continue: 结束本次循环,进行下一次循环 (只能用在循环语句中)
立即跳出当前循环,继续下一次循环(跳到 i++的地方)
在一个循环里,continue 和 break 后面不能在写任何语句,因为永远无法执行到
思考 1 :
// 输出结果是什么? 1 2 3 4 6 |
总结 :
- 循环有很多种,但是以后用得最多的是 for 循环
- 当不明确循环次数的时候,可以使用 while 循环
- 当无论如何都要执行一次代码的时候,可以使用 do..while 循环
- 循环可以相互替代
Array 数组
- 将多个元素,按一定顺序排列放到一个集合中 , 那么这个集合我们就称之为数组
- 可以存放任意类型的数据(一般一个数组只存放一种类型)
- 特点 : 用逗号隔开,有顺序,有长度,数组长度可以动态调整
- 用途 : 存储大量的数据
// 为什么要有数组? |
创建数组
通过 构造函数 创建数组
var arr = new Array() // 创建了一个空数组
var arr = new Array(4) // 创建了一个数组,长度为4,里面全是空值
var arr = new Array('4') // 创建了一个数组,长度为1,内容为字符串 '4'
var arr = new Array(2, 3) // 创建了一个数组,里面存放了2个数字通过 数组字面量 创建数组
var arr1 = [] // 创建一个空数组
var arr2 = [4] // 创建了一个数组,长度为1,内容为数字 4
var arr2 = [2, 3] // 创建一个包含2个数值的数组,多个数组项以逗号隔开
var arr3 = ['2', 'b'] // 创建一个包含两个字符串的数组
数组的长度与下标
数组的长度 : 跟字符串一样,数组有一个 length 属性,, 指数组中存放的元素的个数
var arr = [] // 空数组 长度为 0
var arr = [1, 3, 5]
arr.length // 长度就是3
arr.length = 0 // 设置length属性改变数组中元素的个数数组的下标(又称索引) : 因为数组有序的,有序的就应该有自己的序号,而这个序号就是每个元素对应的下标,下标从 0 开始 , 到 arr.length-1 结束
// 数组取值,如果下标不存在,则返回 undefined
var arr = ['zs', 'ls', 'ww']
arr[0] // zs
arr[2] // ww
arr[5] // undefined
// 数组的赋值
// 格式:数组名[下标] = 值
// 如果下标有对应的值,会把原来的值覆盖,如果下标不存在,会给数组新增一个元素。
var arr = ['red', 'green', 'blue']
arr[0] = 'yellow' // 把red替换成了yellow
arr[3] = 'pink' // 给数组新增加了一个pink的值
// 如果下标有跨度,中间全是empty 不合法
// 在数组末尾添加新的元素
arr[arr.length] = 值
arr.push(值)
数组的遍历
遍历 : 对数组的每一个元素都访问一次就叫遍历
数组遍历的基本语法:
for (var i = 0; i < arr.length; i++) { |
冒泡排序
// 将数组中的数从小到大排列 |
对象
查看一个对象的类型(类型识别)
typeof // 只能查看基本数据类型的类型 |
typeof
用于查看基本数据的数据类型, number string boolean undefined
null 比较特殊,结果是 object
如果查看复杂数据类型,返回的都是 object 类型
函数的结果是 function
// typeof 判断 |
instanceof 判断
// 语法 |
用来检测 constructor.prototype
是否存在于参数 object
的原型链中
不能用于类型识别
// instanceof 判断 |
constructor.name
Undefined/Null 没有 constructor 属性
var myArr = [] |
Object.prototype.toString
适用于任何类型的检测,不能识别自定义对象类型
Object.prototype.toString.call('str') // '[object String]' |
原始类型与引用类型
- 原始类型(简单数据类型/值类型)
Number
String
Boolean
Undefined
Null
- 引用类型(复杂数据类型)
Object
Array
function
自定义的对象
var num1 = 123 |
原始数据类型和引用数据类型,主要是根据内存存储方式来区分的
- 原始类型储存在栈(Stack)中,存的是值本身(值类型),进行赋值的时候,赋值的是值本身
- 引用类型储存在堆(Heap)中,并非储存变量真实数值而是引用(也叫地址),进行赋值的时候,赋值的是地址,而不是数据本身
内置对象
JS 内置对象就是指 Javascript 自带的一些对象,供开发者使用,这些对象提供了一些常用的的功能。
常见的内置对象有 Math、String、Array、Date 等
- 跳转到定义
ctrl+左键
- 火狐开发者网站 MDN
Math 对象
属性 PI
Math.PI
最大值/最小值
Math.max() |
- 取整
Math.ceil() // 向上取整 |
- 随机数
Math.random() // 返回一个[0,1)之间的数,能取到0,取不到1 |
- 绝对值
Math.abs() // 求绝对值 |
- 次幂和平方
Math.pow(num, power) // 求 num 的 power 次方 |
- 练习
// 随机生成一个 rgb 颜色? |
Date 对象
Date 对象用来处理日期和时间
- 创建一个日期对象
// 不传参数:创建一个当前时间的对象 |
- 日期格式化(了解)
date.toString() // 默认的日期格式 ,包括日期和时间 |
- 获取日期的指定部分
getMilliseconds() // 获取毫秒值 |
- 时间戳
var date = +new Date() // 1970年01月01日00时00分00秒起至现在的总毫秒数 |
基本包装类型
简单数据类型是没有方法的。为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String/Number/Boolean
基本包装类型:把基本类型包装成复杂类型
var str = 'abc' |
Number 对象
Number 对象是数字的包装类型,数字可以直接使用这些方法
num.toFixed(2)
:返回保留 2 位小数的新数的字符串格式num.toString()
:转换成字符串并返回
Boolean 对象
Boolean 对象是布尔类型的包装类型
toString() // 转换成字符串并返回 |
undefined 和 null 没有包装类型,所以调用 toString 方法会报错