Web开发-JavaScript入门

Web开发-JavaScript

---

0. Learning WebSite

Link

1.基础语法

1.1. 类型

• 数字
• 字符串
• 布尔
• null
• undefined
• Error
• 对象
  • 函数
  • 数组·
  • 日期
  • 正则表达式
• Symbol 符号

1.1.1. 数字

• 字符串 -> 数字 ：
  parseInt("字符串"string, 进制radix)
  字符串以数字 0 开头，parseInt()函数会把这样的字符串视作八进制数字；同理，0x 开头的字符串则视为十六进制数字。
  parseFloat("字符串"string, 进制radix) 只用于解析十进制数字字符串。
  如果传入异常内容，返回 NaN，NaN做任何运算结果只会是NaN，可以用 isNaN(String)内置函数判断是否为NaN。

• 存在两特殊值 Infinity（正无穷） 和 -Infinity（负无穷），可通过内置函数isFinite(变量) 来判断一个变量是否是一个有穷数，如果类型为Infinity, -Infinity 或 NaN 则返回 false。

• JavaScript 中不区分整数和小数（浮点数），JavaScript 中的 Number 类型只能表示 -(253 - 1) 到 (253 -1) 之间的数值。

• 可以使用八进制或十六进制表示法来表示数字，其中八进制表示法使用 0 作为前缀，十六进制表示法使用 0x 作为前缀。

var a = 0377;     // 等于 255
var b = 0123;     // 等于 83
var c = 0xff;     // 等于 255
var d = 0xb4;     // 等于 180

• 注意区分数字对象Number （object） 和数字的区别

1.1.2. 字符串

• 和Python一样，string.method()，操作字符串, false、0、空字符串（“”）、NaN、null 和 undefined 被转换为 false,其他值为true
• string.length 获取长度

1.1.3. 布尔

• 可以通过一些表达式来得到布尔类型的值，如

var d = 2 < 1;  // 表达式 2 < 1 不成立，其结果为“假（false）”，所以 c 的值为布尔类型的 false

1.1.4. Symbol

var str = "123";
var sym1 = Symbol(str);
var sym2 = Symbol(str);
console.log(sym1);          // 输出 Symbol(123)
console.log(sym2);          // 输出 Symbol(123)
console.log(sym1 == sym2);  // 输出 false ：虽然 sym1 与 sym2
                            // 看起来是相同的，但实际上它们并不一样
                            // 根据 Symbol 类型的特点，sym1 和 sym2 都是独一无二的

1.1.5. 隐式类型强转

• 字符串 + 数字，数字会转换为字符串；
• 数字 - 字符串，字符串会转换为数字，如果字符串无法转换为数字（例如"abc"、“JavaScript”），则会转换为 NaN；
• 字符串 - 数字，字符串会转换为数字，如果字符串无法转换为数字，则会转换为 NaN；
• 乘**(*)、除(/)**运算时，也会先将字符串转换为数字。

1.1.n. 其他类型

• JavaScript 允许声明变量但不对其赋值，一个未被赋值的变量就是 undefined 类型。

1.2. 变量

• 如果变量在函数内没有声明（没有使用var关键字），则该变量为全局变量。
• 函数体内的已经定义的变量，在函数外没有函数调用时，则在函数外提示未被定义。
• 函数内改变的只是该函数内定义的局部变量，不影响函数外的同名全局变量的值，函数调用结束后，局部变量占据的内存存储空间被收回，而全局变量内存存储空间则被继续保留。

1.2.1. let

let 语句声明一个块级作用域的本地变量

// myLetVariable 在这里 *不能* 被引用

for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
  // myLetVariable 只能在这里引用
}

// myLetVariable 在这里 *不能* 被引用

1.2.2. const

常量，无法被修改

const Pi = 3.14; // 设置 Pi 的值
Pi = 1; // 将会抛出一个错误因为你改变了一个常量的值。

1.2.3. var

传统上在 JavaScript 声明变量的唯一方法。使用 var 声明的变量在它所声明的整个函数都是可见的。

// myVarVariable 在这里 *能* 被引用

for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
  // myVarVariable 整个函数中都能被引用
}

// myVarVariable 在这里 *能* 被引用

1.3. 运算符

