11、强制转换

强制转换主要指使用Number、String和Boolean三个构造函数,手动将各种类型的值,转换成数字、字符串或者布尔值。

1>Number强制转换

参数为原始类型值的转换规则:

  • 原始类型的值主要是字符串、布尔值、undefined和null,它们都能被Number转成数值或NaN。
  • NaN:not a number,当数学计算得不到数字结果时,该值就是NaN(Number类型)。
  • isNaN:判断变量是否为NaN。
Number(324) 值:324 字符串如果可以被解析为数值,则转换为相应的数值
Number('324abc')  值:NaN 字符串:如果不可以被解析为数值,返回NaN
Number('')  值:0 空字符串转为0
Number(true) 、Number(false) 值:1、0 布尔值:true 转成1,false 转成0
Number(undefined) 值:NaN undefined:转成 NaN
Number(null) 值:0 null:转成0

Number函数将字符串转为数值,要比parseInt函数严格很多。基本上,只要有一个字符无法转成数值,整个字符串就会被转为NaN。
参数为对象的转换规则:简单的规则是,Number方法的参数是对象时,将返回NaN。

  1. Number({a: 1}) // NaN
  2. Number([1, 2, 3]) // NaN

实际上,Number背后的真正规则复杂得多,内部处理步骤如下:
1:调用对象自身的valueOf方法。如果返回原始类型的值,则直接对该值使用Number函数,不再进行后续步骤。
2:如果valueOf方法返回的还是对象,则改为调用对象自身的toString方法。如果返回原始类型的值,则对该值使用Number函数,不再进行后续步骤。
3:如果toString方法返回的是对象,就报错。

2>String强制转换参数为原始类型值的转换规则:
数值:转为相应的字符串。
字符串:转换后还是原来的值。
布尔值:true转为"true",false转为"false"。
undefined:转为"undefined"。
null:转为"null"。

参数为对象的转换规则:String方法的参数如果是对象,返回一个类型字符串;如果是数组,返回该数组的字符串形式。

String内部处理步骤如下:
1:先调用对象自身的toString方法。如果返回原始类型的值,则对该值使用String函数,不再进行以下步骤。
2:如果toString方法返回的是对象,再调用valueOf方法。如果返回原始类型的值,则对该值使用String函数,不再进行以下步骤。
3:如果valueOf方法返回的是对象,就报错

  1. /*
  2. * 强制类型转换
  3. * - 指将一个数据类型强制转换为其他的数据类型
  4. * - 类型转换主要指,将其他的数据类型,转换为String 、Number 、Boolean
  5. *
  6. */
  7.  
  8. /*
  9. * 将其他的数据类型转换为String
  10. * 方式一:
  11. * - 调用被转换数据类型的toString()方法
  12. * - 该方法不会影响到原变量,它会将转换的结果返回
  13. * - 但是注意:null和undefined这两个值没有toString()方法,如果调用他们的方法,会报错
  14. *
  15. * 方式二:
  16. * - 调用String()函数,并将被转换的数据作为参数传递给函数
  17. * - 使用String()函数做强制类型转换时,
  18. * 对于Number和Boolean实际上就是调用的toString()方法
  19. * 但是对于null和undefined,就不会调用toString()方法
  20. * 它会将 null 直接转换为 "null"
  21. * 将 undefined 直接转换为 "undefined"
  22. *
  23. */
  24.  
  25. //1.调用被转换数据类型的toString()方法
  26. var a = 123;
  27. a = a.toString();
  28. console.log(typeof a); //string
  29.  
  30. a = true;
  31. a = a.toString();
  32. console.log(typeof a); //string
  33.  
  34. a = null;
  35. a = a.toString();
  36. console.log(typeof a); //报错,Uncaught TypeError: Cannot read property 'toString' of null
  37.  
  38. a = undefined;
  39. a = a.toString();
  40. console.log(typeof a); //报错,Uncaught TypeError: Cannot read property 'toString' of undefined
  41.  
  42. //---------------------------------------------------------------------------------------------
  43.  
  44. //2.调用String()函数,并将被转换的数据作为参数传递给函数
  45. a = 123;
  46. a = String(a);
  47. console.log(typeof a); //string
  48.  
  49. a = null;
  50. a = String(a);
  51. console.log(typeof a); //string
  52.  
  53. a = undefined;
  54. a = String(a);
  55. console.log(typeof a); //string
  56.  
  57. //3.我用Java中的方法,发现也是可以的
  58. var b = 123;
  59. b = "" + b;
  60. console.log(typeof b); //string

3>Boolean强制转换

参数为原始类型值的转换规则:转换规则相对简单:除了以下六个值的转换结果为false,其他的值全部为true。
undefined、null、-0、0或+0、NaN、''(空字符串)
参数为对象的转换规则:所有对象(包括空对象)的转换结果都是true。

十二、自动转换

自动转换具有不确定性,而且不易除错,建议在预期为布尔值、数值、字符串的地方,全部使用Boolean、Number和String函数进行显式转换。

自动转换的规则:预期什么类型的值,就调用该类型的转换函数。比如,某个位置预期为字符串,就调用String函数进行转换。如果该位置可能是字符串,也可能是数值,那么默认转为数值。
   1:自动转换为布尔值:当JavaScript遇到预期为布尔值的地方(比如if语句的条件部分),就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean函数。

  1. if ( !undefined && !null && !0 && !NaN && !'' )
  2.  
  3. { console.log('true'); } // true
  4.  
  5. // 写法一 expression ? true : false
  6.  
  7. // 写法二 !! expression

2:自动转换为字符串:当JavaScript遇到预期为字符串的地方,就会将非字符串的数据自动转为字符串。系统内部会自动调用String函数。字符串的自动转换,主要发生在加法运算时。当一个值为字符串,另一个值为非字符串,则后者转为字符串。(+号的拼接字符串的作用)

