第二周

97 阅读10分钟

数组的基础

1.创建数组

直接量:var arr=[值1,...];

构建函数:var arr=new Array{值1,...};

按值传递: 传递的如果是原始类型就是复制了一个副本两者互不影响。 引用类型保存的是一个地址值,传递的就是地址值,一个修改另外一个也会改变。

释放引用类型:每一个都是放完后才算是放干净****

索引数组:下标都是数字组成

hash数组(下标是可以自定义的)

用于:下标无具体意义,不便于查找的数组

1.创建

1.创建一个空数组

var arr=[];

2.为数组添加自定义下标,并赋值:

arr["自定义下表"]=新值。

3.访问数组:

arr["自定义下标"]

注意:hash数组的length失效,为0.

4.遍历hash数组: for( var i in 数组名){ 数组名[i]:当前次元素 }

for in:不止能遍历hash,也能遍历索引数组

2.数组的API(可以直接使用)

1.arr转string

var str=arr.join("自定义连接符")

笔试题:将数组里面的内容拼接成为一句话: var str = arr。join("");//添加空字符串

2.将数组拼接为页面标签字符串:

```js`var str ="<option>"+arr.join("</option><option>")+"</option>";`*//拼接*
```
`innnerHTML=str;`*//到标签里面*

3.数组的拼接:(添加元素的新方式)

将传入的实参拼接到到arr的末尾 var newArr=arr.concat(新值1.arr1,...) 特殊点:1.不修改原数组,只会返回一个新数组; 2.concat支持传入数组参数,悄悄打散你传入的数组,然后再拼接

4.截取子数组:

根据传入的开始下标截取到结束下标:

var subArr=arr.slice(start i,end i+1); 特殊点:1....不修改原数组,只会返回一个新数组。 2....含头不含尾 3....end i 可以省略不写,如果省略就会截取到末尾。 4....支持负数-1表示倒数第一

5.修改原数组的API

1.删插替

删:var dels=arr.splice(start i ,n)//n代表删除个数-------- 特殊点:虽然他直接修改原数组,但是也有返回值,返回的是被删除的数据成为一个新数组,哪怕没有删除都会返回一个新数组。

插:arr.splice(start i,0,新值,...);------特殊:1/原starti位置的元素以及后面的元素都会整体往后移。

替: var dels=arr.splice(starti,i,新值,...);-----特殊删除的个数和插入到个数不必相同

6.翻转数组

arr.reverse();

7.数组排序

1.笔试题:冒泡排序,固定公式

for(var j=0;i<arr.lenght;j++){
  for(var i=0;i<arr.lenght-j;i++){
    if(arr[i]>arr.[i+1]){
      var m=arr[i];
        arr[i]=arr[i+1];
        arr[i+1]=m;
      }
    }
  }

2.arr.sort();默认将数组中的元素转为字符串后,再换位PK每个字符串的unico号

 升序排列:arr.sort(function(a,b)){
 //a表示后一个数字;
 //b表示前一个数字;
 return a-b;//说明后一个数大,自动换位
 }  
 降序排列:arr.sort(function(a,b)){
 //a表示后一个数字;
 //b表示前一个数字;
 return b-a;//说明后一个数大,自动换位
 }

强调:1.以为只要网页上有功能带有排序,他的底层一定是数组,因为js中只有数组可以排序。 2.以后网页上只要有随机功能,那么他的底层一定是随机数。

8.栈和对列:添加元素和删除元素的新方式。

栈:其实就是数组,只不过是一端封闭,只能从另一端进出。

 开头进:arr.unshilt(新值)//向前添加,缺点:导致其余元素下标都发生变化
 开头出:var first=arr.shift();//向前删除,一次只能删除一个
 缺点:其余元素的下标都发生变化
 
 结尾进:arr.push(新值);//向后添加
 结尾出:arr.last=arr.pop();//向后删除
 

队列 :其实就是数组,一端进一端出。

开头进:arr.unshilt(新值);
结尾出:arr.last=arr.pop();

结尾进:arr.push(新值);
开头出:var first=arr.shift();
      

9.二维数组

例:

var arr=[      [],
        [],
        [],
        []
];

访问二维数组:arr[行下标][列下标]; 特殊点:列下标越界,返回undefined。行下标越界得到是一个报错,因为行下标越界已经得到一个undefined没有资格再加[]做操作。

遍历二维数组:必然两层循环,外层循环控制行,内层循环控制列

for(var r=0;r<arr.lenght;r++){
  for(var c=0;c<arr[r].lenght;c++){
      console.log(arr[r][c])
  }
}

