JavaScript Syntax introduction

Posted on Edited on

JavaScript syntax introduction：

  1. mode : 'use strict' (严格模式)

  2. 打印 ： console.log()

  3. 比较运算符 : ===

  4. NaN : not a number, 判断NaN的方法通过 isNaN()函数

  5. null 和 undefined : null 表示“空”的值， undefined 表示值未定义，仅仅在判断函数参数是否传递的情况下有用

  6. for ... in 循环：

    var o = {
        name: 'Jack',
        age: 20,
        city: 'Beijing'
    };
    for (var key in o) {
        console.log(key); // 'name', 'age', 'city'
    }

  7. 对象 :由一组键-值组成的无序集合，用{}表示, 其中 键 必须是字符串

    var person = {
        name: 'Bob',
        age: 20,
        tags:['js', 'web', 'mobile'],
        city: 'beijing',
        hasCar: true,
        zipcode: null
    }

    person.age = 18;
    delete person.school; //删除一个不存在的school属性也不会报错
    delete person.zipcode;//删除zipcode属性
    person.school = 'qinghua'; //新增一个school属性

    'toString' in person; // true;
    //因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以person也拥有toString属性

    hasOwnProperty(); //判断一个属性是否是xiaoming自身拥有的，而不是继承得到的

  • Array: 可包含任意数据类型 var arr = [1, 2, 3.14, 'Hello', null, true];

    • 通过索引来访问每个元素
    • length属性
    • indexOf() : 返回索引
    • slice() : slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array
    • push() 和 pop() : push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉
    • unshift 和 shift : 如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉
    • sort() : 可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序
    • reverse() : 反转array
    • splice() : 修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素
    • concat() : 把当前的Array和另一个Array连接起来，并返回一个新的Array
    • join() : 非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串

  • Map : 一组键值对的结构，具有极快的查找速度。

    var m = new Map([['Michael', 95],['Bob', 75],['Tracy',85]]);
    m.get('Michael');

    初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

    var m = new Map();
    m.set('Adam', 67);
    m.get('Adam');

  • Set :Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key

    var s1 = new Set();
    var s2 = new Set([1,2,3]);

  • iterable类型 ： 包含Array,Set,Map, 可使用for ... of语法

    for ... in 循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。
    当我们手动给Array对象添加了额外的属性后，for … in循环将带来意想不到的意外效果：
    for ... of 只循环集合本身的元素.

    var a = ['A', 'B', 'C'];
    a.name = 'Hello';
    for (var x in a) {
    console.log(x); // '0', '1', '2',  'name'}

    var b = ['A', 'B', 'C'];
    b.name = 'Hello';
    for (var x of b) {
    console.log(x); // 'A', 'B', 'C'}

  • forEach使用

    'use strict';

    // Array :
    var a = ['A', 'B', 'C'];

    a.forEach(function (element, index, array)) {
        // element: 指向当前元素的值
        // index: 指向当前索引
        // array: 指向Array对象本身
        console.log(element + ', index = ' + index);
    }

    //set :
    var s = new Set(['A', 'B', 'C']);
    s.forEach(function (element, sameElement, set) {
        console.log(element);
    });

    //Map :
    var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
    m.forEach(function (value, key, map) {
        console.log(value);
    });

** function:**

function abs(x) {
	if (x>=0) retrun x;
	else retrun -x;
}
//等价于
var abs = function(x) {
	if (x>=0) retrun x;
	else retrun -x;
}; // 需要加分号

function指出这是一个函数定义；
abs是函数的名称；
(x)括号内列出函数的参数，多个参数以,分隔；
{ … }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

** arguments：**

只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array

使用： arguments.length == 2 , 参数个数为2时；

** rest 参数:**

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

** variable scope：**

由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量
全局作用域：不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性

'use strict';
var course = 'Learn JavaScript';
alert(course);
alert(window.course);

以变量方式var foo = function () {}定义的函数实际上也是一个全局变量，因此，**顶层函数 ** 的定义也被视为一个全局变量，并绑定到window对象

'use strict';
function foo() {
	alert('foo');
}

foo(); // 直接调用foo
window.foo();// 通过window.foo()调用

每次直接调用的alert()函数其实也是window的一个变量：

'use strict';

window.alert('调用window.alert()');
// 把alert保存到另一个变量:
var old_alert = window.alert;
// 给alert赋一个新函数:
window.alert = function () {}

alert('无法用alert()显示了!');

// 恢复alert:
window.alert = old_alert;
alert('又可以用alert()了!');

JavaScript实际上只有一个全局作用域。
任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。

** 命名空间：**

全局变量会绑定到window上，
不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。
减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如 :

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};