js基础知识

数字

数字监测方法typeof

1. 字体类型
   • 字体串string
   • 布尔型boolean
   • 数字number
   • undefined
   • null
   • 对象object
   • symbol
2. 字符串转换成数字
   • number（str)
   • parseInt（str）
   • parseFloat（str）
   • （-，*，/，%）转换
3. 转换为字符串
   • string（value)
   • value.toString
4. 转换为布尔值
   • boolean（str）
     -只有数字0 空串 null undefined nan false为假
5. 隐式转换
   • 只要 + 的一边出现了字符串则自动转换为字符串
   • 只要写在条件中自动转换为布尔型

字符串

1. 方法
   • 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-->
     

执行顺序

• 从上而下执行
• 事件外声明的变量事件内可以调用，事件内声明的变量事件外不可以调用

运算符

• == ，=== 这里 === 比 == 更精确一些，== 可以数据类型不一样，=== 不可以
• != 和 !== 这里 !== 比 != 更加精确，!= 可以数据类型不一样 !== 数据类型必须一样

语句

1. 顺序

2. 分支

   • 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");
       }
   

3. 循环

   • 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);
   }
   

函数

1. 函数的隐藏形参

   • 函数默认有一个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 -->
   

2. 函数的创建

   // 创建不执行，调用时执行
   
       function fun(){
           // 函数体
       }
   
   
       var fun =function(){
           // 函数体
       }
   
   
       var fun =function(num1,num2){
           // 函数体
           return res;
       }
   

对象 object

1. 代表一个集合

       var obj = {
           Name:"咪咪",
           price: 999,
           say: function(){
               console.log("我是咪咪！");
           }
       };
       var Name=obj.Name
       <!-- 获取对象里面的值 -->
   
       obj.color = red;
       <!-- 在对象内添加值 -->
   
       delete obj.color;
       <!-- 删除对象内的值 -->
   
       obj.say();
       <!-- 调用对象内的方法 -->
   

   • 当对象类型的数据比较的时候比较的是地址而不是值
   • 对象数据类型在浏览器中存储方式和普通的数据存储方式不一样，对象存储的是地址而不是值

• typeof 对象名 === ‘object’ 检查一个数据是不是一个对象

数组 array

1. 数据的有序集合

       var users = ["张三" , "李四" , "王五"];
       var man = users[1];
       <!-- 获取第二个名字 -->
   

2. length 属性可以获得数组的长度，如果赋值，大于原来长度就增加空值，如果小于原来长度，就截取。一般只是获取长度
3. 方法
   • 数组的函数可以传三个值，分别为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

1. 方法
   • data.getfullYear()获取年份
   • data.getmonth()获取月份,月为0到11
   • data.data()获取日份
   • data.day()获取星期，默认为1到0，0为周日
   • data.getHours()获取小时
   • data.getMinutes()获取分钟
   • data.getSecounds()获取秒数
   • data.setMilliseconds()获取毫秒
   • data.getTime()获取格林威治时间

正则表达式 RegExp

1. 其实就是一个规则 就是用来检测字符串或者字符串的规则
2. 方法
   • 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

同步异步操作

• 同步操作按顺序依次执行
• 异步执行和其他代码无关
• 异步在同步执行完后执行

数学运算

1. 属性
   • Math.PI() π 浏览器默认展示15位
2. 方法
   • Math.abs 绝对值
   • Math.ceil(值) 上进 向上取整
   • Math.floor(值) 下舍 向下取整
   • 四舍五入 Math.round(值)
   • 随机数 Math.random()
   • toFixed() 将数字转化成字符串并保留几位小数

浏览器对象window

1. 方法

   • 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 在不同平台打开时可获取打开该页面的应用程序的一些信息

2. 弹窗类
   • alert 弹出一个弹窗只有一个确定按钮
   • confirm 弹出一个弹窗有一个确定按钮和一个取消按钮，可以给一个返回值，确定为true 取消为false
   • prompt 弹出一个弹窗有有一个输入框、一个确定按钮和一个取消按钮可以括号内写两个值，第二个为输入框默认值，可以给一个返回值，确定为输入内容，取消为null。
3. 事件
   • onscroll 原生的页面滚动条事件

         window.οnscrοll=function(){
             console.log("滚动条事件触发")；
         }
     

4. location 可返回页面地址的一些信息
   • href 获取当前页面的地址
   • hash 获取页面一些锚点的信息也可以修改
   • host 获取主机(域名)和端口号(如果后面带了)
   • hostname 获取主机(域名)
   • pathname 获取路径部分
   • search 获取或者设置查询部分
   • assign 跳转 有历史记录
   • replace 替换 无历史记录
   • reload 刷新
5. history 浏览器历史记录 也是一个对象
   • length 可返回次数
   • back 后退
   • go 前进或后退 负数为后退 正数是前进 0是刷新
   • forward 前进