ESS提供了3组6个API 1判断:两个 every:每一个,要求所有元素都满足才会为true,只要有一个不满足都为false类似于(&&)

var bool=arr.every(function(val,i,arr){ //var表示当前值 //i表示下标 //arr表示当前数组 return 判断条件; } )

some:有一些满足则为true,全部不满足则为false类似(||)

varbool=arr.some(function(val,i,arr){ return 判断条件; })

遍历拿到每一个数组中的每个元素做相同或者类似操作

forEach:---直接需改原数组 arr.forEach(function(val,i,arr){ 直接做操作; })

遍历:
zmap--不修改原数组

var newArr=map(function(val,i,arr){
  return直接做操作;
  })
  

过滤和汇总:

过滤:筛选出需要的部分,原数组不会发生变化

var subArr=arr.(filter(val,i,arr){
return 判断条件;
})

汇总:

 var ressult=arr.reduce(function(prev,val,i,arr){
 return prev+val;
 },基础值)
 

10.箭头函数:

简化一切匿名回调函数

固定公式:吧function去掉,()和{}之间添加=>,如果形参那么()可以省略,如果函数体只有一个那么{}可以省略,如果函数只有一句话并且是return那么return和{}都可以省略。

11.String的概念

多个字符组成的【只读】字符【数组】--字符串API都不会修改原数组都会返回一个新字符串。

1.和数组的相同点

  1. 字符串中的个数:str.lenght;
  2. 获取字符串中的某个字符:str[i];
  3. 遍历字符串
  4. 所有数组不修改原数组的API,字符串也可以使用(concat,slise)

2.和数组的不同点

所有数组直接修改原数组的API,字符串都不可以使用,比如排序...

12.引用/对象类型11个

  • string nomber boolean-->包装类型
  • Array Function Date(日期) math(数字) RegEXP(正则验证)
  • Error(错误) Object(面向对象开发方式)
  • Global(全局对象)--只有在浏览器中被window对象代替(window可以不写)

包装类型:专门用于将原始类型的值封装为一个引用类型的对象。。。原始类型原本就没有任何属性和方法意味着原始类型本身不支持去做任何操作。

使用原始类型的变量调用属性和方法的时候会制动包装,方法调用完后自动释放包装类型又变成了原始类型--null和undefined没有个他们提供包装类型。。

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

  • 转义字符::作用将字符串和程序冲突的字符转为文字---
  • 包含特殊功能的符号 :\n换行 制表符\t->
  • 输出Unicode编码字符;\u4e00---ascli码:19968.。。。。\u9fa5---ascli码:40869

转大写:var upper=str.toUpperCase(); 转小写:var upper=str.toLowerCase();

  • 获取字符串中指定位置的字符:str.charAt[i]===str[i]
  • 通过Ascll转为原文:var 原文=String.fromCharCode(ascli);
  • 获取字符串中指定位置的字符的Ascll码:var ascli=str.charAt(i)

检索字符串:检查下标检查索引,获取关键字的下标

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

如何获取所有关键字的下标

var str="no,sfa,no,saas,scas,va,aa,no,sasa,no";
//创建一个变量:
var index=-1:
//循环遍历
while(index=str.indexOf("no",index+1)!=-1){
//打印index;
}

拼接字符串:var newstr=str.concat("新字符串")-----不如+号。

截取字符串:3种

  • var substr=str/arr.slice(开始,结束)://和数组一样
  • str.substring(starti,endi+);//不支持负数
  • str.substr(starti,n)//n代表的是截取个数

替换字符串

var newstr=str.replace("固定关键字","新内容")

切割:作用;将字符串转为数组

var arr=str.split("自定义切割符")---切割之后切割夫不存在,如果切割的是""空的字符串,就切散每一个字符

去掉空白字符串:str.trim/trimStart/trimend()

JS如何创建元素:3步

  1. 创建空标签:var elem=document.createElement("标签名")
  2. 为其设置必要的属性和事件:elem.属性名="属性值";--elem.on事件名=function(){操作};
  3. 挂载上树:父元素.appendChild(elem);

13.Math对象

撞门提供数学计算的API

1.取整:3种

  • 上取整:超过一点就去下一位。varnum=Math.ceil(num)后面不能超过15位。
  • 下取整:无论超过多少都会省略掉小数部分。var num=Math.floor(num).
  • 四舍五入取整:var num=Math.round(num)只看小数位数的第一位。

笔试题:不允许使用toFixed的情况下,自己封装一个函数,有用户传入数字和保留位数,实现四舍五入? 答:

function toFixed(num,d){
num*=(10**d);
num=Math.round(num);
num/=(10**d);
return num;
}
var result =toFixed(Math.pi,2);
conSile.log(result);

2.

  • 乘方:Math.pow(底数,幂);简化底数** 幂;
  • 开方:Math.sqrt(num);仅仅只能开方

3.var max/min=math.max/min(a,b,c,d....)最大值或者最小值------ 数组参数:math.max/min.apply(math,arr)

4.绝对值:把负值转换为正值Math。abs(-1);//1

5.随机数:Math.random();//在o-1之间取一个随机的小数,搭配上parseint,只能取到0,不能取到1--公式

parseInt(Math.random()*(max-min+1)+min);w

14.Date对象--日期对象

创建:4种

  1. 创建当前日期:var now=newDate();
  2. 创建一个自定义时间:var birth =new Date("yyyy/mm/dd hh:mm:ss");
  3. 创建一个自定义时间:var birth =new Date(yyyy,mm,dd, hh,mm,ss);
  4. 复制一个日期:var end=new Date(start); -------为什么要复制日期:日期所有的API都是直接修改原日期的,无法获得修改之前的日期所以在执行之前先复制然后再操作日期-

日期之间可以大小相减得到一个毫秒差。计算机元年:1970年1月1日8点整

API: 分量:时间单位

  • 年月日星期: FullYear Month Date Day
  • 时分秒毫秒:Hours Minutes Seconds MilliSeconde

每一个分量都有一对:getxxx/setxxx的方法; -其中getxxx负责获取分量的值-setxxx负责设置分量的值

1.取值范围:

  • FullYear:当前年份的数字
  • Month:0-11
  • Date:1-31
  • Day:0-6//0代表星期天
  • Hours:0-23
  • Minutes -econds:0-59

2.Day没有set方法

3对某个分量进行加减操作----date.setxxx(date.gtxxx()+/- n)

4.格式化日期为本地字符串----date.toLocaleString():有兼容问题

5.定时器:没过一段时间就会执行一次,先等后做

  • 开启:timer=setIn val(callback,间隔时间):
  • 停止:clearlnterval(timer);

一次性定时器:等待一段时间,只做一次就结束

  • 开启:timer=setTimeout(cllback,间隔时间)
  • 关闭:setTimeout(timer);

同步技术:代码必须一行一行执行,前面没做完后面不做 异步必须:无论这块代码多么耗时也不会卡住下面代码

15.window对象

  • 全局对象:保存着全局变量和全局函数
  • 指代当前窗口

素性: 获取浏览器的完整大小:outer width/outerHeight 获取浏览器的文档显示区域的大小:innerWidth/innerHeight

3.获取屏幕的完整大小:跟window没关系:screen.width/height

4.打开链接的新方式:

  • 当前窗口打开,可以后退::open("url",_self");
  • 当前窗口打开禁止后退:location.replace("新url”);
  • 新窗口打开可以打开多个:`js:open("url","_blank")
  • 行窗口打开,只能打开一个:JS:open("url","自定义一个name")

5.下载按钮:<a href=("xx.exe/zip")下载(a) 6.打开图片和txt文档:<a href=(JavaScript:代码“)图(/a)

** 窗口:

  • 关闭窗口:window/newW。close();
    
  • 改变窗口大小:newW.resizeTo(新宽,新高)
    
  • 改变窗口位置:newW,moveTo(新X,新Y)
    

** window的三个框:

  • 警告框:alert(文字);
    
  • 输入框:var user =prompt(”文字“)
    
  • 确认框:var bool=confirm(”文字“)
    

7事件

  • window。onload:等待其他所有资源加载完毕才会执行
  • window.onresize:窗口如果发生了大小变化就会触发搭配判断
  • windo.onscroll;滚动事件,一旦滚动就会发生---获取滚动条位置:window.scroll---获取元素距离顶部有多远:elem.offsetTop/offsetLwft

本地客户端储存:

  • cookie:已经淘汰
  • webStorage:大小8mb,永久保存
  1. sessionStorage----会话级,只要浏览器一关闭就会死亡
  2. localStorage----本地级,只要不清空就会永久保存

操作

  1. 添加:xxxSTORAGE.属性名="属性值";
  2. 读取:xxxStorafe.属性名;
  3. 删除:xxxStorage.removeltem("属性名")
  4. 清空:xxxStorage.clear();