02.js基本知识点总结

任丽琼
65 阅读10分钟

一.数组的创建

  1. 直接量创建数组：var arr=[值1,....];
  2. 构造函数创建数组:var arr=new Array(值1,..)，创建了一个长度为num的空数组，里面没有任何东西，只有无数的underfined。
  3. 面试题：按值传递：var a=x；var b=a，修改a，b变不变，或者修改b，a变不变，传递的如果是原始类型其实是复制了副本给对方，两者互不影响；如果传递的是引用类型（浅拷贝），因为引用类型很大，保存的只是地址值，两者使用同一个地址值，一个修改另外一个也会变化，
  4. 释放引用类型：每个变量都得释放后，才算释放干净。所以应该将代码封装为一个函数，函数中的一切变量会自动释放。

二.hash数组

  1. 索引数组：下标都是由数字组成的数组；下标无具体意义

  2. hash创建：下标是可以定义的，先创建空数组var arr=[];再为数组添加定义下标并且赋值：arr["自定义下标"]；

  3. hash数组的length失效了，永远0

  4. 遍历hash数组不能使用for循环，必须使用for in循环，forin不需要设置从哪里开始从哪里结束，纯自动化专门为了遍历hash数组存在，

       for(var i in 数组名){i;//下标
                        数组名[数组名]；//当前次元素}

for in不止能遍历hash数组，也能遍历索引数组。

三.数组的API

  1. 数组的API：前辈们预定义好的方法，直接学习如何使用就行，这些数组只有数组可以使用。

  2. arr转str：数组转为字符串 var str=arr.join("自定义连接符") 有两个固定套路：笔试题：将数组里面的内容拼接为一句话/单词-无缝拼接，其实就是拼接了一个空字符

    var arr=["h","e","l","l","o"] var str=arr.join("") console.log(srt)

  • 将数组拼接为DOM元素页面，数据渲染页面:先拿数据再将数组拼接为页面标签字符串

        var arr=["-请选择-","北京","南京","西京","东京","重庆"]
    var arr="<开始标签>"+arr.join（"</结束标签><开始标签>"+"</结束标签>"）
    innerHTML能够识别标签sel.innerHTML=str;
  1. 数据拼接：添加元素的新方式
  • 将传入的实参全部拼接到arr的末尾：var newArr=arr.concat(新值1，arr1..); 特殊：不修改原数组，只会返回一个新数组；concat支持传入数组参数，悄悄将传入的数组打散为单个元素再拼接。
  1. 截取子数组：根据传入的开始下标截取到结束下标
  • var subArr=arr.slice(stari,end+1);特殊不修改原数组，只会返回一个新数组；喊头不含尾，endi可以省略不写，如果省略会从starti位置一直截取到末尾；starti也可以省略如果两个实参都省略那么会从头到尾完全复制一份，此操作叫做深拷贝-复制了一个副本给对方；支持负数参数-1代表倒数第一个
  • 以上几个API都是不修改原数组的
  • 接下来的数组API会对原数组进行修改
  1. 删插替:
  • 删除：var dels=arr.splice(starti,n);其中n代表删除的个数，特殊虽然他直接修改原数组但是也有返回值，返回的是被删除的数据组成的一个新数组
  • 插入：arr.splice（starti，0，新值，...）特殊：原来starti位置的元素以及后续元素都会向后移动；尽量不要插入一个数组，会导致二维数组的产生，遍历不方便
  • 替换：var dels=arr.splice（starti，n，新值，..）
  1. 数组排序：

  • 笔试题：冒泡排序：前一个元素和后一个元素进行对比，如果前一个>后一个，两者就交换位置，但是做完一轮发现只有一个最大的数字到了最后，所以再开循环反复使用：

  • 固定公式

    var arr=[31,21,54,4376,69,8,8,65,643,52,3,321,5,47,69,87,643,524];
for(var j=1;j<arr.length;j++){for(var i=0;i<arr.length-j;i++){
if(arr[i]>arr[i+1]);{var m=arr[i];
arr[i]=arr[i+1];arr[i+1]=m}  }}
console.log(arr)
  1. 正式开发时：arr.sort();

  • 默认将数组中的元素转为字符串后，再按照位置PK每个字符的unicode号（ASCII码）

  • 希望按照数字升序排列

     arr.sort(function(a，b)){console.log(a);/后一个数字
                          console.log(b)；/前一个数字
                          return a-b；如果正数则a>b}

此函数叫做匿名回调函数，回调函数不需要我们程序员调用,sort函数会根据返回的是正数，负数，0自动进行数字的交换

  • 希望按照数组降序排列：arr.sort(function(a,b){return b-a;;})
  • 强调：网页上有功能带有排序，它的底层一定是数组，因为js中只有数组可以排列
  1. 栈和队列：添加元素和删除元素的新方式
  • 栈其实就是数组，只不过是一端封闭，只能从另一端进入
  • 如何使用：开头进arr.unshift;这个是向前添加元素
  • 开头出：arr.first=arr.shift;向前删除元素，一次只能删除一个
  • 结尾进：arr.push;向后添加元素
  • 结尾出var last=arr.pop;删除元素
  • 队列：数组的一种，只不过只能从一端进，从另外一端出
  • 开头进：arr.unshift(新值1，..)；结尾出：var last=arr.pop()；
  • 结尾进：arr.push(新值，..);开头出 var first=arr.shift()；
  1. 二维数组：数组内部又有一个数组；何时使用在一个数组里希望再次细分每个分类

  • 创建var arr=[["数字"，1,2,3]["字符串"，"你好"]]

  • 访问：arr[行下标][列下标]

  • 遍历二维数组：两层循环，外层循环控制行，内层循环控制列

         for（var r=0；r<arr.lemgth;i++）{
     for(var c=0;c<arr[r].length;c++){
     console.log(arr[r][c]);}}
  1. 判断：every：所有元素都要满足条件才会为true
  • var bool=arr.every(function(val,i,arr){return 判断条件；})
  • some：只要有一个元素满足条件为true
  • var bool=arr.some（function）(val,i,arr){return 判断条件；}
  1. 遍历：拿到数组中的每个元素做相同或相似的操作
  • forEach()直接修改原数组;arr.forEach(function(val,i,arr){直接做操作；})
  • map不修改原数组返回一个新数组；var newArr=arr.map(function(val,i,arr){return 操作})
  1. 过滤和汇总：
  • 过滤 var subArr=arr.filter(function(val,i,arr){return 判断条件})
  • 汇总 var result=arr.reduce(function(prev,val,i,arr){return prev+val}基础值)
  1. 箭头函数，简化一切匿名回调函数；固定公式：function去掉，()和{}之间添加=>,如果形参只有一个那么（）可以省略，如果函数体只有一句话，那么{}也可以省略，如果函数体只有一句话并且是return，那么return和{}都可以省略
  • 引用类型有11个，string ,Number,Boolean>包装类型，Array，function，Date,Math,RegExp(正则：验证)，Error，Object，Global（全局对象）

字符串string API 就是一些只有字符串可以使用的函数，不需要我们创建，直接使用

  1. 字符串：多个字符组成的 只读 字符 数组。
  • 字符串的个数：str.length
  • 获取字符串中的每个字符：str[i]
  • 遍历字符串
  • 字符串可以使用（concat，slice）
  1. 转义字符：
  • 将字符串和程序冲突的字符转为原文""
  • 包含特殊功能的符号：换行\n ；；；；制表符\t,大空格
  • 输出unicode编码的字符\u4e00---ascii码：19968
  1. 大小写转换

  • 将字符串中的每个字符统一的转为大写或小写

  • 只要程序不区分大小写，就要先统一转为大写或小写再进行比较 （比如验证码）

       大写var upper=srt.toUpperCase();
   小写 var lower=str.toLowerCase();
  1. 获取字符串中指定位置的字符：str.charAt(i)===str[i];
  2. 获取字符串中指定位置的字符的ASCII码：var ascii=str.charCodeAt(i)
  • 通过ASCII码转回原文var 原文=string.fromCharCode(ascii)
  1. 检索字符串：检查索引检查下标：获取关键字的下标

  • var i=str/arr.indexOf("关键字",starti),从starti位置开始，查找右侧第一个关键字的第一个字符的位置，starti可以省略默认从0开始查找；找到了返回下标，没找到返回-1

  • 笔试题：默认只能获取到第一个关键字的下标，如何才能获取到所有关键字的下标

         var str="no zuo no die"
     var index=1
     while(index=str.indexOf("no",index+1))!=-1){
     console.log("找到了，下标为："+index)}
  1. 拼接字符串：var newStr=str.concat();还不如 + 运算
  2. 截取字符串（3个）
  • var subStr=str/arr.slice(starti,endi+1)
  •       =str.substring(starti,endi+1)

  •       str.substr(starti,n);其中n代表的是截取的个数，不必考虑含头不含尾
  1. 替换字符串：var newStr=str.replace("固定关键字"/正则表达式，"新内容"）
  2. 切割字符串： -作用将字符串转为数组：var arr=str.split("自定义切割符")；切割后，切割符就不存在了，如果切割的是"",则会切散每一个字符
js如何创建元素
  1. 创建空标签：var elem=document.createElement("标签名")
  2. 为其设置必要的属性和事件；elem.属性名=“属性值”；；elem.on事件名=function（）{操作}
  3. 挂在树上渲染页面：父元素appendChild（elem）；

Math对象

不需要创建直接使用，math的API

  1. 取整：上取整var num=Math.celi(num)小数位数不能超过15位;下取整：var num=Math.floor(num);四舍五入取整var num=math.round(num)只看小数位数第一位
  2. 取整num.toFixed(d)优点可以四射五入，并且指定保留小数位数，d就是保留的小数位数；解决浏览器带来的误差如2-1.6=0.399999；缺点结果是一个字符串建议搭配parseFloat使用
  3. 笔试题：不允许使用tofixed的情况下，自己封装一个函数由用户传入数字和保留位数，实现四舍五入的操作：function toFixed（num，d）{num*=（10d）；num=Matth.round(num); num/=(10d);return num}--------var resule=toFixed(Math.PI,2);console.log(result)
  4. 乘方：Math.pow(底数，幂)
  5. 最大值和最小值var max/min=Math.max/min(a,b,c,d....)自动比较出最大值和最小值；本身不支持数组。但是由固定用法：Math.max/min.apply(Math,arr);其中apply具有打散数组的功能
  6. 随机数：paseInt（Math.random()*(max-min+1)+min）

Date对象：日期对象，提供了操作日期和时间的API

  1. 创建方式
  • 创建一个当前日期: var now=new Date()
  • 创建一个自定义时间 var birth=new Date("yyyy/mm/dd")
  • 复制一个日期：所有日期的API都是直接修改原日期的，无法获得修改之前的日期，所以在执行API之前先进行复制，然后再操作复制后的日期。var end=new Date（start）
  1. 使用：两个日期对象之间，可以相减大减小，得到一个毫秒差。日期的本质就是保存了一个毫秒数，做倒计时的关键。
  2. API：
  • 年月D日星期：FullYear, Month, Date, Day
  • 时分秒毫秒：Hours Minutes Seconds Milliseconds
  • 分量：时间的单位
  • getxxx负责获取一个分量的值；setxxx负责设置一个分量的值
  • 取值范围：FullYear-当前年份的数字；month：011；date:031;Day:06;Hous:023;Minutes、Seconds：0~59
  1. 定时器 -周期性定时：开启：timer=setInterval(callback,间隔毫秒数)；停止：clearInterval（timer）
  • 一次性 定时器；开启：timer=setTimeout(callback,间隔毫秒数); 停止：clearTimeout(timer);

BOM

  1. BOM：brower Object Model-浏览器对象模型，专门用于操作浏览器
window对象：既是全局对象：保存着全局变量和全局函数；又指代当前窗口本身
  1. 属性：获取浏览器的完整大小：outerWidth/outerHeight
  2. 获取浏览器文档显示区域的大小：innerWidth/innerHeight
  • 打开链接的新方式：
  1. 当前窗口打开，可以后退：HTML:内容-----JS:open("url","-self")
  2. 当前窗口打开，禁止后退：如结账后不允许后退。history:当前窗口的历史记录，可以前进后退；-----location：当前窗口正在打开的url，有一个API。location.replace("新url")这个叫做替换，不叫跳转不会产生历史记录，自然也不能后退但是网址替换了网页必然发生变化
  3. 在新窗口打开，可以打开多个：HTML：;-----JS:open("url","-blank")
  4. 新窗口打开，只能打开一个：如结账页面：HTML:内容;--------JS:open("url","自定义一个name")
  5. window提供的三个框：警告框：alert（“警告文字”）；输入框：var user=prompt（“提示文字”）;确认框： var bool=confirm("提示文字")
  6. window.onresize事件：窗口如果大小发生了变化，就会触发搭配上判断innerWidth可以理解为js版本的媒体查询。
  7. window.onscroll事件：滚动事件一旦滚动就会触发:获取滚动条当前位置：window.scrollY；-------获取元素距离页面顶部有多远elem.offsetTop/offsetLeft
  8. 本地客户端存储技术（webStorage）

  • sessionStorage-会话级，关闭浏览器，数据就会死亡

  • localStorage-本地级，只要不清空就会永久存在

       操作：添加：xxxStorage.属性名="属性值"
         读取：xxxStorage.属性名
         删除：xxxStorage.removeltem("属性名");
         清空：xxxStorage.clear();
avatar
文章
阅读
粉丝