• 和Python一样，可以用运算符连接字符串，字符串+数字 会转化数字为字符串进行连接。
  Tip: 通过与空字符串相加，可以将某个变量快速转换成字符串类型。

• JavaScript 比较

  • == 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果。
    而=== 和 !== 只有在相同类型下,才会比较其值。
  • == equality 等同，=== identity 恒等。
  • ， 两边值类型不同的时候，要先进行类型转换，再比较。=，不做类型转换，类型不同的一定不等
  • “=”：这个表示赋值，不是表示运算符；“”：表示等于(值)；“=”：表示全等于（类型和值）

1.4. 控制结构

1.4.1. if-else

var name = "kittens";
if (name == "puppies") {
  name += "!";
} else if (name == "kittens") {
  name += "!!";
} else {
  name = "!" + name;
}
name == "kittens!!"; // true

1.4.2. while

如果需要循环体至少被执行一次则可以使用 do-while。

// 1. while 语句
while (true) {
  // 一个无限循环！
}

// 2. do-while 语句
var input;
do {
  input = get_input();
} while (inputIsNotValid(input))

Tip: 短路逻辑 var name = o && o.getName(); 在需要访问某个对象的属性时，使用这个特性可以事先检测该对象是否为空

1.4.3. for循环

// key1: 
for (var i = 0; i < 5; i++) {
  // 将会执行五次

}
// key2:  for...of

for (let value of array) {
  // do something with value
}

// key3: for...in ：

for (let property in object) {
  // do something with object property
  // **区别于Python**
  // Python方式： for item in itemList：
  // 多了变量类型声明 let ，多了括号
}

1.4.4. switch

每个case根据需要使用switch ，否则顺延执行下一个case

switch(action) {
    case 'draw':
        drawIt();
        break;
    case 'eat':
        eatIt();
        break;
    default:
        doNothing();
}

1.5. 对象与数组

创建对象的2种方法

// Key 1:
var obj = new Object();
// Key 2: “对象字面量（object literal）”法
var obj = {};

创建数组

// Key 1:
var a = new Array();
a[0] = "dog";
a[1] = "cat";
a[2] = "hen";
a.length; // 3

// Key 2: “数组字面量（array literal）”法
var a = ["dog", "cat", "hen"];
a.length; // 3

• 数组的长度是比数组最大索引值多一的数。
• 访问一个不存在的数组索引，会得到 undefined

1.6. 函数

1.6.1. 函数表达式和函数声明

// 函数声明
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}

// 函数表达式
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};   //注意分号结尾

注意：在函数声明中，不需要在右花括号后放置分号，但若使用函数表达式就应该在表达式的最后以分号结尾

• 如果函数表达式在定义之前被调用，会抛出异常（报错），但函数声明则可以成功运行。这是因为在程序执行前，JavaScript 会先对函数声明进行解析，因此无论是在函数声明前还是声明后调用函数都是可行的。而函数表达式则是将一个匿名函数赋值给一个变量，所以在程序还没有执行到该表达式之前，相当于函数还未定义，因此无法调用。

1.6.2.

• 没有使用 return 语句，或者一个没有值的 return 语句，JavaScript 会返回 undefined
• arguments 内部对象，这个对象就如同一个类似于数组的对象一样，包括了所有被传入的参数。
• 剩余参数操作符在函数中以：…variable 的形式被使用。在调用函数时，它将包含所有未被捕获的参数。

function avg(...args) {
  var sum = 0;
  for (let value of args) {
    sum += value;
  }
  return sum / args.length;
}

avg(2, 3, 4, 5); // 3.5

• JavaScript 允许你通过任意函数对象的 apply() 方法来传递给它一个数组作为参数列表。

avg.apply(null, [2, 3, 4, 5]); // 3.5

1.6.3. 闭包

• 闭包的形成条件是内部函数需要通过外部函数 return 给返回出来
• 当我们需要在函数中定义一些变量，并且希望这些变量能够一直保存在内存中，同时不影响函数外的全局变量时，就可以使用闭包。
• 闭包的定义是这样的，闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。
• 同一个闭包机制可以创建多个闭包函数出来，它们彼此没有联系，都是独立的

function funOne(){    // 外部函数
    var num = 0;      // 局部变量
    function funTwo(){   // 内部函数
        num++;                 
        return num;
    }
    return funTwo;
}
var fun = funOne();             // 返回函数 funTwo

