javascript学习记录-2-18

对象定义的几种方法：

var person=new Object();

person.name="111";

person.age=22;

或

var person={

name:"111",

age:22

}

或

var person={};

person.name="111";

person.age=22;

对象也可以用数值属性，但是数值属性会自动转化为字符串类型。

function displayInfo( args){

var output ="";

if( typeof args.name== "string"){

output+="Name:" +args.name+ "\n";

}

if( typeof args.age== "number"){

output+="Age:" +args.age+ "\n";

}

console.log(output);

}

displayInfo({

name :"jl",

});

displayInfo({

name: "11",

});

//Name:jl

//Age:22

//Name:11

//Age:11

//相当于封装函数了吧？

Array类型

var color=new Array(3);

var name=new Array("hello"); //创建一个包含字符串hello的数组

检测数组除了之前的instanceof

外在es5后新增了Array.isArray()方法 //isArray支持ie9+

数组也提供了类似于栈的操作，

var a=new Array();

var b=a.push("red","blue");

//向后添加两个参数到a数组，b输出数组长度2，a输出["red","blue"]

var c = a.pop();

//输出的c为blue（取出了最后一个，且返回删除项），a的值为["red"]

//栈方法的（栈数据结构）的访问规则是后进先出，而队列方法的数据结构访问规则是先进先出

队列方法的方法代表是：

shift（）//取得第一项并返回删除项

和

unshift是向数组前端添加任意个项，并返回数组长度。

注意：unshift在ie8前包含ie8兼容模式下都会返回不正确的数组长度，ie7及以前会返回undefined而ie8兼容模式下返回的值也并不正确

数组排序

reverse数组反转，顾名思义

sort是数组升序排列，他的排列是按照字符编码进行排列的，所以在排序上会有些bug，所以需要加参数：

];

a.sort();

console.log(a); //0 1 10 2 4

function compare (value1, value2){

if(value1< value2){

console.log("1L:LL" +value1);

console.log("2+++++" +value2);

;

}

else if(value1> value2){

console.log("3L:LL" +value1);

console.log("4+++++" +value2);

;

}

else{

console.log("5L:LL" +value1);

console.log("6+++++" +value2);

;

}

];

a.sort(compare);

console.log(a);

输出结果为：0，1，2，4，12

而上面的console的输出为：

1L:LL0

2+++++1

1L:LL1

2+++++2

1L:LL2

2+++++4

1L:LL4

2+++++10

//传入两个位置，如果第一个参数小于第二个参数就返回一个负值，等于则返回1，大于则返回0，将小数值前抛

-----另外，校对于数值类型的升序还有一种更为简单的方法

function compare (value1, value2){

return value1- value2;

}

];

a.sort(compare);

console.log(a);

结果跟上面的是一致的

注：貌似如果将a数组的各个元素都改为字符串类型的数值结果也是一样的，，，

var a = ['0', '1','12' ,'4', '2'];

数组操作方法

concat方法向数组后追加数组或其他类型---但原数组不会发生改变

语法：

var a=["1","2","3"];

var b=a.concat("4",["5","6"]);

//输出结果为a的不变，b的结果为[1，2，3，4，5，6 ] --注意是有引号的，脑补画面即可~

slice方法。有两个可选参数，不填表示全部添加，1个参数的时候表示从该位置开始截取到数组末尾，两个参数的时候是从第一个参数到第二个参数，1，3的时候是取第二个和第三个数值，可以理解为，获取下标1和下标2的数值（理解有差误）

splice方法很强大可以删除，插入，替换~

var a= ["1", "2","3" ,"5"];

); //从第0下标开始，删除3个

console.log(a); //5

console.log(b); //1 2 3 ----返回删除的项

插入的时候需要提供三个数值。

var a=["1","2","3","5"];

var b=a.splice(0,0,"111","2222"); //从下标0的位置开始插入，删除0项

