JavaScripts学习总结

一.对象
（1）读取对象属性

var obj=
{
P:“hello world”
};
Obj.p=”hello world”
或者obj[‘p’]=”hello world”

-2-对于对象的引用

-1-
var x1={};
var x2;
x2=x1;
x1=1;
X2=1;
//对于一个对象，如果改变对象的值，则指向该对象值也改变。

-2-
var x1={};
var x2;
x2=x1;
X1.p=1;
X2.p=1;
X2.q=2;
X1.q=2;
//对于一个对象，如果改变其属性的值，则指向该对象的属性也改变。

-3-
var x1={};
var x2=x1;
X1=1;
//X2={}
//对于一个对象，如果改变原有对象的属性改变，则指向原有对象的属性的对象属性不 改变

（3）链式引用
-1-
var a={};
var a1={bar:’hello’};
a.p=a1;
//a1.p.bar=’hello’

-2-
var obj={
P:function(x)
{
Return 3.X;
}
}
//obj.p(1);
//对象的属性可以是有：键值对和键值
其键值可以接任何数据类型。

（4）健名的两种表示方式

-1–
var foo=”boo”
var obj=
{
foo:1;
boo:2;
}
Obj.foo=1
Obj[foo]=2
//如果要用.foo的形式，则表示为一个对象的引用，另一种方式[],则表示为变 量，正确的形式改为obj[‘foo’];

-2-
查看一个对象本身的所有属性，可以使用object.keys方法。
Var obj=
{
Key1=1;
Key2=2;
}
Object.keys(obj);
//[‘key1’,’key2’]

扫描二维码关注公众号，回复： 10415645 查看本文章

（5）删除属性

var obj=Object.defineProperty({},’p’,{
Vaule:1;
Configurable:false;
}
);
Obj.p//123
Delete Obj.p//false

（6）是否存在属性

var obj={p:1};
‘p’ in obj//true
‘toString’ in obj//ture
//一个不好的是in，无法判断是否是自己的还是继承的，toString的返回值为ture,是因为在in中是继承了String，所以返回为ture。

（7）此时使用hasOwnProperty来判断
var obj={};
If(‘toString’ in obj)
{
console.log(obj.hasOwnProperty(‘toString’))//false
}

（8）for…in

var obj={a:1,b:2,c:3};
for(var i in obj)
{
console.log(“键名：”，i);
consloe.log(“键值：”,obj[i]);
}

（9） 使用document对象里的link方法
//统计html文档中出现和
document.link[].property
documnet.link[0].id//第一个地址的id
documnet.links.length//所有地址的总条目

（10）with语句，相当于多次的赋值语句
var obj={a,b};
with(obj)
{
a=1;
b=2;
}
//注意在使用with语句进行赋值时，必须是已经存在的对象变量
//，否则可能会成为当前作用域的全局变量

二.学习function
（1）表达方式
-1-普通函数表达式
function print(x)
{
console.log(x);
}
-2-匿名函数表达式
var print=function(x)
{
console.log(x);
}
-3-构造函数表达式
var print =new function(‘return “hello world”’);
//等同于var print=function()
{
return “hello world”;
}
（2） 独特住处
//不同于普通的编程语言，js可以将函数和变量作用相同，
//可以看做是一种值，因为弱项语言的原因（数值，布尔值，字符串都可以）
比如：
function add(x,y)
{
return x+y;
}
var a=add;
function add2(b)
{
return b;
}
add2(a)(1,1)；
add2(a)(“你”,“好”)；
add2(a)(“false”,“ture”);

（3） 函数方法一览
.length//查询一个函数的参数数量
.name//查询一个函数的名称，具体在调用函数时使用。
.toString();//显示一个函数的具体实现方式，如果是原生依赖函数
//则是native code
然后就有个拓展使用toString实现一个拼接字符串以及剪切字符串

（4）细小的细节
函数需要知道每个具体参数，则出现了arguments，就是引用于实现参数
（1）
var function(one,two)
{
arguments[0]=1;
arguments[1]=2;
retuen one+two;
}
此时funcion(1,1)=3
此时的arguments改变了参数的值得同时还改变了外部参数的调用。
则出现了严格模式，‘use strict’;
var function(one,two)
{
‘use strict’;
arguments[0]=1;
arguments[1]=2;
retuen one+two;
}

(2)
//虽然argument有length方法，但是不是一个 数组要想使用数组的方法，
//可以将其转化
实现方式：
var age=Array.prototype.slice.call(agruments);
或者
var age=[];
for(var 1=0;i<arguments.length;i++)
{
age.push(arguments[i]);
}
(3)突然学习到了切片这个东西.call()，有点出乎我的意料
//发现没学懂有一点模糊，先留下
//将一个你想要的输出或者调用的对象组合为一个个切片call()
//,一个切片里面是相互独立的多个属性单元
(4).prototype属性允许给对象添加新的属性
function em(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}
var fred=new em(“fym”,“cxy”,“1-9”);
em.prototype.sal=null;
fred.sal=20000;
(4)关于Javascript的闭包使用
就相当于是定义一个类然后里面的私有 属性不会被除该属性的实例化对象调用，
其实就是Java里的封装了，但是花样挺多的以为弱项语言的问题,
导致类似于类的表达多种多样，闭包里的属性也就有多种方式去实现。

