JavaScript

1 开始

1.1 什么是JavaScript

JavaScript可被用于：

  • 前端开发人员
  • 后端开发人员
  • 全栈开发人员

JavaScript能做什么？

  • Web/Mobile应用
  • 实时网络应用
  • 命令行工具
  • 游戏

JavaScript运行于什么地方？

  • 浏览器，JavaScript引擎（FireFox: SpiderMonkey, Chrome: V8）
  • Node, 浏览器外运行JavaScript的运行时环境

JavaScript vs ECMAScript?

  • ECMAScript只是一个规范，第一版发行于1997年，最新的版本目前是ES2015/ES6
  • Javascript是一种被ECMAScript确认符合该规范的编程语言

1.2 配置开发环境

编辑器：

  • Visual Studio Code
  • Sublime Text
  • Atom

Node.js为JavaScript提供了一个浏览器之外的运行环境，请下载并安装方便学习。

VS Code安装完成后，命令行执行下面指令：

$ cd ~
$ mkdir apps
$ cd apps
$ mkdir demo01
$ cd demo01
$ code .

进入VSCode后，添加"index.html"文件，并拷贝以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

安装VS Code的扩展插件Live Server，完成后以Live Server打开index.html正常则安装成功。

1.3 浏览器中的JavaScript

可以把JavaScript嵌入到HTML文件head或body中的任何部分，如下是把JavaScript嵌入到HTML中的body部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        // JavaScript代码
        console.log('Hello, World');
    </script>
</body>
</html>

Live Server中打开index.html然后按F12并点击Console标签查看控制台输出：Hello, World

1.4 分离HTML和JavaScript

VS Code环境中，index,html同目录下，添加index.js，并添加以下代码到该index.js文件：

console.log("Hello, My World!");

VS Code环境，回到index.html并更新index.html为以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="index.js"></script>
</body>
</html>

以Live Server打开index.html文件，F12后并点击Console标签查看控制台输出。

1.5 Node中的JavaScript运行环境

如果node.js正确安装完成，则可以从VS Code的终端直接运行index.js，方法如下：

  • 从VS Code菜单选择终端，在终端运行下面命令运行index.js
$ node index.js
Hello, My World!

2 JavaScript基础

2.1 变量

JavaScript使用变量在内存中临时存储数据：

  • var 关键字用于声明一个变量
  • let 关键字与var相似也声明一个变量

更新index.js为以下代码：

let name;
console.log(name);

命令行（终端）运行index.js:

$ node basics.js
undefined

终端输出undefined表示name变量没有定义。更新index.js为：

let name = 'Jinzd';
console.log(name);

终端运行node index.js控制台输出Jinzd

小结：

  • 变量名不能是JavaScript保留字
  • 变量名应该有意义
  • 变量名不能以数字开始
  • 变量名不能包含空格或减号“-”
  • 变量名是大小写敏感的
  • 变量命名规则通常有Camel规则（firstName）或Pascal规则（FirstName）

2.2 常量

普通变量的值设定之后是可以被更改的：

let interestRate = 0.3;
interestRate = 1;
console.log(interestRate);

而常量的值在设置之后不能再被修改：

const interestRate = 0.3;
interestRate = 1;
console.log(interestRate);

运行上面代码会产生错误信息：Assignment to constant variable.

2.3 JavaScript原生数据类型和引用类型

JavaScript原生数据类型包括：

  • String
  • Number
  • Boolean
  • undefined
  • null

JavaScript还大量使用引用类型：

  • Reference Types

更新index.js为以下内容，并以node运行它：

let name = 'jinzd';     // string literal
let age = 30;           // number literal
let isApproved = true;  // boolean literal
let isChecked = false;  // boolean literal

let firstName;              // undefined
let lastName = undefined;   // undefined

let middleName = null;          // typeof middleName => object
console.log(typeof middleName); // object

2.4 动态类型

JavaScript是一种动态语言，与之相对的是静态语言，如：Java，静态语言变量声明后其类型不能再改变；而动态语言的变量类型则可以被改变。

静态语言：

string name = "Jinzd";

动态语言：

let v = 'demo';    // string literal
console.log(typeof v);
v = 30;
console.log(typeof v);

2.5 Objects

对象属于引用类型，引用类型包括：

  • Object
  • Array
  • Function

按下更新index.js并在控制台以node运行它：

let person = {
    name: 'Mosh',
    age: 30
};

console.log(person);

