第二周知识点总结

84 阅读12分钟

第一天知识点:

1.数组的基础:

1.创建数组:

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

2.构造函数:var arr=new Array();

    ps:有个坑:如果使用构造函数创建一个长度为num的数组,将会返回一个空数组,且里面没有东西,除了num数目的undefined。

2.面试题:

按值传递:`var a=x;var b=a;`修改ab不变,或者,修改ba不变。
如果是变量的值是原始类型,则相当于复制了一个副本给对方,两者互不影响。
如果是引用类型,就会互相影响。ps:js中不是原始类型,就是引用类型(函数,数组...)
因为引用类型比原始类型大得多,不能保存在本地,只是保存了一个地址值,赋值相当于把自己的地址值给别人,两者用的是同一个地址值,一个修改另一个也会变化。
在js底层有一个垃圾回收器,只有垃圾回收器的计数器(计数这个数据有几个人引用着)为0时才会删除不要的数据。
索引数组:下标都是数字组成的数组。

2.***hash数组(关联数组):下标可以自定义

1.创建:2

1.创建空数组:var arr=[];
2.为数组添加自定义下标并赋值:arr["自定义下标"]=值;

2.访问元素:arr["自定义下标"];

3.强调:hash数组的length为0,不能使用for循环,必须使用for in循环遍历hash数组(专为hash数组设置):

for(var i in 数组名){ i; 数组名[i]; } ps:for in不仅能遍历hash数组,也能遍历索引数组,但建议还是索引使用for,hash再使用for in。 js里面的一切的东西都是对象,万物皆对象,除了undefined和null,【一切对象的底层都是hash数组】。

3.数组的API:前辈们预定义了很多方法,等待我们学习。

1.*arr转str:

var str=arr.join("自定义连接符"); 固定套路:2个

1.笔试题:将数组里面的内容拼接为一句话/单词-无缝衔接,其实就是拼接为一个字符串:

var arr=["h","e",...];

var str=arr.join("");

console.log(str);

2.将数组拼接为DOM页面元素-第一次遇到数据渲染页面:

var arr=["-请选择-","北京","南京",...];

var str="<开始标签>"+arr.join("</结束标签><开始标签>")+"</结束标签>";

2.*数组拼接:添加元素的新方式:

 将你传入的实参全部拼接到arr的末尾:

var newArr=arr.concat(新值,arr,...); 1.不修改原数组,只会返回一个新数组。 2.concat支持传入数组参数,悄悄地将传入的数组打散为单个元素再拼接。

3.截取子数组:

根据传入的开始下标截取到结束下标: var subArr=arr.slice(starti,endi+1) 特殊:

1.不修改原数组,只会返回一个新数组。
2.含头不含尾
3.endi可以省略不写,如果省略,会从starti位置一直截取到末尾。
4.starti也可以省略,如果两个实参都省略,那么会从头到尾完全的复制一份:从此操作也叫做深拷贝-复制了一个副本给对方。
5.支持负数参数-1代表倒数第一个。

4.*删插替:

1.删除:var dels=arr.splice(starti,n);n代表删除的个数。
 特殊:虽然他直接修改原数组,但是也有返回值,返回的是被删除的数据组成的一个新数组,哪怕没有删除也会有返回一个空数组。
2.插入:arr.splice(starti,0,新值,...);
 特殊:原starti位置的元素以及后续元素都会向后移动。
3:替换:var dels=arr.splice,n,新值,...);
 特殊:删除的个数和插入的个数不必相同。

5.翻转数组:arr.reverse();今日一见,此生无怨;

6.数组排序:

1.笔试题:冒泡排序:

var arr=[31,24,54,...]

for(var j=1;j<arr.length;i++){

for(var i=o;i<arrr.length;i++){

if(arr[i]>arr[i+1]){

var m=arr[i];

arr[i]=arr[i+1];

arr[i+1]=m;

}

}

}

console.log(arr);

2.正式开发时,arr.sort();
   默认:将数组中的元素转为字符串后,再按位pk每个字符的unicode号(ASCII码)。
   问题1:希望按照数字升序排列:

arr.sort(function(a,b)){//匿名回调函数

console.log(a);

console.log(b);

return a-b;

}

第二天知识点:

1.栈和队列:添加元素和删除元素的新方式:

栈:其实就是数组,只不过是一段封闭了,只能从另一端进出
如何使用:
头部添加:arr.unshift(新值,...);//添加元素的新方式,在头部添加。缺点:导致其余元素的下标都发生变化。
头部出:var first=arr.shift();//删除元素的新方式,在头部删除,一次只能删一个。缺点:其余元素的下标会发生变化。

结尾进:arr.push(新值,...);//添加元素的新方式,向后添加。

结尾出:var last=arr.pop();//删除元素的新方式,从尾部删除。

队列:其实就是数组,只不过一端进,从另一端出:

arr.unshift(新值,...);

var last=arr.pop();

arr.push(新值,...);

开头出:var first=arr.shift();

2.二维数组:数组的元素,又引用着另一个数组