三.数组
（1）表示方法
-1-相比于传统语言的数组nb多了，可以储存字符，数字，函数等等。
var arr=[{1,2,3},[1,2,3],function(){return true;}];
//调用还是传统的arr[0],arr[1],不过其实正规应该是arr[‘i’]才对，js里面的键值，键位都是字符or串

（2）.lengthu(动态的值)
var arr=[‘a’,‘b’];
//arr.length=2

当然如果一个数组arr=[‘a’,‘b’,‘c’,‘d’],本该arr.length=4,你输入arr.length=0
则变为arr[]；

（3）遍历数组的集中 方法
-1-for…in方法：

var arr=[1,2,3];
for(var i in arr)
{
console.log(arr[i]);
}
//但是因为数组在js里是对象，所以会输出非数字元素

-2- for方法：

for（var i=0;i<arr.length;i++）
{
console.log(arr[i]);
}
-3- while语句：

var i=0;
while(i<arr.lenght)
{
console.log(arr[i]);
i++;
}
或者var i=arr.length;
while(i>0)
{
console.log(aarr[i]);
i–;
}
-4- forEach标准数组库里的方法
var colors=[‘red’,‘green’,‘bule’];
colors.forEach (function (color)
{
})();
//输出red,green,bule

（4）增加删除
arr.push(元素);
delete arr[键位]；

（5）类似数组

-1- 自定义对象
即是键位是正整数or 零,并且有lengh(不一定要动态)，这个构造的对象就为类似数组对虾干
var obj=
{
0：‘a’,
1: ‘b’,
2: ‘c’,
length:3
};
obj.[0]=obj.0//‘a’
obj.push//error
obj.delete//error
也就是说你自己构造到的这个类似数组的对象有啥就用啥，不完全是数组。

2- arguments和DOM元素集
function arges()
{
return arguments;
}
var arrlike=arges(‘a’,‘b’);
arrlike[0];//‘a’
arrlike[1].length//2
arrlike instanceof Array//false但是不是数组

同样DOM元素集
var elts=documents.getElementsByTagName(‘h3’);
elts.length//页面和标签数量
elts instanceof Array//false

字符串
‘abcd’
‘abcd’[1];//‘b’
‘abcd’.length//4
‘abcd’ instanceof Array//false

注释1：但是数组的silce方法可以将类似数组对象变为真正的数组
var arr=Array.prtotype.silce.call(类似数组对象名)；
注释2：类似数组的对象也可以在不转为数组的情况下使用数组方法，
也就是利用.call把数组的方法放到对象上面
function print(value,index)
{
console.log(index+’:’+value);
}
Array.prototype.forEach.call(类似数组对象名，print);

（6）强制转化类型
Number();
//可以将数字类型字符串转化为数字。
如果转换的是一个对象，除非是元素的数组，否则报错

String()；
可以将任意类型转化为字符串
String（123）//“123”
String(‘abc’)//“abc”
String(true)//“true”
String(null)//“null”
如果是对象则返回一个类型的字符串，如果是数组则返回数组元素按照字符串形式。
String（{{a:1},1，2，3}）//object
String([1,2,3])

Boolean()
可以将任意类型的值转化为布尔值
当然有个别
Boolean(undefined)
Boolean(null)
Boolean(0)
Boolean(NaN)
Boolean(’’)
总结就是无法识别，不存在，空值，无法计算，空字符串这五个。

（7）错误处理机制
-1-最初的报错
js的引擎专门提供错误机制也就是构造函数
var err=new Error(‘出错了’);
err.message//‘出错了’
-2-派生报错
然后其派生出六个对象
SyntaxError//解析代码发送的语法错误
ReferenceError//对象引用一个不存在的变量，或者一个值无法成功分配给对象
RangeError对象值超出有效的范围，比如数组长度为负
TypeError//对象是变量不是预期类型是发生的错误，比如字符串，布尔值，数值等使用
new 构造。
URIError//对象是URI相关函数参数不正确抛出的错误
EvalError//函数没有被正确执行时

因为都是构造的原生函数所以开发者可以使用Error对象，来提示错误信息
var err1=new Error(‘出错了’);
var err2=new RanageError(‘出错了，变量超出有效的范围！’)
var err3=new TypeError(‘出错了，变量类型无效！’)

err1.message
err2.message
err3.message

