Jquery第三课 Javascript基本语法

注释

JavaScript支持与C语言相同的注释方法，单行注释(//)和多行注释（/*
*/）。代码中的注释在执行的时候将被忽略，只是起到说明代码的功能，便于代码维护和理解。

//单行注释

/*
多行注释
1. 这是一行注释
2. 这还是一行注释
3. 注释只是起到说明性作用
*/

空白字符

空白字符包括空格、回车、换行等符号，在JavaScript中也会被忽略掉，只是起到维持代码格式的作用，方便查看。在实际应用中，JavaScript代码部署到服务器上时常常使用工具将代码中的空白字符去掉，以便减少文件大小。

//适当的空白字符可以增加代码的可读性
var foo = function() {
    for (var i = 0; i < 10; i++) {
        alert(i);
    }
};
foo();
//等价
var foo=function(){for(var i=0;i<10;i++){alert(i);}};foo();

保留字（关键字）

在定义标识符的时候不能使用关键字或保留字。

• ECMAScript 6的关键字

• ECMAScript预留关键字(enum、await)
• strict模式语录关键字

• ECMAScript老规范中的关键字（ECMAScript 1-3）

• 字面常量false、true以及null也是保留字

标识符

标识符作为变量或函数的名字，在后续的代码中可以引用它所表示的变量或函数。标识符的命名必须遵循以下规则：

• 不能与保留字（关键字）同名。
• 只能由字母、数字、$以及下划线_组成。
• 第一个字符不能为数字。

标识符命名应该尽量使用有意义的名字。

//合法的标识符
var myAwesomeVariable = "a";
var myAwesomeVariable2 = "b";
var my_awesome_variable = "c";
var $my_AwesomeVariable = "d";
var _my_awesome_variable_$ = "d";

//非法的标识符
var 345_abc = "a";  //不能以数字开头
var break = "b";    //不能使用保留字
var ***abc = "c";   //只能使用字母、下划线、$以及数字

变量定义

JavaScript使用var定义变量。

var test = 1;
var test2 = function() {};

var test3 = 2, test4 = function(){};

没有初始化的变量默认值为undefined。

var x;
x === undefined;    //true

数据类型

• 基本数据类型 a. 字符串（String），JavaScript中的字符串可以用单引号‘和双引号"表示。

var a = "I am a string";
var b = ‘So am I!‘;
var c = ‘I have "!‘
var c = "I must use escape\"".  //使用转义字符

b. 数值类型，可以是任意的正数、负数，JavaScript没有明显的浮点数和整数之分。 c. 布尔类型，可以为true和false。
d. JavaScript中还有两个特殊的类型null和undefined。null表示没有值，这与C语言中的NULL类似。而undefined表示变量没有赋值。

//null
var foo = null;

//undefined
var bar1 = undefined;
var bar2;

对象

JavaScript中所有东西都是对象。我们可以在[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference#Global_Objects]上找到大量的内置对象。下面主要介绍Object、Array和Function。

使用字面对象是最简单的对象创建方法。对象是由无序的键值对组成，其中键被称为属性property，而值可以是任的JavaScript类型的对象。我们通过使用点语法和括号语法创建和访问一个对象的属性。

//空对象
var person1 = {};

//使用点语法给属性赋值
person1.firstName = "John";
person1.lastName = "Doe";

//使用点语法访问属性
alert(person1.firstName + " " + person1.lastName);

//创建对象
var person2 = {
    firstName = "Jane",
    lastName = "Doe"
};

alert(person2.firstName + " " + person2.lastName);

var people = {};

//括号语法给属性赋值
people["person1"] = person1;
people["person2"] = person2;

//混合使用两种语法
alert(people["person1"].firstName);
alert(people["person2"].firstName);

如果一个属性在访问的时候还没有定义，将返回undefined结果。

var person = { name: "John Doe"};
alert( person.email );  //undefined

在JavaScript中，几乎所有东西都是对象，数组、函数、数值甚至字符串等都是对象，它们都有自己的方法和属性。

var myObject = {
    sayHello: function() {
        console.log("hello");
    },
    myName: "Rebecca"
};

myObject.sayHello();            //"hello"
console.log(myObject.myName);   //"Rebecca"

创建字母对象的时候，可以用任意的标识符、字符串或者是数值作为key。

Array

数组是一个存放有序元素的对象。我们可以使用从0开始的下标操作数组中的元素，如果超出范围则返回undefined。每个数组对象都有一个length属性表示元素的个数。

//使用构造器创建数组
var foo = new Array();

//使用字面方式创建对象
var bar = [];

这两种创建数组的方式都会将参数作为它的初始元素，但是需要注意的一点是：使用构造器创建的时候，如果只有一个参数，构造器将认为这是数组的大小！。

//foo.length == 1
var foo = [ 100 ];
alert( foo[0] );        //100
alert( foo.length );    //1

//bar.length == 100
var bar = new Array(100);
alert(bar[0]);      //undefined
alert(bar.length);  //100

数组对象拥有一系列常用的函数。

var foo = [];

foo.push("a");  //添加元素
foo.push("b");  //添加元素
foo[2] = "c";   //添加元素

alert(foo[0]);  //a
alert(foo[1]);  //b

alert(foo.length);  //c

foo.pop();

alert(foo[0]);  //a
alert(foo[2]);  //undefined

alert(foo.length);  //2

foo.unshift("z");

alert(foo[0]);  //z
alert(foo[1]);  //a

alert(foo.length);  //3

foo.shift();

alert(foo[0]);  //a
alert(foo[2]);  //undefined

alert(foo.length);  //2

Array的方法和属性 - .length获取数组中元素个数。

var myArray = ["Hello", "world", "!"];
console.log(myArray.length);    //3

• .concat()连接两个数组。

var myArray = [2, 3, 4];
var myOtherArray = [5, 6, 7];
var wholeArray = myArray.concat(myOtherArray);  //[2, 3, 4, 5, 6, 7]

• .join()创建一个由数组元素使用分隔符连接而成的字符串。

var myArray = ["hello", "world", "!"];
//默认分隔符为逗号
console.log(myArray.join());    //"hello,world,!"
console.log(myArray.join(" ")); //"hello world !"
console.log(myArray.join("!!"));//"hello!!world!!!"

console.log(myArray.join(""));  //"helloworld!"

• .pop()移除最后一个元素，与.push()刚好相反。

var myArray = [];

myArray.push(0);    //[0]
myArray.push(2);    //[0, 2]
myArray.push(7);    //[0, 2, 7]
myArray.pop();      //[0, 2]

• .reverse()反转数组元素。

var myArray = ["world", "hello"];
myArray.reverse();  //["hello", "world"]

• .shift移除数组第一个元素。

var myArray = [];

myArray.push(0);    //[0]
myArray.push(2);    //[0, 2]
myArray.push(7);    //[0, 2, 7]

myArray.shift();    //[2, 7]

• .slice()获取数组的元素，并生成一个新的数组，其中参数为起始位置。

var myArray = [1, 2, 3, 4, 5, 6, 7, 8];
var newArray = myArray.slice(3);

console.log(myArray);   //[1, 2, 3, 4, 5, 6, 7, 8]
console.log(newArray);  //[4, 5, 6, 7, 8]

• .splice()移除从index开始的length个元素，并插入可变参数values表示的所有数据，至少有三个参数。

myArray.splice(index, length, values, ...);

var myArray = [0, 7, 8, 5];
//从1个位置开始，移除2个元素，并将[1, 2, 3, 4]插入其中
myArray.splice(1, 2, 1, 2, 3, 4); 

console.log(myArray);   //[0, 1, 2, 3, 4, 5]

－ .sort()数组排序，使用一个比较函数作为参数，缺省按升序排列。

var myArray = [3, 4, 6, 1];
myArray.sort(); //[1, 3, 4, 6]

//返回值大于0表示a > b。
function descending(a, b) {
    return b - a;
}

myArray.sort(descending);   //[6, 4, 3, 1]

• .unshift在数组第一个位置插入元素。

var myArray = [];

myArray.unshift(0); //[0]
myArray.unshift(2); //[2, 0]
myArray.unshift(7); //[7, 2, 0]

• .forEach()遍历数组，使用一个拥有三个参数的函数作为参数。

//elem为数组元素
function printElement(elem) {
    console.log(elem);
}

//index为元素位置
function printElementAndIndex(elem, index) {
    console.log("Index " + index + ": " + elem);
}

//array为数组本身
function negateElement(elem, index, array) {
    array[index] = -elem;
}

myArray = [1, 2, 3, 4, 5];

//依次打印数组中的每个元素
myArray.forEach(printElement);

//打印"Index 0: 1", "Index 1: 2", ...
myArray.forEach(printElementAndIndex);

//数组变为[-1, -2, -3, -4, -5]
myArray.forEach(negateElement);

更多关于Array的函数请查看http://learn.jquery.com/arrays/。

函数

函数是一个包含可以重复执行的代码的对象，它可以有0个或多个参数以及一个可选的返回值。可以使用多种方式创建函数。

//声明一个函数
function foo() {
    //Do something
}

var foo = function() {
    //Do something
};

有下面几种使用函数的方式。

a. 直接调用函数。

var greet = function(person, greeting) {
    var text = greeting + ", " + person;
    console.log(text);
};

greet("Rebecca", "Hello");  //"Hello, Rebecca"

b. 使用函数的返回值。

var greet = function(person, greeting) {
    var text = greeting + ", " + person;
    return text;
};

console.log(greet("Rebecca", "Hello")); //"Hello, Rebecca"

c. 将函数作为返回值。

var greet = function(person, greeting) {
    var text = greeting + ", " + person;
    return function() {
        console.log(text);
    };
};

var greeting = greeting("Rebecca", "Hello");
greeting(); //"Hello, Rebecca"

d. 立即调用的函数（IIFE），JavaScript的函数在创建后可以马上调用。

(function() {
    var foo = "Hello world";
})();

e. 函数作为参数传递。

var myFn = function(fn) {
    var result = fn();
    console.log(result);
};

myFn(function() {
    return "Hello, world!"; //"Hello, world!"
});

使用命名函数作为参数。

var myFn = function(fn) {
    var result = fn();
    console.log(result);
};

var myOtherFn = function() {
    return "Hello, world!";
};

myFn(myOtherFn);    //"Hello, world!"

jQuery类型检查

jQuery提供基本的类型检查方法。

var myValue = [1, 2, 3];

//JavaScript类型检查操作符typeof检查基本数据类型
typeof myValue === "string";    //false
typeof myValue === "number";    //false
typeof myValue === "undefined"; //false
typeof myValue === "boolean";   //false

myValue === null;   //false

//jQuery类型检查方法
jQuery.isFunction(myValue);     //false
jQuery.isPlainObject(myValue);  //false
jQuery.isArray(myValue);        //true

操作符

• 基本操作符的使用 ```js //字符串连接 var foo = "hello"; var bar = "world";

console.log(foo + " " + bar);

//数值的乘法和除法 2 * 3; 2 / 3;

//自增自减运算 var i = 1; console.log( ++i) ; //2 console.log(i); //2

var i = 1; console.log(i++); //1 console.log(i); //2 ```

• 同一个运算符，作用在数值与字符串类型产生的结果可能不同。

var foo = 1;
var bar = "2";
console.log(foo + bar); //12, 转换为字符串并连接

var foo = 1;
var bar = "2";
console.log(foo + Number(bar)); //3，数值相加

一元(unary)的+运算符同样可以将字符串转换为数值。

console.log(foo + +bar);    //3

• 逻辑运算符 逻辑运算符包括与&&、或||，可以用来连接多个操作数进行逻辑判断。

var foo = 1;
var bar = 0;
var baz = 2;

foo || bar; //返回1，true
bar || foo; //返回1，true
foo && bar; //返回0，false
foo && baz; //返回2，false
baz && foo; //返回1，true

这两个都是二元运算符，如果第一个操作数就能够确定整个表达式的值，则不会去执行第二个表达式。

//如果foo为假，不会执行doSomething()
foo && doSomething(foo);

//如果baz为真，bar === baz
//否则bar == createBar()
var bar = baz || createBar();

• 比较运算符

var foo = 1;
var bar = 0;
var baz = "1";
var bim = 2;

foo == bar; //false
foo != bar; //true
foo == baz; //true，类型不同

foo === baz;    //false
foo !== baz;    //true
foo === parseInt(baz);  //true

foo > bim;  //false
foo > baz;  //true
foo <= baz; //true

分支语句

• 有些代码只会在特定的情况下执行，JavaScript使用if、else进行流程控制。

//流程控制
var foo = true;
var bar = false;

if (bar) {
    //不会执行
    console.log("戴维营教育");
}

if (bar) {
    //不会执行
} else {
    if (foo) {
        //执行
    } else {
        //当bar和foo都为false的时候执行
    }
}

• 真假对象 下面一些对象表示假。

false       //逻辑假
""          //空字符串
NaN         //不是一个数值
null
undefined   //未定义
0           //数值0

而其它对象都为真。

"0"
"any string"
[]  //空数组
{}  //空对象
1   /／非0数值

• 三目运算符 再一些表达式或简单的判断中，使用三目运算符比if-else效率更高。

var bar = 1;
var foo = bar ? 1 : 0;  //foo == 1;

• switch语句 switch可以用来根据一组值执行不同的方法。

switch(foo) {
    case "bar":
        alert("the value was bar -- yay!");
        break;

    case "baz":
        alert("boo baz :(");
        break;

    default:
        alert("everything else is just ok");
}

不过在JavaScript中，有时使用其它方法代替switch语句，使得代码可重用性更好。

var stuffToDo = {
    "bar": function() {
        alert("the value was bar -- yay!");
    },

    "baz": function() {
        alert("boo baz :(");
    },

    "default": function() {
        alert("everything else is just ok");
    }
}

//检查属性是否存在
if (stuffToDo[foo]) {
    stuffToDo[foo]();
}
else {
    stuffToDo["default"]();
}

循环语句

循环语句可以让一个代码块重复执行特定次数。

for (var i = 0; i < 5; i++) {
    //Logs "try 0", "try 1", ..., "try 4".
    console.log("try " + i);
}

• for循环由四个部分的语句组成。

for ([初始化语句]; [条件判断语句]; [迭代器]) {
    [循环体]
}

初始化语句只会执行一次，我们可以在里面为变量设置合适的初始值。而条件判断语句在循环体之前执行。

• while循环语句。

while( [判断条件] ) {
    [循环体]
}

下面是while的一个典型用法。

var i = 0;
while (i < 100) {
    console.log("Currently at " + i);
    i++;
}

• do-while循环 与while循环类似，但是至少会执行一次循环体。

do {
    [循环体]
} while([判断条件]);

• break与continue 一个循环必须等循环条件不再满足才会结束。break能够直接结束循环。

for (var i = 0; i < 10; i++) {
    if (something) {
        break;  //结束循环
    }
}

continue停止执行当前这次循环中循环体的代码。

for (var i = 0; i < 10; i++) {
    if (something) {
        continue;   //直接执行i++
    }

    console.log("I have been reached");
}

本文档由长沙戴维营教育整理。