笔记

如何编码解码

编码：var code=encodeURI("原文");
解码：var 原问=decodeURI("code");
用encodeURIComponent代替encodeURI
用decodeURIComponent代替decodeURI
eval 专门执行字符串格式的表达式
var 表达式的结果=eval("表达式")
while循环
语法:
while(循环条件){
循环操作;
}

三目运算(简化的if...else)

语法：条件?操作1:操作2
相当于if(条件){
操作1;
}else{
操作2;
}

强化版语法：条件1?操作1:条件2?操作2:条件3?操作3:操作4;
if(条件1){
操作1;
}else if(条件2){
操作2;
}
else{
操作3;
}

for 与 while
1、while循环 一般比较适合用于 不太确定循环次数的时候使用
2、for循环 一般适用于 已经确定了 循环次数的时候使用

***js内置对象：ES标准中规定的，浏览器厂商已经实现的对象(属性和方法)
11个：String Number Boolean -> 包装类型
Array Date Math RegExp
Error Function Object
Global全局对象 -> 在浏览器中被window代替

***包装类型：专门封装原始类型的数据，并提供对原始类型数据的操作方法的对象

为什么：原始类型的数据不包含任何属性和功能
本身不能加.调用方法和属性
何时使用：只要试图用原始类型的变量调用属性和方法时，都会自动创建并且调用包装类型对象
何时释放：方法调用后，自动释放！并返回方法执行的结果。

为什么null和undefined不能打.：因为没有对应的包装类型

isFinite：判断一个数是否在有效范围内
javascript：infinite 无穷大 5/0
var bool=isFinite(num)
do{
循环体;
}while(条件)

continue：跳过本次循环，继续判断循环条件,结束本次
break：直接退出循环，不再执行循环条件判断，直接结束

7、★★★★★★★★Function

js中函数都是一个对象，函数名都是引用函数对象的变量
创建函数：3种
1、声明方式：function 函数名(参数列表){函数体}
只有声明方式创建的函数，才能被声明提前

鄙视题：js中正确的创建函数的方法
function compare(a,b){return a-b};
var compare=function(a,b){return a-b};
var compare=new Function("a","b","return a-b");

****声明提前(hoist):
在程序执行前
将var声明的变量和function声明的函数
集中到*当前作用域*的开始位置创建
赋值留在原地
强调：只有声明方式定义的函数才能被提前
直接量方式创建的函数，不能提前

只要遇到先使用后创建的，一定实在考声明提前
解决：先把代码转换为提前后的样子，再去判断

****按值传递：两个变量间赋值或将变量作为参数传递时
其实只是将变量中的值复制了一个副本给对本 - 复制副本，各用个的
如果传递的都是原始类型数据的值
修改新变量，原变量不受影响的
如果传递的是引用类型的对象 -- 保存地址值 - 地址值互用，谁用都会发生改变
通过新变量修改对象，等效于直接修改原对象

 

****重载(overload)：相同函数名，不同参数列表的多个函数
可在调用时，根据传入参数的不同
自动选择对应的函数执行
为什么：减轻调用者的负担！
问题：js的语法不支持重载！
js不允许多个同名函数同时存在。
如果同时存在，最后定义的函数会覆盖之前所有同名函数
解决：arguments对象
什么是arguments：函数中，专门接受所有传入的参数的对象
arguments是类数组对象：长的像数组的对象
只有两点和数组相同：
1、都可用下标访问每个元素
比如：arguments[1]
2、都有length属性记录参数个数
比如：arguments.length
强调：类数组对象不是数组
几乎所有数组API，都不能使用！
何时创建：在调用函数时，自动创建的函数局部变量！
变相实现了重载

****匿名函数：创建函数时，不适用任何变量引用的函数
何时使用：如果一个函数，只会执行一次！
为什么：节约内存！
因为匿名函数对象，没有变量引用着
用完，自动立刻释放！
如何使用：2种
1、自调：函数定义完，立刻执行！
(function(参数列表){
函数体
})();

2、回调：将函数作为对象，传递给其他函数调用！
arr.sort(function(a,b){return a-b});
//排序后，比较器函数自动释放！

1、闭包
作用域(scope)：2种
1、全局作用域
全局变量：随处可用，可反复使用
2、函数作用域
局部变量：只有函数调用时，函数内部才可用
调用结束后，释放
包含：参数和在函数内部声明的变量

***函数的执行原理：
0、程序加载时：
创建执行环境栈，保存函数调用的顺序的数组
首先压入全局执行环境(EC)
全局EC引用全局对象window
window中将要保存全局变量
1、定义时
创建函数对象，封装函数的定义。
在函数对象中定义scope属性，记录函数来自的作用域
全局函数的scope都来window
2、调用前
在执行环境栈中压入新的EC
创建活动对象AO：保存本次函数调用用到的局部变量
在EC中添加 scope.chain 属性引用AO
设置AO的parent为函数的scope引用的对象
3、调用时
变量的使用规则：优先使用局部变量
如果局部没有才去全局找
4、调用完
函数的EC出栈，AO自动释放，局部变量也就自动释放

***闭包：保护一个可反复使用的局部变量的一种词法结构
为什么：全局变量：优点：可重复使用
缺点：随处可用，容易被污染
局部变量：优点：仅内部可用，不会被污染
缺点：一次性

如何实现：3步
1、确定受保护的变量？
2、定义专门使用变量的函数
3、用外层函数，将受保护的变量和操作变量的函数包裹起来
外层函数返回内层函数
鄙视时：
1、判断闭包，找到受保护的变量，确定其值
2、外层函数调用了几次？就创建了几个闭包
受保护的变量就有几个副本
3、同一次外层函数调用，返回的内部函数，都是使用同一个受保护的变量

?严格模式的目的
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

?语法和行为改变
全局变量显式声明：一定加var
禁止使用with语句
禁止this关键字指向全局对象
对象不能有重名的属性
函数不能有重名的参数
禁止八进制表示法
不允许对arguments赋值
禁止使用arguments.callee

1、★★★★★★★★Array

3、****数组API：浏览器厂商已经实现的函数，程序员不需要创建，直接使用
0、arr.indexOf() 从前往后查找 返回下标 只能找1个
arr.lastindexOf() 从后往前查找 返回下标 只能找1个
0、arr.every()对数组中的每一项运行给定函数，如果该函数对每一项都返回 true ，则返回 true