console.log(a); //输出 ["111", "2222",“1” "2", "3", "5"]

console.log(b); //为空。表示未删除项

删除--

var a =["1" ,"2", "3","5" ];

);

console.log(a); //1 3 5

console.log(b); //2

替换的话结合插入删除就很明显

数组位置方法

var a= ["1", "5","2" ,"3", "5"];

console.log(a.indexOf("5" )); //1

console.log(a.lastIndexOf("5" ));//3

indexOf和lastIndexOf的区别在于从前开始查询和从最后一位开始查询，查询到一个了立即便停止了

数组迭代方法

数组定义了5个迭代方法，每个方法接收两个参数：要在每一项上运行的函数和运行该函数的作用域对象--影响this的值。

传入这个方法中的函数会接收3个参数：数组项的值、该项在数组中的位置、数组对象本身

every方法：对数组中的每一项运行给定函数，如果函数对每一项都返回true，则返回true（只要有一项是false，最后返回的便会是false，相当于逻辑运算中的“且”操作了）

some方法：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true（只要有一项是true则返回true,相当于逻辑运算的“或”操作了）

filter方法：对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组（筛选出符合条件的项组成的数组）

map方法：对数组队每一项运行给定函数，返回每次函数调用的结果组成的函数

foreach方法：对数组队每一项运行给定函数，没有返回值

归并方法

reduce方法：迭代数组的所有项，创建一个最终返回的值，从数组第一项开始逐个遍历到最后，

reduceRight方法：迭代数组的所有项，创建一个最终返回的值，从数组最后项开始逐个遍历到第一项，

---这两个方法都接收两个参数，一个在每一项上调用的函数和（可选的）作为归并基础的初始值。他们的函数接收4个参数：前一个值、当前值、项的索引和数组对象

];

var sum= a.reduce(function( prev,cur ,index, array){

//参数分别代表了前一个值，当前值，项的索引，数组对象

console.log(prev); //2 8 16

return prev+ cur;

});

console.log(sum); //2+6=8 8+8=16 16+1

reduceRight就不写例子了，从右往左计算

支持ie9+

RegExp类型

g：表示全局模式，即模式将应用于所有字符串而非在发现第一个匹配项是立即停止；

i：表示不区分大小写模式，即在确定匹配项时忽略模式与字符串的大小写；

m：表示多行模式，即在达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项；

js的RegExp中所有的元字符都必须转义：

（ [ { \ ^ $ | ? * ) + . ] }

var c=/\[bc\]at/i; //匹配出包含

var text ="javascript html css";

var pattern =/javascript/gi;

var ma= pattern.exec(text);

]);

需要更多了解regexp

var text = "this has been a short summer" ;

var pattern = /(.)hort/g;

if (pattern.test(text )) {

console.log("最近一次要匹配的字符串。opera不支持:" + RegExp. input + "\n" ); //this has been a short summer

console.log("最近一次的匹配项。opera不支持:" + RegExp.lastMatch + "\n"); //short

console.log("最近一次匹配的捕获组。opera不支持:" + RegExp.lastParen + "\n"); //s

console.log("input字符串中lastMatch之前的脚本。opera不支持:" + RegExp.leftContext + "\n"); //this has been a

console.log("布尔值，表示是否所有表达式都使用多行模式。opera不支持:" + RegExp.multiline + "\n"); //undefined

console.log("input字符串中lastMatch之后的文本。opera不支持:" + RegExp.rightContext + "\n"); //summer

}

或

var text = "this has been a short summer" ;

var pattern = /(.)hort/g;

