js引入方式
- 通过标签内的src添加
- 直接在
内部填写JS;
JS输出方式
-
document.write()向页面输出内容，会覆盖页面原先的内容 -
console.log向控制台输出内容,通常用来调试网页 -
alert()向页面弹出一个小窗口 -
innerHTML向目标标签内输出html格式的文本 -
innerText向目标标签输出text格式的文本
变量
可以使用 var let cont 声明一个变量
注意：
变量必须先声明 , 再使用
变量可以重复赋值
变量可以赋不同类型的值
一个var 可以声明多个变量 , 变量之间用 " ," 隔开
声明了但是未赋值的变量 值为 undefined;
命名规则
- 开头必须是英文字母、'
$'、'_' ; - 中间或者结尾可以是数字 ;
- 不能包含除了 '
$' 和 '_' 之外的特殊字符; - 不能用 '关键字' 和 '保留字'
- 变量名区分大小写
JS变量类型
基本数据类型
1. number 数值型
2. string 字符串 用单引号或者双引号引起来的字符
3. undefined 未定义的未赋值的, 当变量声明了但是没有赋值，则值为 undefined;
4. null 空值
5. boolean 布尔值 true false
6. symbol 创建一个全局唯一的隐藏的字符串变量
引用数据类型
array 数组
object 对象
//数组Array
let array = [0,1,2,3,4,5]
//对象object
let obj = {
name:"小明",
age: 18
}
关键字 typeof 返回变量的数据类型
typeof "数字" 返回 number
typeof "字符串" 返回 string
typeof "true||false" 返回 boolean
typeof "Array/数组" 返回 object
typeof "objcet/对象" 返回 object
typeof "function" 返回 function
数值型
- var a = 1; var a = 0.1; // 等同于 var a = .1;
- NaN not a number 非数字
- NaN 跟任何数据比大小 返回值都是 false;
- Infinity 无穷大 -Infinity 无穷小
字符串
用单引号 '' 或者双引号 "" 引起来的字符就是字符串;
注意 : 单引号开头用单引号结尾，双引号开头用双引号结尾
- 属性
length字符串的长度
str.length取得str的字符长度 - 索引
字符的位置(目录) 从 '0' 开始
str[0]取得 str 中索引为0的字符
Boolean 布尔值
用于逻辑判断
只有两个值 true false
数组以及对象在后面进行介绍
js 的六种假值
- 数字 '
0' - 空字符串 '
""' - 非数字 '
NaN' - 布尔值 '
false' - 空值 '
null' - 未定义 '
undefined'
数据类型转换
转成数字
-
parseInt()- 从左向右逐个查找字符,直到找到不符合整数规则的字符为止,把前边的字符转成整数, parseInt 能够将 0x 识别为 16进制的数字前缀
- 基模式 parseInt(number,N) 将字符串 number 当作是 N 进制的数字 向10进制转换
-
parseFloat()- 从左向右逐个查找字符,直到找到不符合整数规则的字符为止,把前边的字符转成小数
-
Number(n)- 首先检查 n 整体符不符合数字的规则,如果符合再选择使用parseInt 或者 parseFloat 来转成对应的数字,如果不符合数字的规则则转为NaN
- Number 能够将null 转为0 不能讲undefined 转为0，只能转成NaN;
转成字符串
-
a.toString();将a 转成字符串- a.toString(N) 基模式 如果a是个数字, 将a作为10进制的数字转为N进制
String(a); 将a 转成字符串
注意: 在转换 null 和 undefined 的时候, 'String()' 能把它们正常的转为 字符串 'null' 和 字符串 'undefined' , 'toString()' 不能转换
转成布尔值
Boolean(a) 将a转成布尔值
引用数据类型
array 数组 是一系列数据的集合,用'[ ]'包括
object 对象 是对某一个目标的 '键值对' 的集合 也称为 '属性内容' 的集合
创建数组的方式
var arr = new Array(1,2,3);// 使用new方法实例化一个数组 内容为 [1,2,3]
var arr = [1,2,3];// 等同于上一步
注意 : var arr = new Array(3);// 代表创建一个length为3的数组,目前里面的元素全是 undefined
var arr = new Array(1,2,3);
var arr = [1,2,3];
数组的默认属性
数组默认具有两个属性,'length' 以及 'index'
对于 var arr = [1,2,3]
length 数组的长度
Index 索引 数组的下标 从 0 开始
创建对象的方式
var obj = new Object(); 使用new方法生成实例化对象obj
var obj = {}直接使用字面量方式创建对象obj
var obj = new Object();
var obj = { // 字面量
name:'yutiantian',
age:18
}
访问对象的属性值的两种方式
console.log(obj.name)
console.log(obj['name']);
区别在于用 [] 取值的的时候，中括号里可以是变量, 但用 . 取属性值的时候不可以写变量, . 后跟着的名字会被当做 obj 的属性名使用, 如果obj没有这个属性会返回 undefined
注意 ： 对象没有`length` 属性 , 对象的属性不分先后
var obj = {
name:"小明"
};
// 1. 直接修改
//添加age
obj.age=18;
//修改name
obj.name = "张三"
//2. 通过变量修改
var name1 = "name"
var age1 = "age"
//修改name
obj[name1] = "李四
//修改age
obj[age1] = 25;
引用类型与普通类型的区别
在创建类型时，普通类型被存放在栈内存中，而引用类型被存放在堆内存中。
引用类型想要被调用时，需要通过栈内存中存放的地址来找到自己。如果多个变量指向同一个引用类型，那么任何操作都会修改引用类型本体。
运算符
数学运算符（算术运算符）
+ 、- 、*、/(除法) 、%（取余/取模）
'+'不仅表示数学加法，还表示 字符串的连接符，当数字与字符串相加的时候，会把数字当做字符串然后与另一个字符串拼接起来
' -. * ./ .%'表示数学运算，当数字与字符串执行这些运算时，会尝试将字符串转成数字然后再进行数学运算，如果转不成，则返回 NaN
(隐式类型转换)
+= 、-= 、*= 、/=、%=
自增自减
i++ 前自增量;
++i 后自增量;
'++i'和 '--i'都会让 i 的值 +1, 区别在于:
'++i' 这个表达式的结果是 先让i的值 +1 在输出结果,
'i++' 先把 i原本的值输出 再让 i 的值 +1 ;
'i--' 前自减量;
'--i '后自减量;
关系运算符
\> 、< 、>= 、 <=
规则
当两边都是 '数字' 的时候，按照数学关系比较大小
当其中一边是 '数字' 的时候，会尝试将另外一个转成number格式，如果能转成数字，则按照数学关系比较 ，
如果转换失败则返回`NaN` 。`NaN`参与了关系比较的时候除了 `!= `和 `!== `之外，其他全部返回` 'false'`
当两边都是 字符串 的时候, 会从左向右一位一位的比较他们的 ASCII 码值,直到遇到不相等的位置
`==` 、 `===` 、 `!=` 、 `!==`
'`==`' 如果等号两边的值在经过数据类型转换之后相等，则返回 true，否则返回false
!= 如果 == 返回true，则 != 返回false ，如果 == 返回 false ,则 != 返回true
'`===`' 等号不仅值相等，数据类型也必须相等，才会返回true ,否则返回 false
'`!==`' 如果 === 返回true,则 !== 返回false, 如果 === 返回false, 则 !== 返回true
逻辑运算符
!、&&、||
'!' 逻辑非 取反 返回一个 boolean 值
'&& ' 逻辑与 与运算符 符号两边都是 true的时候才会返回true
- 返回值：
console.log(a && b);如果 a 为true 则直接返回 b 的值，如果a 是false 则返回a
'||' 逻辑或 或运算符 符号两边任意一个 为true 就会返回true
- 返回值：
console.log(a || b);如果a为true 则直接返回 a 的值，如果a 是false 则返回b
其他运算符
'=' 赋值运算符 将等号右边计算完成之后再赋值给等号左边;
',' 逗号运算符
'条件 ? 结果1 : 结果2 条件运算符' (三目运算符) 如果条件成立 则返回 结果1 否则返回结果2
'delete'删除对象的属性或者方法
'void' 将变量的值置为undefined
var a = void 0;// undefined;
运算符优先级
一元运算符 (!) >算术运算符(和) > 关系运算符 > && > || > = > ,
条件语句
if语句
if(条件){
条件成立时执行的代码
}else{
条件不成立时执行的代码
}
if(条件1){
条件1成立时执行的代码
}else if(条件2){
条件2成立时执行的代码
}else if(条件3){
条件3成立时执行的代码
}else{
以上条件都不成立时执行的代码
}
switch
switch (条件){
case 值1:
当条件与 值1 匹配时要执行的代码; break;
...
case 值n:
当条件与 值n 匹配时要执行的代码; break;
default:
当以上所有的值与 条件都不匹配时要执行的代码;
}
- case 代表 switch 里所有可能的情况
- break 当匹配到某个 case 时,执行完要执行的代码之后,跳出switch 判断,如果没有 break ，switch 会一直向下执行，直到switch 结束或者遇到一个break为止
- default 代表所有的case 都不能与条件匹配上时，执行default里的代码
循环语句
for循环
for(初始变量;判断条件;变化量){
要执行的代码 （循环体）
}
- 执行初始条件
- 判断结束条件,如果条件成立 执行循环体,如果条件不成立 跳出循环
- 循环体执行完之后,执行变化量,然后接着判断结束条件
while循环
while(条件){
满足条件时要执行的代码;
变化量
}
do while 循环
do{
满足条件时要执行的代码;
变化量
}while(条件)
do...while... 和 while... 的区别是 do会先执行一次循环体,然后再判断条件, while是先判断条件再执行循环体
for in
- for in通常用于对于对象的遍历
for(var i in obj){
console.log(i);// i 指的是obj的 每一个属性名
console.log(obj[i]);// i 是变量,要用i取obj得属性值，只能通过 obj[i] 的形式取值
}
跳出循环的方法
break :跳出当前循环
continue :跳过本次循环;