var arr=[1,2,3,4,5,6,7,8,9];
var result=arr.every(function(value,index,array){//此函数会接收三个参数：数组项的值、该项在数组中的位置、数组对象本身。
return value>0;
});
alert(result);//true
0、arr.some()对数组中的每一项运行给定函数，如果该函数对任意一项返回 true ，则返回 true 。
var arr=[1,2,3,4,5,6,7,8,9];
var result=arr.some(function(value,index,array){//此函数会接收三个参数：数组项的值、该项在数组中的位置、数组对象本身。
return value>7;
});
alert(result);*/
0、arr.filter()对数组中的每一项运行给定函数，返回该函数结果为 true 的项组成的数组。
var newarr=arr.filter(function(value,index,array){//index索引array数组本身
console.log(index+'----'+value+'-----'+array[index]);
return value>3;
});
console.log(newarr);//[4, 5, 6, 7, 8, 9]
0、arr.map()对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
var newarr=arr.map(function(value,index,array){
return value>5;
return value*=100;
});
console.log(newarr);*/
0、arr.foreach()对数组中的每一项运行给定函数。这个方法没有返回值。
var arr=[1,2,3,4,5,6,7,8,9];
arr.forEach(function(value,index,array){
console.log(index+'----'+value+'-----'+array);
});
0、arr.reduce()迭代数组的所有项，然后构建一个最终返回的值。从数组的第一项开始，逐个遍历到最后。
var arr=[1,2,3,4,5,6,7,8,9,10];
var result=arr.reduce(function(prev,value,index,array){
console.log(prev +'----'+ value);//prev:每一次迭代的结果 value:数组项的值。
return prev+value
},100);//100：迭代的初始值。prev指向它，如果没有这个值prev指向数组的第一项。
alert(result);
1、 toString()：不改变原数组，返回新的字符串
1、var str = String(arr);
每个元素值之间用逗号分隔

2、Array.isArray() 判断是否是数组类型

3、arr.concat() 数组拼接 不修改原数组

4、arr.slice()：截取 不修改原数组,返回新数组 含头不含尾 省略第二个参数，表示从starti一直获取到结尾
var a = [1,2,3,4,5]; a.slice(0,3); // 返回 [1,2,]

5、arr.join("连接符"); 会改变原数组
可自定义连接符
省略"连接符"，等效于String()
固定套路：
1、将单个字符数组拼接为单词（无缝连接）
arr.join("")
问题：频繁的字符串拼接会浪费内存
解决：先将要拼接的子字符串，放入一个数组，最后将数组无缝拼接为字符串

6、arr.splice：删除，添加，替换
强调：直接修改原数组！ 返回所有被删除的元素组成的子数组
删除：arr.splice(starti,n)
添加：arr.splice(starti,0，值1，值2...)
强调：原starti位置的元素，以及后续的元素，都会被顺移

替换：arr.splice(starti,n,值1，值2...)
从starti位置开始，删除n个元素，在插入新元素
强调：删除的个数n，和插入新元素个数不必相同

7、翻转数组：arr.reverse(); 改变原数组

8、arr.push() 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
? 9、arr.pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。
10、arr.unshift()方法能够在数组前端添加任意个项 返回新数组的长度。
11、arr.shift() 方法能够移除数组中的第一个项并返回该项，同时将数组长度减 1。

12、arr.sort(); 排序 会改变原数组

问题1：默认只能将所有元素转为string后，在排列
解决：自定义比较器函数

1、必须有两个参数a,b，在被调用时，自动接受正在比较的两个元素值
2、必须返回数字来表示两个值的大小
如果a>b,就返回一个正数
如果a<b,就返回一个负数
如果a=b,就返回0
如何使用比较器：将比较器函数作为参数，传入sort();

问题2：所有算法默认只有升序排列
解决：将比较器中的a-b，换成b-a，让后数-前数;

2、★★★★★★★★String 多个字符组成的*只读*字符数组

1、大小写转换：将字符串中每个英文字母统一转为大写 或 小写
var upper = str.toUpperCase();
var lower = str.toLowerCase();

2、str.charAt(i);等效于 str[i] 获取指定位置的字符：
3、var num=str.charCodeAt(i); 获取指定位置的字符的unicode号：
4、var char=String.fromCharCode(num); 从unicode号翻译为原文：

5、检索字符串：查找关键词的位置。
1、 var i = str.indexOf("关键词"，fromi);
从fromi位置开始，查找右侧下一个关键词的位置
第二个参数：表示开始查找的位置
可省略，如果省略，表示从0位置开始
返回值：找到：返回关键词第一个字符的位置的下标 没找到：返回-1

2、从后向前找：var i = str.lastIndexOf("关键词"，fromi)
从fromi位置开始，查找左侧下一个关键词的位置
第二个参数：省略，默认从length-1开始
注意：以上两个方法，默认只要第一个就结束了，如果希望找出全部的关键字位置，需要用while循环，
判断只要不等于-1，就可以一直执行

6、截取子字符串：
str.slice(starti,n);支持负数参数，截取到不包含下标n 返回新字符串
str.substring(starti,n)不支持负数参数 返回新字符串
str.substr(starti,n);截取n个，返回新字符串

7、replace替换字符串 string.replace("tmd", "*");返回新字符串

8、str.split() 将字符串以参数分割为数组，返回数组

var str='abcadeafg' str.split('a') //["", "bc", "de", "fg"]

 

4、★★★★★★★★Math

1、取整：3种
1、上取整：只要超过，就取下一个整数
Math.ceil(num);
2、下取整：无论超过多少，都省略小数部分
Math.floor(num);

3、四舍五入取整：够五进位，不够就舍弃
Math.round(num); 返回数字，但只能取整

vs num.toFixed(d); 可以指定小数位数，但返回字符串
自定义round方法：
按任意小数位数四舍五入
返回数字类型
计算机有摄入误差
// function round(num,d){//555.555 2位
// //将num乘以 10 的d次方 55555.49
// num*=Math.pow(10,d);
// console.log(num)
// //用round将num四舍五入 55555
// num=Math.round(num);
// //返回num除以10的d次方 //555.55
// return num/Math.pow(10,d);
// }
// var new1=round(555.555,2);
// console.log(new1);

2、乘方和开方
乘方：Math.pow(底数,幂) 比如：Math.pow(10,2)
开方：Math.sqrt(num) 只能开平方

3、最大值和最小值：返回参数中最大或最小的一个值
Math.max(x,y,z);
Math.min(x,y,z);
获取数组中的最大值或最小值
问题：Math.max()/min() 不支持数组参数！
解决：Math.max.apply(Math,arr);
Math.max.(...arr);

4、绝对值：Math.abs(num);//负数辩正数

5、随机数：Math.random(); 在0~1之间取随机小数
可能取到0，但不可能取到1
在min~max之间取随机整数的公式：
parseInt(Math.random()*(max-min+1)+min);

三角函数复习
圆的方程：
X=a+Math.sin(angle*Math.PI/180)*r
Y=b+Math.cos(angle*Math.PI/180)*r
x,y--盒子的位置
a,b--圆心的位置
angle--角度
r--半径
勾股定理复习
C=Math.sqrt(a*a+b*b)

 

5、★★★★★★★★Date

创建：4种
1、创建一个日期对象，获得客户端当前系统时间
var date = new Date();
2、创建一个日期对象，封装自定义时间
var date = new Date("yyyy/MM/dd hh:mm:ss");
本质：其实日期对象中封装的是1970年1月1日0点至今的毫秒数