if (pattern.test(text )) {

console.log("最近一次要匹配的字符串。opera不支持:" + RegExp.$_ + "\n"); //this has been a short summer

console.log("最近一次的匹配项。opera不支持:" + RegExp.[ "$&"] + "\n"); //short

console.log("最近一次匹配的捕获组。opera不支持:" + RegExp.[ "$+"] + "\n"); //s

console.log("input字符串中lastMatch之前的脚本。opera不支持:" + RegExp.[ "$`"] + "\n"); //this has been a

console.log("布尔值，表示是否所有表达式都使用多行模式。opera不支持:" + RegExp.[ "$*"] + "\n"); //undefined

console.log("input字符串中lastMatch之后的文本。opera不支持:" + RegExp.[ "$'"] + "\n"); //summer

}

Function类型

function sum( num1, num2 ) {

return num1 + num2;

}

)); //20

var at = sum;

)); //20

sum = null;

)); // sum不是一个函数。会报错

)); //20

提一下函数的几种写法：

函数声明方式

function fun(){} //最常见

函数表达式方式

var fun=function(){}

function构造函数

var fun=new Function("num1","num2","return num1+num2"); //不推荐

javascript函数没有重载

补充函数表达式和函数声明的区别，

解析器在想执行环境中加载数据时，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），而函数表达式则必须等到解析器执行到他所在的代码行，才会真正被解释器执行；

))

function sum( num1, num2 ) {

return num1 + num2;

}

执行结果为30

))

var sum= function (num1 , num2) {

return num1 + num2;

}

sum不是一个函数

function a (b, c){

return b(c);

}

function add10( num){

;

}

);

console.log(result); //20

js中的函数名本身就是变量，所以函数也可以中作为值来使用，也就是说可以向传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的结果返回，

函数内部属性

在函数内部包含两个特殊的对象：arguments和this，其中arguments是一个类数组对象，包含着传入函数中的所有参数，虽然arguments的主要用途是保存函数参数，但是这个对象还有一个名叫callee的属性，该属性是一个指针，只想拥有这个arguments对象的函数，

function factor( num){

){

;

}else{

);

}

// console.log(factor(5));

var anotherFact = factor;

factor = null ;

)); //出错

---这是一个阶乘函数～ 4的阶乘算法为：4×3×2×1 最后结果为24，

function factor(num){

){

;

}else{

console.log(num);//4 3 2

);

}

// console.log(factor(5));

var anotherFact = factor;

factor = null ;

));

----这里的arguments.callee应该相当于指向该arguments的函数，相当于调用函数factor。就类似于查到所属函数的意思

---递归理念理解的不大清晰

this引用的是函数据以执行的环境对象或者也可以说是this值

每个函数都有两个属性：length和prototype；length表示函数希望接收的命名参数的个数；

prototype-原型 prototype是保存所有实例方法的真正送在，只不过是通过自己对象的实例对象访问罢了；在创建自定义引用类型以及实现继承时，prototype属性的作用极为重要；且prototype属性无法枚举；

每个函数包含两个非继承而来的方法：apply和call；这两个方法的作用都在特定的作用域中调用函数，实际上等于设置函数体内this的值。

apply方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中第二个参数可以是Array的实例，也可以是arguments对象。

call方法与apply方法作用相同，他们的区别仅在于接收惨啊书的方式不同，对于call方法而言，第一个参数是this值没有变化，变化的是其余参数都直接传递给函数，换句话说，在使用call方法时，传递给函数的参数必须逐个列举出来。

在使用call方法的情况下，方法必须明确的传入每一个参数。

在使用apply和call的选择下，完全取决于自己采取哪种给函数传递参数最为方便（如：打算直接传入arguments对象或者包含函数中先接受到的也是一个数组，那肯定用apply方便）

传递参数并非apply和call的真正用途，真正强大的地方是能扩充函数赖以运行的作用域。

例：

var color = "black";

var o = {

color : "red"

};

var nei = function() {

var color = "blue ";

return color;

}

function sayColor() {

console.log(this.color);

//console.log(nei());

}

console.log(nei()); //blue

sayColor(); red

sayColor.call(this); //red

sayColor.call(o); //black

bind方法会创建一个函数的实例，其this值会被绑定传递到bind函数的值

