你只怕不精晓的豆蔻年华部分JavaScript,JavaScript基本功知识收拾

时间: 2019-05-13阅读: 194标签: 基础1 什么是JavaScript

一、简介

JavaScript一种直译式脚本语言,一种基于对象和事件驱动并具有安全性的客户端脚本语言;

这里记录一下以前学习各种书籍和文章里边出现的JS的小技巧,分享给大家,也供自己查阅,同时感谢那些发现创造和分享这些技巧的前辈和大牛们。

概述:

也是一种广泛应用客户端web开发的脚本语言。

图片 1

  JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分(通俗的讲就是浏览器),广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

简单地说,JavaScript是一种运行在浏览器中的解释型的编程语言。

1、遍历一个obj的属性到数组

JavaScript 组成:

2 JavaScript的基本结构

var a=[];for(a[a.length] in obj);return a; 

  核心(ECMAScript):ECMAScript 描述了该语言的语法和基本对象;
  文档对象模型(DOM):DOM 描述了处理网页内容的方法和接口;
  浏览器对象模型(BOM):BOM 描述了与浏览器进行交互的方法和接口;

script type="text/javascript" JS语句;/script

乍一看可能比较蒙,不过仔细分析还是不难理解的。常见用法是for(var key in obj),这里key初始也是undefined的,a[a.length]整体也是undefined,所以二者其实是等价的。在for循环中,obj 的属性会依次赋值给key,同样,也依次赋值给a[a.length],这里length一直在变,就巧妙地挨个赋值给数组的每一个元素了。

      图片 2

3 JS的使用方法HTML标签中内嵌JS;

2、重复字符串(如abc=>abcabc)

 

button onclick="alert('欢迎进入JavaScript世界')"点击me/button
function repeat(target,n){          return (new Array(n+1).join(target));     } 
二、代码存在形式和位置

HTML页面中直接使用JS:

改良版本:

1、存在形式:

script type="text/javascript" JS语句;/script
function repeat(target,n){          return Array.prototype.join.call(          {length:n+1},target);//之所以要创建带length属性的对象,是因为调用数组原型方法时,必须是一个类数组对象,而类数组对象的条件就是length为非负整数   } 

js文件形式和嵌入到html中:

引用外部JS文件:

不新建数组,而是用拥有length属性的对象替代,然后调用数组的join方法,性能提升很大

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>

<!-- 方式二 -->
<script type"text/javascript">
    Js代码内容
</script>
script language="JScript" src="JS文件路径"/script

再改进:

2、JavaScript代码存放位置

4 变量

var repeat=(function(){           join=Array.prototype.join,obj={};          return function(target,n){               obj.length=n+1;               return join.call(obj,target);          }     })(); 
  • HTML的head中
  • HTML的body代码块底部(推荐)

变量:是用于存储信息的"容器",是命名的内存空间,可以使用变量名称找到该内存空间;

利用闭包将对象和join方法缓存起来,不用每次都新建对象和寻找方法

由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。

JavaScript 的变量是松散类型(弱类型)的,就是用来保存任何类型的数据。

3、for循环中,当第二项为false时会终止循环,这里并不一定存在比较,可以直接赋值,如果赋值为undefined之类的值时,转成bool值也为假,因此也会终止,比如遍历数组可以写成:

三、变量

在定义变量的时候不需要指定变量的数据类型。

for(var i=arr.length,element;element=arr[—-i];){…} 

1、变量声明

JavaScript 定义变量有四种方法:const、let、var,还有一种是直接赋值,比如a = " a"(不规范,不推荐使用)

这里,第二项一定是arr[—-i]而非arr[i--],如果是后者的话,上来就是undefined,就不会执行循环体,或者for(var i=0,element;element=arr[i++];){…}

JavaScript变量声明一般使用var,如果不使用var则表示全局变量,一次性声明多个变量使用逗号隔开。

var定义的变量可以修改,如果不初始化会输出undefined,不会报错。

4、NaN是JS中唯一不等于自己的值,因此可以用来判断一个变量是否真的为NaN:a!==a

<script type="text/javascript">

    // 全局变量
    name = 'wd';

    function func(){
        // 局部变量
        var age = 22;

        // 全局变量
        gender = "man"

        //声明多个变量
       var job="IT",ad="beijing"
    }
</script>

letlet是块级作用域,定义的变量只在let 命令所在的代码块内有效,变量需要先声明再使用。

5、“<”,”+”等运算符会强制符号两边的表达式执行valueOf然后比较,所以如果两边是函数或者对象,而又重写了该对象的valueOf方法,就会自动执行两边的方法。如:

2、区分大小写

const定义的变量不可以修改,而且必须初始化,const定义的是一个恒定的常量,声明一个只读的常量或多个,一旦声明,常量值就不能改变。

var a={valueOf:function(){console.log(“aaa”);}},b={valueOf:function(){console.log(“bbb”);}};    a<b;//会输出:aaa;bbb;false; 

与python一样,变量test和变量TEST是不同的。

在函数外声明的变量作用域是全局的,全局变量在 JavaScript 程序的任何地方都可以访问;

6、JS具备自动插入分号的能力,但是自动插入分号并不是万能的,其有三条规则:

3、变量命名规则

在函数内声明的变量作用域是局部的(函数内),函数内使用 var 声明的变量只能在函数内容访问。

1)只在”}”标记之前、一个或多个换行之后以及程序输入的结尾被插入;

  • 第一个字符必须是字母、下划线(_)或美元符号($)
  • 余下的字符可以是下划线、美元符号或任何字母或数字字符
  • 除了上面两条规则,以下关键字不能作为变量名

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

