前端之JavaScript篇

一. 简介

  javascript是一门动态弱类型的解释性编程语言, 增强页面动画效果,实现页面与用户之间实时动态的交互.  JavaScript有三部分组成: ECMAscript, DOM, BOM

  ECMAScript是由ECMA-262定义,提供核心语言功能(ECMA是欧洲计算机制造商协会)

  DOB(Document Object Model)文档对象模型,提供访问和操作网页内容的方法和接口

  BOM(Browser Object Model)浏览器对象模型,提供与浏览器交互的方法和接口

二. 注释

  JavaScript中代码的注释:

  单行: //

  多行: /**/

三. 引入文件

  1. 引入外部文件

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

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

<script type="text/javascript">
    Js代码内容
</script> 

  HTML的head中

  HTML的body代码块底部(推荐)

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

  HTML代码从上到下执行,先加载css, 避免HTML出现无样式状态;

  将Javascript代码放在<body>最后,可以让网页尽快的呈现给用户,减少浏览者的等待时间,避免因为js代码块阻塞网页的呈现

四. 变量

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

<script type="text/javascript">
  
    // 全局变量
    name = 'yangpan';
  
    function func(){
        // 局部变量
        var age = 18;
  
        // 全局变量
        gender = "man"
    }
</script>

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

五. 运算符

一元算术
    +  一元加,数值不会产生影响 对非数值应用一元加运算时,会调用Number()转型函数对这个值进行转换
    -  一元减,转换为负数 ~
    ++  递增1 通过Number()转型为数字,再加1,再重新赋值给操作数值
    -- 递减1 ~
二元算术
    +  加法  
    -  减法  
    *  乘法  
    /  除法  
    %  取模  
1> 如果其中一个操作数是对象,则对象会转换为原始值:日期对象通过toString()方法执行转换,其他对象通过valueOf()方法执行转换。如果结果还不是原始值,则再使用toString()方法转换
2> 在进行了对象到原始值的转换后,如果其中一个操作数是字符串的话,另一个操作数也会转换成字符串,进行字符串拼接
3> 两个操作数都将转换成数字或NaN,进行加法操作

  比较运算符:

 ===  严格运算符 比较过程没有任何类型转换
  !==  严格运算符 ===的结果取反
  ==  相等运算符 如果两个操作值不是同一类型,相等运算符会尝试进行一些类型转换,然后再进行比较
  !=  不相等运算符 ==的结果取反
  >  大于运算符  
  >=  大于等于运算符  
  <  小于运算符  
  <=  小于等于运算符  
1> 如果两个值类型不同则返回false
2> 如果两个值类型相同,值相同,则返回true,否则返回false
3> 如果两个值引用同一个对象,则返回true,否则,返回false
console.log([] === []);//false
console.log({} === {});//false
var a = {};
b = a;
console.log(a === b);//true
对象类型和原始类型比较:
1> 对象类型会先使用valueOf()转换成原始值,如果结果还不是原始值,则再使用toString()方法转换,再进行比较(日期类只允许使用toString()方法转换为字符串)
2> 在对象转换为原始值之后,如果两个操作数都是字符串,则进行字符串的比较
3> 在对象转换为原始值之后,如果至少有一个操作数不是字符串,则两个操作数都将通过Number()转型函数转换成数字进行数值比较

注:如果一个值是null,另一个值是undefined,则返回true;
console.log(null == undefined);//true
如果一个值是null,另一个值是0,则返回tfalse;
console.log(null == 0);//false
空字符串或空格字符串会转成0
console.log(null == []);//false
console.log(null == '');//false
console.log([] == ' ');//false,相当于'' == ' '
console.log([] == '');//true,相当于'' == ''
console.log(0 == '');//true
数字和字符串比较:
1> 如果操作值是对象,则这个对象将先使用valueOf()转换成原始值,如果结果还不是原始值,则再使用toString()方法转换
2> 在对象转换为原始值之后,如果两个操作数都是字符串,则按照unicode字符的索引顺序对两个字符串进行比较
3> 在对象转换为原始值之后,如果至少有一个操作数不是字符串,则两个操作数都转换成数字进行比较
console.log('B' > 'a');//false
console.log('b' > 'a');//true
console.log(9 > '2');//true

  逻辑运算符

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

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

六. 数据类型

  特殊值:

  • 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( ) 返回原始字符串值

  3、布尔类型(Boolean)

   true(真)和false(假)

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

  4、数组(Array)

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( ) 将数组转换成一个字符串

七. 语句

  1、条件语句

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

   if 语句:

//if语句
 
if(条件){
  
    }else if(条件){
          
    }else{
  
    }

  Switch语句:

//switch语句,name等于panshao是执行第一个case,等于第二个执行第二个case,其它执行default.
 
switch(name){
        case 'panshao':
            age = 18;
            break;
        case 'je':
            age = 21;
            break;
        default :
            age = 0;
    } 

   2、循环语句

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

  for 循环:

var names = ["panshao", "json"];
  
for(var i=0;i<names.length;i++){
    console.log(i);    //索引
    console.log(names[i]);

  for in 循环:

var names = ["panshao", "tank"];
 
for(var index in names){
    console.log(index);
    console.log(names[index]);
}

  while循环:

while(条件){
    // break;
    // continue;
}

八. 函数function

  函数定义的三种方式:

// 普通函数
    function func(arg){
        return true;
    }
           
// 匿名函数
    var func = function(arg){
        return "nick";
    }
   
// 自执行函数
    (function(arg){
        console.log(arg);
    })('nick')

  函数参数:

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

  参数传多默认不起作用

function man(name,age) {
    console.log(name,age);
}
man("panshao",18); //panshao 18
man("panshao");    //panshao undefined
man("panshao",18,19);  //panshao 18 

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

function man() {
    console.log(arguments);
}
man("panshao",18); //["panshao", 18]
man("panshao");    //["panshao"]
man("panshao",18,19);  //["panshao", 18, 19]

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

  JavaScript中没有块级作用域

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

  作用域链

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

var name = 'panshao';
        function Main() {
            function F1(){
                var name = 'tank';
                console.log(name);//tank
            }
            function F2() {
                console.log(name);//panshao
            }
            F1();
            F2();
        }
        Main();
 
// 从内到外的优先级寻找
// F2() 的作用域链为 F2()-->Main()

九. 面向对象 

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

   关键字:

    this  代指此时的对象

    new  创建对象时必须使用

  构造函数模式:

function Foo (name,age) {
    this.Name = name;
    this.age = age;
    this.Func = function () {
        return this.Name + this.age
    }
}
var obj = new Foo("panshao",18);
var ret = obj.Func();
console.log(ret);
var obj2 = new Foo("tank",21);

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

  正则表达式

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

    test(string)     用于检测正则是否匹配

    exec(string)    用于获取正则匹配的内容

  匹配模式:

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

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

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

十. 时间处理

  时间操作中有两种时间:

    时间统一时间

    本地时间(东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转换成毫秒表示
生前无需久睡,死后自会长眠,努力解决生活中遇到的各种问题,不畏将来,勇敢面对,加油,你是最胖的,哈哈哈
原文地址:https://www.cnblogs.com/panshao51km-cn/p/11522455.html