JavaScript的基本语法

mb649d3a75b51a2

2024-07-04 帮助1人

http://blog.sina.com.cn/s/blog_6e44dfbf0100noal.html

JavaScript的基本语法

JavaScript语言同其他语言一样,有自身的基本数据类型、表达式和运算符以及基本的程序框架。

一、基本数据类型

在JavaScript中有四种基本数据类型

在JavaScript的基本数据类型中的数据可以是常量,也可以是变量。由于JavaScript采用弱类型形式,因而一个数据的变量或常量不必首先声明,而是在使用或赋值时确定其数据的类型。当然也可以先声明该数据的类型,它是通过在赋值时自动说明其数据类型。

二、JavaScript中的控制结构和循环

标签语句：

<!--
            
            
            
            
            
            loopX:
             
               
                  document.write("(" x "," y ")");
                   
                    
                     
                     }  
                  }

在本例中,for循环被贴上了用户自定义loopX标签,不管程序如何嵌套,它都能跳出或继续for循环。如果没有标签语句,break语句就只终止产生y值的循环。

有了With语句,在存取对象属性和方法时就不用重复指定参考对象。在With语句块中,凡是JavaScript不识别的属性和方法都和该语句指定的对象有关。With语句的语法格式如下所示：

对象指明了当语句组中对象缺省时的参考对象。这里我们用较为熟悉的Document对象对With语句举例。

例如：当使用与Document 对象有关的write( )或writeln( )方法时往往使用如下形式：

如果需要显示大量数据时就会多次使用同样的document.writeln 语句。这时就可以像下面的程序那样,把所有以Document 对象为参考对象的语句放到With 语句块中,从而达到减少语句量的目的。下面是一个With 语句使用的例子：

<!--

Js概述

here 大神级别谈Javascript编程风格

语法结构

1.字符集：Unicode(ASCII与Latin-1的超集)
2.区分大小写
3.注释：//或/*..*/
4.直接量：程序中直接使用的数据值，如1,'ab',true,/ad/,null等
5.标识符和保留字
6.可选分号：如果语句语法正确，且独占一行，可以省略其后的分号。

类型、值和变量

类型：

Javascript的数据类型分为两类：原始类型和对象类型
原始类型：数字，字符串，布尔值；

JavaScript有两个特殊的原始值：null(空)、undefined(未定义)

对象类型：处理数字、字符串、布尔值、null和undefined之外都是对象了，对象是属性的集合，每个属性都由“名/值对”（值可以是原始类型的值，也可以是对象）构成。有一个特殊的对象就是全局对象。

数组：普通的JavaScript对象是无序集合，JavaScript同样定义了一个特殊的对象-数组，表示带索引的有序集合。
函数：js还定义了另一个特殊对象-函数，函数是具有与它相关联的可执行代码的对象。
类：如果函数用来初始化（使用new运算符）一个新建的对象，我们称之为构造函数，每一个构造函数定义了一类(Class)对象——由构造函数初始化的对象组成的集合。类可以看作对象类型的子类型，有如下类：数组(Array)类、函数(Function)类、日期(Date)类、正则(RegExp)类、异常(Error)类。同时也可以自定义类。

注意：js类型可以分为原是类型和对象类型，也可以分为拥有方法的类型和不能拥有方法的类型，同样可以分为可变类型和不可变类型。如对象和数组就是可变类型，js可以更改对象的属性值和数组元素的值，数字，字符串，布尔值，null和undefined属于不可变类型。
智能类型转换：js可以自由的进行数据类型转换，如使用字符串的地方使用了数字，则会自动将数字转换成字符串。

数字:

和其他编程语言不同的是，js不区分整数值和浮点数值，JavaScript所有数字均用浮点数表示。
关于数值的运算，这里参考Math对象，

字符串：