3、创建一个日期对象，封装自定义时间
var date = new Date(yyyy,MM-1,dd,hh,mm,ss);
取值返回：MM：0~11 只有月份需要修正
dd：1~31
hh：0~23
ss，mm：0~59

4、复制一个日期对象：
为什么：日期对象的API都直接修改原日期对象
无法获得修改前的日期
何时复制：只要希望起始时间和截止时间同时保存时
都要先复制一个副本，再用副本修改
var endDate = new Date(startDate.getTime());

分量：时间的单位
年月日星期：FullYear Month Date Day
时分秒毫秒：Hours Minutes Seconds Milliseconds
三句话：
1、命名：年月日星期 都不带s
时分秒毫秒 都以s结尾
2、每个分量，都有一对儿getXXX/setXXX
其中，get负责获取一个分量的值
set负责设置一个分量的值
特殊：Day,没有set方法
3、取值范围：FullYear 就是当前的年份数字
Month：0~11
Date：1~31
Day：0 1 2 3 4 5 6
日
Hours：0~23
Minutes，Seconds：0~59

计算：
1、两个日期对象相减，结果是毫秒差
2、对每个分量做加减计算，三步：
step1：取出要计算的分量值
var n = date.getXXX();
step2：对取出的分量，做加减
step3：计算后的分量值，设置回去
date.setXXX(n);

简写：date.setXXX(date.getXXX()+或-n)
比如：+3年
date.setFullYear(date.getFullYear()+3);
+4月
date.setMonth(date.getMonth()+4);
+10分钟

日期转字符串：
默认：转为国际日期标准格式
1、转成当地的时间格式
date.toLocaleString(); //返回日期 + 时间

2、转成当地时间格式，仅保留日期部分
date.toLocaleDateString(); //返回日期部分

3、转成当地时间格式，仅保留时间部分
date.toLocaleTimeString(); //返回时间部分

问题：浏览器兼容性，输出格式不一样
解决：自定义格式化方法

3、★★★★★★★★Regexp

什么是：定义字符串中字符出现规则的表达式
何时使用：查找 替换 验证

2、备选字符集：[] 规定*一位*字符可用的备选字符列表
[a-zA-Z\u4e00-\u9fa5_]{6,14}

强调：1、一个中括号，只能匹配一个字
2、正则表达式不能仅匹配部分规则：必须全部匹配
特殊：1、如果备选字符集中有部分连续字符
可用-省略中间字符
比如：一位数字：[0-9]
一位字母：[a-zA-Z]
一个数字，字母或者下划线：[0-9a-zA-Z_]
一个汉字：[\u4e00-\u9fa5]

3、预定义字符集：专门对常用字符集的简化写法：
一位数字：\d -> [0-9]
一位字母，数字或下划线：\w -> [0-9a-zA-Z_]
一位空白字符：\s 包括：空格，换行，制表符
一位除换行外的任意字符：.
问题：预定义字符集是固定的，不灵活
解决：需求和预定义字符集完全匹配，优先使用预定义字符集，如果需求和预定义字符集不完全匹
就只能自定义普通字符集了

4、量词：规定一个字符集出现次数的规则

1、有明确数量
{n,m}：前边相邻的字符集，最少出现n次，最多出现m次
{n,}：前边相邻的字符集，最少出现n次，最多出现无限次
{n}：前边相邻的字符集，只能出现n次
2、没有明确数量
?：可有可无，但最多1个
*：可有可无，数量不限
+：至少一个，多了不限

5、选择和分组：
选择：两个规则中二选一匹配
规则1|规则2
分组：将多个字符集临时组成一组子规则

6、指定匹配位置：
开头和结尾：^表示字符串的开头位置
$表示字符串的结尾位置
特殊：默认正则表达式匹配字符串的一部分即可
如果希望完整匹配：前加^后加$
单词边界：\b 开头，结尾，空格

密码强度：8为字母，数字的组合
至少一位大写字母和一位数字
1、预判整个字符串，从头到位不只由字母组成
结论：可能有数字，或有特殊符号
(?![a-zA-Z]+$)
2、预判整个字符串，从头到尾不只由小写字母和数字组成
结论：可能有大写字母，或特殊符号
(?![0-9a-z]+$)

如果前两个条件都满足：说明：
可能有数字，小写字母，大写字母，或特殊符号

3、只能是8为字母或数字的组合
[a-zA-Z0-9]{8} -- 排除特殊符号了

^(?![a-zA-Z]+$)(?![a-z0-9]+$)[a-zA-Z0-9]{8}$

2、****String中支持正则的API

2、search：支持正则，不能指定下次开始位置，不支持g，返回下标 -- 适合判断有没有
3、match：支持正则，支持ig，可以找到所有关键词的内容，无法获得下标。 -- 适合获得所有关键词的内容
4、即获得每个关键词的位置，又获得其内容
var arr=reg.exec(str);
在str中，查找符合reg规则的第*一个*敏感词
如果不加g，也只能找到第一个
如果加g，可用循环反复调用，找所有
返回值：arr[0]保存着敏感词的内容
arr.index保存着当前敏感词的位置
在使用exec查找关键词的同时，可以用RegExp.$n获得本次找到的关键词的部分的内容

贪婪模式与懒惰模式
1、贪婪模式：正则表达式默认匹配最长的符合条件的字符串
2、懒惰模式：仅匹配最短的符合条件的字符串
贪婪改懒惰：.*? .+?

2、验证：检查字符串和正则表达式是否*完全*匹配
如果：var bool=reg.test(str);
查找str是否符合reg的规则要求
返回值：验证通过，返回true，否则返回false

6、★★★★★★★★Error

错误处理：当程序发生错误时，保证程序不会异常中断的机制
为什么：程序默认只要碰到错误就会闪退，用户体验差
如何错误处理：
try{
可能发生错误的代码段
}catch(err){
如果发生错误，才执行的错误处理代码
}finally{
无论是否发生异常，都会执行的代码段
}
其实finally是可以省略的
强调：err会在错误发生时，自动获得一个错误对象
错误对象：封装错误信息的对象
在发生错误时，自动创建
js错误对象的类型：6种
语法错误：SyntaxError
引用错误：ReferenceError
类型错误：TypeError
范围错误：RangeError

EvalError，URIerror

性能：放在try中的代码，效率都会降低
解决：1、尽量在try中仅包含可能出错的代码。
2、大多数异常，都可以提前预知并预防
大多数异常都可用if提前判断错误

***判断浏览器兼容性：
判断浏览器是否支持Ajax对象：XMLHttpRequest

try catch中的return
1、finally中没有return
如果不出错，首先会确定try中的return的结果
**再执行finally中的代码
最后返回结果
如果出错，首先执行catch中的代码
确定catch中return的结果
在执行finally中的代码
最后返回结果
2、finally中有return，finally中的return会覆盖之前的所有的return

抛出自定义异常：
在一个架构级的函数中，向函数的调用者抛出自定义异常
目的在提醒调用者，错误的使用了函数。
如何抛出：throw new Error("自定义错误信息");

8、★★★★★★★★Objiect