1.7. 自定义对象

JavaScript 是一种基于原型的编程语言，并没有 class 语句，而是把函数用作类

function makePerson(first, last) {
    return {
        first: first,
        last: last
    };
}
function personFullName(person) {
    return person.first + ' ' + person.last;
}
function personFullNameReversed(person) {
    return person.last + ', ' + person.first;
}

var s = makePerson('Simon', 'Willison');
personFullName(s); // "Simon Willison"
personFullNameReversed(s); // "Willison, Simon"

函数本身就是对象,上述代码改造如下

function makePerson(first, last) {
    return {
        first: first,
        last: last,
        fullName: function() {
            return this.first + ' ' + this.last;
        },
        fullNameReversed: function() {
            return this.last + ', ' + this.first;
        }
    }
}
s = makePerson("Simon", "Willison");
s.fullName(); // "Simon Willison"
s.fullNameReversed(); // Willison, Simon

• prototype:
  JavaScript 允许你在程序中的任何时候修改原型（prototype）中的一些东西，也就是说你可以在运行时 (runtime) 给已存在的对象添加额外的方法

变量提升：

JavaScript 引擎的解析方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行。 这样，所有声明的变量都会被提升到代码的头部，这就叫作变量提升（Hoisting）。

属性

• delete 保留字用于删除对象属性==

1.8.各类型对象简述

1.8.1.Data

Date 对象是 JavaScript 内置的对象 。通过它您可以访问计算机系统的时间，此外，Date 对象中还提供了多种用于管理、操作和格式化时间/日期的方法。
需要用new创建。

1.8.2.Data

Math 是 JavaScript 中的一个内置对象，其中提供 了一些数学中常用的常量值和函数，用来实现一些数学中常见计算，例如计算平均数、求绝对值、四舍五入等。
不需要用new创建。

1.8.3.RegExp

借助 RegExp 对象来使用正则表达式
可以不需要用new创建。
创建 RegExp 对象有两种方法：

var patt = new RegExp(pattern, modifiers);
var patt = /pattern/modifiers;

• pattern：正则表达式，按照正则表达式的语法定义的正则表达式；
• modifiers：修饰符，用来设置字符串的匹配模式，可选值如下表所示：

修饰符	描述
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有的匹配项，而非在找到第一个匹配项后停止）
m	执行多行匹配
s	允许使用.匹配换行符
u	使用 Unicode 码的模式进行匹配
y	执行“粘性”搜索，匹配从目标字符串的当前位置开始

注意：当使用 new 关键字创建 RegExp 对象时，需要将正则表达式中的特殊字符转义，即在特殊字符前加反斜杠\，例如\w+。

2.DOM

当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM），并将文档的所有部分（例如元素、属性、文本等）组织成一个逻辑树结构（类似于族谱），逻辑树的每一个分支的终点称为一个节点，每个节点都包含一个对象

• 假如函数是对象的方法，则函数的this指向所属对象。如果函数不是任何对象的属性，那么函数体中的this将指向“global object”，也就是窗体“window”

• 当函数运行时，会自动生成的一个内部对象，this代表的就是当前对象，只能在当前函数内部使用，注意这里很重要是当前函数内部！！！因为很多时候会函数中有函数，这个时候，我们就需要把外部函数对象this复制一份了，所以就有了var that=this，that就在里面的函数中用外面的函数对象，这样就不会出现报错说没有什么对象或者变量了。

2.1.1 this 和 that

                         

2.2.2. 钩子

https://blog.csdn.net/qq_60750453/article/details/124966490

3.语法总结

3.1.Python 和 Javascript的全局变量

• JS写在外部没用var的默认为var
• JS函数内修改全局变量会将该变量改变，Python需要在函数内用global声明，才会修改，否则默认为一个函数内局部变量
• 如下：
  JS代码

var le = 'aa'; //不用var 默认为var
function cgle(){
    le = 'bb'  //默认为全局变量
    console.log("Function: " + le)
};
cgle();
console.log(le)

Python代码

js = 'a'
def ad():
    global  js
    js = 'b'  # 若不用global声明，则是默认为一个局部变量
    print(js)
ad()
print(js)

3.2. 参考网址

http://c.biancheng.net/view/5355.html