JavaScript基础一

概述

JS是什么

JS是JavaScript的缩写，是一门动态、弱类型、基于对象的、多范式高级解释型语言。HTML, CSS，和JS, 是万维网内容生成的三大核心技术。JS用于制作网页交互，提供在线程序，包括视频游戏。大多数网站都使用JS，所有的现代浏览器也都内建JS引擎。这些引擎都是基于ECMAScript标准，对JS的不同实现。

JS的组成

• ECMAScript: 语法；
• DOM: document object model 文档对象模型。对文档元素的操作。
• BOM: browser object model 浏览器对象模型。操作浏览器，比如浏览器弹窗。

JS代码的引用方式

• script标签直接编写；
• 导入文件：<script src="xxx.js"><script>

JS的注释方式

• // 单行注释
• /* */ 多行注释

JS中的变量

声明变量

声明一个变量：关键字+变量名
var var_name;
1. 变量名由数字，字母，$, _ 组成，但是不能以数字开头或包括空格；
2. 一条语句的分隔符；如果不加，默认以换行作为一条语句结束标志；
3. 声明一个变量未赋值时，该变量获得一个初始值undefined. 如果对undefined变量作数学运算，会得到结果NaN(Not a Number); 如果将其与字符串拼接，会得到字符串”undefined”;
4. 声明变量时，可以不用var, 如果不用var，那么它是全局变量；
5. JS变量是区分大小写的，同样的单词，大小写不一样代表不同的变量。
5.1 推荐的变量命名方式是camelCase式，在有多个单词的变量中，第一个单词小写，其后的每个单词的首字母大写:
var oneVariable;
var anotherVaribalName;
5.2 匈牙利类型标记法：类型+大驼峰
var iMyScore = 100, sMyName = “Ayhan”;

变量的赋值

变量的赋值：
var_name = value;
通常在声明变量的同时为其赋值：
var var_name = value;
也可以一行声明多个变量并赋值：
var name=”egon”, age=25, sex=”male”;

常量和标识符

1. 常量：直接在程序中出现的数据值
2. 标识符：变量名、函数名、关键字（保留字）
3. JS关键字，参考：http://www.runoob.com/js/js-reserved.html

数据类型

1. 基本数据类型：undefined, null, boolean, stirng, symbol, number
   
   1. number（包括整型和浮点型）
   2. boolean: true/false 小写。布尔值可以做计算，python中也可以，true代表1，false代表0：console.log(true+2) //3
   3. undefined类型下只有一个值：undefined //声明变量未赋值时，该变量获得一个初始值undefined；函数无返回值时，默认返回undefined
2. 引用数据类型：object（包括数组，键值对）
   
   1. 注：json是object的子集
   2. null 空对象
      var a=null; 对象没有具体值
      console.log(a); //null
      console.log(typeof a); //object
3. 查看数据类型：console.log(typeof var_name) //命令行日志记录
   或者alert(typeof var_name)

运算符

算术运算符：

+ - * / % ++ --
+可以用于拼接字符串
JS中的取余运算 %
注意，取余操作符%有时被称为取模运算。它们式非常相近的，但是取余运算在负数时有问题。

JS中的自增
i = i+1; ==> i++;
i = i+n; ==> i+=n;
JS中的自减
i = i-1; ==> i –;
区分：
var x=10;
ret = x++ ==>先赋值再计算 console.log(ret) // 10
ret = ++x ==>先计算再赋值 console.log(ret) // 11

比较运算符：

JS中的比较运算符有两种，普通比较比较和严格比较，普通比较可以比较两个不同的数据类型，比如：
==, >, <, !=, >=, <=
严格比较只能比较相同的数据类型，比如：
===， ！==，
==可以比较两种数据类型（一种转化为另一种）：
1 == 1 // true
1 == 2 // false
1 == ‘1’ // true
“3” == 3 // true
===严格比较，只能比较相同的数据类型：
3 === 3 // true
3 === ‘3’ // false

JS中字符串可以直接和数字拼接，自动将数字转为字符串。

强类型语言不会作数据类型转换（比如python中 print(2==’2’)结果是False）；JS是弱类型语言。

var s=”8”;
var ret=+s; // +正号运算
console.log(ret);
console.log(typeof ret); //JS会自动将字符串转为数字，以进行+运算

var s=”hello”;
var ret=+s;
console.log(ret); //NaN
console.log(typeof ret); //number
NaN属于number类的一个特殊值，当遇到将字符串转为数字无效时，就会得到NaN

