前端开发JS——快速入门_苏颜_前端开发者

1、js的核心标准ECMAScript

1、js的核心标准ECMAScript

       组成
     ECMAScript——>核心语法标准
     DOM————->对文档节点的操作
     BOM————->对浏览器的操作
 
2、js的注释:

2、js的注释:

         单行注释
               //注释内容
          多行注释
               /*
                    注释内容
               */
 
3、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
 
 
 
 
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
 
 
 
 
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
 
 
 
 
break
do
try
typeof 
case 
else 
break
break
do
do
try
try
typeof 
typeof 
case 
case 
else 
else 
new
var
catch 
finally
return
void
new
new
var
var
catch 
catch 
finally
finally
return
return
void
void
continue
for
switch
while
debugger
this 
continue
continue
for
for
switch
switch
while
while
debugger
debugger
this 
this 
function
 with
default
 if 
throw 
 instanceof
function
function
 with
 with
default
default
 if 
 if 
throw 
throw 
 instanceof
 instanceof
delete 
 in
 
 
 
 
delete 
delete 
 in
 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
 
 
 
 
 
         
  保留字:将来有可能成为关键字的单词如:
 
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
 
 
 
 
 
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
 
 
 
 
 
abstract    
enum           
int            
short      
boolean      
export      
abstract    
abstract    
enum           
enum           
int            
int            
short      
short      
boolean      
boolean      
export      
export      
interface      
static
byte         
extends      
long           
super      
interface      
interface      
static
static
byte         
byte         
extends      
extends      
long           
long           
super      
super      
char           
final        
native         
synchronized
class         
float           
char           
char           
final        
final        
native         
native         
synchronized
synchronized
class         
class         
float           
float           
package     
throws   
const        
goto       
private        
transient
package     
package     
throws   
throws   
const        
const        
goto       
goto       
private        
private        
transient
transient
debugger  
double      
implements
protected
volatile      
import   
debugger  
debugger  
double      
double      
implements
implements
protected
protected
volatile      
volatile      
import   
import   
public
 
 
 
 
 
public
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中变量声明会提升
4、JS的变量

4、JS的变量

         声明:用var声明变量(变量都是弱类型的)
          var a;
   var a = 12;
   var a=1, b=2, c=3; 
          变量命名规则:
          1、字母、数字、下划线、$组成
          2、数字、下划线不能开头(下划线可以开头,尽量不要使用)
          3、尽量采用驼峰式命名法
          4、不能使用关键字和保留字
  注意:尽量写完一段语句,在其后面添加分号“ ; “
 
5、数据类型:

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;

undefined类型

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

null类型

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

          number类型

boolean类型

number类型

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

NaN不能用双等去判断,因为任何值与NaN都不会相等,console.log(typeof 1/”str”);   //NaN  

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

          string类型(javascript中没有字符类型的概念)
               var a = “true”;

string类型(javascript中没有字符类型的概念)

               var a = ‘false’;
    //打印字符串的长度
    console.log(a.length);   //5
                注:和上面boolean的值和类型都是不相等的
 
     引用类型3种
          object类型   对象
               var a = {};
               var a = {‘name’: ‘zhangsan’};

object类型

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

array类型    

function类型

               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)+ 自动类型转换 
6、运算符:

6、运算符:

         ==就是判断值是否相等
         ===就是判断“值是否相等”和“类型是否相等”
7、JS特点
     1)浏览器端执行,node环境执行
     2)解释性语言
     3)弱类型语言

7、JS特点

     4)自上而下执行
 
8、运算符

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(+null);             //输出0           -null输出-0

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

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

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

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

     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、“”)

比较运算符

true == ‘true’  //false

注:只有null和null相等的,undefined和undefined相等的 undefined == null值为true,这三者才为true

逻辑运算符   

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

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

 
     非!(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

 

//对象相加
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
//对象相加
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

//对象相加var {
,
,
toString:
function(){
return
},
valueOf:
function(){
return
}
}
var
console.log(obj);
console.log(c
//strthis is a func//this is a obj

 

 
9、类型转换

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()函数(不解析八进制,可以解析十六进制)转换规则如下:

null、NaN、undefined、false、0、“”
其他类型转换string类型:

其他类型转换Boolean类型 

其他类型转换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)+ 自动类型转换 

+ 自动类型转换 

 
 
 
 
 
 
 
 
 
 
 
 
 
» 本文来自:前端开发者 » 《前端开发JS——快速入门_苏颜_前端开发者》
» 本文链接地址:https://www.rokub.com/73190.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!