声明变量注意:

2)分号只在随后的输入标记不能被解析时插入;

4、注释

JS中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的执行。同一变量可在多次不同赋值时,修改变量的数据类型。变量的命名规范变量命名名要符合驼峰法则:变量开头为小写,之后每个单词首字母大写。5 JavaScript 变量的命名规则变量命名必须以字母、下划线””或者”$”为开头。其他字符可以是字母、、美元符号或数字。变量名中不允许使用空格和其他标点符号,首个字不能为数字。变量名长度不能超过255个字符。变量名称对大小写敏感(y 和 Y 是不同的变量),JavaScript 语句和 JavaScript 变量都 对大小写敏感。变量名必须放在同一行中。不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符。6 JS中的变量的数据类型

   这一点很重要,比如:

单行注释以双斜杠开头(//)
多行注释以单斜杠和星号开头(/*),以星号和单斜杠结尾(*/)

String:字符串类型。用""和''包裹的内容,称为字符串。

a=b (f()); 
单行 //
多行 /*  */
注意:此注释仅在Script块中生效。

Number:数值类型。可以是小数,也可以是正数。

   是不会在a=b之后自动插入分号的,因为a=b(f())是可以被解析的,因此像”(“,”[“,”+”,”-“,”/“开头的时候,需要特别注意上一行可能不会自动插入。

 

boolean:真假,可选值true/false。

还有一些情况,尽管不会出现解析错误,JS仍然会强制插入分号,这就是所谓的JS语法限制产生式。它不允许在两个字符间出现换行,最危险的就是return语句,如

四、数据类型

Object:(复杂数据类型)

return

分类:

Null:表示为空的引用。var a = null;

{};

原始类型(5种):

Undefined:未定义,用var声明的变量,没有进行初始化赋值。var a;

会被强制插入而成为

  • number - 如果变量是 Number 类型的
  • string - 如果变量是 String 类型的
  • object - 如果变量是一种引用类型或 Null 类型的
  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的

7 JavaScript对象

return;

 对象类型:

JavaScript 对象是拥有属性和方法的数据,是变量的容器。

{};

  • 数组(arry)
  • “字典”
  • 时间(date)
  • ......

对象:是封装一个事物的属性和功能的程序结构,是内存中保存多个属性和方法的一块存储空间。

类似的还有:throw语句、带有显示标签的break活着continue语句、后置自增或自减运算符

1、数字(number)

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

转换:

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

特殊值:

  •  NaN,非数字。可使用 isNaN(num) 来判断。
  • Infinity,无穷大。可使用 isFinite(num) 来判断。

    var a=1; var b=2.2;

更多数值计算:

图片 3图片 4

常量

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( )
计算正切值。

View Code

JavaScript中所有事物都是对象:数字、字符串、日期、数组等。

3)分号不会作为分隔符在for循环空语句的头部被自动插入

2、字符串(string)

字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。

var name="wd";
var age=String('jack');

 常见功能:

obj.length                           长度
obj.toString                         将其他类型转化为字符串
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement)     替换,正则中有g则替换所有,否则只替换第一个匹配项,
                                     $数字:匹配的第n个组内容;
                                     $&:当前匹配的内容;
                                     $`:位于匹配子串左侧的文本;
                                     $':位于匹配子串右侧的文本
                                     $$:直接量$符号

JavaScript对象可以是字面量创建、分配给变量,数组和其他对象的属性、作为参数传递给函数、有属性和作为返回值。

因此,最好的办法是在自己的js文件的最开始防御性地插入”;”,这样在合并js文件的时候就不会出问题了。

3、布尔类型

布尔类型仅包含真假,与Python不同的是其首字母小写。

true 真
false 假

用字面量创建:

7、闭包。理解闭包需学会三个基本事实:

4、null和undefined

null是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”。
undefined是一个特殊值,表示变量未定义。
五、对象类型
function MyFun(){};

(1)JS允许你引用在当前函数意外定义的变量

1、数组

数组与python中列表类似,常见的方法有:

obj.length          数组的大小

obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替换元素
                    obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

 

六、运算符

分配给其他对象的变量,数组和属性:

(2)即使外部函数已经返回,当前函数仍然可以引用在外部函数所定义的变量。这是因为JS的函数值包含里比调用它们时执行所需要的代码更多的信息

1、算术运算符

赋值 y = 5, 以下表格将向你说明算术运算符的使用:

图片 5

var myFun = function(){};myArray.push(function(){});myObject.myFun = function(){};

(3)闭包可以更新外部变量的值。这是因为闭包存储的是外部变量的引用而非值副本。如:

二、赋值运算

给定 x=10  y=5,下面的表格解释了赋值运算符:

图片 6

作为参数传递给其他函数:

function box(){     var val=undefined;     return {          set:function(x){val=x;},          get:function(){return val;}     };}var b=box();b.get();//“undefined” b.set(5);b.get();//5 

3、字符串运算

+ 运算符, += 运算符可用于连接字符串。

给定 text1 = "Good "text2 = "Morning"及 text3 = "", 下面的表格解释了字符串运算符的使用:

图片 7

function myFun(someFunc){ someFunc();}myFunc(function(){});

这一点很重要,比如在函数的for循环体内返回闭包或者有闭包取for循环的计数器值,那么这个闭包取到的永远是for循环结束时i的最终值,因为闭包存储的是它的引用而非当时的值副本。

4、比较运算

比较运算符用于逻辑语句的判断,从而确定给定的两个值或变量是否相等。

给定 x=5, 下表展示了比较运算符的使用:

图片 8

有属性:

8、JS没有块级作用域,因此通常情况下函数内部的所有变量都是绑定到函数作用域的,也就是说相当于都在函数一开始就声明了的,一个例外就是try/catch中的变量是块级的,只属于try/catch块。

5、条件运算

variable = boolean_expression ? true_value : false_value;
该表达式主要是根据 boolean_expression 的计算结果有条件地为变量赋值。如果 Boolean_expression 为 true,就把 true_value 赋给变量;如果它是 false,就把 false_value 赋给变量

//示例
 var iMax = (a > 3) ? 3 : 4;//输出4
var myFunc = function(){};

9、众所周知,在函数内部声明函数是可以的,但是在在函数内的局部块里声明,可能会出现问题:

6、逻辑运算

逻辑运算符用来确定变量或值之间的逻辑关系。

给定 x=6 and y=3, 以下实例演示了逻辑运算符的使用:

图片 9

作为返回值:

function f(){return “global”;}function test(x){     function f(){return “local”}     var result=[];     if(x){          result.push(f());     }     result.push(f());     return result;}test(true);//[“local”,”local”] test(false);//[“local”] 

7、位运算

位运算符工作于32位的数字上。任何数字操作都将转换为32位。结果会转换为 JavaScript 数字。

 

 

图片 10

六、语句
function myFunc(){ return function(){};}

将函数声明到if块中:

1、条件语句

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

if(条件){

    }else if(条件){

    }else{

    }

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        默认执行代码
        与 case 1 和 case 2 不同时执行的代码
}


//例子
switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }

在JavaScript中定义对象有5种方式

function f(){return “global”;}function test(x){     var result=[];     if(x){          function f(){return “local”}          result.push(f());     }     result.push(f());     return result;} test(true);//? test(false);//? 

2、循环语句 

for语句

//第一种,和c类似
var names = ["wd", "tony", "rain"];

for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

//第二种
var names = ["wd", "tony", "rain"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

for语句循环数组和字典:

//字典循环,循环的是key
a={"name":"wd","age":22}
for (var index in a){
    console.log(index);//打印key
    console.log(a[index]);//打印value
}

//列表循环,循环的是index(下标)
var names = ["wd", "tony", "rain"];
for(var index in names){
    console.log(index);
    console.log(names[index]);
}

while语句

while(条件){
    // break;
    // continue;(break和continue意义和python中一样)
}
七、函数

语法:

function 函数名(参数1,参数2) {
代码块       
    }

分类:

  • 普通函数
  • 匿名函数
  • 自执行函数

1.普通函数

function func(){
    alert('123');
}

2.匿名函数:无函数名

 setInterval(function () {
        console.log("wd");     
    },500)//这里面的函数无名字

3.自执行函数:创建函数并且自动执行,因为加了括号。

<script>
    (function (arg) {
    console.log(arg)

})(1)
</script>

4.使用return:与python类似函数中使用return可使函数停止并且得到返回值

<script>
    function func() {
        alert('123');
        return true
    };
    a=func();
    console.log(a);
</script>

 

八、序列化、转义、异常处理

1、序列化

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

2、转义

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

    var URL="" var new_url=encodeURI(URL) 结果:""

    new_url=encodeURIComponent(URL) 结果: "https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E9%A9%AC%E4%BA%91"

    var a="wd" var b=escape(URL) 结果: "https%3A//www.sogou.com/web%3Fquery%3D%u9A6C%u4E91" var b=unescape(URL) 结果: ""

3、eval

JavaScript中的eval是Python中eval和exec的合集,既可以编译代码也可以获取返回值。

  • eval() 
  • EvalError   执行字符串中的JavaScript代码

 4.异常处理

  • try 语句测试代码块的错误。
  • catch 语句处理错误
  • throw 语句创建自定义错误

语法:

try
{
 //在这里运行代码
 }
catch(err)
 {
//在这里处理错误
}

 

九、javaScript作用域

JavaScript作用域归纳为以下几点:

 1、javaScript采用函数作为作用域(同python),无块级作用域,let关键字除外。

 function fun() {
        if(1==1){
            var name='wd'
        }
        console.log(name)
    }
    fun()#不会报错,输出wd



 function fun() {
        if(1==1){
            var name='wd'
        }
    }
     fun();
     console.log(name);#报错

2.由于JavaScript中的每个函数作为一个作用域,如果出现函数嵌套函数,则就会出现作用域链。

 

    name = "wd";
function Func(){
    var name = "seven";
    function inner(){
        var name = "jack";
        console.log(name);
    }
    inner();
}
Func();#执行结果输出jack

如上述代码则出现三个作用域组成的作用域链,如果出现作用域链后,那么寻找变量时候就会出现顺序,对于上述实例:

当执行console.log(name)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。

 

 

3.JavaScript的作用域在被执行之前已经创建,后续再去执行时只需要按照作用域链去寻找即可。

示例1:

name = "wd";
function Func(){
    var name = "seven";
    function inner(){
        console.log(name);
    }
    return inner;
}
res=Func();
res();
#结果输出seven

上述带代码中作用域链为:全局--》Func函数 --》inner函数

当执行res=Func()时候,执行函数Func,变量name值为seven,此时解释器解释到inner函数,跳过,执行return inner,将inner内存地址赋值res,在执行res()相当的于执行inner,按照

作用域链,先找inner函数得name变量,如果没有,再找Func函数有无name变量,如果没有再去寻找全局有无name变量,所有结果输出seven

示例二:

name = 'wd';

function Func(){
    var name = "eric";
    function inner(){

        console.log(name);
    }
    name = 'jack';
    return inner;
}

var res = Func();
res();
// 输出结果: jack
按照示例一分析,解释器从上到下解释,执行函数Func,name变量得值由eric变成jack,最后再去寻找name变量时候,name值为jack,所以输出jack

示例三:

name = 'wd';
function Bar(){
    console.log(name);
}

function Func(){
    var name = "seven";

    return Bar;
}

var res = Func();
res();//输入wd

4.JavaScript中变量都是声明提前,即使不为变量赋值也不会报错,默认在不赋值变量得时候解释器会给变量赋值为undefined。

//在JavaScript中如果不创建变量,直接去使用,则报错:
console.log(name);
// 报错:Uncaught ReferenceError: name is not defined


//JavaScript中如果创建值而不赋值,则该值为 undefined,如:
var name;
console.log(name);
// 输出:undefined


//在函数内如果这么写:
function Foo(){
    console.log(name);
    var name = 'seven';
}

Foo();
// 输出:undefined


//总结:上述代码,不报错而是输出 undefined,其原因是:JavaScript的函数在被执行之前,会将其中的变量全部声明,而不赋值。所以,相当于上述实例中,函数在“预编译”时,已经执行了var name;所以上述代码中输出的是undefined

 

十、javascript中的词法分析

上面说了javascript的作用域,其实我们也可以利用词法分析来验证javascript中的作用域

什么是词法分析?解释:JavaScript代码自上而下执行,但是在js代码执行前,会首先进行词法分析,所以事实上,js运行要分为词法分析执行两个阶段。

词法分析步骤:

  • 分析形参
  • 分析变量声明
  • 分析函数声明
  • 如果存在函数嵌套,则从外往内进行词法分析

具体步骤如下:

在函数执行前的一瞬间,生产 Active Object(活动对象),下面简称AO;

第一步:分析形参

  1. 函数接收形式参数,添加到AO的属性,并且这个时候值为undefine,即AO.age=undefine
  2. 接收实参,添加到AO的属性,覆盖之前的undefine

第二步:分析var变量声明

  1. 如果上一步分析参数中AO还没有age属性,则添加AO属性为undefine,即AO.age=undefine
  2. 如果AO上面已经有age属性了,则不作任何修改

第三步:分析函数的声明

分析函数声明!如 function age(){}

  1. 如果AO上没有age属性,则把函数赋给AO.age属性
  2. 如果AO上有age属性,则会直接覆盖,把函数赋给AO.age属性(优先级高)

示例代码:

<script>
function person(age) {
    console.log(age);//输出ƒ age() { console.log(age); }
    var age=22;
    console.log(age);//输出22
    function age() {
        console.log(age);//age 值为22,但是该段代码不会执行
    }

  console.log(age);//age 值为22

} person(5) </script>

词法分析解释上述分析过程:

第一步:分析形参

  形式参数:AO.age = undefined
  接受实参,覆盖掉undefined:AO.age = 5

第二步:分析var变量声明

  由于AO.age已经存在,所以不做任何操作:AO.age=5

第三步:分析函数声明

  此时函数声明刚好是age,所以覆盖掉之前的age属性,即此时OA.age=function age() {console.log(age)}

代码运行:

  词法分析完毕后得到AO.age=function age() {console.log(age)},然后运行代码执行函数,第二行代码age输出 ƒ age() { console.log(age); };

  第三行代码,22赋值给age,此时age=22,故第四行代码输出22;

  继续运行到第五行代码发现是函数,不运行,跳过;

  运行第八行代码,此时age值为22,故输出22;

tips:词法分析时应该注意var age = function age(){},这个语句,参与了第二步和第三步;执行代码时应注意函数表达式不做任何操作,且只声明变量没赋值时,age仍然等于AO.age。

 

十一、面向对象

 在JavaScript中也支持面向对象编程,面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装、继承、多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义JS中对象:无序属性的集合,其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值,其中的属性或方法都有一个名字,根据这个名字可以访问相映射的值(值可以是基本值/对象/方法)。

1.声明和实例化

基于已有对象扩充其属性和方法工厂方式构造函数方式原型(“prototype”)方式动态原型方式

结果会如何呢?理论上讲,JS没有块级作用域,因此f()的作用域是整个test函数,因此合理猜测应该是与上一次输出相同,全部 为”local”,可是并不是所有的JS执行环境都如此行事,有的会根据是否执行包含f的代码块来有条件地绑定函数f(绑定即意味着将该变量绑定到其最近 的作用域,而赋值是发生在代码实际执行到赋值那一步的时候进行的)。

使用object创建对象

var person= new Object();
//第一行代码创建了 Object 类的一个实例,并把它存储到变量 oObject 中,如果构造函数无参数,括号则不是必需的。因此可以采用下面的形式重写上面的一行代码:
var person = new Object;

//为对象设置属性(属性可以是值或者方法)
var person= new Object();
person.name="wd";
person.age="22";
person.GetName=function(){
return this.name;
}
var myname=person.name;
console.log(myname)

采用工厂方式创建对象:利用函数将创建的过程封装,大致经历如下步骤:

 

创建过程经历四步:

 

  1. 创建一个对象
  2. 将函数的作用域赋给新对象(因此this指向这个新对象,如:person1)
  3. 执行构造函数的代码
  4. 返回该对象

 

tips:创建对象交给一个工厂方法来实现,可以传递参数,但主要缺点是无法识别对象类型,因为创建对象都是使用Object的原生构造函数来完成的。

function createPerson(name,age,job) {
  var person = new Object;
  person.name = name;
  person.age = age;
  person.job = job;
  person.showName = function() {
    alert(this.name);
  };
  return person;//返回创建完成的对象
}
var person1 = createPerson('jack',22,'python');//实例化
person1.showName()

JS 中的对象分为三类

因此最好的办法是如果要声明嵌套函数,都在其富函数的最外层声明,要么就不要声明函数,而是使用var声明和函数表达式来实现:

采用构造函数的方式创建对象

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.getName = function () {
        return this.name;
    }
}
obj = new Person('liuyao','age','job');
obj.getName();

采用构造函数(与普通函数一样,只是用它来创建对象),定义对象类型(如:Person)的属性和方法。它与工厂方法区别在于:

  • 没有显式地创建对象
  • 直接将属性和方法赋值给this对象;
  • 没有return语句;

内置对象(静态对象):js本身已经写好的对象,我们可以直接使用不需要定义它。 常见的内置对象有 Global、Math(它们也是本地对象,根据定义每个内置对象都是本地对象)。本地对象(非静态对象):必须实例化才能使用其方法和属性的就是本地对象。 常见的本地对象有 Object、Function、Data、Array、String、Boolean、Number、RegExp、Error等宿主对象:js运行和存活的地方,它的生活环境就是DOM(文档对象模式)和BOM(浏览器对象模式)。8 JavaScript函数

function f(){return “global”;}function test(x){     var result=[];     if(x){          var g=function(){return “local”}          result.push(g());     }     result.push(f());     return result;}   

采用原型方式创建对象

为什么会有原型(prototype 属性):上面创建对象时候,每次新创建对象的时候每个对象都保留了getName方法,这使得每个对象都有了自己单独的方法,这就意味着会增加内存的开销,为了解决这种方式,从而引入了原型。

使用原型(prototype)创建的方法是共享的,其原理是将对象方法存储在同一个指针地址中。

下面采用混合的构造函数/原型方式创建对象:

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
}

Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");

alert(oCar1.drivers);    //输出 "Mike,John,Bill"
alert(oCar2.drivers);    //输出 "Mike,John"

 

2.对象废除

把对象的所有引用都设置为 null,可以强制性地废除对象。例如:

TIPS:废除对象的所有引用时要当心。如果一个对象有两个或更多引用,则要正确废除该对象,必须将其所有引用都设置为 null。

var person = new Object;

person = null;//废除对象

 

3.关键字this

关键字 this 总是指向调用该方法的对象,类似于python中的self,列如:

var person = new Object;
person.name = "wd";
person.GetName = function() {
  alert(this.name);
};

person.GetName();        //输出 "wd",这里person调用了GetName函数,alert中的this指代person,输出为person.name,当然值输出为“wd”

 

 十二、javascript正则以及字符串处理

1、定义正则表达式

  • /.../  用于定义正则表达式
  • /.../g 表示全局匹配
  • /.../i 表示不区分大小写
  • /.../m 表示多行匹配

JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达式^和$,m模式也会使用^$来匹配换行的内容)

var pattern = /^Javaw*/gm;
var text = "JavaScript is more fun than nJavaEE or JavaBeans!";
result = pattern.exec(text)
result = pattern.exec(text)
result = pattern.exec(text)

注:定义正则表达式也可以  reg= new RegExp()

2、正则表达式提供的方法

  • test(string)     检查字符串中是否和正则匹配,返回true或false

    n = 'uui99sdf' reg = /d+/ reg.test(n) ---> true

    //只要正则在字符串中存在就匹配,如果想要开头和结尾匹配的话,就需要在正则前后加 ^和$

  • exec(string)    获取正则表达式匹配的内容,如果未匹配,值为null,否则,获取匹配成功的数组。

    //获取正则表达式匹配的内容,如果未匹配,值为null,否则,获取匹配成功的数组。

    //非全局模式 // 获取匹配结果数组,注意:第一个元素是第一个匹配的结果,后面元素是正则子匹配(正则内容分组匹配)

    var pattern = /bJavaw*b/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
    
    var pattern = /b(Java)w*b/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
    

    //全局模式 // 需要反复调用exec方法,来一个一个获取结果,直到匹配获取结果为null表示获取完毕

    var pattern = /bJavaw*b/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
    
    var pattern = /b(Java)w*b/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
    

3、其他字符串操作

obj.search(regexp)                 //  获取索引位置,搜索整个字符串,返回匹配成功的第一个位置(g模式无效)
obj.match(regexp)                   // 获取匹配内容,搜索整个字符串,获取找到第一个匹配内容,如果正则是g模式找到全部
obj.replace(regexp, replacement)    // 替换匹配替换,正则中有g则替换所有,否则只替换第一个匹配项,
                                       //  $数字:匹配的第n个组内容;
                                      //    $&:当前匹配的内容;
                                      //    $`:位于匹配子串左侧的文本;
                                      //    $':位于匹配子串右侧的文本
                                      //    $$:直接量$符号

 

案例篇

1.跑马灯示例:

使用setInterval定时器定时拼接字符串

图片 11图片 12

<script>
    function fun() {
      var tag=document.getElementById('i1') ;
      var a=tag.innerText.charAt(0);
      var b=tag.innerText.substring(1,tag.length);
      var newstring=b+a;
      tag.innerText=newstring;
    }
    setInterval('fun()',500);
</script>

View Code

 2.模态对话框

使用position将页面分层实现

图片 13图片 14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: black;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5;
            z-index: 100;
            display: none;
        }
        .c2{
            width: 500px;
            height: 350px;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -175px;
            z-index: 101;
            background-color: white;
            display: none;
        }
    </style>