person.name = 'John';
console.log(person);

person['name'] = 'Mary';
console.log(person);

let section = 'name';
person[section] = 'Jim'
console.log(person);

2.6 Arrays 数组

参看以下数组例子，并更新到index.js然后以node运行它：

let selectColors = ['red', 'blue'];
console.log(selectColors);

console.log(selectColors[0]);

selectColors[2] = 'yellow';
console.log(selectColors);

selectColors[3] = 5;
console.log(selectColors);

selectColors[2] = true;
console.log(selectColors);

console.log(typeof selectColors);   // object

console.log(selectColors.length);   // 4

2.7 Functions函数

function greet(name, lastName) {
    console.log('Hello, ' + name + ' ' + lastName);
}

greet('John', 'Smith');
greet('mary');

更新上代码到index.js然后以node运行它，输出：

Hello, John Smith
Hello, mary undefined

2.8 函数类型

函数包括两类：

  • 函数执行一个任务没有返回值
  • 函数执行一组计算任务然后返回一个值

执行任务无返回值函数参看2.7节，下函数执行任务并返回值：

function square(number) {
    return number * number;
}

console.log(square(4));

3 操作符

3.1 JavaScript操作符

JavaScript包括以下操作符：

  • 算术操作符（Arithmetic)
  • 赋值操作符（Assignment)
  • 比较操作符（Comparison）
  • 逻辑操作符（Logical）
  • 位操作符（Bitwise）

3.2 算术操作符

let x = 10;
let y = 3;

console.log(x + y);
console.log(x - y);
console.log(x * y);
console.log(x / y);
console.log(x % y);
console.log(x ** y);

// increment
console.log(++x);   // first + then output
console.log(x++);   // output then +

console.log(--x);   // first - then output
console.log(x--);   // output then -

3.3 赋值操作符

let x = 10;

x = x + 5;
x += 5;

x = x * 3;
x *= 3;

3.4 比较操作符

let x = 1;

console.log(x > 0);
console.log(x >= 1);
console.log(x < 1);
console.log(x <= 1);

console.log(x === 1);
console.log(x !== 1);

3.5 等号运算符

// strict equality (same type and same value)
console.log(1 === 1)        // true
console.log('1' === 1)      // false

// lose equality (check value only)
console.log(1 == 1)         // true
console.log('1' == 1)       // true
console.log(true == 1)       // true

3.6 三元运算符（Ternary Operator）

let points  = 110;
let type = points > 100 ? 'gold' : 'silver';

console.log(type);

3.7 逻辑运算符

Logical AND (&&)
Logical OR (||)
Logical NOT (!)

 3.8 非布尔值逻辑运算

console.log(false || true);     // true
console.log(false || 'Mosh');   // Mosh
console.log(false || 1);        // 1

/*
below are Falsy (false) values

undefined
null
0
false
''
NaN (Not a Number)

Anything that is not Falsy -> Truthy
*/

短路：

let userColor = 'red';
let defaultColor = 'blue';
let currntColor = userColor || defaultColor;

console.log(currntColor);       // red

userColor = undefined;
currntColor = userColor || defaultColor;
console.log(currntColor);       // blue

3.9 位操作符

  • 1 = 00000001
  • 2 = 00000010
  • 3 = 00000011

And（&） Or（|），参看下面代码：

const readPermission = 4;
const writePermission = 2;
const execPermission = 1;

let myPermission = 0;

myPermission = myPermission | readPermission | writePermission | execPermission;

let message = myPermission & readPermission ? 'yes' : 'no';

console.log(message)

3.10 运算优先级

4 流程控制

4.1 if ... else

let hour = 10;

if (hour > 6 && hour < 12)
    console.log('Good morning');
else if (hour >= 12 && hour < 18)
    console.log('Good afternoon');
else
    console.log('Good evening');

4.2 switch ... case

let role = 'moderator';

switch (role) {
    case 'guest':
        console.log('Guest User');
        break;

    case 'moderator':
        console.log('Moderator User');
        break;
    
    default:
        console.log('default user');
}

4.3 for loops

4.3.1 for

for (let i = 0; i < 5; i++) {
    console.log("Hello, World.");
}

4.3.2 while

let i = 0;

while (i < 5) {
    console.log(i);
    i++;
}

4.3.3 do ... while

let i = 0;

do {
    console.log(i);
    i++;
} while (i < 5);

4.3.4 无限循环

do {
    console.log("xxx");
} while (true);