自动转换为字符串举例
'5' + 1 // '51'  '5' + true // "5true" '5' + false // "5false"  '5' + {} // "5[object Object]"
'5' + [] // "5" '5' + function (){} // "5function (){}" '5' + undefined // "5undefined“ '5' + null // "5null"

3:自动转换为数值:当JavaScript遇到预期为数值的地方,就会将参数值自动转换为数值。系统内部会自动调用Number函数。

自动转换为数值举例
'5' - '2' =3  '5' * '2'=10 false - 1=-1 true - 1= 0
'5' * [] = 0 '1' - 1  = 0   false / '5'    = 0 'abc' - 1 = NaN


4.除加法运算符有可能把运算子转为字符串,其他运算符都会把运算子自动转成数值。

+'abc' // NaN         -'abc' // NaN              +true // 1             -false // 0

特殊:(具体原因通过度娘寻根问底)

null == undefined   // true

null == false        // false

undefined == false // false

  1. var str;
  2. //undefined
  3. console.log("只定义未初始化的str类型"+typeof(str)+"只定义未初始化的str值"+str)
  4. var strone="";
  5. //string
  6. console.log("初始化为\"\"的str类型"+typeof(strone)+"初始化为\"\"的str值"+strone)
  7. var strtwo=new String();
  8. //无值相当于"";
  9. if(""==strtwo)
  10. console.log("初始化为new String()的str类型"+typeof(strtwo)+"初始化为new String()的str值"+strtwo)
  11. var strthree=null;
  12. //object
  13. console.log("初始化为null的str类型"+typeof(strthree)+"初始化为null的str值"+strthree)
  14. var strfour={};
  15. //object
  16. console.log("初始化为{}的str类型"+typeof(strfour)+"初始化为{}的str值"+strfour)

十三、三大结构

1.顺序结构

2.选择结构

3.循环结构(当循环结构和直到型循环结构)

十四、JavaScript语句

(一)选择语句

1)if语句

(1)单一选择结构:if(){}  

  1. var x=5,y=8; if(y>x) {   alert("x>y");}

(2)二路选择结构:if(){}else{}

  1. // 判断:如果第一个值大于第二个值则alert(OK!)
  2. var x=5,y=8;
  3. if(y> x){
  4.    document.write('OK!');
  5. }
  6. else{
  7.   document.write('NOT OK!');
  8. }  

(3)三目运算符:?: (condition ? if_true : if_false;) 

  1. var x=5,y=8; alert(x> y? 'OK!' : 'NOT OK!')

(4)多路选择结构:if(){}else if(){}else if(){}else{}

多路选择结构流程图:

  1. //此处给出主要代码为例
  2. if(sScore >= 0 && sScore < 60) {
  3. alert('不及格,平常干啥啦!');
  4. } else if(sScore >= 60 && sScore < 70) {
  5. alert('刚刚及格,继续努力!');
  6. } else if(sScore >= 70 && sScore < 80) {
  7. alert('一般,再接再厉!');
  8. } else if(sScore >= 80 && sScore < 90) {
  9. alert('良好,稳住,你可以的!');
  10. } else if(sScore >= 90 && sScore < 100) {
  11. alert('优秀,戒骄戒躁,争取满分!');
  12. } else if(sScore == 100) {
  13. alert('劳逸结合,注意身体!');
  14. } else {
  15. alert('分数非法!');
  16. }

2)switch语句(考虑多路选择的案例转换为switch实现,提示:case后的是具体的情况,多路选择是以表达式的方式进行判断,即点和面的关系。如:80-90范围这个面通过除以10,然后通过parseInt进行取整。(面转成点))

语法:switch(condition){case :break;default:}

break具体讲解:阻止代码向下一个case运行。防止case穿透(穿透性用的好还是挺6的,有时间后续补充案例:给定依据具体日期得出这是本年的第多少天的案例)。
default具体讲解:匹配不存在时做的事情。
switch:严格检查类型(形似===的检查),如果不统一,条件不成立(比如说数字的字符串和case后的Number后的数字无法匹配,需转成相同的类型)

  1. // 判定
  2. switch(iWeekday){
  3.   //利用穿透性
  4.   case 0:
  5.   case 7:
  6.     alert('星期天');
  7.     break;
  8.   case 1:
  9.     alert('星期一');
  10.     break;
  11.   case 2:
  12.     alert('星期二');
  13.     break;
  14.   case 3:
  15.     alert('星期三');
  16.     break;
  17.   case 4:
  18.     alert('星期四');
  19.     break;
  20.   case 5:
  21.     alert('星期五');
  22.     break;
  23.   case 6:
  24.     alert('星期六');
  25.     break;
  26.   default:
  27.     alert('非法数据!');
  28. }

(二)循环语句

1)for循环语句

  1. // for循环语法
  2. /*
  3. for(var i = 0; i < 10; i++){
  4. code...
  5. }
  6. */
  7.  
  8. for(var a = 4; a < 10; a++) {
  9. document.write(a);
  10. }
  11.  
  12. // for循环的嵌套
  13. for(var i = 0; i < 5; i++) {
  14. for(var j = 0; j < 5; j++) {
  15. document.write(i*j + '、');
  16. }
  17. document.write('<br>');
  18. }

2)for in语句(可以遍历数组和对象,经常用于遍历对象)

遍历数组

  1. var names = ["nick", "jenny"];
  2.  
  3. for(var index in names){
  4. console.log(index);
  5. console.log(names[index]);
  6. }

遍历对象

  1. var obj = {name: '张三', age: 24, hobby: ['打篮球', '搏击', '打乒乓球']};
  2. for(var attr in obj) {
  3. console.log(obj[attr]);
  4. }

