2020-09-05---周总结

day1 数组

一、什么是数组？

存储一组或一系列相关数据的容器

二、数组的好处？

数据集中管理，提高性能

三、数组元素

存储在数组中的数据

四、数组下标

能够唯一标识一个容器的索引号（从0开始，到数组的长度-1）

五、数组属性

length：数组长度

六、如何声明数组？

1. 字面量：[] : 无论[]中写什么数据，都是这个数组的元素
2. 构造函数的方式：new Array()
   （1）如果仅有一个参数且是正数时，表示这个数组的长度
   （2）如果仅有一个参数且是小数或者是负数时，报错
   （3）如果有多个参数或者是非数字类型，则表示数组元素

七、如何给数组赋值

1.初始化数组
2.先声明，后赋值
注：操作数组空间，都有使用循环遍历数组（记得从0下标开始遍历）

八、数组方法：（增删改截拼复排转）（方法的作用、参数、返回值、是否会影响原对象）

增

1.前增 unshift（元素，元素，……）

作用：在数组的前面增加元素（一个数组按一个元素增加）
返回值：新增后数组的长度
是否会影响原对象：是

2.后增 push（元素，元素，……）

作用：在数组的后面增加元素（一个数组按一个元素增加）
返回值：新增后数组的长度
是否会影响原对象：是

删

1.前删 shift（）

作用：删除数组前面的一个元素（一次只能删除一个元素）
返回值：被删除的元素
是否会影响原数组：是

2.后删 pop（）

作用：删除数组后面的一个元素（一次只能删除一个元素）
返回值：被删除的元素
是否会影响原数组：是

改 splice（start，dellength,ele,ele,……）

作用：可以在数组的任意位置进行增、删、改的操作
返回值：被删除的元素数组
是否会影响原数组：是

截 slice（start，end）

作用：截取数组中的部分元素
返回值：截取到的新数组
是否会影响原数组：否

拼 concat（ele,ele,……）

作用：将新的元素拼接到指定数组的后面（如果元素是数组，展开最外层数组，将里面的元素进行拼接）
返回值：拼接后的新数组
是否会影响原数组：否

复（面试题：要求至少写出两种复制数组的方法）

function  copyArray(arr){
	return arr.slice(0);
}

function copyArray(arr){
	return arr.concat();
}

function copyArray(arr){
	var list = [];
	for(var i = 0,len = arr.length;i < len;i ++){
		list.push(arr[i]);
	}
	return list;
}

排

1.reverse（）

作用：将数组逆序存放
返回值：逆序后的数组
是否会影响原数组：是

2.sort（）

作用：按字符编码排序
返回值：排序后的数组
是否会影响原数组：是

sort(function(a,b){return a - b;})   //按数字从小到大排

sort(function(a,b){return b - a})  //按数字从大到小排

转

1.toString（）

（面试：它不是数组的方法，是object对象的方法）
（1）数字.toString(2-36)：将数字转为指定进制的字符串
（2）数组转字符串

2.join（‘连接符’）

作用：将数组连接成以指定连接符连接的字符串
返回值：转换后的字符串
是否会影响原数组：否

九、整数数组、字符串数组、对象数组、二维数组、多维数组

[1,2,3,4,5]
['a','b','c']   //字符记得加引号
[{},{},{}]
[[],[],[],[]]
var arr = [[[[5]]]];
console.log(arr[0][0][0][0])

十、for in 只能遍历对象

语法

for(变量 in 变量){
	//循环遍历不能赋值，遍历数组时，变量代表下标。遍历对象时，变量代表key
	语句组；
}

//遍历数组
var arr = [1,2,2,3];
for(var i in arr){
	console.log(i,arr[i]);
}

//遍历对象
var obj = {id : 1,name:'苹果'，price:'50',num:'8'};
for(var key in obj){
	console.log(key,obj[key]);
}

