史上最全、JavaScript基础篇

js 专栏收录该内容
9 篇文章 0 订阅

本章内容:

  • 简介
    1. 定义
    2. 注释
    3. 引入文件
  • 变量
  • 运算符
    1. 算术运算符
    2. 比较运算符
    3. 逻辑运算符
  • 数据类型
    1. 数字
    2. 字符串
    3. 布尔类型
    4. 数组
    5. Math
  • 语句
    1. 条件语句(if、switch)
    2. 循环语句(for、for in、while、do-while)
    3. label语句
    4. 异常处理
  • 函数
    1. 定义函数3种方式
    2. 函数参数(arguments)
    3. 作用域与作用链
    4. 闭包
    5. 面向对象(特性,构造模式,原型模式prototype)
    6. prototype 验证方法(isPrototypeOf、hasOwnProperty、in)
  • 其它
    1. 序列化
    2. 转义
    3. eval
    4. 正则表达式
    5. 时间处理

 

简介

定义

  javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互。

  javascript是由三部分组成:ECMAScript、DOM、BOM

  • ECMAScript由ECMA-262定义,提供核心语言功能(ECMA是欧洲计算机制造商协会)
  • DOM(Document Object Model)文档对象模型,提供访问和操作网页内容的方法和接口
  • BOM(Browser Object Model)浏览器对象模型,提供与浏览器交互的方法和接口

 

注释

JavaScript中代码注释:

  • 单行 //
  • 多行 /*  */

 

引入文件

1. 引入外部文件

1
< script  type"text/javascript" src="JS文件"></ script >

 

2. 存放在HTML的<head>或<body>中

1
2
3
< script  type"text/javascript">
     Js代码内容
</ script > 
  • HTML的head中
  • HTML的body代码块底部(推荐)

 

3. 为什么要放在<body>代码块底部?

  • HTML代码从上到下执行,先加载CSS,避免html出现无样式状态;
  • 将JavaScript代码块放在<body>最后,可以让网页尽快的呈现给用户,减少浏览者的等待时间,避免因为JS代码块阻塞网页的呈现。

 

变量

需要注意的是:局部变量必须以 var 开头申明,如果不写 var 则为全局变量

1
2
3
4
5
6
7
8
9
10
11
12
13
< script  type="text/javascript">
  
     // 全局变量
     name = 'nick';
  
     function func(){
         // 局部变量
         var age = 18;
  
         // 全局变量
         gender = "man"
     }
</ script >

注:需要注意变量提升,就是把变量位置放到函数体的最上方  

 

运算符

1. 算术运算符

一元算术
    +  一元加,数值不会产生影响 对非数值应用一元加运算时,会调用Number()转型函数对这个值进行转换
    -  一元减,转换为负数 ~
    ++  递增1 通过Number()转型为数字,再加1,再重新赋值给操作数值
    -- 递减1 ~
二元算术
    +  加法  
    -  减法  
    *  乘法  
    /  除法  
    %  取模  

 

  二元运算过程

 

2. 比较运算符

  ===  严格运算符 比较过程没有任何类型转换
  !==  严格运算符 ===的结果取反
  ==  相等运算符 如果两个操作值不是同一类型,相等运算符会尝试进行一些类型转换,然后再进行比较
  !=  不相等运算符 ==的结果取反
  >  大于运算符  
  >=  大于等于运算符  
  <  小于运算符  
  <=  小于等于运算符  

 

  严格运算符比较过程
  相等运算符比较过程
  大于小于运算符比较过程

 

3. 逻辑运算符

    !  非(两个!!表示Boolean()转型函数)

返回一个布尔值
    &&  与 两个操作都为true时返回true,否则返回false(返回值不一定是布尔值),可以多个连用(..&&..&&..)
    ||  或 两个操作都是false时返回false,否则返回true(返回值不一定是布尔值),可以多个连用(..||..||..)

 

1
2
3
4
5
6
7
8
9
10
11
//七个假值:
console.log(!!undefined);//false
console.log(!!null);//false
console.log(!!0);//false
console.log(!!-0);//false
console.log(!!NaN);//false
console.log(!!'');//false
console.log(!!false);//false
 
console.log(!!{});//true
console.log(!![]);//true
复制代码
1> 取代if语句
//前面条件成立则运行后面操作
(a == b) && dosomething();

