[JavaScript知识库]THU.JavaScript

THU.JavaScript

JavaScript语言基础

变量声明

• JavaScript的变量名可以使用 _，数字，字母，$组成，不能以数字开头

• 声明变量使用 var，let 变量名 ; 的格式来进行声明

注意

1.变量名是区分大小写的。
2.推荐使用驼峰式命名规则。
3.保留字不能用做变量名。

补充：
1.ES6 新增了 let 命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。
2.ES6 新增 const 用来声明常量，一旦声明，其值就不能改变

JavaScript数据类型

• JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串 

数值

• JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000, e5 表示 10 的五次方
var d = 123e-5;  // 0.00123, e-5 表示 10 的 -5 次方

字符串

常用方法

• 拼接字符串一般使用"+"

补充

string.slice(start, stop) 和 string.substring(start, stop)：

两者的相同点：
如果 start 等于 end，返回空字符串
如果 stop 参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start 和 stop将被交换
如果参数是负数或者不是数字，将会被 0 替换

silce()的特点：
如果 start > stop 不会交换两者
如果 start 小于0，则切割从字符串末尾往前数的第 abs(start) 个的字符开始(包括该位置的字符)
如果 stop 小于0，则切割在从字符串末尾往前数的第 abs(stop) 个字符结束(不包含该位置字符)

布尔值

• 区别于 Python，true 和 false 都是小写
• " "(空字符串)、0、null、undefined、NaN 都是 false。

null 和 undefined

• null 表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
• undefined 表示当声明一个变量但未初始化时，该变量的默认值是 undefined。还有就是函数无明确的返回值时，返回的也是 undefined。

null表示变量的值是空 (null 可以手动清空一个变量的值，使得该变量变为 object 类型，值为 null)，undefined 则表示只声明了变量，但还没有赋值。

对象

• 对象只是带有属性和方法的特殊数据类型，JavaScript 提供多个内建对象，比如 String、Date、Array 等等。但 JavaScript 允许自定义对象。

数组

• 数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表

常用方法

forEach()

• forEach(function(currentValue, index, arr), thisValue)

参数

let arr=[11, 22, 33, 44]
console.log(arr)
arr.forEach(function (value, index)
            {
  console.log(value, index)
})

// 11 0
// 22 1
// 33 2
// 44 3

Splice()

splice(index,howmany,item1,…,itemX)

参数

var arr = [111, 'abc', true, 222]
arr.splice(0, 2, [999,888])  // 第一个参数表示起始位置，第二个参数表示删除的个数，第三个参数表示添加的新元素
console.log(arr)


var a = [[999,888, [777,666,555]] ,true, 222]  // 三维数组，有几层[]即几维数组

Map()

map(function(currentValue,index,arr), thisValue)

参数

• 用法与 forEach() 相同

类型查询

typeof 是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。用法与 Python 中的 type 相同

对变量或值调用 typeof 运算符将返回下列值之一：

• undefined - 如果变量是 Undefined 类型的
• boolean - 如果变量是 Boolean 类型的
• number - 如果变量是 Number 类型的
• string - 如果变量是 String 类型的
• object - 如果变量是一种引用类型或 Null 类型的

运算符

算数运算符

+ - * / % ++ --

var i = 10
console.log(i)
  
var res1=i++
console.log(res1)  // 10

var res2=++i
console.log(res2)  // 12

这里由于的 i++ 和 ++i 在出现赋值运算式，i++ 会先赋值再进行自增1运算，而 ++i 会先进行自增运算再赋值

比较运算符

> >= < <= != == === !==

1 == “1”  // true  弱等于
1 === "1"  // false 强等于

//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误

逻辑运算符

&& || !
&& = and
|| = or 
! = not

赋值运算符

= += -= *= /=

流程控制

if - else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

if - else if - else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

• switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句
• 能用 if 就不要使用 switch

for

for (var i=0;i<10;i++) {
  console.log(i);
}

for 循环先执行()内的条件，执行结束后运行 console.log(i)，且 for 循环是整体循环，包含 console.log(i)

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

• 能用 for 解决尽量不使用 while，容易陷入死循环

算元运算符

var a = 1;
var b = 2;
var c = a > b ? a : b

1.这里的三元运算顺序是先判断条件a>b,若条件成立返回 ? 后的值 -- a,条件不成立返回 : 后的值 -- b
2.三元运算可以嵌套使用

var a=10,b=20;var x=a>b ?a:(b=="20")?a:b;
x10

函数

函数定义

• JavaScript中的函数和Python中的非常类似，只是定义方式有点区别

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);

补充：

• ES6中允许使用“箭头”（=>）定义函数

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

• 如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

函数中的arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)

// 3
// 2
// 1

注意：

• 函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

函数的全局变量和局部变量

局部变量：

• 在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

• 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

• JavaScript 变量的生命期从它们被声明的时间开始。

• 局部变量会在函数运行以后被删除。

• 全局变量会在页面关闭后被删除。

作用域

• 首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

词法分析（尝试理解）

• JavaScript中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程：

• 当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

  1. 函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
  2. 函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
  3. 函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

  函数内部无论是使用参数还是使用局部变量都到AO上找。

JavaScript 中的词法分析相当于 Python 函数中语法分析，即在函数定义的过程当中，函数不执行代码，只进行语法检测，而函数只能先定义后调用，若先调用后定义即使函数外部作用域（包括全局作用域）有同名变量也同样会造成语法错误。

函数体代码必须先定义再调用

内置对象和方法

• JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript 中，对象是拥有属性和方法的数据

• 注意 var s1 = “abc” 和 var s2 = new String(“abc”) 的区别：typeof s1 --> string 而 typeof s2 --> Object

自定义对象

• JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍历对象中的内容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

创建对象：

var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性

注意：

• ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键

• 也就是说，Object结构提供了“字符串–值”的对应，Map结构提供了“值–值”的对应，是一种更完善的Hash结构实现

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};

// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象

// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

/*第一个注意事项，正则表达式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

Math对象

abs(x)      返回数的绝对值
exp(x)      返回 e 的指数
floor(x)    对数进行下舍入
log(x)      返回数的自然对数（底为e）
max(x,y)    返回 x 和 y 中的最高值
min(x,y)    返回 x 和 y 中的最低值
pow(x,y)    返回 x 的 y 次幂
random()    返回 0 ~ 1 之间的随机数
round(x)    把数四舍五入为最接近的整数
sin(x)      返回数的正弦
sqrt(x)     返回数的平方根
tan(x)      返回角的正切