五种JS的基本类型语法
1>字符串string: 一切 单引号' ' 双引号" " 反引号` ` 包起来的内容
2>数字number:一切 数学中的数字
3>布尔boolean:true false
4>undefined未定义
5>null空值
其中typeof是来检测数据类型,得到一个字符串并展示它是什么类型的
console.log( typeof 123 )//'number'
console.log( typeof '123' )//'string'
console.log( typeof true )//'boolean'
console.log( typeof undefined )//'undefined'
console.log( typeof null )//'object'
变量最基本的使用:
1.变量的作用:在内存中存储 数据
2.变量语法:
2.1 声明变量: let 变量名
2.2 变量赋值: 变量名 = 值
2.3 变量取值: 变量名
注意:
1 变量不允许重复声明 2 变量重新赋值:先销毁旧值,然后存入新值 3 变量之间赋值:取出变量的数据拷贝一份,然后复制
变量名命名规则:
1.规则 : 必须要遵守,不遵守就会报错
1.1 变量名必须以 : $ 、下划线_ 、字母开头,后面可以是$ 、下划线_ 、字母、数字
1.2 变量名不能是关键字
2.规范 : 所有程序员都养成的一种习惯
2.1 取名要有意义,最好是英文名词
2.2 多个单词使用小驼峰命名
首单词小写,后面单词首字母大写
常量:值无法被修改
字面量:
js中的数据有两种使用方法
1.先存入变量中, 通过变量取值语法来使用
变量 : 指的是内存中的一块空间,里面的数据是可变的。(变量是内存空间)
2.不存入变量中,直接拿来使用
字面量 : 指的是一个固定的数据(字面量是数据)
运算符与表达式
1.运算符:用于运算的符号
2.算术运算符:用于数学算术运算 + - * / %(求模,取余数)
3.表达式 : 由运算符组成的式子
4.算术表达式 : 算术运算符组成的式子
重点: 表达式一定会有运算结果
5.赋值运算符:= += -= *= /= %=
= : 赋值运算符。 右边数据 存入 左边的变量
= 的左边只能是变量,不能是字面量
6.自增与自减运算符:自增(自身+1)运算符 ++
自增表达式: num++
自减表达式: num--
7.连接符:
1.如果字符串不需要变量取值 : ''
2.如果字符串需要变量取值 : ` ${变量名} `
8.关系运算符与关系表达式:
1. 算术运算符 : 数学算术运算
2. 关系(比较)运算符 : 比较两个数据之间的关系是否成立
> >= < <= ==(相等) !=(不等) ===(全等) !==(不全等)
3.关系表达式 : 由关系运算符组成的式子
重点 : 关系表达式运算结果 一定是 布尔类型. true:成立 false:不成立
= : 赋值运算符。 =号右边数据 存入 左边变量中
== : 相等运算符 只比较值,不比较数据类型
=== : 全等运算符 先比较数据类型,后比较值
9.逻辑运算符 : 计算 多个条件 是否成立
&& : 逻辑与,读作 并且
* 一假则假
|| : 逻辑或,读作 或者
* 一真则真
! : 逻辑非,读作 取反
* true变false, false变true
逻辑表达式 : 左边式子 逻辑运算符 右边式子
10.运算符优先级: 不同的运算符在一个式子中的运算顺序
() : 优先级最高
一元: ++ -- !
算术
关系
逻辑
赋值
开发中遇到复杂的式子,一般使用()小括号提升优先级
数据类型的转换
当数据类型不一致的时候,达不到预期需求。(需要转换数据类型进行运算)
其他类型转number类型:
(1)字符转整数: parseInt( 数据 )
(2)字符转小数: parseFloat( 数据 )
(3)其他转数字 : Number( 数据 )
number类型特殊值NaN: NaN : number类型的特殊值
not a number : 不是一个数字。 如果你的数学运算得不到一个数字,则会得到NaN
NaN含义 : 表示的是错误的运算,出现NaN一般就是代码有bug
NaN不能参与任何运算,结果一律是NaN
转换string类型:
- String(数据)
console.log( String(123) )//'123'
console.log( String(true) )//'true'
console.log( String(undefined) )//'undefined'
console.log( String(null) )//'null'
let num = 255
//2. 变量名.toString()
/* a. 如果是undefined与null,这种方式会报错
b. 这种方式可以支持进制转换。 例如把 十进制转十六进制
*/
console.log( num.toString(16) )//把数字转成十六进制字符
转换boolean类型:
// Boolean(数据)
/*
1.false: 有7种数据会得到false
0 -0 NaN undefined null '' false
2.true: 除false 7种之外的一切数据
*/
console.log( Boolean(0) )//false
console.log( Boolean(-0) )//false
console.log( Boolean(NaN) )//false
console.log( Boolean(undefined) )//false
console.log( Boolean(null) )//false
console.log( Boolean('') )//false
console.log( Boolean(false) )//false
隐式转换:
/*
1. 显式转换 : 程序员主动使用语法去转换类型 (阅读性高)
1.1 其他类型转number类型
parentInt() : 转整数
parentFloat() : 转小数
Number() : 布尔转数字 1 0
1.2 其他类型转string类型
String() : 转数字
1.3 其他类型转Boolean类型
Boolean() : 转布尔类型
2.隐式转换 : 当运算符两边‘数据类型不一样’的时候,编译器会先帮我们转成一样之后再计算
2.1 转数字 : 算术运算符 + - * / %
2.2 转字符串 : 连接符 +
2.3 转布尔 : 逻辑非 !
*/
// 1. 转数字 : 算术运算符 + - * / %
console.log( '10' - 1 )//9 Number('10') - 1
console.log( 1 + true )//2 1 + Number(true)
console.log( +'10' )//10 数学正号
//2. 转字符串 : 连接符 +
// +号只要有字符串就是连接符
console.log( '1' + true )//'1true' '1' + String(true)
//3.转布尔 : 逻辑非!
console.log( !1 ) //false !Boolean(1)
console.log( !null )//true !Boolean(null)
undefined与null区别:
/*
1. undefined : 未定义。 变量有声明,未赋值,此时变量的默认值就是undefined
* 说人话 : undefined就像期房 : 买了房,但是房子还没有建 (没有值)
2. null : 空值。 变量有赋值,值为空
* 说人话 : null就像毛坯房 : 买了房,房子有建,但是里面是空的 (有值,只不过是空值)
*/
//undefined和null共同点 : 值相等, 转布尔类型都是false
console.log( undefined == null )//true
console.log( Boolean(undefined) )//false
console.log( Boolean(null) )//false
//undefined和null不同点 : 数据类型不同, 转number类型值不同
console.log( undefined === null )//false
console.log( Number(undefined) )//NaN
console.log( Number(null) )//0
分支结构:
-
if单分支语句 : 一个条件
-
if-else双分支语句: 两个互斥条件
-
if-else if-else多分支语句: 多个条件
if(条件1){ 条件1成立时需要执行的代码 }else if(条件2){ 条件2成立时需要执行的代码 }else if(条件3){ 条件3成立时需要执行的代码 } …………………… else{ 以上所有条件都不成立,需要执行的代码 } 注意点: (1)多分支语句所有的大括号最多只会执行一个, 只有当上面不成立才会进入下一个条件判断 (2)第一个条件一定要以if开头,后面的else if可以写多个,末尾的else可以省略
三元表达式:
1.表达式根据运算的数量分为 一元、二元、三元
一元运算符: 只能算一个数 ++ -- !
二元运算符: 可以算两个数 算术 关系
三元运算符: 可以算三个数 ?:
2.三元表达式: 表达式 ? 代码1 : 代码2
(1)如果表达式成立,则执行代码1,否则执行代码2
(2)如果代码1和代码2有运算结果,他们就是三元表达式的结果
3.三元表达式功能和if-else类似的
(1)如果代码只有一行,优先考虑三元表达式
(2)三元表达式有运算结果
//如果三元表达式代码1和代码2没有结果, 三元表达式结果就是undefined
1>10 ? alert(111) : alert(222)
//如果三元表达式代码1和代码2有结果, 三元表达式结果就是他们的值
let res = true ? 10 : 20
console.log( res )//10
for循环:
/* for循环
for( 语句1 ; 语句2 ; 语句3 ){
//循环体:需要重复执行的代码
}
执行规则
(1)执行语句1 (声明循环变量)
(2)判断语句2是否成立 (循环条件)
成立 : 执行循环体, 执行语句3(循环变量自增),重复步骤(2)
不成立: 循环结束
*/
for(let i = 1 ; i <= 3 ; i++ ){
console.log('吃了嘛')
}
console.log('吃完了')
/*
for( 声明循环变量 ; 循环条件 ; 循环变量自增 ){
循环体代码
}
执行步骤:
1. 执行 声明循环变量
2. 判断 循环条件 是否成立
2.1 成立 : 执行循环体, 执行循环变量自增, 重复步骤2
2.2 不成立:循环结束
*/
数组:
数组基本使用:
1.数组是什么 ? : 是 一种复杂 数据类型
2.数组作用 : 存储多个数据
3.数组原理 : 数组三要素 元素:数据中的数据 下标:元素的位置 (下标从0开始) 长度:元素的数量 数组语法:
/*
1.数组声明 : let 数组名 = [ 元素1,元素2,元素3,………… ]
2.数组取值 : 数组名[ 下标 ]
3.数组长度 : 数组名.length
4.数组遍历 : 依次获取数组每一个元素值
* 固定for循环语句 : for(let i = 0; i < arr.length ;i++){ arr[i] }
*/
//1.数组声明 let arr = [ 元素1,元素2,元素3,………… ]
let arr = [ 88,90,100,60,57 ]
console.log( arr )
//2.数组取值 arr[ 下标 ]
console.log( arr[2] )//100 第三个元素下标为2
//3.数组长度 arr.length
console.log( arr.length )//5
//4.数组遍历
//声明数组
let arr = [ 88,90,100,60,57,20 ]
// i <= arr.length-1
for(let i = 0;i <= arr.length-1 ; i++ ){//i = 0 1 2 3 4 5
console.log( arr[i] )
}
//i < arr.length
for(let i = 0;i < arr.length ; i++ ){//i = 0 1 2 3 4 5
console.log( arr[i] )
}
// console.log( arr[0] )
// console.log( arr[1] )
// console.log( arr[2] )
// console.log( arr[3] )
// console.log( arr[4] )
数组的操作:
1.声明数组 let 数组名 = [元素1,元素2,元素3,....]
2.数组取值(查) 数组名[下标]
* 下标存在: 则是‘获取’元素值
* 下标不存在: 则是‘获取’ undefined
3.数组赋值(改) 数组名[下标] = 值
* 下标存在: 则是 ‘修改’ 元素值
* 下标不存在: 则是 ‘新增’ 元素值
let arr = [100,90,88,50,60]
/* 数组取值 : 数组名[ 下标 ]
1.下标存在: 则是 ‘获取’ 元素值
2.下标不存在: 则是获取undefined
*/
console.log( arr[3] )//50
console.log( arr[5] )//undefined
/* 数组赋值(改) 数组名[下标] = 值
1.下标存在: 则是 ‘修改’ 元素值
2.下标不存在: 则是 ‘新增’ 元素
*/
arr[0] = 200
console.log(arr)
arr[5] = 40
console.log(arr)
数组 新增 删除 元素(push,unshift,pop,shift):
/*1.数组新增有两个方法
数组名.push(元素) : 一个或多个元素,添加到 末尾
数组名.unshift(元素) : 一个或多个元素,添加到 开头
2.数组删除元素有两个方法
数组名.pop() : 删除 '末尾' 元素
数组名.shift() : 删除 '开头' 元素
*/
let arr = [100,90,88,50,60]
//1. 数组名.push(元素) : 新增一个或多个元素,添加到 ‘末尾’
arr.push(10)
console.log(arr)
//2. 数组名.unshift(元素) : 一个或多个元素,添加到 开头
arr.unshift(1)
console.log(arr)
//3. 数组名.pop() : 删除 '末尾' 元素
let arr1 = [10,20,30,40,50]
arr1.pop()
console.log(arr1)//[10,20,30,40]
//4. 数组名.shift() : 删除 '开头' 元素
arr1.shift()
console.log(arr1)//[20,30,40]
/*3.删除数组指定下标元素
arr.splice( start,deleteCount)
第一个值: 从哪个下标开始删除
第二个值: 要删除几个元素(如果不写,则会删除后面所有元素)
*/
let arr = [100,90,88,50,60]
arr.splice(2,1)//从第2个下标开始,删除2个元素
console.log( arr )// [100,90,50,60]
数组上述所有语法小结:
1.数组三要素
元素: 数组存储的数据
下标: 元素的位置 (下标从0开始)
长度 : 元素的数量 ( 长度 = 最大下标 + 1)
2.数组声明: let 数组名 = [元素1,元素2,元素3,…………]
3.数组查询:
3.1 查询一个元素 : 数组名[下标]
3.2 查询每一个元素: for(let i = 0;i < arr.length;i++){ arr[i] }
4.数组修改 : 数组名[下标] = 值
5.数组新增 :
5.1 末尾新增: arr.push( 元素 )
5.2 开头新增: arr.unshift( 元素 )
6.数组删除 :
6.1 删除末尾: arr.pop()
6.2 删除开头: arr.shift()
6.3 删除指定下标: arr.splice(起始下标,删除数量)