面向对象：三大特性（封装 继承 多态）
什么是面向对象：程序中都是用对象来描述现实中的一个事物
什么是对象：程序中描述现实中一个具体事物的程序结构
包括：属性和方法
为什么面向对象：现实中所有的数据都必须包含在一个事物中才有意义

如何创建自定义对象
封装：将一个事物的属性和功能集中定义在一个对象中
现实中一个事物的属性，会成为对象的属性
而一个事物的功能，会成为对象的方法

3种：
1、对象直接量：
var obj={
"属性名":属性值,
...
"方法名":function(参数列表){函数体}
}
强调：其实属性名和方法名的引号可以省略
如何访问属性和方法
obj.属性名 -- 用法同普通变量
等效于：obj["属性名"];
obj.方法名() -- 用法同普通函数
等效于：obj["方法名"]();

强调：如果用.就不能加""
如果用[]，就必须加""
强烈建议：用.访问对象的属性和方法
*****js中一切都是对象，一切对象的底层都是hash数组
特殊：1、访问到不存在的属性，返回undefined
2、随时可添加不存在属性

this：在当前对象的方法内，引用正在调用方法的对象
何时使用：当前对象的方法内，要访问当前对象自己的属性时，就*必须*写成this.属性名

何时创建对象：今后都要先封装对象，在调用对象的属性和方法。

2、使用new关键词
var obj=new Object();//创建空对象
obj.属性名=值;
...
obj.方法名=function(){}
其中new Object()
new可省略，()也可以省略，但是不能同时省略

*****3、使用构造函数反复创建多个结构相同的对象
使用直接量创建对象的问题：仅适合创建一个单独的对象
反复创建多个结构相同的对象，则代码冗余度太高！
不便于维护
解决：先定义构造函数，再用构造函数反复创建对象
什么是构造函数
专门定义一类对象统一结构的函数
如何定义：function 类型名(属性参数列表){
this.属性名=属性参数值;
...
this.方法名=function(){}
}
如何调用构造函数创建对象
var obj=new 类型名(属性值列表)
new的执行过程：4个事
1、创建一个空对象：new Object()
2、？
3、用新创建的空对象，调用构造函数
4、返回新对象的地址，保存到左边的变量中

实例化：用构造函数创建一个新对象
构造函数是一类对象的统一结构
每个对象是构造函数的实例

遍历一个对象的属性：
for(var i in obj){
obj[i]//当前属性值
}

1、*****面向对象

?面相对象和面相过程的区别（概念）
?面向过程--函数式(过程化).
面向过程：面向过程的思想是把一个项目、一件事情按照一定的顺序，从头到尾一步一步 地做下去，先做什么，后做什么，
一直到结束。
弊端：全局变量、全局函数。
?面向对象(OOP)：强调类的概念，通过类可以创建任意多个具有相同属性和方法的实例对象。
面向对象：面向对象的思想是把一个项目、一件事情分成更小的项目，或者说分成一个个
更小的部分，每一部分负责什么方面的功能，最后再由这些部分组合而成为一个整体。

?工厂模式
工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽象了创建具体对象的过程。
工厂模式的实现方法非常简单，通过封装解决了创建多个相似对象的问题，但是却无从
识别对象的类型，因为全部都是Object，不像Date、Array等

?构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例对象上重新创建一遍。

1、*****继承：父对象的成员(属性和方法)，子对象可以直接使用

为什么继承：代码重用！节约了内存空间！
何时继承：只要多个子对象共有的属性和方法，都要集中定义在父对象上
js中的继承：都是通过原型实现的 -- 继承原型
什么是原型：保存一类子对象共有属性和方法的父对象
所有子对象都自动继承原型对象
每个构造函数都有一个prototype属性，应用自己的原型对象

对象成员的访问规则
1、先在对象本地找自有属性
2、如果自己没有，就自动通过__proto__找到原型对象的自有属性和共有属性
自有属性：保存在对象本地的属性
共有属性：保存在父对象中的属性，所有子对象共有

面试题：判断自有和共有属性：
1、判断自有属性：obj.hasOwnProperty("属性名");
如果返回true，说明"属性名"是obj的自有属性
如果返回false，说明2种可能，共有或没有

2、判断共有属性：2个条件
1、不是自有：hasOwnProperty返回false
2、在原型链上包含:"属性名" in 对象
检查"属性名"是否定义在对象的原型链上
if(obj.hasOwnProperty("属性名")==false && "属性名" in obj){
是一个共有属性
}
原型链：由各级对象，通过__proto__逐级继承，实现的链式继承关系
只要在原型链上包含的成员，子对象都可以继承

修改或删除属性：
1、修改或删除自有属性：
修改：obj.属性名=新值;
删除：delete obj.属性名;
2、修改或删除共有属性：
不能用子对象直接操作
如果用子对象操作
1、修改：obj.共有属性=新值; -- 危险
结果：在obj本地添加同名的自有属性
2、删除 delete obj.共有属性; -- 无效

要想修改和删除共有属性，只能通过原型对象本身

所有内置对象，几乎都有构造函数和原型对象
只有Math没有构造函数
构造函数用于创建内置对象的实例：new 构造函数(...)
new Object 10个内置对象 是平级关系
内置对象的原型对象：保存所有内置对象的可以用的API

判断浏览器不支持指定API
比如：判读Array类型不支持indexOf
见案例：exec01
if(Array.prototype.indexOf===undefined){
Array.prototype.indexOf=function(value,fromi){

}
}

1、*****继承
如何获取一个对象的原型对象
语法：Object.getPrototypeOf(obj);
等效与__proto__
检查对象间的父子（继承）关系
语法：父对象.isPrototypeOf(子对象);
判断父对象是否是子对象的父级
强调：isPrototypeOf不但可以检查直接父级，还可以检查所有原型链上的父级对象

*****判断一个对象是不是数组
1、typeof无法区分对象和数组，默认返回都是[object Class]
2、判断当前对象是否继承自Array.prototype
Array.prototype.isPrototypeOf(obj)
如果返回true，说明是数组，否则不是数组
3、obj instanceof 构造函数
判断obj是否是构造函数的实例
4、输出对象的字符串形式
在Object的prototype中保存着原始的toString方法
原始的toString 默认输出[object Object]

5、Array.isArray(obj)

***重写（override）：子对象觉得父对象的成员不好用，可在本地定义同名成员，覆盖父对象中的成员。
属于多态的一种
借用函数：使用另一个对象，临时调用指定的函数
函数中的this，被替换为了临时对象
函数.call(临时对象) 相当于： 临时对象.函数()

****实现自定义继承
1、实现两个对象间的继承
子对象.__proto__=父对象 //可能禁止访问内部属性
兼容：Object.setPrototypeOf(子对象,父对象)
让子对象继承父对象

2、通过修改构造函数的原型对象来修改多个子对象的父对象
时机：应该在开始创建对象之前！

