js基础

 

1、分类

ECMAScript  js基本语法与标准
DOM         Document Object Model文档对象模型
BOM         Browser Object Model浏览器对象模型

    tips：DOM和BOM都是一套API（Application programing interface）

2、注释方式

style   /*  */
body    <!-- --!>
script  //
        /* */
        /**
        *   js说明文档注释
        */

3、简单指令

alert("");          提示框；
confirm("");        确认框，点击后会响应返回true或false；             
prompt();           弹出一个输入框；
document.write("");
console.log("");    在控制台打印相应的信息；
console.dir("");    在控制台打印出该对象的所有信息；

4、变量命名

数字（0-9）、字母（a-z，A-Z）、下划线（_）；
    tips:应避免保留字和关键字；

5、NaN和isNaN

isNaN(number),如果number不是数字，则为true；
Number(number),在转换为数字类型时，若number不是数字，则返回NaN；

6、转义字符

\       
\r  回车
\n  空格
\t  缩进
\\  反斜杠

7、逻辑短路、逻辑中断

true || 6;      逻辑或短路，左边为ture返回右值；
6   &&  true;   逻辑与短路，左边false返回右值；

8、优先级

    * / %
    +   -
    &&
    ||
    ?
tips：自上而下优先级越来越高

9、类型转换（type）

parseInt("12a3");   转为数字，尝试强转；
parseFloat("123.123");

data.toString();
String(data);

    tips:变量声明未赋值，其值为undefined；
        对象为空，其值为null；

---

10、三元表达式

eg  :   a>b?a=1:a=2;

格式:
    判断条件？true的时候执行的操作：false的时候执行的操作；

11、数组Array

（1）、定义法
    构造函数：
            var arr = new Array("123","abc","xxx");
    字面量：
            var arr = ["123","646","abc"]; 
    数组长度：
            var arr = new Array(6);(数组长度为6)；
（2）、赋值
    arr[0]=1;

12、形参和实参

定义函数时，function funcA(a,b,c){}，其中的a、b、c即为形参；
调用函数时，funcA(1,2,3);其中的1、2、3即为实参；

tips：function里面有一个arguments对象，里面存有所有传进函数的实参；

---

13、函数function

（1）、函数命名
    1、  可以使用字符、数字、下划线、$；
    2、  不能以数字开头；
    3、  不能使用关键字和保留字；
    4、  区分大小写；

    5、  建议要有意义 --  动词+名字结构；
    6、  驼峰命名法；
    7、  函数名不能重名，后面写的重名函数会把前面写的函数给覆盖掉；

（2）、函数的返回值
返回值：
    当函数执行完毕之后，所得到的结果就是一个函数返回值
    任意函数都有返回值

1、  在函数内部没有显示的写有return的时候，函数的返回值是undefined；
2、  当函数内部有return，但是return后面没有跟着任何内容或者数据的时候，
函数的返回值是undefined，并且return后面的代码不会执行；
3、  当return后面跟着内容或者数据的时候，函数的返回值就是这个跟着的内容或者数据；


（3）、函数的四种形式：
    1、没有参数，没有return；
            通常在于封装一段过程；
    2、没有参数，有return；
            通常用于内部封装引用其他函数（闭包，回调）；
    3、有参数，没有return；
            通常用于执行操作的封装；
    4、有参数，有return；
            常见形式；

（4）、匿名函数
    匿名函数的name属性值为anonymous；
    函数仅用一次的情况，即用即废；

    eg:
        setTimeout(function(){
            console.log(this.name);
        },1000);
    tips:在1秒后在控制台打印出本函数的名称；

（5）、回调函数
    在一个函数当中，另一个函数作为参数传入该函数中，另一个的这个函数即为回调函数；
    eg:
        function atack(callback){
            return callback;
        }
    tips:在调用该函数时，指定callback是哪个函数；
        atack（func）；