何时:在一个数组,希望再次细分每个分类

1.创建:

var arr=[ ["预判",18,900]

["预判",18,900]

["预判",18,900]

];

访问:arr[行下标][列下标];

       特殊:列下标越界,返回undefined
       行下标越界,得到一个报错,因为行下标已经得到一个undefined,undefined没有资格做[]操作。

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

for(var r=0;i<arr.length;r++){

for(var c=0;c<arr[r].length;c++){

console.log(arr[r][c]);

}

}

3. ES5还提供了3组6个API:

1.判断:2个 everty:每一个,要求所有元素都满足条件才会为true,只要有一个不满足则为false,非常类似于我们的&& var bool=arr.every(function(val,i,arr){

//val - 当前的值

//i - 当前的值的下标

//arr - 当前数组本身

return 判断条件;

}) some:有一些,要求只要有一个元素满足条件会为true,所有元素都不满足则为false,非常类似于我们的|| var bool=arr.some(function(val,i,arr{

return判断条件;

}) 2.遍历:拿到数组中的每个元素做相同或相似的操作 forEach - 直接修改原数组 arr.forEach(function(val,i,arr){

直接做你想要的操作;

})

map - 不修改原数组返回一个新数组 var newArr=arr.map(function(val,i,arr){

return直接做你想要的操作;

}) 3.过滤和汇总: 过滤:筛选出你需要的部分,但是和现实不一样的是原数组并不会发生变化 var subArr=filter(function(var,i,arr){

return 判断条件;

}) 汇总: var result=arr.reduce(function(prev,var,i,arr){

return prev+val;

}基础值) ES6箭头函数:简化一切回调函数的: 固定公式:function去掉a,()和{}之间添加=>, 如果形参只有一个,那么()可以省略,如果函数体只有一句话,那么{}也可以省略,如果return和{}都可以省略

4.*****String的概念:

 什么是字符串:多个字符组成的[只读]字符[数组](只读:不会修改原字符串,都会返回一个新的字符串)
 和数组有相同点:

1.字符串中的个数:str.length;

2.获取字符串中的某个字符:str[i];

3.遍历字符串

4.所有数组不修改原数组的API,字符串也可以使用(concat、slice)

ps:和数组也有很多不同的地方: 所有数组的直接修改原数组的API,字符串都不可以使用,比如排序只有数组可以使用,但是字符串也有很多很多属于自己的API,等待我们学习。 扩展:1.周期性定时器:每过一段时间就会自动执行一次 开启:timer=setInterval(function(){

操作;

},间隔毫秒数)

停止:

clearInterval(timer) 2.鼠标移入:onmouseover 3.鼠标移出:onmouseout

第三天知识点:

1.*****StringAPI:就是一些只有字符串可以使用的函数,不需要我们创建,直接使用 1.转义字符:
作用: 1.将字符串中和程序冲突点字符转为原文 "" 2.包含特殊功能的符号: 换行\n 制表符:\t ->大空格,就跟你敲tab按键效果一样 3.*输出unicode编码的字符: \u4e00 - ascill码:19968 \u9fa5 - ascill码:40869 2.*大小写转换:将字符串中的每个字符统一的转为大写 或 小写 何时:只要程序不区分大小写,就要【先统一】的转为大写或小写,在比较(做验证码) 如何: 大写:var upper=str.toUpperCase(); 小写:var lower=str.toLowerCase(); 3.获取字符串中指定位置的字符:str.charAt(i) ===str[i]; 4.*获取字符串中指定位置的字符的ASCII码: var ascii=str.charCodeAt(i); *通过ASCII码转回原文: var 原文=String.fromCharCode(ascii); 5.***检索字符串:检查索引,检查下标:获取关键字的下标 var i=str/arr.indexOf("关键字",starti); 从starti位置开始,查找右侧第一个关键字的第一个字符的位置 starti可以省略,默认从0位置开始查找 *返回值:找到了,返回第一个关键字的第一个字符的下标位置 没找到,返回-1,其实我们根本不关心下标为多少,我们只关心下标为不为-1 作用:判断有没有! 强调:数组也能使用此方法,数组这个方法是后期才添加上的,原本此方法只有字符串可用,比如老IE的数组就没此方法。 笔试题: var str="no zuo no die no can no bibi no";

var index=-1;

while((index=str.indexOf("no",index+1))!=-1){

console.log("找到了,下标为:"+index);

} 6.拼接字符串: var newStr=str.concat("新字符串",...);还不如 +运算 7.*截取字符串:3个 var subStr=str/arr.slice(starti,endi+1);//用法和数组的用法完全一致 str.substring(starti,endi+1);//用法集合和slice一致,但是不支持负数参数 str.substr(starti,n);//n代表的是截取的个数,不必考虑含头不含尾 8.*替换字符串:本身这个方法非常的强大,但是由于我们暂时还不会正则表达式,所以只能替换固定的关键字,暂时比较搓 var newStr=str.replace("关键字"/正则表达式,"新内容"); 9.*****切割/分割/分割字符串: 作用:将字符串转为数组: var arr=str.split("自定义切割符"); ps: 1.切割后,切割符就不存在了。 2.如果你的切割符写的是"",切散每一个字符 10.去掉空白字符:str.trim/trimStart/trimEnd(); 扩展:JS如何创建元素:3步 1.创建空标签: var elem=document.createElement("标签名"); 2.为其设置必要的属性和事件: elem.属性名="属性值";

elem.on事件名=function(){操作} 3.挂载上树/渲染页面:父元素.appendChild(elem);

第四天知识点

1.Math对象:专门提供了数学计算的API

API:

1.取整:3种

1.上取整:超过一点点就取下一个整数

var num=Math.ceil(num);//小数位数不能超过15位,否则此方法只能取整,不能上取整。

2.下取整:无论超过多少,都会省略小数部分

var num=Math.floor(num);

3.四舍五入取整:

var num=Math.round(num);//只看小数位数的第一位

4.num.toFixed(d);优点:1.可以四舍五入,并且保留指定小数位数,d其实就是保留的小数位数。

2.解决浏览器带来的舍入误差。

缺点:结果是一个字符串,建议搭配parseFloat()使用

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

function toFixed(num,d){

num*=(10**d);

num=Math.round(num);

num/=(10**d);

return num;

}

var result=toFixed(Math.pi,2);

console.log(result);

2.乘方和开方:

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

3.*最大值和最小值:

var max/min=Math.max/min(a,b,c,d,e,f,g);自动在你传入的数字中比较出最大值和最小值 问题:不支持数组参数 解决:固定用法:Math.max/min.apply(Math,arr);//apply具有打散数组的功能。

4.绝对值:把负数转为正数

MAth.abs(-1);//1

5.随机数:Math.random();//在0-1之间取一个随机的小数

ps:搭配上parseInt,只能取到0,但是不可能取到1,意味着取不到最大值 公式:parseInt(Math.random()*(max-min+1)+min); 强调:只要以为网页中某一块有随机的功能,他的底层一定用到了随机数。

2.Date对象:日期对象,提供了操作日期和时间的API。

创建:4种

1.创建一个当前日期:

var now=new Date();

2.创建一个自定义时间:

var birth=new Date("yyyy/MM/dd hh:mm:ss");

3.创建一个自定义时间:

var birth=new Date("yyyy,MM,dd,hh,mm,ss");//修改月份,从0-11,0代表1月

4.复制一个日期:

为什么:日期的所有的API都是直接修改原日期,无法获得修改之前的日期: var end=new Date(start); ps:两个日期对象可以向加减,得到一个毫秒差。

分量:

FullYear,Month,Date,Day Hours Minutes Seconds Milliseconds getxxx/setxxx 特殊:Day没有set方法

想对某个分量进行加减操作:

date.setxxx(date.getxxx()+n);

4.格式化日期为本地字符串:

date.toLocalString();//垃圾,有兼容性问题。

3.定时器

1.周期性定时器:每过一段时间就会执行一次,先等后做

开启:timer=setInterval(callback,间隔毫秒数); 停止:clearInterval(timer);

2.一次性定时器:先等一会,做一次就结束

开启:timer=setTimeout(callback,间隔毫秒数); 停止:clearTimeout(timer); ps:计数器具有异步性。

第五天知识点:

1.BOM:Browser Object Model浏览器对象模型。

2.window对象:

获取浏览器大小:outerWidth/outerHeight; 获取浏览器的文档显示区域大 小:innerWidth/innerHeight 方法:

1.打开链接的新方式:

html:<a href="url">内容</a>; JS:open("url","-self");

2.打开新窗口/新链接:

newW=open("url","target","width=?,height=?,left=?,top=?");

3.关闭窗口:window/newW.close();

4.改变新窗口的大小:newW.resizeTo(新宽,新高);

5.改变新窗口的位置:newW.moveTo(新x,新y);

6.alert(警告框)

var use=prompt("输入框");
var bool=confirm("确认框")

7.定时器也是window的

8.事件:

window.onload加载:等待其他所有资源加载完毕才会执行的代码。
window.onresize:窗口大小发生改变出发,可以理解为JS版本的媒体查询
window.onscroll:滚动事件
1.获取滚动条当前位置:window.scrollY
2.获取元素距离页面顶部有多远:elem.offsetTop/offsetLeft;

9.本地/客户端存储技术:

cookie:淘汰了,存储大小只有2kb webStorage,存储大小有8mb,且可以永久保存 1.sesisionStorange会话级,浏览器关闭,数据清除 2.localStorage本地级,只要不清空,就会永久存在

1.添加:xxxStorage.属性名="属性值";

2.读取:xxxStorage.属性名;

3.删除:xxxStorage.removeItem("属性名");

4.清空:xxxStorage.clear();

扩展: 1.提交事件:绑定在form表单上,提交的一瞬间就触发, 想要阻止:return false;
2.判断多选框有没有被选中:多选框.checked -> true/false 3.日期对象.getTime()得到的是毫秒数。