3、即继承对象，又扩展结构
2步
1、借用父类型构造函数
父类型构造函数.apply(this,arguments);
*****call vs apply
功能完全一样，都是借用函数，并传入参数
差别：call，要求分散传入参数
apply，要求将参数放入在集合中传入
2、让子类型的原型，继承父类型的原型
Object.setPrototypeOf(子类型.prototype,父类型.prototype)

1、★★★★★★★★DOM：Document Object Model

专门操作网页内容API W3C DOM标准 浏览器厂商实现DOM标准
DHTML：一切实现网页动态效果的技术的统称
HTML+CSS+javascript
鄙视题：HTML XHTML DHTML XML

HTML：超文本标记语言，专门用于编写网页内容的语言
XHTML：更严格的HTML标准
DHTML：一切实现网页动态效果的技术的统称
XML：可扩展的标记语言 -- 可自定义标签名的标记语言（配置文件和数据格式）

DHTML模型：
BOM：Broweser Object Model
浏览器对象模型
专门操作浏览器窗口的API
没有标准，基本主流浏览器已经实现了功能，所以，用的不多
DOM：Document Object Model
专门操作网页内容API
W3C DOM标准 浏览器厂商实现DOM标准

DOM：本来是可以操作一切结构化文档的：HTML和XML
核心DOM：可以操作一切结构化文档的API
万能！但是API比较繁琐
增 删 改 查
HTML DOM：专门操作网页内容的API
其实是基于核心DOM的简化版本
API简洁！仅对复杂HTML元素提供了简化 -- 不是万能
改 复杂元素：增加 和 删除
实际开发：优先使用HTML DOM
HTML DOM实现不了的，用核心DOM补充

2、***DOM Tree：保存所有网页内容的树状结构

***遍历节点树：对每个子节点执行相同的操作
递归：函数内，又调用了自己
何时使用：遍历不确定层级深度的树形结构时
如何实现递归：
1、先实现遍历直接子节点的方法
强调：childNode是动态集合
动态集合：不保存完成的节点属性，只保存节点的位置
只要访问动态集合，都会导致重新查找DOM树
优：快速返回查找结果
缺：每次访问动态集合，都重新查找 -- 效率低
遍历时：都要先将length属性存在变量中

2、对每个子节点，执行和父节点相同的操作

算法：深度优先！优先遍历当前节点的子节点
子节点遍历，才跳到兄弟节点

递归 vs 循环
1、递归：优：直观，易用
缺：占用更多资源，效率低
2、循环：优：几乎不占用资源，效率高
缺：难度高，代码量大

DOM中所有的节点对象
DOM元素类型
? 节点可以分为元素节点、属性节点和文本节点...，他们分别用不同的数字代表类型。
例如：元素(1) 属性(2) 文本(3)
? 每个元素节点又有三个非常有用的属性，分别为：nodeName、nodeType、nodeValue
childNodes节点的集合
childNodes(新方法)/chilrend(不包含空白) 获取当前元素节点的所有子节点,这里面包含空白节点，但在IE9之前，IE浏览器会自动忽略空白节点.

节点的高级选取 前面的方法会包含空白节点

firstChild/firstElementChild 获取当前元素节点的第一个子节点
? lastChild/lastElementChild 获取当前元素节点的最后一个子节点
? previousSibling/previousElementSibling 获取当前节点的前一个兄弟节点
? nextSibling/nextElementSibling获取当前节点的后一个兄弟节点
? ownerDocument 获取该节点的文档根节点（document）
? document.documentElement 获取的html标签元素
? document.title 获取title标题元素
? document.body 获取body标题元素
? parentNode 获取当前节点的父节点

 

****鄙视题：getXXXByXXX vs querySeletorXXX
差别：
返回值：
动态集合：
优：查询结构块，缺：导致重复检索DOM树
非动态集合
优：保存完整的属性，不会导致重复检索
缺：查询效率低

何时使用：
如果一次查询即可得出结果，优先getXXXByXXX
如果需要多次查询才能得到结果，优先使用querySeletorXXX

2、属性
DOM元素的所有属性节点都保存在一个集合中：attributes
可用下标或者属性名访问每个属性
1、读取属性值：
核心DOM：
1、elem.attribute[下标/"属性名"].value
*2、elem.getAttribute("属性名") //value
3、elem.getAttributeNode("属性名").value
何时使用：万能 即可获得标准属性，又可以获得自定义属性

HTML DOM：elem.属性名 -- 只能获得标准属性

读取css里面属性
//标准浏览器：getComputedStyle(元素对象)['属性名']; 带单位
//IE8及以下：元素对象.currentStyle['属性名']

2、设置属性值：
核心DOM
*1、elem.setAttribute("属性名","属性值");
2、elem.setAttributeNode(attrNode);

HTML DOM：elem.属性名=属性值; -- 只能改标准属性 不是这种方式添加的属性不能直接获取；

3、移除属性
核心DOM：
elem.removeAttribute("属性名");
何时使用：万能的

HTML DOM：elem.属性名=""; -- 相当于移除

4、判断有没有
核心DOM：
elem.hasAttribute("属性名") //返回bool
强调：万能 ，即可判断标准属性，又可以判断自定义属性

HTML DOM：elem.属性名!="";

标准属性 vs 自定义属性
标准：即可用核心DOM访问，有可用HTML DOM访问
自定义：只能用核心DOM

编码解码
编码：var code=encodeURI("原文");
解码：var 原问=decodeURI("code");
问题2：url中不允许出现保留字符：比如： ： /
解决：用encodeURIComponent代替encodeURI
用decodeURIComponent代替decodeURI

eval：专门执行字符串格式的表达式
var 表达式的结果=eval("表达式")
如果传入eval的表达式有错误，JS引擎会在执行时报错

1、元素的内容
elem.innerHTML：获取或设置元素开始标签到结束标签之间的HTML代码内容，没有兼容性问题。
何时使用：只要获得完整的HTML原文时
只要批量设置元素内容时，都要使用innerHTML先拼接好字符串，再一次性赋值。

elem.textContent：获取或设置元素开始标签到结束标签之间的纯文本的正文
忽略html标签：将特殊符号翻译为正文
有兼容性问题：IE8 老IE：elem.innerText

 

3、样式
内联样式：优先级最高，会覆盖其他地方的样式
仅仅当前元素可用，不会影响其他元素
elem.style.css属性名
elem.style.css属性名="值"
elem.style.cssText=属性名="值" 连写

内部样式表和外部样式表：
var sheet=document.styleSheets[i];//获取某一个样式表

var rules=sheet.cssRules||sheet.rules;//当前样式表中所有的选择器

var rule=rules[i];//获取第几个选择器

rule.style.transform="rotate(0deg)";//给当前选择器修改样式

修改的缺点：1、复杂
2、优先级不一定能覆盖到其他样式
3、牵一发而动全身（改一个有可能多个都被改变）

使用场合，用于获取样式

1、添加和删除元素
1、添加单个元素：3步
1、创建一个空元素
语法：var elem = document.createElement("标签名");