3)while循环语句

  1. /*
  2.   while语法
  3. while(condition){
  4.   code...
  5. }
  6. */
  7. var a = 4;
  8.  
  9. while(a < 10) {
  10. document.write(a);
  11. a++;
  12. }

4)do-while语句

  1. /*
  2. do...while语法
  3. do{
  4.   code...
  5. }while(condition);
  6. */
  7. var a = 4;
  8. do{
  9.   document.write(a);
  10.   a++;
  11. }
  12. while(a < 10);
  13. // while和do...while的区别:执行的顺序不一样
  14. //do...while至少会执行一次代码块,while有可能一次都不执行。

(三)Label语句

  1. //label语句 跳出双重循环 例:条件 i=5 j=5 时 跳出嵌套的双重for循环 num=55;
  2. var num = 0;
  3. outPoint:
  4. for (var i=0;i<10;i++) {
  5. for (var j=0;j<10;j++) {
  6. if (i==5 && j==5) {
  7. break outPoint;
  8. }
  9. num++;
  10. }
  11. }
  12. console.log(num); //控制台输出

(四)异常处理

  1. try {
  2. //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
  3. }
  4. catch (e) {
  5. // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
  6. //e是一个局部变量,用来指向Error对象或者其他抛出的对象
  7. }
  8. finally {
  9. //无论上述代码怎么,finally代码块始终会执行
  10. }

补充:break和continue的区别

  1. // break和continue
  2. for(var i = 0; i < 10; i++) {
  3. if(i === 5) {
  4. break;
  5. }
  6. document.write(i);
  7. }
  8. for(var i = 0; i < 10; i++) {
  9. if(i === 5) {
  10. continue;
  11. }
  12. document.write(i);
  13. }
  14. // 区别:break终止循环,continue跳过当前循环。
  15. // 共同点:都不会执行后面的代码

十五、函数

函数的概念:函数就是把完成特定功能的一段代码抽象出来,使之成为程序中的一个独立实体,起个名字(函数名)。可以在同一个程序或其他程序中多次重复使用(通过函数名调用)。
注:编写好的函数代码只有通过调用才会执行,不调用的时候不会执行(自执行函数特例)。
函数的作用(好处):
1,使程序变得更简短而清晰
2,有利于程序维护
3,可以提高程序开发的效率 ,
4,提高了代码的重用性(复用性)

1>函数的创建方式

  1. // 函数声明式的方式创建函数
  2.   function funcName() {}
  3.  
  4. // 函数表达式的方式创建函数
  5.   var funcName = function () {};
  6.  
  7. // 通过构造函数的方式创建函数
  8. // 构造函数:出现在new运算符后的函数,称为构造函数
  9.   var funcName = new Function ();

函数声明式和函数表达式的区别

  1. // 函数声明式的方式必须指定函数名
  2. function sum() {
  3. alert(1);
  4. }
  5. sum();
  6. // 函数表达式的方式可以没有名字
  7. (function () {
  8. alert(1);
  9. })();

2>函数的调用方式

  1. //创建函数
  2. function hello() {
  3.    document.write('hello ');
  4.    document.write('world ');
  5. }
  6. // 方式1:手动调用
  7. hello();
  8. // 方式2:事件驱动的方式
  9. var oBox = document.getElementById('box');
  10. oBox.onclick = function () {
  11.    hello();
  12. };

3>函数的参数(形参和实参)

1.手动传递的形参和实参

  1. //函数定义时,定义的变量为形参:a,b
  2. function sum(a, b) {
  3. alert(a + b);
  4. }//函数调用时,传递的参数值为实参:4,8
  5. sum(4, 8);

补充:对象中,冒号前面的数据可以称为键、下标、或者key,冒号后面的值称为值或者value

2.JS解析器内置定义的arguments (在函数内部的内置的对象参数,无需自定义可直接使用)

 arguments 值类型(对象类型),包含的是实参的个数和数据

  1. function sum(a, b) {
  2. // 通过下标的方式获取某一个值
  3. console.log(arguments[0]);
  4. // 通过遍历的方式获取所有的值(下标0起始)
  5. for(var i = 0; i < arguments.length; i++) {
  6. console.log(arguments[i]); //分别控制台打印5,3,8
  7. }
  8. a++; //a和arguments[0]和指向相同结果可想而知,相同为6
  9. console.log(arguments[0]); //6
  10. console.log(a); //6
  11. }
  12. //手动调用函数
  13. sum(5, 3, 8);

3.return(返回函数执行的结果) 

  1. // return关键词
  2. function sum(a, b) {
  3. var c = a + b;
  4. return c;/*!return只能返回参数只能有一个。return a,b,c 最终返回的结果是c的结果,不会报错*/
  5. /*!return 后面的代码不会执行*/
  6. alert('hello world!');//永远不会被执行
  7. // 函数默认返回的值是undefined
  8. }
  9. var d = sum(4, 7);
  10. console.log(d);

十六、js的解析顺序

第一步:加载第一个script代码块
 第二步:语法检查
 第三步:预解析(将var声明的变量和声明式创建的函数放到代码的最前面)
 第四步:开始正式执行代码,从上往下。
 第五步:加载第二个script代码块。

  1. sum();
  2. var sum = function () {
  3. console.log(a + 8);
  4. }
  5. alert(a); //undefined
  6. alert(b); //报错
  7. var a = 5;
  8.  
  9. //代码预解析时,先将a和sum变量放到代码最前方,然后创建代码 var a,sum;然后自上而下执行代码
  10. //预编译的代码结构:
  11. //var a,sum;
  12. //sum();
  13. //var sum = function () {
  14. // console.log(a + 8);
  15. //}
  16. //alert(a); //undefined
  17. //alert(b); //报错
  18. //a = 5;

