目录
一、流程控制语句
1.if...else...
if (条件) {
/* 代码 */
} else if (条件) {
/* 代码 */
} else {
/* 代码 */
}
2.三目运算符
条件 ？ 结果1 ： 结果23.switch...case...
#示例1
let score=55,text='';
switch(true){
case score>90:
text='优秀';
break;
case score>60:
text='良好';
break;
default:
text='加油';
}
console.log(text);//加油
#示例2
let weekday=new Date().getDay()
switch(weekday){
case 0:
content='今天是星期天';
break;
case 6:content='今天是星期六';
break;
case 4:content='今天很特殊';
break;
default:content='期待周末';
}case 后面是冒号，而执行代码和break返回的后面都是分号。
注意：if else与switch case的区别是switch case会生成一个跳转表来指示实际的case分支的地址；
if…else却需要遍历条件分支直到命中条件。
二、循环语句
1.for循环
for 语句主要用于执行确定执行次数的循环。
//基本语法：
for([初始值表达式]；[条件表达式]；[增量表达式]){
循环体语句；
}
let sum = 0;
for(let i = 1; i <= 10;i++){
sum += i;
}
console.log("1～10的累加和sum=" + sum);2.while循环
常用于只需根据条件执行循环而不需关心循环次数的情况。
while (条件) {
/* 代码 */
}
//举栗子
let i=0,x='';
while (i < 5) {
x=x+'这是数字'+i;
i++
}
console.log(x);3.do while 循环
do {
/* 代码 */
} while (条件)
//举栗子
let i = 0,x = '';
do {
x = x + '这是数字' + i;i++
}while (i < 3)
console.log(x);//这是数字0 这是数字1 这是数字24.for of 循环
for-of 循环遍历的是值，主要针对于数组的遍历
let arr = ['a', 'b', 'c', 'd']
for (let value of arr) {
console.log(value);//a b c d
}5.for in 循环
for...in循环遍历的是key，主要针对于对象的遍历
let obj = {
name: '奥特曼',
age: 22,
hobby: '打怪兽'
}
for (let key in obj) {
console.log(key);//name age hobby
console.log(obj[key]);//奥特曼 22 打怪兽
}6.forEach
forEach只用来操作数据，不返回值，且循环中途是无法停止的，会将所有成员遍历完。
let arrObj = [{
id: 1,
name: '奥特曼'
}, {
id: 2,
name: '小怪兽'
}, {
id: 3,
name: '迪迦'
}]
arrObj.forEach((item, index, arr) => {
console.log(arr) // arrObj
console.log(index) // 0 1 2
console.log(item.name) // 奥特曼 小怪兽 迪迦
})7.map
map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。循环中途是无法停止，会将所有成员遍历完。
let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]8.filter
filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
let arrObj = [{
id: 1,
name: '奥特曼'
}, {
id: 2,
name: '小怪兽'
}, {
id: 3,
name: '迪迦'
}]
let arr2 = arrObj.filter((item, index, arr) => {
return (item.name === '小怪兽')
})
console.log(arr2) // [{id:2,name:'小怪兽}]三、函数
封装函数口诀： ==复用封函数，变化设参数==
- 写法
# 写法一：声明式函数
function 函数名(形参1，形参2) {
/* 代码 */
}
# 写法二： 函数表达式
const 函数名 = function(形参1，形参2) {
/* 代码 */
}
# 写法三： 箭头函数
const 函数名 = (形参1，形参2) => {
/* 代码 */
}
# 箭头函数注意事项：
- 1. 如果代码只有一行，省略{}，且必须省略return，会自动return
- 2. 形参有且只有一个，可以省略（）
- 3. 没有arguments
- 4. this指向上一层
- 5. 不能使用new调用
```
- 调用
# 1. 直接调用
函数名()
# 2. 对象方法调用
对象.方法名()
# 3. 回调函数
setTimeout(() => {
}, 2000)
# 4. 自己调用自己
(function () {
})()
# 5. 使用new调用
new 函数名（）
# 6. 使用call() 和 apply()调用
函数名.call() 或 函数名.apply()
- 参数
- 形参： 占位 （注意：名字可以乱取，注意语义化）
- 实参： 实际调用传入的参数
- 返回值
- 不写return，默认返回 `undefined`
- 返回啥，得到啥。四、内置对象
1.Array
| 属性和方法 | 使用说明 |
| ---------- | ------------------------------------------------------------ |
| length | 获取数组的长度，也就是获取数组内元素的个数。|
| concat | 连接数组和数组或者数组和元素，以返回值形式。|
| every | 数组里每个元素都满足条件返回true，否则返回false，任意一个不符合就返回false，不再接着遍历。|
| filter | 过滤，筛选出符合条件的元素，返回一个新的数组。|
| find | 返回数组中第一个满足条件的元素的值，没有符合条件的返回undefined。|
| findIndex | 返回数组中第一个满足条件的元素的索引，没有符合条件的返回-1。|
| flat | 把多维数组拉平，参数代表被拉平的次数，参数可以使用infinity。|
| forEach | 循环数组的元素，改变原数组。|
| includes | 判断数组中是否包含某个元素，包含就返回true，否则返回false。|
| indexOf | 返回数组中某个指定的元素的索引号（返回第一个符合条件的），没有找个就返回-1。|
| join | 数组转字符串，元素可以通过指定的分隔符进行分隔。|
| map | 创建⼀个新的数组，其中每⼀个元素由调⽤数组中的每⼀个元素执⾏提供的函数得来。 |
| pop | 删除数组的最后一个元素。|
| push | 向数组的最后添加元素。|
| reverse | 颠倒数组中元素的排序。|
| shift | 删除数组的第一个元素。|
| slice | 截取数组，以返回值形式。|
| some | 某一个元素满足条件就返回true，找到符合条件的就不继续遍历了。|
| sort | 排序。|
| splice | 删除、增加、修改数组元素。|
| unshift | 向数组的开始位置添加元素。|2.String
| 属性和方法 | 使用说明 |
| ----------- | ------------------------------------------------------------ |
| length | 获取字符串的长度 |
| charAt | 返回指定索引号对应的字符 |
| charCodeAt | 返回在指定的位置的字符的 Unicode 编码。 |
| concat | 连接字符串。 |
| includes | 查找字符串中是否包含指定的子字符串。 |
| indexOf | 检索字符串。 |
| replace | 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 |
| slice | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| split | 字符串转换为数组 |
| substr | 从起始索引号提取字符串中指定数目的字符。 |
| substring | 提取字符串中两个指定的索引号之间的字符。 |
| toUpperCase | 字符串转换为大写字母 |
| toLowerCase | 字符串转换为小写字母 |
| trim | 去除字符串两边的空白 |3.Number
| 属性和方法 | 说明 |
| ---------- | ---------------------------------------------------- |
| toFixed | 把数字转换为字符串，结果的小数点后有指定位数的数字： |4.Math
| 属性和方法 | 说明 |
| ---------- | ------------------------- |
| abs | 返回绝对值 |
| ceil | 对数向上取整 |
| floor | 对数向下取整 |
| max | 返回最大值 |
| min | 返回最小值 |
| random | 返回 0 ~ 1 之间的随机数。 |
| round | 四舍五入 |5.Date
| 属性和方法 | 说明 |
| ----------- | ---------------------------------------- |
| getDate | 返回天数（0-31） |
| getDay | 返回星期几（0-6），0代表星期天，依次往后 |
| getFullYear | 返回年份（4位数） |
| getHours | 返回小时（0-23） |
| getMinutes | 返回分钟（0-59） |
| getMonth | 返回月份（0-11），月份要加1 |
| getSeconds | 返回秒数（0-59） |
| getTime | 返回时间戳（毫秒值），从1970.1.1至今 |
# 代码示例
let getDate = new Date() //2021/7/7 19:45
let year = getDate.getFullYear() //年份2021
let month = getDate.getMonth() //返回月份，现在是7月，返回6
let day = getDate.getDate() //日期7
let hour = getDate.getHours() //小时 19
let minute = getDate.getMinutes() //分钟
let second = getDate.getSeconds() //秒数
let week = getDate.getDay() //返回星期，今天周三，返回数字3
let tim = getDate.getTime() //返回1970.1.1至今的毫秒数6.Function
| 属性和方法 | 说明 |
| ---------- | ------------------------------------------------------------ |
| bind | 会生成一个新函数，不会立即执行，除非调用 |
| apply | 调用函数，并且可以改变this指向，与call的区别是参数只能传数组 |
| call | 调用函数，并且可以改变this指向 |
| arguments | 未知参数，不管传递了多少数据，都可以用arguments接收，是一个伪数组，可做循环 |
#使用语法
#bind
语法：函数名.bind(this指向的目标)
#apply
语法：函数名.apply(this的指向的目标，[参数1，参数2...])
#call
语法：函数名.call(this的指向的目标，参数1，参数2....)
7.Object
| 属性和方法 | 说明 |
| ---------- | ------------------------------------------------------------ |
| assign | 合并对象，对象的key是唯一的，如果出现相同的key，后面的会覆盖前面的 |
| keys | 遍历对象的自有属性，返回的是一个数组，Object.keys（对象名） |五、JS浏览器对象实例
1.Location 对象
| 属性和方法 | 说明 |
| ---------- | -----------------------------------|
| href | 返回完整的URL |
| origin | |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| pathname | 返回的URL路径名。 |
| search | 返回一个URL的查询部分（参数） |
| hash | 返回一个URL的锚部分 |
| port | 返回一个URL服务器使用的端口号 |
| reload | 重新载入当前文档，location.reload()|
2.History
| 属性和方法 | 说明 |
| ---------- | ------------------------------------------------------------ |
| back() | 加载 history 列表中的上一个 URL，history.back() |
| forward() | 加载 history 列表中的下一个 URL，history.forward() |
| go() | 加载 history 列表中的某个具体页面，history.go(),参数是数字或者字符串，-1上一个页面，1前进一个页面，0刷新 |3.navigator
| 属性和方法 | 说明 |
| ---------- | ------------------------------------------------------------ |
| language | |
| userAgent | 返回浏览器用于 HTTP 请求的用户代理头的值，navigator.userAgent |4.screen
| 属性和方法 | 说明 |
| ---------- | ------------------------------- |
| width | 返回屏幕的总宽度，screen.width |
| height | 返回屏幕的总高度，screen.height |5.Window
| 属性和方法 | 说明 |
| ----------- | ------------------------------------------------------------ |
| alert | 显示带有一条指定消息和一个 **确认** 按钮的警告框。 |
| setTimeout | 超时调用，等待指定的时间执行一次操作，使用clearTimeout()来停止执行 |
| setInterval | 间歇调用，每隔指定的时间调用一次函数，使用 clearInterval() 来停止执行 |
| onload | |
| onresize | |
| onscroll | |
总结
未完待续....
扫一扫
2291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