</head>
<body>
<div>
    <table>
        <thead>
        <th>主机名</th>
        <th>ip</th>
        <th>端口</th>
        </thead>
        <tbody>
        <tr>
            <td>app230</td>
            <td>10.0.0.230</td>
            <td>80</td>
        </tr>
         <tr>
            <td>app231</td>
            <td>10.0.0.231</td>
            <td>80</td>
        </tr>
        </tbody>
    </table>
    <input type="submit" value="添加" onclick="addHost();">
</div>
<!--遮罩层-->
<div id="a1" class="c1"></div>
<!--添加框-->
<div id="a2" class="c2">
<form action="http://www.baidu.com">
    <input type="text">
    <input type="text">
    <input type="button" value="确认" >
    <input type="button" value="取消" onclick="canCle();">

</form>
</div>
<script>
function addHost() {
    document.getElementById('a1').style.display="block";
    document.getElementById('a2').style.display="block";

}
function canCle() {
    document.getElementById('a1').style.display="none";
    document.getElementById('a2').style.display="none";
}
</script>
</body>
</html>

View Code

 3.全选反选取消应用

图片 15图片 16

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: black;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5;
            z-index: 100;
            display: none;
        }
        .c2{
            width: 500px;
            height: 350px;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -175px;
            z-index: 101;
            background-color: white;
            display: none;
        }
    </style>