十七、对象

由若干个键值对组成的无序集合。每个属性存放一个原始值,对象或函数

属性:用属性值来描述他的状态

行为:用来改变队形的行为方法

1>对象申明

  1. var obj = {
  2. name: 'jimmy',
  3. introduce: function () {
  4. console.log('我叫jimmy!');
  5. }
  6. };
  7. // 通过Object构造函数创建对象
  8. // var obj = new Object();
  9. // 通过自定义的构造函数创建对象
  10. // function Animal() {}
  11. // var dog = new Animal();
  12. // console.log(dog);

2>对象的操作

创建对象:

  1. var bird = {feather: '羽毛', 'color': 'white', "type": '鸟类'};
  2. var dog = {};

<1>对象调用

  1. console.log(bird.feather);
  2. console.log(bird["feather"]);

<2>对象增加

方式1:通过.的方式

  1. dog.name = '旺财';
  2. dog.wagTails = function () {
  3.    console.log('旺财正在摇尾巴!');
  4. };
  5.  
  6. // dog.wagTails();//调用

方式2:通过[]的方式

  1. dog["name"] = '大黄';
  2. dog['tongues'] = function () {
  3.   alert('大黄正在吐舌头!');
  4. }
  5. //dog.tongues();
  6. //console.log(dog);

<3>对象修改 

  1. bird.feather = 'wing';
  2. bird.color = 'pink';

<4>对象删除

  1. delete bird.feather;

<5>对象清空

  1. bird = {};

<6>对象销毁 

  1. // JS的垃圾回收机制:JS引擎检测内存,如果某个对象没有被变量引用,那么就会直接回收该对象
  2. var obj = {size: 100000000};
  3. obj = null;

十八、值传递和址传递(引用传递)

  • 值传递:如果变量的值是基本数据类型,那么传递值的时候采用的是值传递(把值复制一份给另外一个变量)。
  • 址传递:如果变量的值是引用数据类型,那么传递值的时候采用的是址传递(把地址复制一份给另外一个变量)。
  • 相关联想函数指针(地址)
  • 值类型和引用类型内存存储的位置分为栈(小区域少量数据)和堆(大片区域大量数据)
  1. //值类型(值相同,重新开辟内存空间)
  2. var a= 10;
  3. var b = a;
  4. a = 0;
  5. console.log(b);//
  6.  
  7. //引用类型(地址相同,一起变)
  8. var a = {num: 10};
  9. var b = a;
  10. a.num = 0;
  11. console.log(b.num);//

  1. var a = {
  2. name: '张三'
  3. };
  4. var b = {
  5. name: a
  6. };
  7. var c = b;
  8. var d = {
  9. name: '李四'
  10. };
  11. c.name = d;
  12. console.log(b.name.name);//张三

十九、常用函数类型

1>回调函数(指针:通过函数名称的方式执行的函数) 

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。

因此,回调本质上是一种设计模式,并且jQuery(包括其他框架)的设计原则遵循了这个模式。

在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。

因此callback 不一定用于异步,一般同步(阻塞)的场景下也经常用到回调,比如要求执行某些操作后执行回调函数。

例子
一个同步(阻塞)中使用回调的例子,目的是在func1代码执行完成后执行func2。

  1. var func1=function(callback){
  2. //do something.
  3. (callback && typeof(callback) === "function") && callback();
  4. }
  5. func1(func2);
  6. var func2=function(){
  7. }
  1. function sum(a, b, fn) {
  2. var c = a + b;
  3. if(c > 9) {
  4. fn();
  5. }
  6. console.log(c);
  7. }
  8. sum(7, 5, function () {
  9. alert(1);
  10. });

回调函数的使用场合

资源加载:动态加载js文件后执行回调,加载iframe后执行回调,ajax操作回调,图片加载完成执行回调,AJAX等等。
DOM事件及Node.js事件基于回调机制(Node.js回调可能会出现多层回调嵌套的问题)。

setTimeout的延迟时间为0,这个hack经常被用到,settimeout调用的函数其实就是一个callback的体现

链式调用:链式调用的时候,在赋值器(setter)方法中(或者本身没有返回值的方法中)很容易实现链式调用,而取值器(getter)相对来说不好实现链式调用,因为你需要取值器返回你需要的数据而不是this指针,如果要实现链式方法,可以用回调函数来实现setTimeout、setInterval的函数调用得到其返回值。由于两个函数都是异步的,即:他们的调用时序和程序的主流程是相对独立的,所以没有办法在主体里面等待它们的返回值,它们被打开的时候程序也不会停下来等待,否则也就失去了setTimeout及setInterval的意义了,所以用return已经没有意义,只能使用callback。callback的意义在于将timer执行的结果通知给代理函数进行及时处理。

2>递归函数(自身调用自身的函数)

  1. /*
  2. 递归函数调用分析:
  3. {
  4. var num = 1;
  5. num++; // 2
  6. if(num < 5) {
  7. {
  8. var num = 2;
  9. num++; // 3
  10. if(num < 5) {
  11. {
  12. var num = 3;
  13. num++; // 4
  14. if(num < 5) {
  15. {
  16. var num = 4;
  17. num++; // 5
  18. if(num < 5) {
  19. print(num);
  20. }
  21. console.log(num); // 5
  22. }
  23. }
  24. console.log(num);
  25. }
  26. }
  27. console.log(num);
  28. }
  29. }
  30. console.log(num);
  31. }
  32. */
  33.  
  34. function print(num) {
  35. num++;
  36. if(num < 5) {
  37. print(num);
  38. }
  39. console.log(num);
  40. }
  41.  
  42. print(1);

3>匿名函数

  1. (function () {})();