2、将新元素，加载到指定DOM树上的父元素下
语法：parent(父元素).appendChild(elem) //将我们的elem追加到parent的最后一个子元素的后面
parent(父元素).insertBefore(elem,已有元素); //将elem插入到"已有元素"的前面
parent(父元素).replaceChild(elem,已有元素); //用elem替换"已有元素"

强调：每一次修改DOM树，都会导致重新layout，频繁修改DOM树，会效率降低
解决：先在内存中，将DOM子树拼接好，在整体加到DOM树里面

2、批量添加多个平级子元素(兄弟元素)
1、创建一个文档片段：Document Fragment
文档片段：内存中临时存储多个DOM元素的临时父元素
何时使用：只要添加多个拼接子元素的时候，都要先将子元素，放入到我们的文档片段中保存(缓存)
var frag = document.createDocumentFragment();

2、将子元素追加到文档片段里面去，临时保存
frag.appendChild(子元素);
其实frag的用法和普通父元素是完全一样的

3、将文档片段整体追加到页面上
parent.appendChild(frag);
强调：Fragment不会出现在DOM树上

3、删除子元素：parent(父元素).removeChild(子元素);

2、*****event对象

事件：用户手动触发的 或者 浏览器自动触发的状态的改变
事件对象：在事件发生时，自动创建的，专门封装事件信息的对象
事件处理函数：在事件发生时，自动调用执行的函数

事件对象获取：

IE8：window全局有一个属性event，在事件发生时，保存事件对象
兼容：elem.onXXX=function(e){
e=e||window.event;
}
也可以通过arguments[0]获取

事件对象属性
clientX,clientY：鼠标相对于可视区的位置。
pageX,pageY： 鼠标相对于文档的位置。
offsetX,offsetY：鼠标相对于操作元素(鼠标点击元素)到元素边缘(左上)的位置.
screenX,screenY：鼠标相对于显示屏的位置.

3、事件监听器（事件绑定）（兼容）--可以绑定多个函数在一个对象上
target.addEventListener("事件类型", 函数, 是否捕获(布尔值))--标准浏览器事件监听
? target.removeEventListener()--标准浏览器取消监听
? target.attachEvent("事件类型",函数) --IE浏览器事件监听
? target.detachEvent() --IE浏览器取消监听
注意：移除事件监听的参数和添加事件监听的参数是一致的。
实现兼容：
if(elem.addEventListener){
elem.addEventListener("事件名//不要加on",函数对象//方法名不要加())

}else{
elem.attachEvent("on事件名",函数对象);
}
DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

DOM：3个阶段
1、捕获阶段，由外向内
捕获：记录所有要执行的事件处理函数
2、目标触发：优先触发目标元素上的事件处理函数
目标元素：实际发生事件的元素
3、由内向外，冒泡执行

IE8：2个阶段，没有捕获

改变事件触发的顺序
设置事件处理函数在捕获阶段就提前执行
如何设置：elem.addEventListener("事件名//不要加on",函数对象//方法名不要加(),"capture");
capture:true:在捕获阶段提前执行
false：在冒泡阶段执行(默认)

只有DOM的addEventListener可以修改触发顺序
IE8的attachEvent没有第三个参数，不能修改事件触发顺序

事件委托机制
利用冒泡机制，将子元素事件委托给父元素执行。
oUl.onclick=function(ev){
var ev=ev||window.event;
var element=ev.target;
if(element.nodeName=='LI'){
alert(element.innerHTML);
}
}*/

1、取消冒泡
DOM：e.stopPropagation()
IE8：e.cancelBubble=true;
if(event.stopPropagation){
event.stopPropagation(); //标准浏览器
}else{
event.cancaleBubble==true; //老ie
}

 

2、html dom对象
1、Image对象
创建img元素：var img = new Image();
属性：width、height、src
强调：不是所有元素都可以new！只有个别可以

2、select对象：代表一个select
属性：options：获取select下所有的option子元素的*集合*！
下标访问，length属性，遍历
selectedIndex：获取当前选中项的下标
方法：add(option)：将option添加到select下
相当于：appendChild(option)
remove(i)：删除i位置的option
相当于：removeChild(子元素);
时间：onchange：当前选中项发生改变的时候触发

3、option对象：代表select下面的一个option元素
创建：var opt = new Option(innerHTML,value);
相当于：
1、var opt = document.createElement("option");
2、opt.innerHTML="";
3、opt.value=value;

属性：index：获取当前option的下标
text：获取当前option的文本
value：获取当前option的value
selected：获取当前option被选中了吗

简写：创建option后，立刻追加到select中
select.add(new Option(text,value))

4、table对象：代表html的table元素
属性：rows 获取所有行
方法：
insertRow(i) 在指定位置插入一个tableRow对象
deleteRow(i) 在指定位置删除一个tableRow对象

5、tableRow：代表html表格行
属性：
cells 获得所有的格(td)
innerHTML 获取当前行的所有的内容
rowIndex 获取当前tr在整个表格中的下标
方法：
insertCell(i) 在指定位置插入一个tableCell对象
deleteCell(i) 在指定位置删除一个tableCell对象

6、tableCell对象
属性：cellIndex
innerHTML
colSpan
rowSpan

7、form对象：代表一个form元素
获得form元素：document.forms[i/"id"/"name"];
方法：reset() 重置哪个form表单
submit(); 手动提交
事件：onsubmit：当正式提交表单之前，自动触发，专门用来在表单提交前，实现验证

查找表单里面的元素：form.elements[i/"id"/"name"];
可简写：form.id/name
只能找到带name属性的额数据采集元素(input)或按钮
elem.focus();//让指定元素获得焦点

1、★★★★★★★★BOM：Browser Object Model 专门操作用浏览器窗口的API -- 没有标准

window对象：扮演2个角色
1、它代替了ES里面的Global，充当全局作用域
包含所有的全局对象，方法以及变量
2、指代当前打开的浏览器窗口

1、location对象
window.location.href= "http://www.xxxxxxxx.net" ; 跳转后有后退功能
　　 window.location.replace("http://www.xxxxxxxx.net") ; 跳转后没有后退功能
window.location.search 从问号 (?) 开始的 URL（查询部分）
window.location.reload(true)方法 刷新页面,如果参数为true,通过缓存刷新。

2、window.open("url","_self");跳转后有后退功能
window.open("url","_blank");可以打开多个页面
window.open("url","name","config") config是配置窗口初始化大小和位置的配置*字符串*
window.open('http://www.baidu.com','newwindow','width=200,height=200')
其中width和height相当于innerHeight innerWidth

3、window.close() - 关闭当前窗口

　　 window.moveTo(left,top) - 移动当前窗口

　　 window.resizeTo(newwidth,newheight) - 调整当前窗口的尺寸

4、history对象
history.back() 等同于按浏览器的后退按钮
history.forward() 等同于按浏览器的前进按钮
history.length 属性 -- history对象中缓存了多少个URL
history.go(-2)或 history.go("任意.html") 向前或向后移动，
5、navigator对象
navigator.userAgent 用户代理信息，通过该属性可以获取浏览器及操作系统信息
6、screen对象：保存屏幕的分辨率信息
screen.width screen.height完整屏幕宽高
screen.availWidth screen.availHeight 去掉任务栏的剩余宽高

?BOM的常用事件
onload事件：页面内容加载完成（DOM结构，图片.....）
onscroll事件：拖动浏览器的滚动条触发此事件。
onresize事件：浏览器窗口缩放所触发的事件。

可视区的宽高
document.documentElement.clientWidth
document.documentElement.clientHeight
offsetleft 元素相对于父级的距离
offsettop
offsetwidth 元素宽度
offsetheight

?滚动条距离（某些浏览器下面做兼容）
document.documentElement.scrollTop || document.body.scrollTop

2、定时器
timer=setInterval(任务function(){},间隔毫秒数) 创建定时器
timer获得定时器的序号，唯一表示内存中的一个定时器
强调timer通常不是局部变量
clearInterval(定时器序号=timer); 暂停定时器
timer=null; 定时器清除

timer=setTimeout(任务,等待时间)
clearTimeout(定时器序号=timer);
timer=null

}else{
e.cancelBubble=true;//老IE包含了主流浏览器
}

阻止浏览器的默认行为
ev.preventDefault(); 标准浏览器阻止默认事件,DOM事件使用此方法取消默认事件。
ev.returnValue = false; 非标准浏览器（IE8）阻止默认事件
return false; 退出执行, 所有触发事件和动作都不会被执行. 可以用来替代 preventDefault

COOKIE的概念
? Cookie又叫会话跟踪技术是由Web服务器保存在用户浏览器上的小文本文件，它可以包含相关用户的信息。

cookie的特点
? 禁用Cookie后，无法正常登陆。
? cookie是与浏览器相关的，不同浏览器之间所保存的cookie也是不能互相访问的；
? cookie可能被删除。因为每个cookie都是硬盘上的一个文件；
? cookie安全性不够高。

数组、对象cookie的存储和访问。
1、JSON.parse 函数
作用：将 JavaScript 对象表示法 (JSON) 字符串转换为对象，具有json格式检测功能。
2、JSON.stringify()函数
作用：将 JavaScript 值转换为 JavaScript 对象表示法 (JSON) 字符串

1、★★★★★★★★ES6

?this的应用及指向问题
this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是调用函数的那个对象。
this的使用情况：
1、作为普通函数调用，这时函数属于全局性调用，因此this就代表全局对象window。
2、作为对象方法的调用，这时this就指这个当前对象。（事件处理函数同理）
3、作为构造函数调用，所谓构造函数，就是通过这个函数生成一个新对象（实例）。这时，this就指这个新对象（实例）。
4、apply 、 call 、bind的介绍（函数的方法）
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；第一个参数都是this要指向的对象，也就是想指定的上下文；
从第二个参数开始，就是函数的本身的参数；
但bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
5、应用总结
我们都知道定时器的匿名函数里不能写this，它会指向window，但有了bind方法以后，我们可以随意设定this 的指向。
利用变量赋值改变this执行（将正确的this存储下来)。