var color = "black";

var o = {

color : "red"

};

function sayColor() {

console.log(this.color);

//console.log(nei());

}

var obj= sayColor.bind(o)

obj(); //red

基本包装类型

boolean。布尔表达式中的所有对象都会被转换为true。

var a=new Boolean(false); //true

检测基本包装类型用instanceof

--建议永远不要使用boolean

Number类型

tofixed方法会按照指定的小数位返回数值的字符串表示 ---------一般支持0-20个小数位的数值，ie8下会有bug，此方法适用于处理货币

var num=10;

alert(num.toFixed(2)); //10.00 ------------会四舍五入

toExponential方法可能会返回固定大小格式或者指数格式，一般用于处理比较精确的数值

对象是类型的实例。

string类型，

var color = "black";

)); //a 按下标获取

)); //97 获取字符编码,a的字符编码就是97

]); //a 此种方法只适合获取个别字符。只支持ie8+

字符串拼接

var a= "hello";

var c= a.concat("world", "!","还可以加？" ,"++");

console.log(c); // helloworld!还可以加？++

slice,substr,substring，只是取值，不会执行其他修改操作，参数为一个参数的时候：从该参数下标处开始截取，包含该下标对应的字符；当参数为2个的时候，slice和substring获取结果几乎一致，都是从第一个参数下标开始到第二个参数下标结束，（不包含第二个参数下标对应的字符），而substr的话则是获取从第一个参数下标开始的第二个参数个字符，他的第二个参数就不是下标而是截取个数；

当第一个参数为负值时：

slice（-3）；//最后截取的是相当于slice(6)

substring会将所有的负值转化为0 //亲测，第二个参数最小为1，即便写为0--------------substring的第二个参数如果为0或负值的话，将会与第一个参数颠倒位置。。。

substr计算会是负值的第一个参数+字符串长度，

例：

var a="helloo";

var c=a.substr(-3,4);

console.log(c); //loo

-3+5=2

--------当substr的第二个参数为负值时相当于0，不会获取任何值

当第二个参数为负值时：

slice会直接将第二个为负值的参数转化为7

substring会将第二个值转化为0--------------substring的第二个参数如果为0或负值的话，将会与第一个参数颠倒位置。。

substr会将第二个参数转化为0

indexOf和lastIndexOf都是获取字符的位置，只是分别从第一个和从最后一个获取，一旦找到立即停止

indexOf可以接收第二个参数，标识字符串中的哪个位置开始搜索，忽略该位置之前的所有字符。

lastIndexOf 可以接收第二个参数，标识字符串中的哪个位置开始搜索，忽略该位置之后的所有字符。

实例---获取字符串某个字符的位置的数组

var strValue= "本文章主要总结了在使用React Native开发过程中遇到的疑难杂症,问题深坑。各种问题的解决方案在不断更新中~如果有各位童鞋已经遇到并且解决掉的问题方案，也希望可以提供给我。React Native技术交流1群:282693535 大家可以加群进行交流或者关注我的微信订阅号:codedev123" ;

var arry=new Array();

var inde= strValue.indexOf("的");

){

arry.push(inde);

);

}

console.log(arry);

trim属性，可以去除字符串的空格，并返回该字符串的副本，并不会改变原来的字符串（支持ie9+）

此外部分浏览器还支持：trimLeft和trimRight分别是去除前后空格

string中定义了几个用于在字符串中匹配模式的方法。

match方法本质上与RegExp的exec方法相同，match只接受一个参数，要么就是一个正则表达式。

var text= "cat,bat,sat,fat";

var path= /.at/;

var matched= text.match(path);

]); //cat

console.log(matched.index); //0

console.log(path.lastIndex); //0

search方法

var text="cat,bat,fat";

var pos=text.search(/at/);

console.log(pos);//1

字符串替换

replace方法

var text= "cat,bat,sat,fat";

var result= text.replace("at" ,"ond");