\n用来分割行。
关于转义:在js中，反斜杠(\)有着特殊的用途，反斜杠符号后加一个字符，就不再表示它们的字面含义了。如:\n表示一个换行符。\'表示单引号（或撇号）。如：var str = 'you\'re right!';
更多介绍见字符串方法

布尔值：

任意的js的值都可以转换成布尔值，下面的值会转换成false:

null、undefined、0，-0、NaN，""

所有其他值包括对象（数组）都会转换成true

Null和Undefined

Null:是js的关键字，它表示一个特殊值，常用来描述空值。

alert(typeof(null));        // 输出object

这说明了null是一个特殊的对象值，含义是"非对象"。
undefined：是预定义的全局变量，和null不一样，不是关键字。它的值就是“未定义”。

alert(typeof(undefined));   //undefined

注意：尽管null和undefined是不同的，但是它们都表示“值的空缺”，两者可以互换，它们都是假值，和false类似，null和undefined都不包括任何属性和方法。

alert(null == undefined);   //true
alert(null === undefined);  //false
if(!null){                  //null:false
    if(!undefined){         //undefined:false
        alert(0);           //0
    }
}

如果你想将它们赋值给变量或属性，或将它们作为参数传入函数，最佳选择就是null.

扩展阅读：“关于javascript中的NaN、undefined”

全局对象

全局对象是对象的一个特殊，在前面讲过。全局对象（global object）在js中有着重要的用途；全局对象的属性是全局定义的符号，在js程序中直接使用，当js解释器启动时（或者任何web浏览器加载新页面时），它将创建一个新的全局对象，并给它一组定义的初始属性。

全局属性：undefined、Infinity、NaN
全局函数：isNaN()、parseInt()、eval（)
构造函数：Date()、RegExp()、String()、Object()、Array()
全局对象：Math、JSON
在代码的最顶层，不在任何函数内的Js代码可以使用关键字this来引用全局对象：

var global = this;
alert(global);  //[object Window]

在客户端中，在其表示的浏览器窗口中所有的Js代码中，Window对象充当了全局对象,引用其自身window属性

包装对象

.符号引用属性值，当属性值是一个函数的时候，称其为方法，通过o.m()来调用o对象中的方法。

但是奇怪的是，字符串也具有同样的属性和方法，如：

var str = 'hello world';
var word = str.substring(str.indexOf(" ") 1,str.length);    //使用字符串的属性

疑问：字符串既然不是对象，为什么它会有属性呢？

注意：只要引用了字符串str的属性，js就会将字符串值通过new String(str)的方式转换成对象，这个对象继承了字符串的方法，并被用来处理属性的引用，一旦属性引用结束，这个新创建的对象便被销毁。

同字符串一样，数字和布尔值也具有各自的方法，通过Number()和Boolean()构造函数创建一个临时对象，这些方法的调用均来自这些临时对象。

null和undefined没有包装对象。

var s = 'BeginMan';
alert(s.length);        //引用了字符串的属性，便创建了一个临时对象。 输出:8
s.len = 4;              //给它设置了一个属性,上面说过一旦引用其属性就会创建临时对象，赋值后，然后销毁了。
var t = s.len;          //查询这个属性，这个属性自然不存在。
//当运行这段代码时，t的值是undefined,

这段代码说明，在读取字符串、数字和布尔值的属性值(或方法)的时候，表现的像对象一样，但如果你视图给其属性赋值，则会忽略这个操作，因为修改发生在临时对象身上，而这个临时对象并未继续保留下来。

定义：存取字符串、数字和布尔值的属性时创建的临时对象成为包装对象。可以通过String()、Number()、或Boolean()构造函数显式创建包装对象。

var s = 'abc',n=1,b=true;
var S = new String(s);  //一个字符串对象
var N = new Number(n);  //一个数值对象
var B = new Boolean(b); //一个布尔对象
alert(s == S);          //true
alert(s === S);         //false
alert(typeof(S));       //object

不可变的原始值和可变的对象引用