-3-自定义报错
function UserError(message)
{
this.message=message||‘默认信息’;
this.name=‘UserError’
}
UserError.prototype=new Error();
UserError.prototype.constructor=UserError;
注释：<!–
1 为什么 xx.constructor.prototype 可以访问到当前对象的原型。
‘str’.constructor.prototype
‘str’.constructor 指向当前对象的构造函数
(构造函数).prototype：即函数的prototype 属性
（1） 函数有prototype属性，所以可以访问到
（2）函数的prototype属性会在创建实例的时候作为实例的原型而存在。
所以 ‘str’.constructor.prototype 就可以访问到当前对象实例的原型。

2 举个栗子
‘str’.constructor == String
true.constructor == Boolean
(1).constructor == Number
{}.constructor == Object
[].constructor == Array
function(){}.constructor == Function
–>

-4-简单使用(和Java相似)
普通
try
{
thow"出错了"；
}
catch(e)
{
console.log(111);
}
console.log(222);

嵌套
var n=100;
try
{
thow n;
}
catch(e)
{
if(e<=50)
{
//…
}
else
{
throw e;
}
}
//目的进一步细化报错的类型

也可以这样喽

try
{
foo.bar();
}
catch(e)
{
if(e instanceof EvalError)
{
console.log(e.name+""+e.message);
}
else if(e instanceof RanageError)
{
console.log(e.name+":"+e.message);
}
}

//
function cleanup()
{
try
{
throw new Error(‘出错了’)；
console.log(‘我永远不会被执行’);
}
catch(e)
{
Error.message;
}
finally
{
console.log(‘完成工作’);
}
}
//不会出现’我永远不会被执行’

四.console对象和控制台
（1）类似于带参数的控制台输出

console.log(’%s+%s=%s’,1,1,2)
%s字符串
%整数
%f浮点数
%o 对象的链接
%c css格式的字符串

var number=11*9;
var color =‘red’
console.log(%d %s ball,number,color);
//99 red ball

使用%c占位符时，对应的参数必须是css代码，用来对css输出类容进行渲染。

console.log
(
‘%c this is type’,
‘color:red ;background:yellow;font-size:24px;’
)
输出的内容将会是红色黄底
（2）其他用法
-1-console.count();//用来记数
-2-console.info,console.dir//和console.log差不多
-3-还有console.warn(),console.error()用来错误输出
-4-有个console.table();//用于将一个符合结构按照表格输出
var lanaguages=[{name:中文，number:3000},{name:English,number:2450}];
-5-console.table(lanaguages);
实用的的console.assert(a,b);//有两参数第一个为表达式，第二个为字符串
比如console.assert(lst.childNodes.lengh<500,‘节点个数大于等于500’);
在程序内部运行如果符合节点数不满足调价则不会有输出其实相当于
try
{
if(!(lst.childNodes.lengh<500))
{
throw new Error(‘节点个数大于等于500’)
}
}catch(e)
{
console.error(e);
}
//显然前者容易简单的多吧
-6-在输出的信息过多时，可以使用console.group(),console.groupEnd(),
用于显示信息分组。
console.group(‘一级’)；
console.log(‘一级内容’)；

console.group(‘二级’)；
console.log(‘二级内容’)；

console.group();
console.groupEnd();
//一二级分组结束

注释：console.groupCollapsed于console.group有点相似，只是第一次不是展开而是卷住。

-7-console…trace()//显示当前执行代码在堆栈中的调用路径

五.控制台的API
（1） $_
//显示上一个表达式的值
2+2;
$_//4
（2）$0-$4
//控制台保存了最近五个Elements面板DOM元素，$0表示最近的一个（倒数），以此类推

（3） $(selector)
//返回第一个匹配的元素，等同于document.querySelector()

（4）$$(selector)
返回选中的DOM对象，等同于documents.querySelectorAll

（5）$ x(path)
//$x(path)方法返回一个数组，包含特定的满足xpath的所有DOM元素
$x("//p[a]")//返回所有包含a元素的p元素

（6） inspet(object)
//打开相关面板，并且选中相应的元素，显示细节（在浏览器调试页面：Elements）

（7）getEventListeners(object)
//getEventListeners(object)返回一个对象，该对象的成员为了object记录回调的各种事件
比如（click(),keydow())，每一个事件对应一个数组，里面的成员是该事件的回调事件。

（8） keys(object),values(object)
//keys(object)，返回一个数组，包含object的键位
//values(object)，返回一个数组，包含object的键值

var a={‘A’:1,‘B’:2}
keys(a)//[“A”,“B”];
values(a)//[“1”,“2”]

（9） montorEvents(object,[events]),unmontorEvents(object,[events])
// montorEvents(object,[events])，监听特定对象发生的特定事件。
发生时会返回一个Event对象，包含该事件相关信息。
unmontorEvents(object,[events])用于取消监听

注释：montorEvents允许监听同一大类的事件，所有的事件可以分为四个大类

mouse：“mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
key：“keydown”, “keyup”, “keypress”, “textInput”
touch：“touchstart”, “touchmove”, “touchend”, “touchcancel”
control：“resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”