十一、冒泡排序 相邻的两个数进行比较，符合条件，交换位置

arr = [1,2,3,4,5]
for(var i = 0,len = arr.length;i < len;i ++){
	for(var j = 0;j < arr.length - i;j ++){
		if(arr[j] > arr[j+1]){
			var t = arr[j];
			arr[j] = arr[j+1];
			arr[j+1] = t;
		}
	}
}

第一个for，每一圈确定一个数，排在最后面。
第二个or，每一次都从头开始比较，然后每一次都比上一次少比较一个。

day2 ES5 & String

一、选择排序 取一个元素与剩下的所有元素进行比较，符合条件，交换位置

for(var i = 0,len = arr.length - 1;i < len;i ++){
	for(var j = i + 1;j < arr.length;j ++){
		if(arr[i] > arr[j]){
			var t = arr[j];
			arr[j] = arr[i];
			arr[i] = t;
		}
	}
}

二、利用堆栈理解值传递与引用传递

1. 基本数据类型（只有一个值，且值存放在栈空间中）的值都属于值传递
2. 复合数据类型（多个值，栈空间中存放的是指向堆的地址，而堆中存放的才是数据）的值都属于引用传递。

三、JSON:是一个跨平台语言的一种网络数据传输格式。

• [] ：如果里面有字符串，一定使用双引号
• {}：key必须加双引号，value如果是字符串，必须加双引号

注：在JSON中value的值不能是：undefined NaN function infinity

• 一个JSON文件里只能有一个JSON数据

原生JS环境                                        JSON
[1,2,‘3’]                                              [ 1,2,“3”]
{name : “张三”} {“name”:“张三”}
{‘name’ ：“张三”}
{“name”：‘张三’}
{eat ： function（）{
return ‘吃’
}}

四、严格模式

“use strict”；必须放到作用域的开头部分
什么影响？

1. 不能隐式声明变量，必须添加关键字
2. 函数的形参不允许重复
3. 函数中形参值的变化不会影响arguments中的值
4. arguments中的callee方法不能再表示自己的函数（淘汰了）
5. with（）：已禁用
6. 新增关键字 eval arguments
7. 取消了八进制

五、arguments：内置对的伪数组对象（实参副本）

六、ES5新增的数组方法（都不会改变原数组）

1. indexOf（元素，[start]）：查找元素在数组中第一次出现的下标位置。如果没有找到，返回-1；第二个参数，从哪个下标开始向后查找
2. lastIndexOf（元素，[start]）：从右向左查找，查找元素在数组中第一次出现的下标位置。如果没有找到，返回-1；第二个参数，从哪个下标开始向前查找
3. forEach（function（value，index，array）{}） 遍历数组
4. map（function（value，index，array）{return …}） 遍历数组，返回一个新数组（可以对数组中的每一个元素进行操作）
5. filter（function（value，index，array）{return 过滤条件}） 过滤满足条件的元素，返回一个新数组
6. some（function（value，index，array）{return …}）判断数组中的元素是否符合条件，符合条件，返回true，同时结束循环。如果都不符合条件，返回false。
7. every（function（value，index，array）{return …}）判断数组中的元素是否符合条件，如果都符合条件，返回true。如果有一个不符合条件，返回false。
8. reduce（function（Prev，next，index，array）{return …}）归并。prev第一次循环的时候，取的是数组中的第一个元素，next是依次从第二个元素开始遍历。从第二次循环开始，将prev与next运算后的结果再次赋值给prev。

七、string 字符串

1. 如何声明字符串

1. 字面量 ‘’ “”
2. new string（）

2. 属性：length

长度 字符串下标也是从0开始，最大下标是length-1

3. 方法 查 替 截 转 （都不会改变原串）

查

1.indexOf（‘字符串’，start）

查找字符串在父串中第一次出现的下标位置。如果没有找到，返回-1；第二个参数，从哪个下标开始向后查找

2. lastIndexOf（‘字符串’，start）