1、不可变：
js原始值也就是上面说的原始类型（undefined、null、字符串、数字、布尔值），它们都是不可变的，比如说修改一个数字本身就是说不通的，但是字符串看起来没那么明显，因为字符串是字符组成的数组，通过修改数组达到修改字符串，但是在js中禁止这样，虽然看上去修改了字符串但是其实返回的是一个新的字符串值

var s = 'hello';    
s.toUpperCase();    //返回'HELLO',但是并没有改变s的值
alert(s);           //返回 hello

比较：原始值的比较是值的比较，对于字符串比较，只有当它们长度相等，且每个索引的字符相等，js才认为它们相等。
2、可变：
对象是可变的，它们的值是可修改的：

var o = {x:1};      //定义一个对象
o.x = 2;            //通过修改对象属性值来更改对象
o.y = 3;            //给它增加一个新属性

var a = [1,2,3];    //数组也可修改
a[0] = 5;
a[4] = 10;

比较：对象的比较并非值比较，即使两个对象包含相同的属性和值，各个索引元素相同的两个数组也不相等。

var a = {x:1},b = {x:1};        //具有相同属性和值的两个对象
alert(a === b);                 //false,两个单独的对象永不相等
alert(a == b);                  //false
var c = [1,2,3] , b=[1,2,3];    //两个长度和索引元素都相等的数组
alert(c === b);                 //false,两个单独的数组永不相等
alert(c == b);                  //false

通常我们将对象称为引用类型，对象的值都是引用，对象的比较都是引用比较，当且仅当它们引用同一个基对象时，它们才相等。

var a = [];     
var b = a;      //变量b引用同一个数组
b[0] = 1;       //通过变量b修改引用的数组
alert(a[0]);    // a也会修改，这里输出 1
alert(a === b); //true 引用同一个基对象

类型转换

var a = 10 'abcd';  //在数值类型中  表示相加，在字符串中 表示连接字符串操作
alert(typeof(a));   //string
var b = 10-'abcd';  //但是-在字符串中就不能表示连接字符串了,而代表算术运算符-
alert(typeof(b));   //number
alert(b);           //NaN

学新通

转换和相等性

在转换过程中 ==在判断两个值是否相等的情况下做出了类型转换，而恒等===并未做出任何类型转换。

显式类型转换

显式类型转换是为了更广泛的需求，在包装对象中说到：当通过new运算符，通过String()/Number()/Boolean()构造函数显式创建包装对象。如果我们没有使用new运算符，则它们就会作为类型转换函数。

Number('3');        //3
String(false);      //'false'或通过false.toString()
Boolean([]);        //true
Object(3);          // new Number(3)

除了null和undefined之外的所有值都具有toString()方法，这个方法和String()一样。

parseInt()和parseFloat()：它们是全局函数，不从属任何类的方法

parseInt()和parseFloat()会跳过任意数量的前导空格，尽可能解析更多的数字字符串并忽略后面的内容，如果第一个非空格字符是非法的数字直接量，将会返回NaN。

parseInt('2 birds');            //2
parseFloat('2.4 meters');       //2.4
parseInt(-12.54);               //-12
parseFloat('.1');               //0.1
parseInt('.1');                 //NaN 整数不能以.开始
parseFloat('$34.54');           //NaN 数字不能以$开始

关于对象转换成原始值：

有两种方法：toString()返回字符串；valueOf()返回对象本身（自身内部表示）。
更加详尽还是看看《JavaScript权威指南6版》

变量声明

var i,sum;
var i = 0,j = 0,k = 0;

关于动态类型和静态类型编程语言：

学新通

变量作用域

作用域：scope
函数中，同名的局部变量的优先级高于全局变量，会默默地……覆盖掉全局变量。

var scope = 'yes';
function changeScope(){
    var scope = 'no';   //地头蛇来了，同名的全局变量虎落平阳被犬欺
    return scope;
}
alert(scope);               // yes 灾难尚未降临
alert(changeScope());       // no:调用之然后局部变量就夭折了
alert(scope);               // yes 冲出了黑夜……