4>构造函数

  1. function Person() {
  2. alert(1);
  3. }
  4. var obj = new Person();
  5. console.log(obj);

二十、数组 

定义:数组是一个可以存储一组或一系列相关数据的容器。

为什么要使用数组?

1:为了解决大量相关数据的存储和使用的问题。

2:模拟真实的世界(班级、军队)。

1>数组的操作

1)创建数组

  (1)构造函数的方式:var a=new Array();

  (2)隐式声明的方式:var b=[];

2)数组的赋值

构造函数函数的方式

(1)直接赋值:var a=new Array(数据1,数据2,…);

  注:var a=new Array(数值)       如果括号中只有一个元素,并且这个元素是数值类型的,那么他就是指定数组的长度。 并且它的值都是undefined。

  数组的属性:length 属性(获取整个数组的长度)。

(2)先声明后赋值:var a=new  Array(); a[0]=1;  a[1]=2;  a[2]=3;

隐式声明赋值

(1)直接赋值: var a=[1,2,3,4];

(2)声明以后再赋值: var a=[]; a[0]=1;  a[1]=2;  a[2]=3;

注:JS数组可以存储任何类型的值。eg: arr[3] = function () {};

3)访问数组 

  通过数组的(中括号)下标访问。

   arr[0-(length-1)] //数组下标从0开始,他的最大值,是length-1。

  arr['name'] //关联数组 通过下表字符串进行访问

4) 修改数据: 

arr[3] = '修改的数据';

5)删除数据:

delete arr[1];

6)遍历数组

1:for循环。

  1. for(var i = 0; i < arr.length; i++) {
  2.   console.log(arr[i]);
  3. }

2:while循环。

  1. var i = 0;
  2. while(i < arr.length) {
  3.   console.log(arr[i]);
  4.   i++;
  5. }

3:for in循环。(遍历数组不常用)

  数组的遍历。

  1. for(var attr in arr){
  2.   //attr 数组的下标
  3.   console.log(arr[attr])
  4. }

对象属性的遍历。

  1. // 使用for in 遍历对象
  2. var obj = {name: '小明', age: 24, hobby: ['打篮球', '搏击', '打乒乓球']};
  3. for(var attr in obj) {
  4.   console.log(obj[attr]);
  5. }

2>数组分类

1:按照下标的类型

1.下标是数字的类型叫做(索引数组)

  1. var arr = ['1', '2' , '3'];

2.下标是字符串类型叫做(关联数组),必须通过对象模拟的形式才能实现,一般不用。

  1. var arr = [];
  2. arr['name'] = '张三';
  3. arr['age'] = '28';

3:按照维度来分类

1.一维数组常用的数组就是一维数组

2.二维数组,通过对象模拟的形式才能实现。

声明二维数组:

  1. var arr=[[1,2,3],[4,5,6]]; alert(arr[1][1]); //值5

3>数组的属性

(1)length: 设置或返回数组元素的数目。(可读可写)

length属性控制数组的读:console.log(arr.length-1);

length属性控制数组的写:arr.length = 6;

(2)constructor:返回构造函数的引用。(输出constructor的返回值:Array)

4>数组的方法(加粗常用)

  前五个对原始对象的操作

1. arr.push(数组元素1,数组元素2,........)   向数组的末尾加入新元素 | 返回值:新数组的长度

eg:arr.push('追加元素1','追加元素2');

2.arr.unshift(数组元素1,数组元素2,........)  向数组的开头加入新元素 | 返回值是新数组的长度。

eg:arr.unshift(开头新元素1,开头新元素2)

3. arr.pop()    删除数组的最后一个元素 | 返回值是删除的元素。

var first = arr.pop();

4. arr.shift()  删除数组的第一个元素 | 返回删除的元素。

var first = arr.shift();

5.万能的添加删除函数 arr.splice(index,数量,添加的元素.....)  注:前俩个元素必须有

(1)index   从何处开始添加或删除,必须是数值类型(数组的下标)

(2)数量    规定了删除的个数,如果是0,则不删除。

(3)需要添加的元素,可以当作替换的元素。

(4)如果有删除的元素,以数组的方式返回删除的元素。

  1. // 添加元素
  2. arr.splice(2, 0, '王五');
  3. // 修改元素
  4. arr.splice(1, 1, '王五');
  5. //修改与添加
  6. arr.splice(1, 1, '王五''李四');
  7. // 删除元素
  8. var del = arr.splice(1, 1);

6.arr.join([分隔符])   把数组元素按照指定分隔符组合成一个字符串,如果没有指定分隔符,默认是用“,”分割 | 返回结果就是组合成的字符串。

  1. var param = {
  2. q: '棉衣',
  3. commend: 'all',
  4. search_type: 'item'
  5. };
  6.  
  7. var aParam = [];
  8. for(var attr in param) {
  9. aParam.push(attr + '=' + param[attr]);
  10. }
  11. console.log(aParam.join('&')); //以字符&分割连接数组
  12. //结果:q=棉衣&commend=all&search_type=item

7.  arr.slice() 数组的分割。从截取指定的开始位置,到结束位置(不包括)的元素。如果不指定结束位置,则从指定的开始位置,取到结尾(数组的下标)。

支持负数(-1开头)  返回的是新数组。 不改动原来的数组。正数和负数都是向右查找

  1. var arr = ['宋江', '卢俊义', '武松', '杨雄', '石秀', '鲁智深'];
  2. var newArr = arr.slice();相当于拷贝数组
  3. var newArr = arr.slice(2);//不指定结束为止,默认为截取到最后
  4. var newArr = arr.slice(2, 5);//结果为下标为2、3、4的数组元素,不包含为指定结尾下标数的元素
  5. var newArr = arr.slice(-2, -1); //从末尾开始计数分割 只能按照从左向右的顺序进行截取,即不支持arr.slice(-1, -2) 结果:'石秀'