（6）、短路运算
    作用：防止传入函数的数据不足，造成无法运行；
    eg：
        function getResult(a,b,fn) {
            fn && fn();
        }（通常使用逻辑与的短路来决定是否执行回调函数；）

        function getResult_2(a,b){
            a || 0;
        }（通常用逻辑或的短路来防止实参不足的情况，强行赋值；）

（7）、自执行函数
    （function func2(){

    }）()

    tips:在函数定义的结束最后写入一个（），该函数定义完成后直接被调用执行；

（8）、递归
    在函数执行的最后再一次的调用自身；

    tips:递归是一种非常耗资源的做法，通常为了简化运算，还会结合缓存进行；
    并且注意，递归必须要有结束判断条件（if），否则该函数被调用后就是死循环；

14、数据类型

（1）、简单数据类型
    string、number、boolean

（2）、复杂数据类型
    String、Number、Boolean、Array、Math、Date、Obeject、function、RegExp(正则表达式)

（3）、空数据类型
    * Null  ---→Null的数据类型会返回一个Object
    * undifined

    tips：用typeof可以进行判断数据类型；

    tips：定义的简单数据类型变量，其数据保存在变量中；
        而复杂数据类型，其变量保存的是数据所在的内存地址；

15、内置对象

Array、Date、Math、String；

16、（Math）数学对象

向上取整        Math.ceil(number);
向下取整        Math.floor(number);

四舍五入        Math.round(number);

求多个数字之间的最大值     Math.max();
求多个数字之间的最小值     Math.min();

求x的y次幂      Math.pow(x,y);

求正弦值            Math.sin(x);
    example:
        求一个角度的正弦值，要求x必须是一个额弧度值
        角度和弧度的转换公式：
            弧度 = 角度 * 2 * Math.PI / 360;

        Math.sin(30*2*Math.PI/360)

Math.abs(x);    得到一个数字的绝对值

17、（Array）数组对象

（1）、arr1.concat(arr2);
        数组拼接，结果为将arr2拼接到arr1的最后；

（2）、arr.join()；
        数组字符串输出，括号内可以指定元素连接的符号；
        eg:
            arr=["a","b","c","d"];
            console.log(arr.join("|"));     (结果为"a|b|c|d")

（3）、arr.pop();
        切除数组的最后一个元素，返回值为该元素；

（4）、arr.slice(start,end)
        获取，获取数组的指定片段，start必须有，如果参数为负数则从末尾开始选取；
        返回值为该片段组成的，一个新的数组；

（5）、arr.push
        添加，用于向数组的末尾添加新的元素，参数可以是多个；
        返回值为数组的新长度；

（6）、arr.splice
        1、用于向数组中指定的索引添加元素；
            arr.splice(2, 0, "William","asdfasdf");
                在第2个元素开始，删除的元素个数（可以为0，为0到结尾），
                加入元素为"William"、"asdfasdf"；

        2、用于替换数组中的元素；
            arr.splice(2,1,"William")；          

        3、用于删除数组中的元素；
             arr.splice(2,2);

（7）、arr.indexOf(element);
        查找，在数组中查找element，返回值为索引，如果没有该元素返回-1；

（8）、arr.sort(function);
        排序，function为一个函数；
            eg:
                function sortNumber(a,b){
                    return a-b;
                }
                arr.sort(sortNumber);(从小到大排序)

    tips：如果a-b改成b-a，那么执行的操作为从大到小；
    tips:字符串对象（String）的方法与Array的方法类似；

18、（Date）日期对象

date.getTime()
date.getMilliseconds()
date.getSeconds()
date.getMinutes()
date.getHours()
date.getDay()
date.getDate()
date.getMonth()
date.getFullYear()

tips:很多，查文档

19、（String）对象

charAt(index)
str[index]          获取字符串指定位置的字符

concat()        拼接字符串
---------------------------
slice(start,end)/
substring(start,end)    截取从start开始，end结束的字符，
                返回一个新的字符串，若start为负数，那么从最后一个字符开始；