?http://es6.ruanyifeng.com/
?let和const命令
?ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
?只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。
?不存在变量提升
?let不允许在相同作用域内，重复声明同一个变量。
?ES6允许块级作用域的任意嵌套，外层无法读取内层作用域的变量，反之可以
?允许在块级作用域内声明函数,外部同样可以访问
?const声明一个只读的常量。一旦声明，常量的值就不能改变。
?const声明的常量，也与let一样不可重复声明。
?const的作用域与let命令相同：只在声明所在的块级作用域内有效。
?核心：var 和 let const的区别
?变量的解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构.
解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者 obj[key]等传统方式进行赋值
?数组的解构赋值
?对象的解构赋值
?字符串的解构赋值。
?函数参数的解构赋值（利用数组和对象解构传参赋值）

?扩展运算符
扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值
?rest运算符
rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一 个数组
?字符串扩展
?模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通

字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量（${}）。
?repeat(n)方法返回一个新字符串，表示将原字符串重复n次。
?includes()：返回布尔值，表示是否找到了参数字符串。
?startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
?endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
?=>函数
?函数默认值
?箭头函数有几个使用注意点。
1、函数体内this对象，就是定义时所在的对象，而不是使用时所在的对象。This不会改变了。
2、不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3、不可以使用arguments对象，该对象在函数体内不存在。
4、箭头函数一定是匿名函数。
5、箭头函数应用总结：
?箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在map、reduce、filter的回调函数定义中；
?不要在最外层定义箭头函数，因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数，
将this控制在可见的范围内；
?箭头函数最吸引人的地方是简洁。在有多层函数嵌套的情况下，箭头函数的简洁性并没有很大的提升，
反而影响了函数的作用范围的识别度，这种情况不建议使用箭头函数。
?Symbol类型
?symbol--表示独一无二的值，它是js中的第七种数据类型。
基本数据类型：null undefined number boolean string symbol
引用数据类型：object
Symbol():首字母大写。
symbol 函数前不能使用new,否则会报错，原因在于symbol是一个原始类型的
值，不是对象。
1、symbol函数接收一个字符串作为参数，表示对symbol的描述，主要是为了
在控制台显示，或者转为字符串的时候，比较容易区分。描述的内容相同仅仅表示
的是描述，不代表其他的意义。
2、symbol数据类型转换。
symbol可以利用String()、toString()转换成字符串
利用Boolean()或者！转换成布尔值(只有true值)
不能转换成数字。
不能使用任何运算符进行运算。
3、作为对象的属性名。
4、注意事项
不能直接使用[symbol()]作为键值，最好添加对应的参数进行区分，而且也不能被 for...in遍历出来。但可以通过
Object.getOwnPropertySymbols(obj)方法获 取一个对象所有的symbol属性。
?Set（array）和Map(object)结构
ES6提供了数据结构set. 它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set 本身是一个构造函数，用来生成 Set 数据结构，数组作为参数。
每一项即是键也是值,键和值是相同的。
1、创建一个Set；
2、Set类的属性--size
3、Set类的方法
Set.add(value) 添加一个数据，返回Set结构本身，允许进行链式操作。
Set.delete(value) 删除指定数据，返回一个布尔值，表示删除是否成功。
Set.has(value) 判断该值是否为Set的成员，返回一个布尔值。
Set.clear() 清除所有的数据，没有返回值。
forEach()：使用回调函数遍历每个成员
?数据结构--map
JavaScript 的对象（Object），只能用字符串当作键。这给它的使用带来了很大 的限制。ES6 提供了 Map 数据结构。
它类似于对象，但是“键”的范围不限于 字符串，各种类型的值（包括对象）都可以当作键。Symbol类型当作key输出时
无法确认是同一个key.
1、创建一个map
2、map类的属性--size
3、map类的方法
map.set(key,value) :设置键名key对应的键值value,然后返回整个map结构，如 果key已经有值，则键值会被更新，否则就生成该键，可以链式操作。
map.get(key) get方法读取key对应的键值，如果找不到key，返回undefined
map.delete(key) 删除某个键，返回true.如果删除失败，返回false.
map.has(key) 方法返回一个布尔值，表示某个键是否在当前map对象之中。
map.clear() 清除所有数据，没有返回值
map.keys() 返回键名的遍历器
map.values() 返回键名/键值的遍历器
map.entries() 返回键值对的遍历器
map.forEach() 使用回调函数遍历每个成员。
?Generators生成器函数和iterator接口
1、Generators生成器函数
Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数是一个状态机，封装了多个内部状态。
2、iterator接口
遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问
机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作
Iterator 的作用有三个：
一是为各种数据结构，提供一个统一的、简便的访问接口；
二是使得数据结构的成员能够按某种次序排列；
三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。
如何检测数据可以使用for...of【Symbol.iterator】
?数组和对象的扩展
?数组的扩展方法
1、Array.from()方法用于将对象转为真正的数组(类数组转数组)
2、Array.of()方法用于将一组值，转换为数组。
3、fill()方法使用给定值，填充一个数组。
?对象的扩展方法
1、对象的简洁表示法
2、object.assign()用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。