8. arr.concat()   连接两个或更多的数组,并返回新数组,对原数组没有任何影响。

  1. eg:arr1.concat(arr2) //将数组arr1和arr2连接成新数组返回

9.arr.reverse()  数组翻转方法。改变原数组

  1. arr.reverse(arr) //将数组翻转

10.  arr.sort()   对数组进行排序,如果没有参数,则按照字母的编码进行排序,如果要按照其他的顺序来排序,要提供一个函数。

回调函数会提供两个参数(a,b)。

a<b  a在b前。

a=b  顺序按照原样输出。

a>b  b在a前。

  1. ['d', 'c', 'b', 'a'].sort()  // ['a', 'b', 'c', 'd']
  2. [4, 3, 2, 1].sort()  // [1, 2, 3, 4]
  3. [11, 101].sort()  // [101, 11]
  4. [10111, 1101, 111].sort()  // [10111, 1101, 111]

如果想让sort方法按照自定义方式排序,可以传入一个函数作为参数,表示按照自定义方法进行排序。该函数本身接受两个参数,表示进行比较的两个元素。如果返回值大于0,表示第一个元素排在第二个元素后面;其他情况下,都是第一个元素排在第二个元素前面。

返回值正直交换   零、负值不交换  负值降序   正值升序

  1. [10111, 1101, 111].sort(function (a, b) {
  2. return a - b; //回调函数
  3. }) //输出结果: [111, 1101, 10111]
  4. [ { name: "张三", age: 30 }, { name: "李四", age: 24 }, { name: "王五", age: 28 } ].sort(function (o1, o2) {
  5. return o1.age - o2.age;
  6. }) // [ { name: "李四", age: 24 }, { name: "王五", age: 28 }, { name: "张三", age: 30 } ]

二十一、排序

1>冒泡排序 

  1. // 冒泡排序:从前往后对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒
  2. var arr = [23, 34, 11, 22, 19, 18];
  3.  
  4. /*
  5. 冒泡排序的思路分析:
  6. 第1轮 第1步:[23, 34, 11, 22, 19, 18]
  7. 第1轮 第2步:[23, 11, 34, 22, 19, 18]
  8. 第1轮 第3步:[23, 11, 22, 34, 19, 18]
  9. 第1轮 第4步:[23, 11, 22, 19, 34, 18]
  10. 第1轮 第5步:[23, 11, 22, 19, 18, 34]
  11.  
  12. 第2轮 第1步:[11, 23, 22, 19, 18, 34]
  13. 第2轮 第2步:[11, 22, 23, 19, 18, 34]
  14. 第2轮 第3步:[11, 22, 19, 23, 18, 34]
  15. 第2轮 第4步:[11, 22, 19, 18, 23, 34]
  16.  
  17. 第3轮 第1步:[11, 22, 19, 18, 23, 34]
  18. 第3轮 第2步:[11, 19, 22, 18, 23, 34]
  19. 第3轮 第3步:[11, 19, 18, 22, 23, 34]
  20.  
  21. 第4轮 第1步:[11, 19, 18, 22, 23, 34]
  22. 第4轮 第2步:[11, 18, 19, 22, 23, 34]
  23.  
  24. 第5轮 第1步:[11, 18, 19, 22, 23, 34]
  25. */
  1. for(var i = 1; i < arr.length; i++) {
  2. // 内层for循环确定每轮的步数
  3. for(var j = 0; j < arr.length - i; j++) {
  4. // 两两比较
  5. if(arr[j] > arr[j + 1]) {
  6. var temp = arr[j];
  7. arr[j] = arr[j + 1];
  8. arr[j + 1] = temp;
  9. }
  10. }
  11. }

2>选择排序 

  1. //选择排序:两两比较,找到最大值(或者最小值)之后,将其放在正确的位置,其他数的位置不变。
  2. /*
  3. 选择排序的思路分析:
  4. 第1轮 第1步:var iMinK = 0;
  5. 第1轮 第2步:23 和 34比较,什么也不做
  6. 第1轮 第3步:23 和 11比较,iMinK = 2
  7. 第1轮 第4步:11 和 22比较,什么也不做
  8. 第1轮 第5步:11 和 19比较,什么也不做
  9. 第1轮 第6步:11 和 18比较,什么也不做
  10. 第1轮 第7步:下标0和下标2进行位置交换 [11, 34, 23, 22, 19, 18]
  11.  
  12. 第2轮 第1步:var iMinK = 1;
  13. 第2轮 第2步:34 和 23比较,iMinK = 2
  14. 第2轮 第3步:23 和 22比较,iMinK = 3
  15. 第2轮 第4步:22 和 19比较,iMinK = 4
  16. 第2轮 第5步:19 和 18比较,iMinK = 5
  17. 第2轮 第6步:下标1和下标5进行位置交换 [11, 18, 23, 22, 19, 34]
  18. */
  1. // 外层for循环确定轮数
  2. for(var i = 0; i < arr.length - 1; i++) {
  3. // 记录最小值的下标
  4. var iMinK = i;
  5. for(var j = i + 1; j < arr.length; j++) {
  6. if(arr[iMinK] > arr[j]) {
  7. iMinK = j;
  8. }
  9. }
  10. // 交换数据
  11. if(iMinK !== i) {
  12. var temp = arr[i];
  13. arr[i] = arr[iMinK];
  14. arr[iMinK] = temp;
  15. }
  16. }

