数字
数字监测方法typeof
- 字体类型
- 字体串string
- 布尔型boolean
- 数字number
- undefined
- null
- 对象object
- symbol
- 字符串转换成数字
- number(str)
- parseInt(str)
- parseFloat(str)
- (-,*,/,%)转换
- 转换为字符串
- string(value)
- value.toString
- 转换为布尔值
- boolean(str)
-只有数字0 空串 null undefined nan false为假
- boolean(str)
- 隐式转换
- 只要 + 的一边出现了字符串则自动转换为字符串
- 只要写在条件中自动转换为布尔型
字符串
- 方法
- charAt()获取对应位的字符
- trim()、trimStart()、trimRight()清除字符串,原来字符串不变
- toUpperCase()、tolowerCase()转换大小写
- split() 将字符串拆分成数组,相当于数组中的join
var str = "a1b1c1d" var arr = str.split(1) <!-- 结果为 [a,b,c,d] -->
- repeat(),重复字符串
- padStart() padEnd() 填充字符串
var str = "aa" var newStr = str.padEnd(5,'!') <!-- 结果为 aa!!! 不写!默认为空格-->
- search() 检索是否匹配正则,括号内可写正则表达式,也可以写字符串,写字符串默认改变为对应的正则
- match()、matchAll()相当于正则表达式的exec 如果用matchAll那么正则表达式必须加g直接在正则表达式后加就可以
- replace()、replaceAll() 将字符串中某些字符串替换、逗号前可以是字符串也可以是正则、如果用replaceAll那么正则表达式必须加g
var str = "2020" var newStr = str.replace("2020","2021") <!-- 结果为 2021-->
执行顺序
- 从上而下执行
- 事件外声明的变量事件内可以调用,事件内声明的变量事件外不可以调用
运算符
- == ,=== 这里 === 比 == 更精确一些,== 可以数据类型不一样,=== 不可以
- != 和 !== 这里 !== 比 != 更加精确,!= 可以数据类型不一样 !== 数据类型必须一样
语句
-
顺序
-
分支
- if () {} else{}
- if () {} else if(){}…………else{}
var day = 1; switch (day) { case 1: console.log("111"); break; case 2: console.log("222"); break; default: console.log("000"); }
-
循环
- for循环
var sum = 0; for (var i = 0; i <= 100 ; i++ ) { sum += i; } console.log (sum); sum = 0; var i = 0 while (i <= 100){ sum += i; i++; } console.log (sum); }
函数
-
函数的隐藏形参
- 函数默认有一个arguments的形参
function show() { var res = 0; for (var i = 0; i < arguments.length; i++) { res += arguments[i]; } return res; } var sum = show(10, 2, 3); console.log(sum); <!-- sum=15 -->
-
函数的创建
// 创建不执行,调用时执行 function fun(){ // 函数体 } var fun =function(){ // 函数体 } var fun =function(num1,num2){ // 函数体 return res; }
对象 object
- 代表一个集合
var obj = { Name:"咪咪", price: 999, say: function(){ console.log("我是咪咪!"); } }; var Name=obj.Name <!-- 获取对象里面的值 --> obj.color = red; <!-- 在对象内添加值 --> delete obj.color; <!-- 删除对象内的值 --> obj.say(); <!-- 调用对象内的方法 -->
- 当对象类型的数据比较的时候比较的是地址而不是值
- 对象数据类型在浏览器中存储方式和普通的数据存储方式不一样,对象存储的是地址而不是值
- typeof 对象名 === ‘object’ 检查一个数据是不是一个对象
数组 array
- 数据的有序集合
var users = ["张三" , "李四" , "王五"]; var man = users[1]; <!-- 获取第二个名字 -->
- length 属性可以获得数组的长度,如果赋值,大于原来长度就增加空值,如果小于原来长度,就截取。一般只是获取长度
- 方法
- 数组的函数可以传三个值,分别为element,index,array
- Array.isArray(users); 检测是否是数组
- Array.from
- Array.of()创建数组
var users = ["张三" , "李四" , "王五"]; var users = Array.of["张三" , "李四" , "王五"]; <!-- 相同 -->
- user.push(值) 或 user.push(值,值,值,值,,,)在数组后面添加一个或者多个元素,并返回数组的新长度
- user.pop()删除数组的最后一个元素,并返回删除的元素
- user.unshift(值)或user.unshift(值,值,值,,,)在数组的前面添加值,并返回数组的新长度
- user.shift(一个或多个值)删除数组的第一个元素,并返回删除的元素
- user.splice(a,b,c)数组的删除或添加,在user的第a个位置开始的b个元素改成c,,,a从0开始,,,c可以省略,或者加多个,,,返回值为被删除的数组
- user.slice(a,b)截取数组,a:开始下标如果a为负数代表倒数第几个开始,b:结束下标如果省略b就截取到末尾…包括开始不包括结束。。。返回值为被截取的数组,原数组不变
- concat函数,var newuser= user.concat([1,2,3])newuser为user后加1,2,3user不改变
- indexOf(值)监测值是否在数组中存在,如果存在返回位置,不存在返回-1…当对象类型比较时比较的是地址而不是值
- user.includes()监测值是否在数组中存在,如果存在返回true,不存在返回false
- find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
- findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
var array1 = [5, 12, 8, 130, 44]; var ind = array1.findIndex(function(a){ a>13 }) console.log(ind); // expected output: 3
- user.reverse() 颠倒数组顺序,返回颠倒后的数组,原数组也颠倒
- user.sort(函数或者不写) 对数组进行排序,默认按照首字符进行排序
var users = [6,2,9,4,5]; var newUser=user.sort(function(a,b){ return a-b;降序 return b-a;升序 });
- user.join(值)将数组使用该值拼接成字符串,返回新的字符串,原数组不变,默认用逗号拼接
- user.forEach(函数)依次查找执行function内的内容,function可以设置三个参数,1.element 2.index 3.原数组
var user = [6,2,9,4,5]; user.forEach(function(element,index,array){ console.log(element) });
- user.every(函数) 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。如果为空数组则返回true
var user = [6,2,9,4,5]; var eve = user.ever(function(a){ return a>1; });
- filter(函数) 方法创建一个新数组, 其包含满足所提供函数测试的所有元素,不改变原数组
- map 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
var array1 = [1, 4, 9, 16]; // pass a function to map var map1 = array1.map(function(a){ return a*2; }); console.log(map1); // expected output: Array [2, 8, 18, 32]
- some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值
- reduce() 方法接收两个参数第一个是函数,可以接收四个参数…第一个是累加器(结果)…2,3,4分别为element,index,array,该函数必须设置一个返回值,这个返回值是新的最终结果…第二个参数是最终结果的初始值,想要拿到什么就设置对应的初始值
var array1 = [1, 2, 3, 4,5]; array1.reduce(function(res,ele){ if(ele % 2 === 1){ res.push(ele); } return res; <!-- res不变,变的是ele --> },[]); <!-- 会返回一个奇数组成的数组,return不可以加到if内,如果加到if内遇见第一个偶数后在遇见奇数会丢失res -->
日期 Date
- 方法
- data.getfullYear()获取年份
- data.getmonth()获取月份,月为0到11
- data.data()获取日份
- data.day()获取星期,默认为1到0,0为周日
- data.getHours()获取小时
- data.getMinutes()获取分钟
- data.getSecounds()获取秒数
- data.setMilliseconds()获取毫秒
- data.getTime()获取格林威治时间
正则表达式 RegExp
- 其实就是一个规则 就是用来检测字符串或者字符串的规则
- 方法
- test 普通检测 返回true 或 false
- exec 高级检测 返回结果对象数组(第一项为满足正则的部分,可以用[0]获取),或者null
var str="hello" var re=/A/; <!-- 正则表达式 --> console.log(re.test(str));
- ^设置开头
- $设置结尾
- [a-z],[A-Z],,,一位字母,,,[A-z]检测一位字符或下划线
- [0-9],一位数字,[123]检测的123中的一位,,中括号内加为检测一位,不加中括号为全部
- [a-z],[0-9]加{1,}为至少一位简写为+{0,1}为没有或者有1位简写为?,,,{} 只能对前面一位生效
- |代表或
- \d代表一位数字,,\D代表一位非数字,,\w代表一位数字,字母,下划线,,\W代表一位非数字,字母,下划线,,\s代表一位空白符(空格,tab),,\S代表一位非空白符(空格,tab),
- /a/i 中i表示不区分大小写
- [^a]一位非小写字母a的字符
- (?=b)检测后面是否紧跟着b
- \代表匹配正则内的运算符也可以是^,$
- [\u4e00-\uqfa5]一位汉字,简体中文
var str="联想笔记本" var re="笔记本" var reg=new RegExp(re); <!-- 正则表达式 这种方式才可以用变量正则--> var reg=new RegExp(re,"i"); <!-- 不区分大小写 --> console.log(reg.test(str));
- 判断重复
var str="1111111111111" var re=/^(/d)\1+$/; <!-- ()\1+代表多个括号内的内容 --> console.log(re.test(str));
- 正则名 instanceof Regexp 判断是不是正则 返回 true 或 false
同步异步操作
- 同步操作按顺序依次执行
- 异步执行和其他代码无关
- 异步在同步执行完后执行
数学运算
- 属性
- Math.PI() π 浏览器默认展示15位
- 方法
- Math.abs 绝对值
- Math.ceil(值) 上进 向上取整
- Math.floor(值) 下舍 向下取整
- 四舍五入 Math.round(值)
- 随机数 Math.random()
- toFixed() 将数字转化成字符串并保留几位小数
浏览器对象window
- 方法
-
setInterval 每1000毫秒一秒运行一次getTime函数
var res = setInterval(function(){ sonsole.log("111"); }, 1000);
-
clearInterval 清除res的setInterval
clearInterval(res);
-
setTimeout 设置代码1000毫秒后运行
setTimeout(function(){ console.log("111"); },1000)
-
clearTimeout 停止setTimeout
-
open 打开新的一个窗口 open(“地址”,“新打开的窗口名称”,“窗口的大小宽高等”)
-
close 关闭当前窗口(一般不用)
-
onresize 窗口改变触发事件
-
innerheight innerwidth返回窗口大小
-
outerheight outerwidth返回屏幕大小
-
scrollX scrollY 滚动条距离顶端的距离 别称分别为pageXOffset pageYOffset
-
requestAnimationFrame() 让浏览器帮助反复执行一件事,执行是每秒限定次数 大约一秒运行60次 可以用递归的方法用
-
screen 可返回屏幕的一些信息
-
navigator 在不同平台打开时可获取打开该页面的应用程序的一些信息
-
- 弹窗类
- alert 弹出一个弹窗只有一个确定按钮
- confirm 弹出一个弹窗有一个确定按钮和一个取消按钮,可以给一个返回值,确定为true 取消为false
- prompt 弹出一个弹窗有有一个输入框、一个确定按钮和一个取消按钮可以括号内写两个值,第二个为输入框默认值,可以给一个返回值,确定为输入内容,取消为null。
- 事件
- onscroll 原生的页面滚动条事件
window.οnscrοll=function(){ console.log("滚动条事件触发"); }
- onscroll 原生的页面滚动条事件
- location 可返回页面地址的一些信息
- href 获取当前页面的地址
- hash 获取页面一些锚点的信息也可以修改
- host 获取主机(域名)和端口号(如果后面带了)
- hostname 获取主机(域名)
- pathname 获取路径部分
- search 获取或者设置查询部分
- assign 跳转 有历史记录
- replace 替换 无历史记录
- reload 刷新
- history 浏览器历史记录 也是一个对象
- length 可返回次数
- back 后退
- go 前进或后退 负数为后退 正数是前进 0是刷新
- forward 前进