substr(start,length)    截取从start开始，length长度的字符，得到一个新的的字符串
---------------------------

indexOf(char)       获取指定字符第一次在字符串中的位置
lastIndexOf(char)   获取指定字符最后一次出现在字符串中的位置

trim()      去除字符串前后的空白
---------------------------
toUpperCase()
toLocaleUpperCase()     转换为大写

toLowerCase()
toLocaleLowerCawse()    转换为小写
---------------------------

replace()       替换字符
split()         分割字符串为数组

20、自定义对象

对象：无序属性的集合；
    特征：属性（key）；
    行为：方法（value）；

js是基于对象的弱类型语言；

继承：基于类，子类可以从父类得到的特征；    

工厂模式：定义一个function构造函数，作为对象，要创建对象直接调用该构造函数，加new关键字；

构造函数：定义对象的函数，里面存有该对象拥有的基本属性和方法；
    命名首字母大写，this会自动指代当前对象；

访问对象属性：
    obj[key];
    obj.key;

遍历对象：
    for(key in obj){
        key         为属性名；
        obj[key]    为属性值（value）；
    }

21、JSON

{
   "name" : "李狗蛋",
   "age" : 18,
   "color" : "yellow"
}

1、  所有的属性名，必须使用双引号包起来；
2、  字面量侧重的描述对象，JSON侧重于数据传输；
3、  JSON不支持undefined；
4、  JSON不是对象，从服务器发来的json一般是字符串，
通过JSON.parse(jsonDate.json)可以将其转换成js对象；

22、JS解析

（1）、作用域
全局作用域：整个代码所有地方都可以调用；
局部作用域：在函数内部声明的变量，只可以在函数内部使用；

（2）、变量提升和函数提升
预解析：在解析的时候，var和function都会被提升到代码的最顶端；
    但是赋值操作不会被提升，定义和函数才会被提升；
    if里面的变量定义也会被提升，但是赋值操作不会；

23、其他细节（tips）

(1)、元素由对象组成的数组进行排序
    eg：
        var data = [
            {title: "老司机", count: 20},
            {title: "诗人", count: 5},
            {title: "歌手", count: 10},
            {title: "隔壁老王", count: 30},
            {title: "水手", count: 7},
            {title: "葫芦娃", count: 6},
        ];
            //该数组的元素都为对象。我们需求为根据count的值给数组重新排序。
            //解决方案：使用sort方法，对传入的函数做手脚。

        function sortArr(a,b){
            return a.count > b.count;   
        }
        data.sort(sortArr);

            //原本的a和b的比较方法变成a.count和b.count；
            //原本的比较方法可以参见17，数组对象
            //至此，data将以count值从小到大排列。

    tips:Array对象的sort方法传入的为比较函数，比较函数里return排序比较的方法；
        原始的sort方法传入的函数内部return的值为a>b，
        通过修改sort传入的函数，可以实现对元素为对象的数组的排序！

 

 

 

1.JavaScript：基于对象和事件驱动的脚本语言。嵌入到html中用。后缀名：.js

2.JavaScript的作用：
    2.1：交互性：表单验证，异步请求。
    2.2：与平台无关性：只需要浏览器解析，与平台无关。
    2.3：安全性：不能直接访问本地磁盘。

3.JavaScript的组成部分：ECMAScript(JS基础),DOM，BOM。
 

4.JavaScript的特点：需要浏览器解析，是一种弱类型语言。
 

5.页面引入JavaScript的三种方式：
5.1：行内引入：

eg:<!--行内引入Js-->

   <input type="button" value="点我试试"                                                                          οnclick="javaScript:alert('再点一下试试')" />

 

5.2：内部引入:

   eg:<!--内部js-->

<script type="text/javascript">

alert("这是一个内部Js");

    </script>

 

5.3：外部引入

 eg:<!--引入外部js-->

