前端开发JS——快速入门

1、JS的核心标准ECMAScript

       组成

     ECMAScript------>核心语法标准

     DOM------------->对文档节点的操作

     BOM------------->对浏览器的操作

 

2、JS的注释：

         单行注释

               //注释内容

          多行注释

               /*

                    注释内容

               */

 

3、JS的保留字和关键字

　　关键字：有特殊功能的单词如：

break	do	try	typeof	case	else
new	var	catch	finally	return	void
continue	for	switch	while	debugger	this
function	with	default	if	throw	instanceof
delete	in

         

　　保留字：将来有可能成为关键字的单词如：

 

abstract	enum	int	short	boolean	export
interface	static	byte	extends	long	super
char	final	native	synchronized	class	float
package	throws	const	goto	private	transient
debugger	double	implements	protected	volatile	import
public

 

4、JS的变量

         声明：用var声明变量（变量都是弱类型的）

          var a;

　　　var a = 12；

　　　var a=1, b=2, c=3;　

          变量命名规则：

          1、字母、数字、下划线、$组成

          2、数字、下划线不能开头（下划线可以开头，尽量不要使用）

          3、尽量采用驼峰式命名法

          4、不能使用关键字和保留字

　　注意：尽量写完一段语句，在其后面添加分号“ ; "

 

5、数据类型：

　  检查数据类型的关键字：typeof   例如：console.log(typeof a);    //检查变量a的类型

　  检查变量是否属于某一个数据类型：instanceof   例如：console.log(a instanceof object);
     基本数据类型5种
          undefined类型 只有一个值就是undefined值，undefined继承null
               1）声明但没有初始化的变量
                    var a；//a的值是undefined
               2）显示将undefined值赋值给一个变量
                    var a =undefined；

          null类型 空，一般用来存放一个空对象的指针，就只有一个值null      null==undefined;    //true
               var a = null；

          boolean类型
               有两个值：true、false
               var a = true；
               var a = false;

number类型

               var a = 12；

               number类型还有一个值NaN，NaN不能用双等去判断，因为任何值与NaN都不会相等，console.log(typeof 1/"str");   //NaN　　

               判断一个值是不是NaN用isNaN（变量名或者值）方法判断，他判断的是不是 不是一个数值
               number类型还有两个值：Infinity和-Infinity值，判断数值是否在数值类型范围内：isFinite()

          string类型(javascript中没有字符类型的概念）
               var a = "true";

               var a = 'false';

　　　　//打印字符串的长度

　　　　console.log(a.length);   //5

                注：和上面boolean的值和类型都是不相等的

 

     引用类型3种
          object类型   对象
               var a = {}；
               var a = {'name': 'zhangsan'}；

　　　　 console.log(a["name"])
               注：上述的name属性可以不打引号；类似于python的字典，任意数据都能存储，访问方式也类似于python
          array类型    数组    打印的时候会是一个object对象类型
               var arr = [1,2,3,4,5];
               注：类似于python的列表，任意数据都能存储
          function类型   函数
               function test（）{}

               var test = function（）{}

 

          如果函数（）；在函数定义之前，浏览器会自动将函数提升到执行函数的前面

     注：使用没有声明过的变量，编辑器会报错；如果在之后声明或者赋值只会打印undefined值，就不会报错如：

            1）console.log(c);    //这里就会报错；

            2）console.log(c);   //这里就不会报错，并且打印undefined

                 var c;      

            3）console.log(c);   //这里就会先打印undefined值

                 var c = 1;

                 console.log(c);  //之后再打印1值

                 在JS中变量声明会提升

6、运算符：

         ==就是判断值是否相等

         ===就是判断“值是否相等”和“类型是否相等”

7、JS特点
     1）浏览器端执行，node环境执行
     2）解释性语言
     3）弱类型语言

     4）自上而下执行

 

8、运算符

     1）操作运算符   +、-、*、/、%，和Java、python等高级语言的使用相同

 

     2）一元运算符   ++、--，也是和Java语言的使用相同，包含前自增/减（先做运算再使用）、后自增/减（先使用再做运算）
     +/-，可以将其他类型转换成number类型

     console.log(+'123');            //输出123      -'123'输出-123, -'-123'输出123

     console.log(+true);             //输出1

     console.log(+false);            //输出0

     console.log(+null);             //输出0           -null输出-0

     console.log(+undefined);   //输出NaN

     console.log(+'');                 //输出0

     console.log(+' ');                //输出0

 

     3）赋值运算符   =、+=、-=、*=、/=、%=
          var a = 2;
          var a += 2;   //a=a+2
         其他运算符和这个很类似

     4)比较运算符
          1 == ‘1’          //true
          true == ‘true’  //false
          1 == true            //true   
          0 == null           //false         
          注：只有null和null相等的，undefined和undefined相等的 undefined == null值为true，这三者才为true
                 
     总结：number和string看起来一样就为true；
               boolean转换为number一样，就为true；（true -> 1，false -> 0）
          如果进行运算boolean类型根据上述转换，再和number值运算
               string和boolean，即使看起来一样，也为false；
    
     5）逻辑运算符   （表示false的值有null、NaN、undefined、false、0、“”）

     总结：逻辑与和逻辑或的返回值都是跳出判断的值，即哪个操作跳出来就返回哪个操作数

 

     非！（NOT） 可以将任何类型的数据转换成boolean类型

     !!a可以看成Boolean(a),  boolean类型包装器

    

      6）三目运算符  （variable = boolean_expression ? true_value : false_value;）

          可以简化if···else···语句

　　