4.3.5 for ... in

const person = {
    name: 'jinyc',
    age: 20
};

for (let key in person)
    console.log(key, person[key]);

let colors = ['red', 'green', 'blue'];

for (let index in colors)
    console.log(index, colors[index]);

4.3.6 for ... of

let colors = ['red', 'green', 'blue'];

for  (let color of colors)
    console.log(color);

4.3.7 Max

function GetMax(num1, num2) {
    return (num1 > num2) ? num1 : num2;
}

console.log(GetMax(2, 5));

4.3.8 Landscape and Portrait

function isLandscape(width, height) {
    return (width > height);
}

console.log(isLandscape(500, 1000));

4.3.9 FizzBuzz

function fizzBuzz(input) {
    if (typeof input !== 'number')
        console.log(NaN);
    else if (input % 3 === 0 && input % 5 !== 0)
        console.log('Fizz');
    else if (input % 3 !== 0 && input % 5 === 0)
        console.log('Buzz');
    else if (input % 3 === 0 && input % 5 === 0)
        console.log('FizzBuzz');
    else
        console.log(input);
}

fizzBuzz(15);

4.3.10 Check Speed

function checkSpeed(speed) {
    const speedLimit = 70;
    const kmPerPoint = 5;

    if (typeof speed !== 'number')
        return NaN;

    if (speed <= speedLimit)
        return 'OK'

    let points = Math.floor((speed - speedLimit) / kmPerPoint);

    if (points >= 12)
        return "suspended"
    else
        return points;
}

console.log(checkSpeed(60));
console.log(checkSpeed(80));
console.log(checkSpeed(60));
console.log(checkSpeed(120));
console.log(checkSpeed(140));

 4.4 break and continue

done

4.5 Truthy & Falsy

以下是一些 falsy 值：

  • underfined
  • null
  • ''
  • false
  • 0
  • NaN
function countTruthy(array) {
    let cnt = 0;

    for (let v of array)
        if (v)
            cnt++;

    return cnt;
}

let a = [1, 2, 3];

console.log(countTruthy(a));

4.6 显示属性

let b = {
    name: 'jinzd',
    age: 40
};

function showProperties(s) {
    for (let key in s)
        console.log(key, s[key]);
}

showProperties(b);

上示例也可用于数组。

4.7 3和5倍数的和

console.log(sum(10));

function sum(limit) {
    let sum = 0;

    for (let i = 0; i <= limit; i++)
        if (i % 3 === 0 || i % 5 === 0)
            sum += i;

    return sum;
}

4.8 成绩

const marks = [80, 80, 50];

console.log(calculateGrade(marks));

function calculateGrade(marks) {
    let avg = getAverage(marks);
    
    if (avg >= 90) return 'A';
    if (avg >= 80) return 'B';
    if (avg >= 70) return 'C';
    if (avg >= 60) return 'D';
    return 'F';
}

function getAverage(array) {
    let sum = 0;
    let avg = 0;

    for (let value of array)
        sum += value;

    return sum / array.length;
}

4.9 Starts

let cnt = 10;

showStars(cnt);

function showStars(cnt) {
    for (let i = 1; i <= cnt; i++) {
        let star = '';

        for (let j = 1; j <= i; j++)
            star += '*';

        console.log(star);
    }
}

4.10 Prime Numbers 质数

showPrimes(200);

function showPrimes(limit) {
    for (let number = 2; number <= limit; number++) {
        let isPrime = true;

        for (let factor = 2; factor < number; factor++) {
            if (number % factor === 0) {
                isPrime = false;
                break;
            }
        }

        if (isPrime)
            console.log(number);
    }
}

5 对象 Objects

5.1 对象基础 Object Basics

// OOP
const circle = {
    radius: 1,
    location: {
        x: 1,
        y: 1
    },
    isVisible: true,
    draw: function() {
        console.log('draw');
    }
};

circle.draw(); // method

5.2 工厂函数

function createCircle(radius) {
    return {
        radius,
        draw() {
            console.log("draw");
        }
    };
}

const circle1 = createCircle(1);
console.log(circle1);
circle1.draw();

const circle2 = createCircle(2);
console.log(circle2);
circle2.draw();

5.3 构造函数

使用 new 关键字

function Circle(radius) {
    this.radius = radius;
    this.draw = function() {
        console.log('draw');
    }
}

const circle = new Circle(2);

circle.draw();
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jinzd/p/14057905.html