<script type="text/javascript" src="js/1.js" ></script>

 

6.JavaScript基础语法：
6.1：js输出

eg:/*Js在html的body中输出*/

document.write("Hello Js");

 

/*弹出一个窗体输出*/

alert("Hello js2");

 

/*在控制台输出*/

   console.log("Hello js3");

6.2:js数据类型:number,string,boolean,undefined,null

6.4:判断变量的类型:type 变量名

6.5:js中判断值是否是非数字不考虑变量数据类型:isNaN(变量)

6.6:==和===

==;在js中,比较是2个变量的值,不考虑数据类型

===在js中,比较的是2个变量的数据类型和值

6.7js中表示false:"",null,undefined,false,NaN,0

7.js中数组的使用：像Java中的集合和数组中合体。
7.1：数组的声明：四种方式

eg://声明数组

var arr1=[1,7,9,11];

 

var arr2=new Array();

arr2[0]=33;

arr2[1]=11;

 

var arr3=new Array(3);

arr3[0]=33;

arr3[1]=11;

arr3[2]=55;

arr3[3]=22;

 

   var arr4=new Array(88,22,66);

 

7.2：向数组中添加元素：三种方式

eg://向数组中添加元素

arr4[3]=77;

//向数组的末尾添加元素

arr4.push(11,33);

//向数组的开头或结尾添加元素

arr4.unshift(44,55);

 

7.3：删除数组中的元素：四种方式

eg://删除数组中最后一个元素

arr4.pop();

//删除数组中第一个元素

arr4.shift();

//删除数组中所有的元素

     arr4.length=0;

   //删除数组中指定位置的元素

delete arr4[4];

 

7.4:修改数组中的元素:两种方式

//删除数组中的元素，再添加新元素（替换数组中元素）

arr4.splice(2,3,99,33);//第一个参数删除起始位置，第二个参数删除，第三个参数                                                                        开始添加的新元素

//修改数组中元素

     arr4[0]=66;

 

7.5：给数组排序：数据名.sort();

8.流程控制语句：if结构，if-else结构，多重if结构，嵌套if结构，switch结构，while循环，

do-while循环，for循环与java中的使用方式一样。

break和continue,return与java中的使用方式一样。

8.1：for-in与Java中的增强版的for不一样：

eg:/*for-in:遍历普通数组，遍历索引*/

var arr1=[1,5,2,4,6];

for(var i in arr1){

document.write(i+"<br/>");

}

 

/*for-in:遍历Json对象,遍历的是对象的属性*/

var ob1={"sname":"肖宁","sage":18,"sex":"中"};

for(var i2 in ob1){

document.write(i2+"<br/>");

}

 

/*for-in:遍历Json对象数组,遍历的是索引*/

var ob2=[{"sname":"肖宁","sage":18,"sex":"中"},{"sname":"洪伟坚","sage":17,"sex":"母"},{"sname":"容海波","sage":99,"sex":"女"}];

for(var i3 in ob2){

document.write(i3+"<br/>");

}

 

9.Js中函数：相当于Java中的方法。函数不调用不执行。

9.1:声明语法：function 函数名(【参数列表】){

函数体；

【return 变量；】

 }

 

函数调用语法：  函数名(【参数列表】);

eg:/*无参无返回值的函数*/

function show1(){

alert("这是一个无参无返回值的函数");

}

 

/*有参无返回值的函数*/

function show2(a,b){

alert("这是一个有参无返回值的函数,参数为："+a+","+b);

}

 

/*无参有返回值的函数*/

function show3(){

alert("这是一个无参有返回值的函数");

return "哈哈";

}

 

/*有参有返回值的函数*/

function show4(a,b){

alert("这是一个有参有返回值的函数");

return a+b;

}

 

<input type="button" value="调用无参无返回值方法" οnclick="show1()"/>

<input type="button" value="调用有参无返回值方法"

οnclick="show2(1,2)"/>