　　7)两者运算 m+n

　　　1、当m,n不为String,Object类型的时候，先将m,n转换为Number类型，转换Number类型可以参考类型转换知识点，然后再进行计算

　　　2、当m,n有一个为String,无论另一个操作数为何（但不为对象）都要转换为String，然后再进行拼接 

　　　3、当m,n 有一个为对象，如果该对象既重写toString,又重写了valueOf方法，先调用valueOf方法获 取返回值，将该返回值和另外一个操作数进行运算。如果该对象没有重写valueOf方法，将调用 toString方法获取返回值，将该返回值和另外一个操作数进行运算。 在打印对象时alert(obj)默认是调用toString()方法,console.log(obj)默认是调用valueOf()方法

//对象相加
var obj = {
    "name": "zhangsan",
    "age": 20,
    toString: function(){
        return "this is a obj"
    },
    valueOf: function(){
        return "this is a func"
    }
}
var c = "str"
console.log(obj);
console.log(c+obj);   //strthis is a func
alert(obj);      //this is a obj

 

9、类型转换

　　假性值：表示false的值有null、NaN、undefined、false、0、“”，这个尤为重要
     1）其他类型转换string类型：
          ①toString（）函数   另外null、undefined不能转换，其他类型都能
               var a = 12;
               a.toString();    //'12'，如果括号里有数字，就需要按照这个数字的进制来转换，例如　　a.toString(8);    //"14"
               注：number类型的具体值不可以直接调用toString（）方法，但可以用括号括起来使用，括号括起来的是大类型数据，基础数据类型没有属性和方法
          ②String()函数 任意类型都能转换
          ③字符串的拼接+

2）其他类型转换Boolean类型 
          ①Boolean()函数 任意类型都可转换
               假性值都为false，其他的值都为true
          ②非！（NOT） 可以将任何类型的数据转换成boolean类型
          !!a可以看成Boolean（a),boolean类型包装器

3）其他类型转换number类型  
          ①Number（）函数（不解析八进制，可以解析十六进制）转换规则如下：

　　　　假性值当中只有undefined是转换NaN，其他的都转换0

　　　　字符串的字面值为数字的，就直接转换，或者其前面有加号”+“，都可以直接转换

　　　　其他的都转换NaN
          ②parseInt()函数（不解析八进制，可以解析十六进制）    //如果有两个参数，第一个参数是第二个参数进制的表示，例如　　console.log(parseInt("1010", 2));   //10

                   如果第一个字符不是数字或者不是加号和减号，parseInt() 就会返回NaN，同样的，用parseInt() 转换空字符串也会返回NaN。

                   如果首位为数值，依次向后解析，找到连续的数值，直到遇到第一个非数值的，将之前获取的数值转换为Number返回

          ③parseFloat()函数（不解析八进制，也不解析十六进制）
               如果首位为数值，依次向后解析，找到连续的数值，直到遇到第一个非数值的，将之前获取的数值转换为Number返回

注：parseFloat() 所解析的字符串中第一个小数点是有效的，而parseInt() 遇到小数点会停止解析，因为小数点并不是有效的数字字符。
          parseInt和parseFloat都将null、undefined、boolean解析为NaN

注：console.log()会返回一个值里面包含的所有空格，但是返回到页面上就不会解析连续的空格

     4）+ 自动类型转换