笔记

2018-08-26 17:26:46来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

如何编码解码

编码: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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:angularjs学习第二天笔记---过滤器

下一篇:location.origin兼容IE