console.log(result); //cond,bat,sat,fat

console.log(text ); //cat,bat,sat,fat

replace方法的第一个参数是一个regexp对象或者一个字符串，第二个参数是一个字符串或者函数

字符串比较

localeCompare方法，如果字符串在字母表中应该排在字符串参数之前，则返回一个负数（大多数情况下为-1），如果相等则返回0，如果在字母表中应该排在字符串参数之后，则返回一个正数（大多数情况下为1）

由比较函数产生的一个实例方法：

var stringValue = "yellow";

function determinOrder( value) {

var result = stringValue.localeCompare(value);

) {

console.log("-1-1-1-1-1" )

) {

console.log("11111" )

} else {

console.log("0000" )

}

determinOrder( "b"); ///111111

determinOrder( "z"); //-1-1-1-1

fromCharCode属性可以接受一个或者多个字符编码，将它们转化成一个字符串

console.log(String.fromCharCode(104,101,108,108,111)); //hello

global对象：不属于其他任何对象的属性和函数都是global对象的属性。例：isNaN/isFinite/parseInt/parseFloat皆是global对象的方法

var url="http://127.0.0.1:8020/%E4%B9%B1%E4%B8%83%E5%85%AB%E7%B3%9F%E7%9A%84%E6%B5%8B%E8%AF%95/w3school/html/%E6%96%B0%E6%B5%8B%E8%AF%95.html";

console.log(encodeURI(url));

//http://127.0.0.1:8020/%25E4%25B9%25B1%25E4%25B8%2583%25E5%2585%25AB%25E7%25…25AF%2595/w3school/html/%25E6%2596%25B0%25E6%25B5%258B%25E8%25AF%2595.html

console.log(encodeURIComponent(url));

//http%3A%2F%2F127.0.0.1%3A8020%2F%25E4%25B9%25B1%25E4%25B8%2583%25E5%2585%25AB%25E7%25B3%259F%25E7%259A%2584%25E6%25B5%258B%25E8%25AF%2595%2Fw3school%2Fhtml%2F%25E6%2596%25B0%25E6%25B5%258B%25E8%25AF%2595.html

encodeURI只会替换掉url不含有的其他特殊符号，而encodeURIComponent则会替换掉所有特殊字符

math对象：

max和min分别获取最大值和最小值

, 6);

console .log(numbe); //6

如果要用到数组的筛选的话：

var arry=[1,23,45,6,78];

var max=Math.max.apply(Math,arry);

console.log(max); //78

---没怎么看懂，先记下来，多用几次~

舍入方法：

ceil方法：Math.ceil(25.1); //26 -------执行向上舍入，只要25后面的小数点大于0则向上舍入

round方法：标准的舍入，一般舍入

floor方法：执行向下舍入，直接去掉后面的小数位。

随机数

+ 1);

console .log(num);

------math。floor计算的结果永远是0，因为random返回的值在0-1；在后面*10表示有10个数，+1表示最小为1

实例：

function selectFrom( lowerValue , upperValue ) {

;

return Math.floor(Math.random() * choices + lowerValue);

}

//数组方式随机出数组中的任意值

var colors = [ "red", "green" , "blue" , "yellow", "black" , "purple", "brown" ];

)];

console.log(color);

//普通方式随机2-10之间的任意一个数值

);

console .log(num);

其他math对象方法：

math.abs(n) //放回n的绝对值

math.log(n) //返回n的自然对数

math.pow(n,power) //返回n的power次幂

math.sqrt(n) //返回n的平方根

math.acos(x) //返回x的反余弦值。

math.asin(x) //返回x的反正弦值

math.atan(x) //返回x的反正切值

math.atan2(y,x) //返回y/x的反正切值

math.cos(x) //返回x的余弦值

math.sin(x) //返回x的正弦值

math.tan(x) //返回x的正切值

巴特西

javascript学习记录-2-18

最新文章

热门文章