</head>
<body>
<div>
    <table>
        <thead>
        <th>选择</th>
        <th>主机名</th>
        <th>ip</th>
        <th>端口</th>
        </thead>
        <tbody id="b1">
        <tr>
            <td><input type="checkbox"></td>
            <td>app230</td>
            <td>10.0.0.230</td>
            <td>80</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>app231</td>
            <td>10.0.0.231</td>
            <td>80</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>app232</td>
            <td>10.0.0.232</td>
            <td>80</td>
        </tr>
        </tbody>
    </table>
    <input type="submit" value="添加" onclick="addHost();">
    <input type="submit" value="全选" onclick="chooseAll();">
    <input type="submit" value="反选" onclick="unChoose();">
    <input type="submit" value="取消" onclick="cancleAll();">
</div>
<!--遮罩层-->
<div id="a1" class="c1"></div>
<!--添加框-->
<div id="a2" class="c2">
<form action="http://www.baidu.com">
    <input type="text">
    <input type="text">
    <input type="button" value="确认" >
    <input type="button" value="取消" onclick="canCle();">

</form>
</div>
<script>
function addHost() {
    document.getElementById('a1').style.display="block";
    document.getElementById('a2').style.display="block";

}
function canCle() {
    document.getElementById('a1').style.display="none";
    document.getElementById('a2').style.display="none";
}
function chooseAll() {
    var tb = document.getElementById('b1');//找到tbody标签
    var trList = tb.children;//找到所有tr标签
    for (var i = 0; i < trList.length; i++) {
        var tr = trList[i];//找到每个tr
        var check = tr.children[0].children[0];//找到每个checkbox标签
        check.checked = true;//修改选择项目

    }
}
function cancleAll() {
    var tb = document.getElementById('b1');//找到tbody标签
    var trList = tb.children;//找到所有tr标签
    for (var i = 0; i < trList.length; i++) {
        var tr = trList[i];//找到每个tr
        var check = tr.children[0].children[0]//找到每个checkbox标签
        check.checked = false;//修改选择项目
    }
}
function unChoose() {
    var tb = document.getElementById('b1');//找到tbody标签
    var trList = tb.children;//找到所有tr标签
    for (var i = 0; i < trList.length; i++) {
        var tr = trList[i];//找到每个tr
        var check = tr.children[0].children[0]//找到每个checkbox标签
        check.checked=check.checked==true?false:true//三元表达式
            }
}
</script>
</body>
</html>