3>插入排序

  1. 在要排序的一组数中,假设前面的数已经是排好顺序的,现在要把第n个数插到前面的有序数中,使得这n个数也是排好顺序的。如此反复循环,直到全部排好顺序。
  2.  
  3. /*
  4. 插入排序的思路分析:
  5. 第1轮 第1步:[23, 34, 11, 22, 19, 18]
  6.  
  7. 第2轮 第1步:[23, 11, 34, 22, 19, 18]
  8. 第2轮 第2步:[11, 23, 34, 22, 19, 18]
  9.  
  10. 第3轮 第1步:[11, 23, 22, 34, 19, 18]
  11. 第3轮 第2步:[11, 22, 23, 34, 19, 18]
  12. 第3轮 第3步:[11, 22, 23, 34, 19, 18]
  13.  
  14. 第4轮 第1步:[11, 22, 23, 19, 34, 18]
  15. 第4轮 第2步:[11, 22, 19, 23, 34, 18]
  16. 第4轮 第3步:[11, 19, 22, 23, 34, 18]
  17. 第4轮 第4步:[11, 19, 22, 23, 34, 18]
  18.  
  19. 第5轮 第1步:[11, 19, 22, 23, 18, 34]
  20. 第5轮 第2步:[11, 19, 22, 18, 23, 34]
  21. 第5轮 第3步:[11, 19, 18, 22, 23, 34]
  22. 第5轮 第4步:[11, 18, 19, 22, 23, 34]
  23. 第5轮 第5步:[11, 18, 19, 22, 23, 34]
  24. */
  1. for(var i = 1; i < arr.length; i++) {
  2. // 内层的for循环
  3. for(var j = i; j > 0; j--) {
  4. if(arr[j] < arr[j - 1]) {
  5. var temp = arr[j];
  6. arr[j] = arr[j - 1];
  7. arr[j - 1] = temp;
  8. } else {
  9. break;
  10. }
  11. }
  12. }

4>快速排序

  1. // 选择一个基准元素,通常选择第一个元素或者最后一个元素。
  2. //通过一趟扫描,将待排序列分成两部分,一部分比基准元素小,一部分大于等于基准元素。
  3. //此时基准元素在其排好序后的正确位置,然后在用同样的方法递归的排序划分的两部分。
  4.  
  5. /*
  6. 排序数组:23, 35, 34, 11, 22, 19, 18
  7. 快速排序的思路分析:
  8. 第一步:base = 23 , arr = [35, 34, 11, 22, 19, 18]
  9. 第二步:left = [], right = []
  10. 第三步:[11, 22, 19, 18] 23 [35, 34]
  11. 第四步: [] 11 [22, 19, 18] 23 [34] 35 []
  12. 第五步:[] 11 [19, 18] 22 [] 23 [34] 35 []
  13. 第六步:[11, 18, 19, 22, 23, 34, 35]
  14. */
  15.  
  16. /*
  17. if(arr.length <= 1) {
  18. return arr;
  19. }
  20. var iBase = arr.shift();
  21. var left = [], right = [];
  22. for(var i = 0; i < arr.length; i++) {
  23. if(arr[i] < iBase) {
  24. left.push(arr[i]);
  25. } else {
  26. right.push(arr[i]);
  27. }
  28. }
  29. left: [11, 22, 19, 18] iBase: 23 , right: [35, 34]
  30.  
  31. 从上开始正推返回表达式:return quickSort(left即[11,22,19, 18]).concat(iBase=23, quickSort(right即[35,34]));
  32. 从下开始逆推返回值:return [11, 18, 19, 22].concat(23, [35,34]);//合并后的数组:[11,18,19,22,23,34,35]
  33.  
  34. -------------------------------------------我是单次递归分割线-----------------------------------------------
  35.  
  36. if(arr.length <= 1) {
  37. return arr;
  38. }
  39. var iBase = arr.shift();
  40. var left = [], right = [];
  41. for(var i = 0; i < arr.length; i++) {
  42. if(arr[i] < iBase) {
  43. left.push(arr[i]);
  44. } else {
  45. right.push(arr[i]);
  46. }
  47. }
  48.  
  49. left: [] iBase: 11 right: [22, 19, 18]
  50.  
  51. 从上开始正推返回表达式:return quickSort(left即[]).concat(iBase=11, quickSort(right即[22,19,18]));
  52. 从下开始逆推返回值:return [].concat(11, [18, 19, 22]); //合并后的数组:[11, 18, 19, 22]
  53.  
  54. -------------------------------------------我是单次递归分割线-----------------------------------------------
  55. if(arr.length <= 1) {
  56. return arr;
  57. }
  58. var iBase = arr.shift();
  59. var left = [], right = [];
  60. for(var i = 0; i < arr.length; i++) {
  61. if(arr[i] < iBase) {
  62. left.push(arr[i]);
  63. } else {
  64. right.push(arr[i]);
  65. }
  66. }
  67.  
  68. left: [19, 18] iBase: 22 right: []
  69.  
  70. 从上开始正推返回表达式:return quickSort(left即[19, 18]).concat(iBase=22, quickSort(right即[]));
  71. 从下开始逆推返回值:return [18, 19].concat(22, []); //合并后的数组: [18, 19, 22]
  72.  
  73. -------------------------------------------我是单次递归分割线-----------------------------------------------
  74.  
  75. if(arr.length <= 1) {
  76. return arr;
  77. }
  78. var iBase = arr.shift();
  79. var left = [], right = [];
  80. for(var i = 0; i < arr.length; i++) {
  81. if(arr[i] < iBase) {
  82. left.push(arr[i]);
  83. } else {
  84. right.push(arr[i]);
  85. }
  86. }
  87. left: [18] iBase: 19, right: []
  88. 从上开始正推返回表达式:return quickSort(left即[18]).concat(iBase=19, quickSort(right即[]));
  89. 从下开始逆推返回值:return [18].concat(19, []); //合并后的数组: [18, 19]
  90.  
  91. */
  1. var arr = [23, 35, 34, 11, 22, 19, 18, 18];
  2. function quickSort(arr) {
  3. if(arr.length <= 1) {
  4. return arr;
  5. }
  6. var iBase = arr.shift();
  7. var left = [], right = [];
  8.  
  9. for(var i = 0; i < arr.length; i++) {
  10. if(arr[i] < iBase) {
  11. left.push(arr[i]);
  12. } else {
  13. right.push(arr[i]);
  14. }
  15. }
  16.  
  17. return quickSort(left).concat(iBase, quickSort(right));
  18. }
  19.  
  20. var newArr = quickSort(arr);
  21.  
  22. console.log(newArr);