赋值运算符：

+=， -=， *=， /= 和python中是一样的

逻辑运算符：

逻辑与：&&

if (num >5 && num < 10) {}等价两个if嵌套：if (num >5 ) {     if (num<10){}}

逻辑或：||

if (num > 10 || num < 5) {     return "no";}return "yes";等价于：if (num > 10) {     return "no";}if (num < 5) {     return "no";}return "yes";

逻辑非!

流程控制

if语句

if (condition1) {     statement is execute;}else if (condition2) {     statement is execute;}else {     statement is execute;}

Switch语句

switch (num) {  // 检测num     case value1:    // 如果num === value1         statement1;  // 执行statement1         break;       // 结束    case value2:        statement2;        break;        ...    case valueN:        statementN;        break;    default:  //如果都不满足，执行下面的语句（相当于 if/else 中最后的else语句）        defaultStatement;}

case的值是用 === 严格等于来判断。如果break语句缺失，那么下一条case语句被执行，直到碰到break. 如果多个输入都有同样的输出，那么可以根据情况去掉break:

switch(val) {    case 1:    case 2:    case 3:        result = "1, 2, or 3";        break;    case 4:        result = "4 alone";}

如果有多重情况要判断，那么switch语句比 if/else 更方便：

if (val == 1) {     answer = "a"} else if (val == 2) {     anser = "b";} else {     answer = "c";}

写成switch如下：

switch (val) {     case 1:          answer = "a";          break;     case 2:          answer = "b";          break;     default:          answer = "c";}

while循环

var arr=[]var i=0;while (i<5) {     arr.push(i);     i++;}

JS中的while循环基本和python是一样的。

for循环

JS的for循环于C类似：是条件循环，而pyton中for是遍历循环。

var myArray = [];for (var i = 0; i < 5; i++) {     myArray.push(i)}

结果myArray包含 [0, 1, 2, 3, 4,]

for （init var; conditon; var自增/自减）{
statement is execute;
}
初始化var–》判断条件成立–》执行下面的语句–》var自增/自减–》判断条件成立–》执行下面的语句（判断条件不成立，结束）

for循环嵌套：

var arr=[[1,2],[3,4],[5,6]];for (var i=0; i<arr.length; i++) {     for (var j=0; j<arr[i].length; j++ {          console.log(arr[i][j])     }}

方式二：遍历循环 —》 极其不推荐

var arr=[111,222,333]for (var i in arr) {     console.log(i)     //但是这里的值是index     console.log(i, arr[i])     //这样就可以取到具体值了}

break 和 continue–》同python
break退出循环体
continue跳过本次循环

JS中的函数

定义：

function funcName(parm1, parm2) {     console.log(...);      -- 打印       return value;   }

调用：funcName();

函数内声明的变量是局部变量。如果在全局内引用该变量，提示undefined。

函数返回Boolean值

通常我们用 if/else 作比较然后返回 true/false:

function isEqual(a, b) {     if (a === b) {          return true;     } else {          return false;     }}

由于 === 本身就会返回 true/false，上面的函数我们可以直接写成：

function isEqual(a,b) {     return a === b;}

arguments

这个对象会接收所有实参。类似python中的*args

function add() {     var sum=0;     for (var i=0; i<=arguments.length; i++) {          sum +=arguments[i];     }     return sum;}var sum = add(1,4,6)      // 11

匿名函数

先看一下python中的匿名函数
foo=lambda x,y:x+y
foo(4,6) #10
如果赋给变量调用，那么就失去了匿名函数的意义。
正确开启方式：
res = (lambda x,y:x+y)(4, 6) 直接调用函数传参
JS中的匿名函数使用方式类似：

(function(形参){     函数体；})(实参)

JS中的异常处理

try {    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行}catch (e) {    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。    //e是一个局部变量，用来指向Error对象或者其他抛出的对象}finally {     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。}

主动抛出异常 throw Error(‘xxxx’)

RE

定义re:

var expression = /pattern/gi
/ 是re的开始
pattern 是要匹配的对象
/ 是re的结束
g global，返回所有的匹配，而不只是第一个
i ignore 忽略大小写

使用：

var testString = “The dog chased the cat”;
var expression = /cat/gi;
str.match(expression)
统计有多少匹配：
str.match(expression).length;

匹配规则：

\d 匹配数字0-9
\s 空格
如果大写
\S 任何非空格
+ 出现一次或多次
…
具体RE匹配规则的编写同其它语言是一样的，在此不赘述。