View Code

 4.菜单栏应用

图片 17图片 18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .leftMenue{
            height: 700px;
            width: 80px;
            background-color: darkblue;
        }
        .item{
            color: white;
            height: 38px;
            width: 80px;
            line-height: 38px;
        }
        .leftMenue .context{
            color: white;
            display: block;
        }
    </style>
</head>
<body>
<div class="leftMenue">
    <div class="item" id="a1" onclick="chooseOne('a1');">菜单一</div>
    <div class="context">
        <div>内容一</div>
        <div>内容一</div>
        <div>内容一</div>
    </div>
    <div class="item" id="a2" onclick="chooseOne('a2');">菜单二</div>
    <div class="context">
        <div>内容二</div>
        <div>内容二</div>
        <div>内容二</div>
    </div>
    <div class="item" id="a3" onclick="chooseOne('a3');">菜单三</div>
        <div class="context">
            <div>内容三</div>
            <div>内容三</div>
            <div>内容三</div>
        </div>
</div>
<script>
    function chooseOne(n) {
        var currentItem=document.getElementById(n);//找到菜单栏
        var currContext=currentItem.nextElementSibling;//找到内容标签
        currContext.style.display=currContext.style.display =="none"? "block":"none";
        //也可以使用if
//       if (currContext.style.display =="none"){
//           currContext.style.display="block";
//
//       }
//        else{
//           currContext.style.display="none";
//       }
//
    }