2> 用于回调函数
//若没有给参数a传值,则a默认为undefined假值,所以不执行a()。
function fn(a){
    a && a();
}
复制代码
1> 变量设置为默认值
//如果没有向参数a传入任何参数,则将该参数设置为空对象
function func(a){
    a = a || {};
}

  

数据类型

特殊值:

  • null     表示一个空对象指针,常用来描述"空值";
  • undefined  表示变量未定义。

 

1、数字(Number)

JavaScript中不区分整数和浮点数,所有数字均用浮点数值表示。

转换:

  • parseInt(..)    将某值转换成整数,不成功则NaN
  • parseFloat(..) 将某值转换成浮点数,不成功则NaN

特殊值:

  •  NaN,非数字。可以使用 isNaN(num) 来判断。
  • Infinity,无穷大。可以使用 isFinite(num) 来判断。
Number 对数字的支持
Number.MAX_VALUE 最大数值
Number.MIN_VALUE 最小数值
Number.NaN 非数字
Number.NEGATIVE_INFINITY 负无穷大
Number.POSITIVE_INFINITY 正无穷大
Number.toExponential( ) 返回四舍五入的科学计数法,加参数为保留几位
Number.toFixed( ) 小数点后面的数字四舍五入,加参数为保留几位
Number.toPrecision( ) 四舍五入,自动调用toFixed()或toExponential()
Number.toLocaleString( ) 把数字转换成本地格式的字符串
Number.toString( ) 将数字转换成字符串
Number.valueOf( ) 返回原始数值

 

2、字符串(String)

String.length 字符串的长度
String.trim() 移除空白
String.trimLeft() 移除左侧空白
String.trimRight() 移除右侧空白
String.concat(value, ...) 拼接
String.slice(start, end) 切片
String.split( ) 分割
String.search( ) 从头开始匹配,返回匹配成功的第一个位置(g无效)
String.match( ) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个
String.replace( ) 替换,正则中有g则替换所有,否则只替换第一个匹配项;
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号
String.charAt( ) 返回字符串中的第n个字符
String.charCodeAt( ) 返回字符串中的第n个字符的代码
String.fromCharCode( ) 从字符编码创建—个字符串
String.indexOf( ) 查找子字符串位置
String.lastIndexOf( ) 查找子字符串位置
String.localeCompare( ) 用本地特定的顺序来比较两个字符串
String.substr( ) 抽取一个子串
String.substring( ) 返回字符串的一个子串
String.toLocaleLowerCase( ) 把字符串转换小写(针对地区,在不知道程序在哪个语言环境中运行时用)
String.toLocaleUpperCase( ) 将字符串转换成大写(针对地区)
String.toLowerCase( ) 小写
String.toUpperCase( ) 大写
String.toString( ) 返回原始字符串值
String.toString() 返回原始字符串值
String.valueOf( ) 返回原始字符串值
复制代码
\0 空字节
\n 换行
\t 制表
\b 空格
\r 回车
\f 进纸
\\ 斜杠
\' 单引号
\" 双引号
复制代码

 

3、布尔类型(Boolean)

true(真)和false(假)

toString() 返回Boolean的字符串值('true'或'false')
toLocaleString() 返回Boolean的字符串值('true'或'false')
valueOf() 返回Boolean的原始布尔值(true或false)

 

4、数组(Array)

1
2
var  name = Array( "nick" , "jenny" );
var  name = [ "nick" , "jenny" ];

  

Array.length 数组的大小
Array.push() 尾部添加元素
Array.pop() 删除并返回数组的最后一个元素
Array.unshift() 在数组头部插入一个元素
Array.shift( ) 在数组头部移除一个元素
Array.slice( ) 切片
Array.reverse( ) 反转
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.concat( ) 拼接
Array.sort( ) 排序
Array 对数组的内部支持
Array.splice( start, deleteCount, value, ...)

插入、删除或替换数组的元素

obj.splice(n, 0 ,val) 指定位置插入元素
obj.splice(n, 1 ,val) 指定位置替换元素
obj.splice(n, 1 )    指定位置删除元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串

 

5. Math

 Math对象是一个静态对象,而不是构造函数。实际上,Math只是一个由Javascript设置的对象命名空间,用于存储数学函数

 作用是执行普通的算数任务。