注意：尽管全局变量声明可以去掉讨厌的var，但是声名局部变量必须带上安全套(val).测试下：

var scope = 'yes';
function changeScope(){
    scope = 'no';           //一不小心（在不经意之间，常指做错了一件事情）（在不经意之间，常指做错了一件事情）就修改了全局变量
    return scope;
}
alert(scope);               // yes 灾难尚未降临
alert(changeScope());       // no:调用之然后才发现没有局部变量，却是全局变量，灾难慢慢逼近……
alert(scope);               // no 淹没在黑夜……

javascript定义对象写法

cript定义对象的几种简单方法

1.构造函数方式，全部属性及对象的方法都放在构造方法里面定义

优点：动态的传递参数

缺点：每创建一个对象就会创建相同的方法函数对象，占用大量内存

function User1(name, password) {
this.name = name;
this.password = password;
this.login = function(name,password){
if(this.name == name && this.password == password) {
return true;
}else {
return false;
}
};
}

2.原型方式，将对象属性及方法定义都写在对象的prototype里面

优点：每次创建对象时都是使用相同prototype中的方法，不会占用重复的内存

缺点：无法动态传递构造参数

function User2() {

}
User2.prototype.name = "prototype name";
User2.prototype.password = "prototype password";
User2.prototype.login = function(name,password){
if(this.name == name && this.password == password) {
return true;
} else {
return false;
}
};
原型方式的另一种写法：
格式：
var 对象名 = {};
    对象名.prototype.变量1=变量1的值;
    对象名.prototype.变量2=变量2的值;
    ……;
    对象名.prototype.函数1= function() {
       函数体
    };
    对象名.prototype.函数2= function() {
       函数体
    };
    ……;