</script>
</body>
</html>

View Code

 

 

 

使用函数前要先定义才能调用,函数的定义分为三部分:函数名,参数列表,函数体 定义函数的格式:

10、用js创建字典的时候,如果是利用对象的方式(因为JS对象的核心是一个字符串属性名称和属性值的映射表),会遇到一个问题就是原型污染,因 为获取字典属性值的时候用hasOwnProperty还好,如果用for in遍历的话,不仅会遍历对象本身,包括它的原型,因此如果在其他地方污染了Object的原型,那么for in就会产生非预期的结果,这时可能会用hasOwnProperty来先检测该对象本身是否含有属性来避免原型污染,然而更极端的情况是连 hasOwnProperty这个原型方法都有可能被污染。避免原型污染的方法是在创建字典对象的时候用Object.create(null)来创建一 个完全空对象,这个对象没有原型,这个方法是ES5的,在没有这个方法可用的时候,最好是创建字典类,然后在字典类里用数组来存储有序集合,自己维护这个 集合。

function 函数名([参数1,参数2...]){ 函数执行部分; return 表达式;}

11、JS中的类数组对象可以享用数组的大部分原型方法如map等,类数组对象是指满足两个条件的对象:一是具备合理范围值内的length属性, 二是length属性大于该对象的最大索引,索引是一个合理范围的证书,它的字符串表示的是对象的一个key;但是数组的一个原型方法contact是不 能被类数组对象调用的,因此需要先用[].slice.call把类数组对象转换为真正的数组比如[].slice.call(arguments)。