复制代码
常量

Math.E
常量e,自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。
复制代码

 

 

语句

 

1、条件语句

JavaScript中支持两个条件语句,分别是:if 和 switch。

 if 语句:

1
2
3
4
5
6
7
8
9
//if语句
 
if(条件){
  
     }else if(条件){
          
     }else{
  
     }

Switch 语句:

1
2
3
4
5
6
7
8
9
10
11
12
//switch语句,name等于nick是执行第一个case,等于第二个执行第二个case,其它执行default.
 
switch(name){
         case 'nick':
             age = 18;
             break;
         case 'jenny':
             age = 21;
             break;
         default :
             age = 0;
     }

  

 2、循环语句

JavaScript中支持四种循环语句,分别是:for、for in、while、do-while

for 循环:

1
2
3
4
5
6
var names = ["nick", "jenny"];
  
for(var i=0;i<names.length;i++){
     console.log(i);    //索引
     console.log(names[i]);
}

for in 循环:

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

while 循环: 

1
2
3
4
while(条件){
     // break;
     // continue;
}

do-while 循环:

1
2
3
4
5
6
//循环的代码至少执行一次,结果为1
 
         var num = 0;
         do {
             num++;
         }while (num>10);

  

 3. label语句

label 语句可以理解为跳出任意循环

复制代码
//输出结果为95

    <script>
        var num = 0;
        for (var i=0;i<10;i++) {
            for (var j=0;j<10;j++) {
                if (i==5 && j==5) {
                    break;
                }
                num++;
            }
        }
        console.log(num);
    </script>
复制代码
复制代码
//输出结果为55
//i和j都循环为到5时,跳出了两层循环

    <script>
        var num = 0;
        outPoint:
        for (var i=0;i<10;i++) {
            for (var j=0;j<10;j++) {
                if (i==5 && j==5) {
                    break outPoint;
                }
                num++;
            }
        }
        console.log(num);
    </script>
复制代码

 

4. 异常处理

主动跑出异常 throw Error('xxxx')

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

 

 

函数Function

 

函数定义的三种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 普通函数
     function  func(arg){
         return  true ;
     }
           
// 匿名函数
     var  func =  function (arg){
         return  "nick" ;
     }
   
// 自执行函数
     ( function (arg){
         console.log(arg);
     })( 'nick' )

  

函数参数:

函数传参的个数可以小于实际需传参的个数,没传参的默认为undefined

参数传多默认不起作用

1
2
3
4
5
6
function  man(name,age) {
     console.log(name,age);
}
man( "nick" ,18);  //nick 18
man( "nick" );     //nick undefined
man( "nick" ,18,19);   //nick 18

arguments 可接收所有参数,返回一个数组

1
2
3
4
5
6
function  man() {
     console.log(arguments);
}
man( "nick" ,18);  //["nick", 18]
man( "nick" );     //["nick"]
man( "nick" ,18,19);   //["nick", 18, 19]

  

 函数的作用域与作用域链:

 JavaScript中没有块级作用域

1
2
3
4
5
6
7
8
9
10
11
12
         var  name =  'nick' ;
         ( function  Main(){
             console.log(name); //undefined
             if (1){
                 var  name =  'jenny' ;
             }
             console.log(name); //jenny
         })();
         console.log(name); //nick
 
//输出结果第一个为undefined
//声明需提前(Hoisting),在JavaScript引擎“预编译”时进行,函数在被执行之前,会将其中的变量全部声明,而不赋值

作用域链

每个构造函数都有一个内部对象指针,指向原型对象,而原型对象也包含一个指向构造函数的指针。如此层层递进,形成作用域链条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
         var  name =  'nick' ;
         function  Main() {
             function  F1(){
                 var  name =  'jenny' ;
                 console.log(name); //jenny
             }
             function  F2() {
                 console.log(name); //nick
             }
             F1();
             F2();
         }
         Main();
 
// 从内到外的优先级寻找
// F2() 的作用域链为 F2()-->Main()

  

 闭包:

闭包就是能够读取其他函数内部变量的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
         function  f1(){
          var  n=1;
         Add= function (){
                     n++;
                 };
          function  f2(){
          console.log(n);
         }
          return  f2;
         }
        var  result=f1();
       result();  //1
       Add();
       result();  //2
 