附录:

进制间的转换(二进制、八进制、十进制、十六进制)

1>10进制转换为16进制:(10).tostring(16)

2>8转16:(012).tostring(16)

3>16转10:(0x).tostring(10)

4>10转2:(111111).tostring(2)

5>16转8:(0x16).tostring(8)

6>parseInt(10,2)

7>parseInt(12,16)

8>parseInt(12,8)

参数为原始类型值的转换规则:

原始类型的值主要是字符串、布尔值、undefined和null,它们都能被Number转成数值或NaN。

NaN:not a number,当数学计算得不到数字结果时,该值就是NaN(Number类型)。

isNaN:判断变量是否为NaN。


1、JavaScript 基础一  (从零学习JavaScript)

2、JavaScript 基础二 (从零学习JavaScript)


借鉴转载出处: http://www.cnblogs.com/witkeydu/

2、JavaScript 基础二 (从零学习JavaScript)的更多相关文章

  1. 1、JavaScript 基础一 (从零学习JavaScript)

    1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...

  2. Learning JavaScript with MDN & 使用 MDN 学习 JavaScript

    Learning JavaScript with MDN & 使用 MDN 学习 JavaScript Learn JavaScript with MDN 和 MDN 一起学习 JavaScr ...

  3. 零基础:如何快速学习JavaScript,html+css技术

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,但达妹今天想强调一下,学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而 ...

  4. 刘强1109 JavaScript基础二(分支与循环结构)

    [if-else结构] 1.结构的写法: if(判断条件){ 条件为true时,执行if{} } else{ 条件为false时,执行else{} } 2.注意事项: ① else{}语句块,可以根据 ...

  5. JavaScript 基础(二) - 创建 function 对象的方法, String对象, Array对象

    创建 function 对象的两种方法: 方式一(推荐) function func1(){ alert(123); return 8 } var ret = func1() alert(ret) 方 ...

  6. Javascript基础二(程序的三大结构)

    程序的三大结构: 顺序结构,选择结构,循环结构 程序的单分支结构-if语句:       当条件判断为真true时,执行花括号内的语句,如果条件为假false,跳过花括号内的语句       if(条 ...

  7. javascript基础二数据类型

    1.数据类型 javascript中的基本数据类型有4中,undefined,number,string,boolean 1.1 typeof关键字 typeof关键字可以获取一个变量的的类型.先举个 ...

  8. JavaScript 基础二

    JavaScript 事件处理程序就是一组语句,在事件(如点击鼠标或移动鼠标等)发生时执行 ●当事件之间互相影响时,需要有个先后顺序,这时我们声明一个Bool值来做约束 浏览对象: window 对象 ...

  9. JavaScript 基础(二)数组

    字符串, JavaScript 字符串就是用'' 和""括起来的字符表示. 字符字面量, \n 换行, \t 制表, \b 退格, \r 回车, \f 进纸, \\ 斜杠,\' 单 ...

随机推荐

  1. SQL Server 2012无法连接到WMI提供程序

    这篇文章主要介绍了SQL Server 2012无法连接到WMI提供程序(Cannot connect to WMI provider)解决方案,需要的朋友可以参考下 今天一位同事在启动自己工作机的S ...

  2. Java虚拟机------JVM介绍

    Java平台和语言最开始只是SUN公司在1990年12月开始研究的一个内部项目: Java的平台无关性 Java平台和语言最开始只是SUN公司在1990年12月开始研究的一个内部项目[stealth ...

  3. JEECG 上传插件升级-Online

    前言: 现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload,此 ...

  4. 关于页面缩放时css错乱的处理方法---之一

    这几天遇到一个问题,就是在做网页的时候,页面缩放时,布局就乱了,原来的样子不会跟随缩放的放大或者缩小进行改变,直接导致的后果,就是页面很难看,无法使用 之前虽然写了代码,但是一直没有注意到缩放后页面的 ...

  5. XSLT 创建CDATA节点

    创建文本结点 (1)直接写入文本: text1 (2)通过<xsl:text>创建文本结点: <xsl:text>text2</xsl:text> (3)通过< ...

  6. Mysql添加新用户遇到的一些小问题

    登陆命令:mysql -u root -p 添加本地用户:create user  'sheet'@'localhost' identified by '123456' ; 添加允许外网IP访问的用户 ...

  7. mongodb-MYSQL

    #encoding:utf8 import pymongoimport MySQLdbimport randomdef GetMongoData(): MyQuery = Mongo_Tab.find ...

  8. elasticsearch5安装

    环境: centos7 es 5.4.3 es安装 一.下载 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsear ...

  9. 394. Decode String 解码icc字符串3[i2[c]]

    [抄题]: Given an encoded string, return it's decoded string. The encoding rule is: k[encoded_string], ...

  10. eclipse中tomcat可以start启动,无法debug启动的解决

    设置断点,进行程序调试,但是debug启动tomcat,却无法启动,并且会报超时异常. 原因可能是eclipse和tomcat启动时读取文件发生冲突 去掉所有的断点,然后重新debug启动,再设置断点 ...