说明：
（1）       初始对象体内可以不定义任何东西；
（2）       在要定义的变量前加“对象名.prototype.”的格式；
（3）       对象的内容与值以等号分隔，成对出现；
（4）       包含的变量或者函数之间以分号分隔，也可以省去分号。
（5）       函数需要写在function(){}的大括号之内。
例子：
var data = {};
   data.prototype. name ="Vicky”;
    data.prototype. age =20;
    data.prototype. eat = function() {
       alert(‘I wanna eat meat’);
    };
    data.prototype. sleep= function() {

3.构造及原型混合方式，将属性定义写在构造方式里面，方法写在prototype里面

优点：综合了construct及prototype方式的优点，可以动态传递构造参数，并且方法函数对象也只创建一个

缺点：函数写在对象外面，不太符合面向对象的思想

function User3(name,password) {
this.name = name;
this.password = password;
}
User3.prototype.login = function(name,password) {
if(this.name == name && this.password == password) {
return true;
} else {
return false;
}
};

4.动态原型方式：加一个判断属性，来判断该对象是否已经被创建过，如果被创建过，则方法就不在构建

优点：将原型函数写在对象定义里面

缺点：不支持继承

function User4(name,password) {
this.name = name;
this.password = password;
if(typeof User4.__initialized == "undefined") {
User4.prototype.login = function(name,password){
if(this.name == name && this.password == password) {
return true;
} else {
return false;
}
};
User4.__initialized = true;
}
}

5、JSON方式/对象直接量

格式：
var 对象名 = {
             变量1: 变量1的值,
             变量1: 变量1的值,
             ……,
            函数1: function() {
                函数体
            },
            函数2: function() {
                函数体
            }//Note:最后的逗号要去除为了和IE兼容。
};
说明：
（1）       大括号内直接填写变量或者函数；
（2）       对象的内容与值以冒号分隔，成对出现；
（3）       包含的变量或者函数之间以逗号分隔；
（4）       函数需要写在function(){}的大括号之内。
例子：

var  对象名 = {
        name:    “Vicky”,
        age:     26,
        eat: function() {
               alert(‘I wanna  eat meat’);
        },
        sleep: function() {
               alert(‘I wanna sleep’);
         }
 };

注释：类似的方式也叫做匿名类
匿名类举例：

{
     index: '//',
     reg: new RegExp('^//.*$'),
     css: "comment"
 }

上面的方式创建了类，只是没赋给一个变量而已。

6、create方式

cript组件库。
格式：

var 对象名 = Class.create();
        Object.extend(对象名.prototype, {
             变量1: 变量1的值,
             变量1: 变量1的值,
              ……,
             函数1: function() {
                      函数体
                 },
             函数2: function() {
                      函数体
             },
 ……
 });

说明：
（1）       对象的创建使用了Prototype库中的Class.create()函数；
（2）       对象的内容使用Prototype库中的Object.extend()函数来扩展；
（3）       被扩展的对象在传入Object.extend函数时一定要带上prototype，
（4）       扩展内容被大括号包含，其内与JSON方式的定义格式完全相同。
例子：

var data = Class.create();
        Object.extend(dta.prototype, {
        name: "Vicky",
        age: 20,
        eat: function() {
               alert(‘I wanna eat meat’);
        },
        sleep: function() {
               alert(‘I wanna sleep’);
        }

其实，JS对象的定义还有其它的方式，你也可以用上面几种进行组合定义，这显出了JS作为动态语言的自由性。

JS对象的创建正规方法如下：

var d1 = new Data();

      JS对象变量的引用方式有两种：
（1）       点号方式引用，如，data.name。
（2）       数组方式引用，如，data[‘name’]

http://blog.163.com/shilei_nb/blog/static/5187289320071012404278/

javascript面向对象编程的学习---对象继承

继承,通俗地说,之前你写过一些类,这些类中有一些是而你现在要写的类的功能的子集或者基本相同,那么你不用完全重新写一个新的类,你可以把之前写的类拿过来使用.这样的一种代码重用过程就叫做继承.

深入学习javascript继承之前,先了解下面的几个概念:

父类:被继承的类

子类:由继承得来的类

超类:也就是父类

抽象类:一般不用来实例化的类,它的用途是用来给其他类继承.

基类:提供给其他类可以继承的类

派生类:由基类继承而来的类

javascript对象继承通常有下面的5种方式:

1.对象冒充

2.call()方式

3.apply()方式

4.原型链

5.混合方式

A.对象冒充

所谓对象冒充,就是新的类冒充旧的类(旧的类必须采用构造函数方式),从而达到继承目的.

eg.1 
  
            function people(name,sex,age){    //使用构造函数方式 
  
                this.name=name; 
  
                this.sex=sex; 
  
                this.age=age; 
  
                this.say=function(){ 
  
                    alert("My name is " this.name); 
  
                }; 
  
                this.doing=function(){ 
  
                    alert("I am speaking"); 
  
                }; 
  
            } 
  
            var Marry=new people("Marry","Woman","23"); 
  
            Marry.say(); 
  
            Marry.doing(); 
  
             
  
            function white_people(name,sex,age){ 
  
                this.inherit=people; 
  
                this.inherit(name,sex,age); 
  
                delete this.inherit; 
  
                 
  
                this.area=function(){ 
  
                    alert("I am in Europe"); 
  
                } 
  
            } 
  
            var Tom=new white_people("Tom","man","21"); 
  
            Tom.say(); 
  
            Tom.area(); 
  
            alert(Tom.age); 
  
        上面的例子中,people是用来做white_people的基类,记住这个格式是用来对象冒充达到继承目的的 
  
                this.inherit=people;            //冒充 
  
                this.inherit(name,sex,age);        //继承 
  
                delete this.inherit;            //删除继承

所有新属性和新方法都必须再删除了继承后定义,这样是为了避免覆盖父类的相关属性和方法.

另外,对象冒充支持多继承.

eg.2 
  
            function worker(pay,work){ 
  
                this.pay=pay; 
  
                this.work=work; 
  
            } 
  
            function city_worker(name,sex,age,pay,work){ 
  
                this.inherit=people; 
  
                this.inherit(name,sex,age); 
  
                delete this.inherit; 
  
                 
  
                this.inherit=worker; 
  
                this.inherit(pay,work); 
  
                delete this.inherit; 
  
            } 
  
             
  
            var Jerry=new city_worker("Jerry","man","21","$1000","coder"); 
  
            Jerry.say(); 
  
            alert(Jerry.work);

对象冒充有一个不足的地方:多继承机制实现时,如果基类存在相同的属性或者方法,将从后面的类继承.

B.call()方式

只是封装的对象冒充的一个函数.这样,我们不再需要写"经典"的三句话,而是用下面这句话代替:

基类.call(对象,参数列表)

eg.1 
  
            function farmer(name,sex,age,pay,work){ 
  
                people.call(this,name,sex,age); 
  
                worker.call(this,pay,work); 
  
            } 
  
             
  
            var Nicholas=new farmer("Nicholas","man","27","$3000","irrigator"); 
  
            Nicholas.say(); 
  
            alert(Nicholas.pay);

同样,call()存在同名属性和方法的小问题.

C.apply()方式

和call()一样.apply()也是对象冒充的一个封装函数.其格式为:

基类.apply(对象,参数数组);

eg.1 
  
            function white_collar(name,sex,age,pay,work){ 
  
                people.apply(this,new Array(name,sex,age)); 
  
                worker.apply(this,[pay,work]); 
  
            } 
  
             
  
            var Jiessie=new white_collar("Jiessie","woman","26","$2500","editor"); 
  
            Jiessie.say(); 
  
            alert(Jiessie.work);

同样,apply()存在同名属性和方法的小问题.

D.原型链

上面三种方式都是采用构造函数方式的继承,对应地,也具有原型函数方式的继承:原型链.

eg.1 
  
            function blue_collar(){ 
  
            } 
  
            blue_collar.prototype.name="Jean"; 
  
            blue_collar.prototype.age="33"; 
  
            blue_collar.prototype.say=function(){ 
  
                alert("my name is "  this.name); 
  
            }; 
  
             
  
            function city_blue_collar(){ 
  
            } 
  
            city_blue_collar.prototype=new blue_collar(); 
  
             
  
            var jj=new city_blue_collar; 
  
            jj.say();

原型链也具有了原型链的缺点:不能传递参数.另外,原型链不支持多继承,因为

E.混合方式

使用构造函数方式来写类的属性,对属性的继承采用call()或者apply()

使用原型方式来写的方法,对方法的继承采用原型链

eg.1 
  
            function beauty(name,age){ 
  
                this.name=name; 
  
                this.age=age; 
  
            } 
  
            beauty.prototype.say=function(){ 
  
                alert("小女叫" this.name); 
  
            }; 
  
             
  
            function china_beauty(name,age,area){ 
  
                beauty.call(this,name,age); 
  
                this.area=area; 
  
            } 
  
            china_beauty.prototype=new beauty(); 
  
            china_beauty.prototype.from=function(){ 
  
                alert("我来自" this.area); 
  
            }; 
  
             
  
            var diaochan=new china_beauty("貂禅","16","临洮"); 
  
            diaochan.say(); 
  
            diaochan.from(); 
  
            alert(diaochan.age);

这篇好文章是转载于：学新通技术网

JavaScript的基本语法

Js概述

语法结构

类型、值和变量

类型：

数字:

字符串：

布尔值：

Null和Undefined

全局对象

包装对象

不可变的原始值和可变的对象引用

类型转换

变量声明

变量作用域

推荐阅读：

javascript定义对象写法

javascript面向对象编程的学习---对象继承

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

微信运动停用后别人还能看到步数吗

excel打印预览压线压字怎么办