函数有三种定义方法

12、并不是所有时候都需要继承,继承也不是完美的,有时候会创造比他能解决的更多的问题,特别是当层次关系没那么明显的时候,这时候应该多用结构 类型(又叫鸭子类型,如果它看起来像鸭子、游泳像鸭子并且叫声像鸭子,那么它就是鸭子),用结构类型设计灵活的对象接口的时候,不需要创建类工厂来返回类 的实例,而是直接返回对象,对象具备预期的方法和属性,比如:

函数定义语句函数直接量表达式Function构造函数

SomeObj.someWidget=function(opts){     return {          a:blabla,          b:function(){...},          c:blabla     }} 

-函数有四种调用模式

原文链接:

函数调用模式(通过函数调用)方法调用模式(通过对象属性调用)构造函数模式(如果是作为构造函数来调用,那么this指向new创建的新对象) 函数上下文(借用方法模式:它的this指向可以改变,而前三种模式是固定的);函数上下文就是函数作用域;基本语法:apply 和 call 后面都是跟两个参数。)

【编辑推荐】

在javascript函数中,函数的参数一共有两种形式:(实际参数与形式参数)

  1. JavaScript全文搜索之相关度评分
  2. 编程语言流行榜:JavaScript 坐头把交椅,Swift 蹿升最快
  3. JavaScript中常见的字符串操作函数及用法
  4. JavaScript开发者:Win10斯巴达浏览器很赞
  5. JavaScript将在企业环境中引发巨大变革

形参:在函数定义时所指定的参数就称之为“函数的形参”。

【责任编辑:wangxueyan TEL:(010)68476606】

实参:在函数调用时所指定的参数就称之为“函数的实参”。

9 运算符

算术运算符:主要是用来进行JavaScript中的算术操作。(+、-、*、/、%、++、--)

