首先,我们需要知道JavaScript(JS)的数据类型有哪些:
它有字符串、object、数组、数字这些类型
2、JS使用时声明变量:
我们通常使用let或者var声明变量
let x = '海上升明月' // 作用域不同, 局部使用
var y = '天涯共此时' // 全局的
3、JS输出可以以不同的方式“显示” 数据:
-
使用 window.alert() 写入警告框
-
使用 document.write() 写入HTML输出
-
使用innerHTML 写入 HTML 元素
-
使用 console.log() 写入浏览器控制台
使用innerHTML输出元素:
<!-- 定义标签 起个id名为demo-->
<p id="demo"></p>
<!-- 引入js, 使用script 标签 -->
<script>
// 声明一个变量
let x = '海上升明月'
// 选择标签,并在标签当中插入数据
document.getElementById('demo').innerHTML = x
</script>
使用write输出:
<!-- 定义标签 起个id名为demo-->
<p id="demo">1234</p>
<p id="demo1">12342</p>
<button onclick="f()">
点击一下
</button>
<!-- 引入js, 使用script 标签 -->
<script>
// 声明一个变量
let x = '海上升明月'
// 选择标签,并在标签当中插入数据
// document.getElementById('demo').innerHTML = x
// 弹窗效果
// alert(x)
// 在控制台打印
console.log(x)
function f() {
let x = '12345678'
document.write(x)
}
</script>
一些常见的JS转义序列:
代码 | 效果 |
\b | 退格键 |
\f | 换页 |
\n | 换行 |
\r | 回车 |
2、字符串方法:
1.length: 字符串长度
// 1、判断字符串的长度
console.log(x.length)
2. **indexOf()******方法返回字符串中指定文本首次出现的索引(位置)
// 查找字符的下标
console.log((x.indexOf('明月')));
indexOf方法一般都接受作为检索起始位置的第二个参数。
// 从某个位置开始,查找明月
console.log((x.indexOf('明月', 12)));
3. **slice()******提取字符串的某个部分并在新字符串中返回被提取的部分。
// 从某个位置开始,到某个位置结束,查找对应的字符 slice()
console.log(x.slice(6, 13))
4. replace()******方法用另一个值替换在字符串中指定的值:
// 替换 replace() , 替换第一次匹配到的内容
console.log(x.replace('明月', 'mingyue')
5. 通过toUpperCase()******把字符串转换为大写
// 小写转大写
console.log((yy.toUpperCase()))
6.通过toLowerCase()******把字符串转换为小写
// 大写转小写
console.log(y.toLowerCase())
7 **concat()******连接两个或多个字符串
// 连接两个字符 concat
// 用第一个字符.concat(要拼接的内容) 可以是多个字符串
console.log(y.concat('+', yy))
8 trim()方法删除字符串两端空白符
// 去除两端的空格 trim()
console.log(y)
console.log(yy.trim())
9 可以通过split**()将字符串转换为数组
// split, 切片,按照一个规则,对字符串进行分隔,分隔成列表
console.log(x.split(','))
3、数值类型
数值的处理方法
- toStrin**g()******以字符串返回数值。
所有数字方法可用于任意类型的数字(字面量、变量或表达式):
// 数值类型
let x = 12;
// typeof 查看数据的类型
console.log(typeof x, x.toString(), typeof x.toString())
**toFixed()******返回字符串值,它包含了指定位数小数的数字:
console.log(x.toFixed(2));
toFixed(2)非常适合处理金钱。
**valueOf()******以数值返回数值:
console.log(x.valueOf())
这三种 JavaScript 方法可用于将变量转换为数字:
- Number() 方法
- parseInt() 方法
- parseFloat() 方法
这些方法并非数字方法,而是全局JavaScript 方法。
方法 | 描述 |
---|---|
Number() | 返回数字,由其参数转换而来。 |
parseFloat() | 解析其参数并返回浮点数。 |
parseInt() | 解析其参数并返回整数。 |
4、JavaScript数组
JavaScript 数组用于在单一变量中存储多个值。
创建数组
使用数组文本是创建 JavaScript数组最简单的方法。
var cars = [
"Saab",
"Volvo",
"BMW"
];
访问数组元素 我们通过引用**索引号(下标号)**来引用某个数组元素。
这条语句访问 cars中的首个元素的值:
// 列表
let y = ['car', 'bird', 'bike', 'bus', 'plane']
document.querySelector('#demo01').innerHTML = y[3]
这条语句修改 cars 中的首个元素:
数组是对象 数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回"object"。
1、获取数组的长度:aList.length
document.querySelector('#demo02').innerHTML = 'y数据的长度是:' + y.length
2、用下标来操作数组中的数据:aList[0]
3、join()将数组成员通过一个分隔符合并成字符串
document.querySelector('#demo03').innerHTML = y.join('-')
4、push() 和 pop() 从数组最后增加成员或删除成员
y.push('train')
document.querySelector('#demo04').innerHTML = y[y.indexOf('train')]
5、unshift() 和shift() 从数组前面增加成员或删除成员
y.unshift('train') // 在前面添加元素
document.querySelector('#demo05').innerHTML = y[0]
y.shift()
6、reverse() 将数组反转
console.log(y.reverse())
7、indexOf() 返回数组中元素第一次出现的索引值
y.indexOf('bird')
8、splice() 在数组中增加或删除成员
5、 条件
if(条件) {
} else if (条件){
} else {
}
if(条件) {
}
if(条件) {
}
if(条件) {
}
应该场景
// 当我接收后台数据成功以后,进行状态码的判断
// 以登录成功为例
if(result.data.code == 200) {
console.log('登录成功')
}else {
console.log('登录失败')
}
在页面当中判断用户是否登录
7、for循环
用来循环遍历列表
语法1:
for(let i; i=0; i<list.lenght; i++) {
// i是索引
}
for(i in lists) {
// i是索引
}
lists.forEach(function (i) {
// i是对象
})
let x = ''
for (i in lists) {
console.log(i, lists[i])
x += lists[i]
}
document.getElementById('div01').innerHTML = x
let y = ''
lists.forEach(function (item) {
console.log(item)
y += item
})
document.getElementById('div02').innerHTML = y