<input type="button" value="调用无参有返回值方法"                                                                                                                                 οnclick="javascript:alert(show3())"/>

      <input type="button" value="调用有参有返回值方法"                                                                                                 οnclick="javascript:alert(show4(11,22))"/>

 

9.2:在Js中不能出现重载函数，原因javascript是一种弱类型的语言。参数列表无法区分数据                        类型。

 

9.3：匿名函数：

声明语法：var 变量名=function(【参数列表】){

 函数体；

 【return 返回值；】

   }

调用语法：变量名(【参数列表】);

eg:/*匿名函数*/

var f=function(num1,num2){

alert("这是一个匿名函数，参数为："+num1+","+num2);

     }

 

<input type="button" value="调用匿名方法" οnclick="f(3,4)"/>

 

9.4：系统函数：

 parseInt()：试图将其收到的任何输入值转换成整数类型，转换失败则返回NaN，无论成功或失败，最后数据都是number.将数值部分能                                        转，不能转不要。

parseFloat()：同上类似

eg:var num1="1a23";

   num1=parseInt(num1);

 

   var num2="3.14";

   num2=parseFloat(num2);

isNaN()：判断是否为非数字

isFinite()：如果 number 是有限数字（或可转换为有限数字），那么返回 true。否则，如果 number 是 NaN（非数字），或者是正、负                    无穷大的数，则返回 false。

      eg:document.write(isFinite(num4));

eval()：会将其输入的字符串当作javascript代码来执行

eg://将String类型当作Javascript执行

eval("alert('你好')");

//将String类型转换为JavaScript对象

var s1="{'sname':'张三','age':18}";

document.write(typeof s1);

document.write("<br/>");

var ob=eval("("+s1+")");

document.write(typeof ob);

document.write("<br/>");

  document.write(ob.sname+","+ob.age);

 

李老师讲的:

/* 类似java的可变参数的用法，来实现重载*/

function add(){

//console.log("-----------"+arguments.length);

var sum = 0;

for(var i=0;i<arguments.length;i++){

sum += arguments[i];

}

return sum;

}

 

//另外一种函数实现的方式：  类似匿名内部类方式

 

 

add2 = function(){

console.log("另外一种重要函数实现");

}

 

add2();  //注意：这是函数实现，调用部分一定要写后面，否则调用不到

 

第二点:

<script>

 

//parseInt: 将数字字符串转换为整数

var a = "99";

a = parseInt(a);

console.log(a);  //99

console.log(typeof a);  //number

 

a = "99感冒灵";

a = parseInt(a);  //会将前面能转的转出来

console.log(a);  //99 

console.log(typeof a);  //number

 

a = "感冒灵99";

a = parseInt(a); //前面非数字，无法转--NaN

console.log(a);  //NaN

console.log(typeof a);  //number

 

//a = "99";

a = "3.14";

console.log(parseInt(a));  //99  number   3

console.log(parseFloat(a));  //99  number  3.14

 

//---扩展----

console.log(parseInt("13",5));  //8   5进制的“13”转10进制输出

console.log(parseInt("13",8));  //11  8进制的“13”转10进制输出

console.log(parseInt("13",9));  //12  9进制的“13”转10进制输出

 

//判断是否为非数字： isNaN

console.log(isNaN(NaN));   //true

console.log(isNaN(11));    //false   是数字

console.log(isNaN("abc")); //true

console.log(isNaN("123"))  //false   是数字

 

//isFinite()：判断输入的是否是一个既非Infinity也非NaN的数字

console.log(isFinite(NaN));       //false

console.log(isFinite(Infinity));  //false

console.log(isFinite("123"));     //true

console.log(isFinite("abc"));     //false

console.log(isFinite(11));        //true

//eval()：会将其输入的字符串当作javascript代码来执行

eval("var num = 5;alert(num);");

//应用场景： 在数据传输时有作用---json

 

</script>