赋值运算符:=用于给JavaScript 变量赋值,其作用就是把右侧的值赋给左侧的变量。

关系运算符:用于进行比较的运算符。 主要有小于()、大于()、等于(==)、大于等于(=)、小于等于(=)、不等(!=)、恒等(===)、不恒等(!==)。

逻辑运算符:逻辑运算符通常用于布尔值的操作,返回结果是一个布尔类型,一般和关系运算符配合使用,有三个逻辑运算符:逻辑与(AND)、逻辑或(OR)、逻辑非(NOT)。

字符串连接运算符:是用于两个字符串型数据之间的运算符,它的作用是将两个字符串连接起来。 在JavaScript中,可以使用+和+=运算符对两个字符串进行连接运算。

三目操作符(条件运算符):?根据不同的条件,执行不同的操作/返回不同的值。

10 JavaScript条件语句

分为四种条件语句

If 语句:只有当指定条件为true时,使用该语句来执行代码if-else语句:当条件为true时执行代码,当条件为false时执行其他代码if-else if-else 语句:使用该语句来选择多个代码块之一来执行switch 语句:同上,switch的工作原理呢? 首先设置表达式n(通常是一个变量),随后表达式的值会与结构中的每个case值作比较; 如果存在匹配则该关联代码块执行; 然后使用break来阻止代码自动的向下一个case运行; default关键词来规定匹配不存在时做的事情。11 JavaScript 不同类型的循环

常见的循环主要是三种:for 循环、while 循环、do/while 循环。

for 循环:代码块有一定的次数。for 有三个表达式:1 声明循环变量 2 判断循环条件 3 更新循环变量 特点:先判断再执行,与while相同。while 循环:当指定的条件为true时循环指定的代码块do/while 循环:同while循环一样。 特点:先执行再判断,即使初始条件不成立,do/while循环至少执行一次。

循环结构的执行步骤

声明变量判断循环条件执行循环体操作更新循环变量最后执行循环2-4,直到条件不成立,跳出循环12 JavaScript Break 和Continue 语句

break:跳出本层循环,继续执行循环后面的语句。 如果循环有多层,则break只能跳出一层。

continue:跳过本次循环剩余的代码,继续执行下一次循环。

对与for循环,continue之后执行的语句,是循环变量更新语句i++;

对于while、do-while循环,continue之后执行的语句,是循环条件判断;

因此,使用这两个循环时,必须将continue放到i++之后使用,否则,continue将跳过i++进入死循环。

13 JavaScript 错误处理使用 try ... catch ... finally

一种是程序写的逻辑不对,导致代码执行异常;

一种是执行过程中,程序可能遇到无法预测的异常情况而报错。

throw 声明

onerror 事件

14 JavaScript 框架(库)jQuery 库

jQuery 函数是 $() 函数(jQuery 函数)。

jQuery 库包含以下功能

HTML 元素选取、元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities...

面向对象编程包括 创建对象、原型继承、class继承。

类是对象的类型模板;实例是根据类创建的对象。

jQuery 优点

分布规模小学习曲线平缓,在线帮助多语法简洁容易延伸消除了浏览器差异简洁的操作DOM的方法轻松实现动画修改CSS等各种操作

缺点

增加了本机API的速度开销浏览器兼容性的改善降低了它的性能用法扁平有些开发人员抵制使用AngularJs企业级框架

其最为核心的特性为:MVC、模块化、自动化双向数据绑定、语义化标签及依赖注入等。

React框架

React被称为构建用户接口而提供的Javascript库;主要用来构建UI,其专注于MVC的V部分。

vue未来的主流

vue.js 是用来构建web应用接口的一个库,技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式。

Require Js

RequireJs是一个javascript模块加载器,提高网页的加载速度和质量。

Backone框架

Backone是一个帮助开发重量级Javascript应用的框架,但它本身简单的框架。

其文件体积很小,压缩后只有5.3KB,提供了全功能的MVC框架及路由。

Backone强制依赖于Underscore.js,非强制依赖于jQuery/Zepto。

D3.js

数据可视化和图表是Web应用中不可或缺的一部分。

d3.js就是最流行的可视化库之一,它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。

15 JavaScript this

方法中的this指向调用它所在方法的对象。 单独使用this,指向全局对象。 函数中,函数所属者默认绑定到this上。

this使用场合

全局环境构造函数对象的方法Node16 JavaScript闭包

闭包是指有权访问另一个函数作用域中的变量的函数。

创建闭包就是创建了一个不销毁的作用域。

闭包需要了解的几个概念: 作用域链、执行上下文、变量对象。

闭包的好处有

缓存面向对象中的对象实现封装,防止变量跑到外层作用域中,发生命名冲突匿名自执行函数,匿名自执行函数可以减少内存消耗

坏处

内存消耗涉及到跨作用域访问是时会导致性能耗损17 JS Window

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

18 JavaScript JSON

JSON 是一种轻量级的数据交换格式;JSON是独立的语言 ;JSON 易于理解。语法规则

数据为 键/值 对。数据由逗号分隔。大括号保存对象。方括号保存数组。

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:你只怕不精晓的豆蔻年华部分JavaScript,JavaScript基本功知识收拾

相关阅读