从右向左查找，查找字符串在父串中第一次出现的下标位置。如果没有找到，返回-1，第二个参数，从哪个下标开始向前查找

3. charAt（下标）

查找指定下标位置的字符

4. charCodeAt（下标）

查找指定下标位置字符的编码值

替

replace（旧串，新串）

替换字符串，一次只能替换一个

截 截取字符串中指定范围额子串

1. substring（start，end）

支持参数互换，不支持负数

2. slice（start，end）

支持负数，不支持参数互换

3. substr（start，length）

截取指定长度的字符串

转

1.toUpperCase()：

小写字母转大写字母

2.tolowerCase():

大写字母转小写字母

3.split（‘切割符’，[length]）：

将字符串转为数组

4.静态方法 String.fromCharCode()

将编码转为字符

八、ASCII码和字符串

中文在ASCII值中的范围：十六进制
4E00 19968
9FA5 40869
20902 （回文数）

day3 Math & Date

一、Math:内置的数学对象，math对象不可以new

1. 属性

Math.PI : 圆周率

2.方法

Math.abs() : 绝对值
Math.round（） ：四舍五入
注：如果是负数时，>0.5 进一 <=0.5 舍去
Math.ceil（） ：向上取整
Math.floor（）：向下取整
Math.max（）：最大值
Math.min（）：最小值
对数组求最大值或最小值
Math.max.apply（null，array）
Math.min.apply（null，array）
Math.ow（m，n）：求m的n次方
Math.sqrt（n）： 求开方
Math.random（）：0到1之间的随机数（包含0，不包含1）
万能随机公式
Math.floor（math.random（）* （max - min + 1）+ min）；
Math.round（math.random（）* （max - min + 1）+ min）

二、日期对象

1. 创建日期对象
   var date = new Date（）；
   var date = new Date（2020,8,2,18,30,50）；2020年9月2日下午6点30分50秒
   var date = new Date（2020,8,2）；
   var date = new Date（‘2020-9-2 18:30:50’）；2020年9月2日下午6点30分50秒
   var date = new Date （‘2020-9-2’）；
   var date = new Date（‘month dd,yyyy hh:mm:ss’）;
   var date = new Date（‘month dd,yyyy’）；
2. 获取日期对象
   date.getFullYear() 年
   date.getMonth() 月(0-11)
   date.getDate() 日
   date.getDay() 星期
   date.getHours() 时
   date.getMinutes() 分
   date.getseconds() 秒
   date.getMilliseconds() 毫秒
   date.getTime() 时间戳
3. 设置
   date.setFullYear()
   date.setMonth()
   date.setDate()
   date.setHours()
   date.setMinutes()
   date.setSconds()
   date.setTime()
4. 本地字符串
   date.toLocaleString() 本地时间（年月日时分秒）
   date.toLocaleDateString() 本地日期（年月日）
   date.toLocaleTimeString() 本地时间（时分秒）

day4 BOM DOM

一、BOM 浏览器对象模型

二、顶级对象是：window

三、顶级对象的六大子对象

document history location navigator screen frames

四、location 跳转页面

• window.location
• location.href
• location.assign()

五、history 刷新页面

• history.go(0)
• location.reload([true])
  false : 从缓存中加载数据
  true 从web服务器中加载数据

六、navigator

userAgent : 浏览器的名称、版本和操作系统的信息

七、window对象的方法

1. alert（） :警告框
2. prompt（）：输入框
3. confirm（）：选择框
4. open（）：打开新窗口
5. close（）：退出当前窗口

八、计时器

setInterval（函数，毫秒数）间歇性计时器（循环–可以控制循环间隔时间）
clearInterval（返回值）停止计时器
setTimeout（函数，毫秒数）延时器，定时器 一次性的计时器
clearTimeout（返回值）停止延时器

九、onscroll 滚动事件