1、★★★★★★★★PHP: Hypertext Preprocessor

中文名：“超文本预处理器” 是一种免费开源的服务器端脚本程序。主要适用于Web开发领域。
PHP 是一种非常弱的类型语言。在大多数编程语言中，变量只能保存一种类型的数据，
而且这个类型必须在使用变量之前声明。而在 PHP 中，变量的类型是由赋值给变量的值确定的。

变量的八大数据类型
四种标量类型：
boolean （布尔型）
integer （整型）
float （浮点型, 也称作 double)
string （字符串）
两种复合类型：
array （数组）
object （对象）
最后是两种特殊类型：
resource　（资源）：资源是由专门的函数来建立和使用的，例如打开文件、数据连接、图形画布。
NULL　（NULL）

?数据类型的获取和设置：gettype( ) settype( )
?php的输出：echo、print、print_r、var_dump
?函数(变量的作用域)
?php 表单 (get post request)
?php 数组
?创建数据的两种方式
?array创建
?range()：建立一个包含指定范围单元的数组
?数组的相关方法介绍
count()和 sizeof()（别名） 统计数组下标的个数，数组的长度
array_count_values() 统计数组中所有的值出现的次数
array_unshift() 函数将新元素添加到数组头
array_push() 函数将每个新元素添加到数组的末尾。
array_shift()删除数组头第一个元素，与其相反的函数是
array_pop(),删除并返回数组末尾的一个元素。
sort() 数组排序
foreach() 提供了遍历数组的简单方式,仅能够应用于数组和对象
array_unique() 移除数组中重复的值(生成新数组)
?数组的遍历
for循环
foreach循环
?返回JSON格式数据
json_encode() 对变量进行JSON编码
json_decode() 对JSON格式的字符串进行解码

1、★★★★★★★★数据库 MYsql

?MySQL操作
显示当前存在的数据库
SHOW DATABASES;
选择你所需要的数据库
USE guest;
查看当前所选择的数据库
SELECT DATABASE();
查看有多少张表
SHOW TABLES
查看一张表的所有内容
SELECT * FROM guest;
创建一个数据库
CREATE DATABASE book;
在数据库里创建一张表
create table numberone(
sid tinyint(2) unsigned not null auto_increment primary key,
url varchar(200) not null,
title varchar(100) not null
)DEFAULT CHARSET=utf8;//设置字符编码为utf8;
显示表的结构
DESCIRBE users;
给表插入一条数据
INSERT INTO users () VALUES ();
筛选指定的数据
SELECT * FROM users WHERE 条件;//users:表名
修改指定的数据
UPDATE users SET sex = '男' WHERE username='Lee';
删除指定的数据
DELETE FROM users WHERE username='Lee';
删除指定的表
DROP TABLE users;
删除指定的数据库
DROP DATABASE book;
?MySQL 常用数据类型
整数型：TINYINT，SMALLINT，INT，BIGINT(带符号和无符号)
TINYINT ： 1个字节 -128 -- 127（0-255）
INT ： 4 个字节 -2147483648 -- 2147483647（0 -4294967295）
?浮点型：FLOAT，DOUBLE
FLOAT：占4个字节。
?字符型：CHAR，VARCHAR
CHAR:定长类型，一般用于性别、密码等。
VARCHAR：可变类型，自身长度+1，一般用于用户名、标题等。
?日期型：DATETIME，DATE（ NOW（）：当前事件 ）
DATETIME '0000-00-00 00:00:00' 日期时间
DATE '0000-00-00' 日期
?备注型：TINYTEXT，TEXT，LONGTEXT
TINYTEXT 字符串，最大长度255个字符
TEXT 字符串，最大长度65535个字符
LONGTEXT 字符串，最大长度4294967295个字符

1、★★★★★★★★AJAX 异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

创建ajax对象
var request = new XMLHttpRequest();
var request = new ActiveXObject("Microsoft.XMLHTTP")
?ajax的open方法
request.open("get", "http://10.0.152.17/AJAX/ajaxtest", true);
1.open的第一个参数：GET/POST请求数据--默认GET方法
GET:把数据名称和数据值用=连接，如果多个的话，那么会把多个数据用&连接，然后把数据放到url?后面传给指定的页面。
POST：直接传送数值，但需要申明发送的数据类型
ajax.setRequestHeader(‘content-type’ , ‘application/x-www-form-urlencoded’)
数据放在send()里面作为参数传递。
post/get的区别: 安全性，长度受限
2.open的第二个参数：接口地址
3.open的第三个参数：是否异步
当该值为true时，服务器请求是异步进行的，也就是脚本执行send方法后不等待服务器的
执行结果，而是继续执行脚本代码； 若该值为false，则服务器请求是同步进行的，也就是脚
本执行send方法后等待服务器的执行结果的返回，除非超时。
?ajax的send方法
request.send( )
readyState:就绪状态--0(初始化) 1(请求建立) 2(发送完成) 3(解析) 4(完成)
0：请求初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
?设置回调函数
request.onreadystatechange = function(){
if(request.readyState == 4) {
}
}
onreadystatechange当状态值(readyState)发生改变的事件
ajax.readyState==4 代表ajax的工作状态，共5个值
ajax.status==200 服务器状态(http状态码);
操作内容：
responseText: ajax请求返回的内容就被存放到这个属性下面,返回获取的内容,string
responseXML返回xml文件

.ajax的优势和弊端。
//1、最大的一点是页面无刷新（定时器异步不断请求），在页面内与服务器通信，给用户的体验非常好。
//2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
//3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
//4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

//弊端
//1、ajax干掉了back按钮，即对浏览器后退机制的破坏。
//2、安全问题
//3、对搜索引擎的支持比较弱。
//4、破坏了程序的异常机制。
//5、另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，有一个url地址，如果采用了ajax技术，也许在该url地址下面看到的和别人在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
//6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，如手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有