JavaScript学习1-快速入门

系统管理员 2021-03-26 14:23 658阅读 0赞

实验室项目要用到，学长项目前端全是JS写的，而且用的是angular.js框架。

这里只是抽取了主干，至于一些细节的东西，具体可以回去查阅，不要想着把工具书背下来。

**不强制要求末尾加分号，但是加了会更好理解。 **

**一、数据类型和变量**

Number：js只有Number，没有浮点和整数。

字符串：被 单引号 或 双引号 括起来的东西。

布尔值：true false

数组：

var arr = [1, 2, 3.14, 'Hello', null, true];
    arr[0]; // 返回索引为0的元素，即1
    arr[5]; // 返回索引为5的元素，即true
    arr[6]; // 索引超出了范围，返回undefined

对象：

var xiaoming = {
        name: '小明',
        birth: 1990,
        school: 'No.1 Middle School',
        height: 1.70,
        weight: 65,
        score: null
    };
    
    xiaoming.name; // '小明'
    xiaoming.birth; // 1990

Set和Map

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

var s = new Set([1, 2, 3, 3, '3']);
    s; // Set {1, 2, 3, "3"}

变量

变量本身类型不固定的语言称之为动态语言（js），与之对应的是静态语言（java）

var a; // 申明了变量a，此时a的值为undefined
    var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
    var s_007 = '007'; // s_007是一个字符串
    var Answer = true; // Answer是一个布尔值true
    var t = null; // t的值是null

显示变量内容

在浏览器里面就能直接跑js了

var x = 100;
    console.log(x);

**二、if else和Java一样，没什么好说**

**三、循环**

遍历数组，和Java一样

var arr = ['Apple', 'Google', 'Microsoft'];
    var i, x;
    for (i=0; i<arr.length; i++) {
        x = arr[i];
        console.log(x);
    }

for...in 遍历对象

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

数组也是对象(但是遍历的是属性，不是元素)

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

**Iterable是个重要的东西。**

Map和Set的遍历。

在Java里面，想遍历Map还挺麻烦。

**JS具有iterable类型的集合可以通过新的for ... of循环来遍历（数组/Map/Set）**

for of 关注的是里面的元素，for  in关注的是对象的属性。

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

iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。

var a = ['A', 'B', 'C'];
    a.forEach(function (element, index, array) {
        // element: 指向当前元素的值
        // index: 指向当前索引
        // array: 指向Array对象本身
        console.log(element + ', index = ' + index);
    });
    
    //A, index = 0
    //B, index = 1
    //C, index = 2

Set和Map的话，函数参数不一样，因为是不同的数据结构了

//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);
    });