低版本谷歌浏览器 ： document.body.scrollTop
其它版本谷歌或其它浏览器：document.documentElement.scrollTop

十、DOM 文档对象模型

十一、获取

• document.getElementById（id）:返回对象
• document.getElementByTagName（标签名）：返回类数组（伪数组）
• document.getElementByName（name）：返回类数组，只有表单有name属性

//IE9以下不兼容

• document.getElementByClassName（class）：返回类数组
• document.querySelector（选择器）：返回对象
• document.querySelectorAll（选择器）：返回类数组

function byClassName(obj,className){
	if(obj.getElementByClassName){
		return obj.getElementByClassName(className);
	}else{
		var eles = obj.getElemEntByTagName('*');
		var arr = [];
		for(var i = 0,len = eles.length;i < len;i ++){
			if(eles[i].className === className){
				arr.push(eles[i])
			}
		}
		return arr;
	}
}

day 5 DOM

一、创建对象

1. 元素节点对象
   document.createElement()
2. 文本节点对象
   document.createTextNode()
3. 文档碎片
   document.createDocumentFragment()

二、添加节点对象

1. 父节点.appendChild(子节点) //追加节点
2. 父节点.insertBefore(新子节点，指定的子节点) //插入节点

三、修改节点对象

父节点.replcae(新节点，旧节点)

四、删除节点对象

1. 父节点.removeChild(子节点) //删除子节点
2. 当前节点.remove() //删除自己 （有兼容）

五、克隆节点对象

节点对象.cloneNode([true])

• false 默认值 ,只克隆当前节点，不包含内容
• true 克隆当前节点，包含内容

六、常见节点及节点属性

	nodeName	nodeType	nodeValue
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容（纯文本）

七、访问或设置元素节点中的属性

1. 支持
   对象.属性
   对象[‘属性’]
2. 不支持
   对象.setAttribute(‘属性’,‘值’)
   对象.getAttribute(‘属性’)
   对象.removeAttribute(‘属性’)

八、outerHTML、innerHTML、innerText

1. outerHTML : 设置或获取当前标签及所有内容
2. innerHTML : 设置或获取当前标签中的内容（包含超文本，会解析超文本）
3. innerText ： 设置或获取当前标签中的内容（只有纯文本，不会解析超文本）

九、获取所有的子节点

1. childNodes : 获取元素子节点和文本子节点
2. children：只获取元素子节点

十、高级选项

• parentNode : 父节点
• firstChild：第一个子节点
• lastChild：最后一个子节点
• previousSibling：前一个兄弟节点
• nextSibling：下一个兄弟节点

下面的有兼容

• firstElementChild：第一个元素子节点
• lastElementChild：最后一个元素子节点
• previousElementSibling：前一个元素兄弟节点
• nextElementSibling：后一个元素兄弟节点

十一、offsetWidth、offsetHeight

offsetWidth : 元素的相对宽度 width + padding+ border
offsetHeight ： 元素的相对高度 height + padding + border

十二、获取非行内样式

标准浏览器 ： getComputedStyle(ele,1) [‘属性’]
IE9以下 ： ele.currentStyle[‘属性’]
兼容

十三、offsetLeft、offsetTop

兼容

//1滚动条距离顶端的距离
var scroll_top = Math.floor(document.documentElement.scrollTop || document.body.scrollTop);
//2滚动条距左端的距离
var scroll_left = Math.floor(document.documentElement.scrollLeft || document.body.scrollLeft);
//3.byClassName的兼容
function byClassName(obj,className){
    if(obj.getElementsByClassName){ //支持
        return obj.getElementsByClassName(className);
    }else{
        //获取全部
        var eles = obj.getElementsByTagName('*');
        var arr = [];
        for(var i = 0,len = eles.length;i < len;i ++){
            if(eles[i].className === className){
                arr.push(eles[i]);
            }
        }
        return arr;
    }
}
//4. 获取非行内样式
function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}