//result就是闭包f2函数
//函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除

闭包使函数中的变量都被保存在内存中,内存消耗大,所以少用闭包,否则会造成网页的性能低,在IE中可能导致内存泄露。

所以在退出函数之前,将不使用的局部变量全部删除。

 

 面向对象

 面向对象的三大特性:
  封装:隐藏代码实现的细节,实现代码的模块化
  继承:扩展已经存在的代码模块,实现代码重用
  多态:接口的不同实现方式,实现接口重用

 关键字:

    this  代指此时的对象

    new  创建对象时必须使用

 

构造函数模式:

1
2
3
4
5
6
7
8
9
10
11
function  Foo (name,age) {
     this .Name = name;
     this .age = age;
     this .Func =  function  () {
         return  this .Name +  this .age
     }
}
var  obj =  new  Foo( "nick" ,18);
var  ret = obj.Func();
console.log(ret);
var  obj2 =  new  Foo( "jenny" ,21);

上述模式把同样的函数封装到了不同对象,造成了内存浪费。

 

原型模式(prototype):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function  Foo(name,age) {
     this .Name = name;
     this .Age = age;
}
Foo.prototype = {
     GetInfo:  function  () {
         var  str =  " is good" ;
         return  this .Name + str;
     },
     Func:  function  () {
         return  this .Name +  this .Age;
     }
};
var  obj =  new  Foo( "nick" ,18);
console.log(obj.Name); //nick
console.log(obj.Age); //18
var  ret = obj.GetInfo();
console.log(ret); //nick is good
var  ret2 = obj.Func();
console.log(ret2); //nick18
var  obj2 =  new  Foo( "nick" ,18);

所有的构造函数的prototype属性都指向另一个对象(同一块内存地址),这个对象的所有属性和方法,都会被构造函数的实例继承。

 

 

 Prototype模式的验证方法

 

1.  isPrototypeOf() 

用来判断一个对象是否存在于另一个对象的原型链中

1
2
3
4
Foo.prototype.isPrototypeOf(obj)
true
Foo.prototype.isPrototypeOf(obj2)
true

  

 2.  hasOwnProperty()

 用来判断某一个对象(不包括原型链)是否具有指定属性。

1
2
3
4
obj.hasOwnProperty( 'Name' )
true
obj.hasOwnProperty( 'Age' )
true

  

 3. in运算符

 判断某个实例是否具有某个属性

1
2
3
4
'Name'  in  obj
true
'Age'  in  obj
true

  

 

 其它

 

1、序列化

  • JSON.stringify(obj)   序列化
  • JSON.parse(str)        反序列化

2、转义

  • decodeURI( )                   URl中未转义的字符
  • decodeURIComponent( )   URI组件中的未转义字符
  • encodeURI( )                   URI中的转义字符
  • encodeURIComponent( )   转义URI组件中的字符
  • escape( )                         对字符串转义
  • unescape( )                     给转义字符串解码
  • URIError                         由URl的编码和解码方法抛出

3、eval

JavaScript中的eval既可以运行代码也可以获取返回值

1
2
a = eval( '1+1' );
console.log(a);  //2
  • eval() 
  • EvalError   执行字符串中的JavaScript代码

4、正则表达式

1
2
3
var  p = /nick/g;
console.log(p.test( 'nickjennynick' ));  // true
console.log(p.exec( 'nickjennynick' ));  // ["nick", index: 0, input: "nickjennynick"]

JavaScript中支持正则表达式,其主要提供了两个功能:

  • test(string)     用于检测正则是否匹配
  • exec(string)    用于获取正则匹配的内容

匹配模式:

  g:表示全局(global)模式,匹配所有字符串,不会匹配到第一项时停止

  i:表示不区分大小写(case-insensitive)模式

  m:表示多行(multiline)模式,到达一行文本末尾时还会继续查找下一行中是否存在匹配的项

括号分组:

1
2
console.log(/(n)(i)ck/.exec( 'nickjenny' ));  // console.log(/(n)(i)ck/.exec('nickjenny'))
console.log(/(n)(i)ck{2}/.exec( 'nickkjenny' ));  // ["nickk", "n", "i", index: 0, input: "nickkjenny"]
复制代码
元字符         名称              匹配对象
.             点号              单个任意字符(除回车\r、换行\n、行分隔符\u2028和段分隔符\u2029外)
[]            字符组             列出的单个任意字符
[^]           排除型字符组        未列出的单个任意字符
?             问号               匹配0次或1次
*             星号               匹配0交或多次
+             加号               匹配1次或多次
{min,max}     区间量词           匹配至少min次,最多max次
^             脱字符             行的起始位置
$             美元符             行的结束位置
|             竖线               分隔两边的任意一个表达式
()            括号               限制多选结构的范围,标注量词作用的元素,为反向引用捕获文本
\1,\2...      反向引用            匹配之前的第一、第二...组括号内的表达式匹配的文本
复制代码
\d     数字,等同于[0-9]
\D     非数字,等同于[^0-9]
\s     空白字符
\S     非空白字符
\w     字母、数字、下划线,等同于[0-9A-Za-z_](汉字不属于\w)
\W     非字母、数字、下划线,等同于[^0-9A-Za-z_]

 

5、时间处理

时间操作中有两种时间:

  • 时间统一时间
  • 本地时间(东8区)
复制代码
Date    操作日期和时间的对象
Date.getDate( )    返回一个月中的某一天
Date.getDay( )    返回一周中的某一天
Date.getFullYear( )    返回Date对象的年份字段
Date.getHours( )    返回Date对象的小时字段
Date.getMilliseconds( )    返回Date对象的毫秒字段
Date.getMinutes( )    返回Date对象的分钟字段
Date.getMonth( )    返回Date对象的月份字段
Date.getSeconds( )    返回Date对象的秒字段
Date.getTime( )    返回Date对象的毫秒表示
Date.getTimezoneOffset( )    判断与GMT的时间差
Date.getUTCDate( )    返回该天是一个月的哪一天(世界时)
Date.getUTCDay( )    返回该天是星期几(世界时)
Date.getUTCFullYear( )    返回年份(世界时)
Date.getUTCHours( )    返回Date对象的小时字段(世界时)
Date.getUTCMilliseconds( )    返回Date对象的毫秒字段(世界时)
Date.getUTCMinutes( )    返回Date对象的分钟字段(世界时)
Date.getUTCMonth( )    返回Date对象的月份(世界时)
Date.getUTCSeconds( )    返回Date对象的秒字段(世界时)
Date.getYear( )    返回Date对象的年份字段(世界时)
Date.parse( )    解析日期/时间字符串
Date.setDate( )    设置一个月的某一天
Date.setFullYear( )    设置年份,也可以设置月份和天
Date.setHours( )    设置Date对象的小时字段、分钟字段、秒字段和毫秒字段
Date.setMilliseconds( )    设置Date对象的毫秒字段
Date.setMinutes( )    设置Date对象的分钟字段和秒字段
Date.setMonth( )    设置Date对象的月份字段和天字段
Date.setSeconds( )    设置Date对象的秒字段和毫秒字段
Date.setTime( )    以毫秒设置Date对象
Date.setUTCDate( )    设置一个月中的某一天(世界时)
Date.setUTCFullYear( )    设置年份、月份和天(世界时)
Date.setUTCHours( )    设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时)
Date.setUTCMilliseconds( )    设置Date对象的毫秒字段(世界时)
Date.setUTCMinutes( )    设置Date对象的分钟字段和秒字段(世界时)
Date.setUTCMonth( )    设置Date对象的月份字段和天数字段(世界时)
Date.setUTCSeconds( )    设置Date对象的秒字段和毫秒字段(世界时)
Date.setYear( )    设置Date对象的年份字段
Date.toDateString( )    返回Date对象日期部分作为字符串
Date.toGMTString( )    将Date转换为世界时字符串
Date.toLocaleDateString( )    回Date对象的日期部分作为本地已格式化的字符串
Date.toLocaleString( )    将Date转换为本地已格式化的字符串
Date.toLocaleTimeString( )    返回Date对象的时间部分作为本地已格式化的字符串
Date.toString( )    将Date转换为字符串
Date.toTimeString( )    返回Date对象日期部分作为字符串
Date.toUTCString( )    将Date转换为字符串(世界时)
Date.UTC( )    将Date规范转换成毫秒数
Date.valueOf( )    将Date转换成毫秒表示
复制代码
  • 1
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值