前端开发之JavaScript

JavaScript

　　JS是一种脚本语言，浏览器执行，用于渲染HTML网页，实现网页的动画效果。

　　JavaScript的引用方式：

　　　　1，在HTML文件中script标签中写JS代码

<script>
  // JS代码
</script>

　　　　2，引用外部的JS文件

<script src="my-JavaScript.js"></script>

　　JavaScript的注释和语句规范

// 单行注释：
// var name = "tom";

/*多行注释：*/

/*
var name = "tom";
var age = 18;
*/

// 每一句代码要用分号；为结束

　　JavaScript变量声明

　　　　变量声明：var 变量名 = 数据；

var age = 18;

　　　　变量名命名规则：

　　　　　　1，变量名使用数字，字母，下划线和$组成，但是不能以数字开头；

　　　　　　2，不能使用JS的保留字；

　　　　　　3，驼峰式命名，见名知意。

　　JavaScript的数据类型

　　　　1，字符串string：

　　　　　　引号包裹的为字符串类型。如 var s = "tom"；

　　　　　　字符串拼接使用+号，其他的常用方法有：

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

　　　　2，数字number：

　　　　　　JavaScript没有整型和浮点型的区分，就是数字类型。如 var n = 2.3；

　　　　　　数字还要一种比较特别的类型：NaN(Not a Number)，表示不是一个是数字。当字符串和数字相加时会返回NaN。

　　　　　　常用的方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN
parseFloat("3.1415926")  // 返回123.456

　　　　3，undefined：

　　　　　　JavaScript中一种特殊的类型，当一个变量只声明而没有赋值时，它的类型就是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

var x;  // 此时x是undefined

　　　　4，布尔值boolean：

　　　　　　true和false。在JavaScript中，空字符串，数字0，null，undefined和NaN都是false，其他的为true。

　　　　5，数组：

　　　　　　形式类似python中列表。

var li = [123, "ABC"];

　　　　　　常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序

　　JavaScript数据类型查看

　　　　查看方式：typeof 数据。

// 返回string
typeof "abc" ;
// 返回number
typeof 12;

　　JavaScript的运算符

　　　　1，算数运算符：加+  减-  乘*  除/  取余%  自加++  自减--

　　　　2，比较运算符：大于>  大于等于>=  小于<  小于等于<=  弱不等于!=  弱等于==  等于===  不等于!==

　　　　　　弱等于只比较数值不看类型，如 1 == ''1"，它返回的是true。

　　　　3，逻辑运算符：与 &&  或||  非！

　　　　4，赋值运算符：=将数值赋值给前面的变量  +=变量加上数值后再赋值  -=变量减去数值后再赋值  *=变量乘以数值后再赋值 /=变量除以数值后再赋值

　　JavaScript流程控制

　　　　判断

　　　　1，if  else：单一条件

var a = 10;
if (a > 5){
  条件成立时执行的代码
}else {
  条件不成立时执行的代码
}

　　　　2，if    else if    else：多条件

var a = 10;
if (a > 5){
  条件一成立时执行的代码
}else if (a < 5) {
  条件二成立时执行的代码
}else {
  条件都不成立时执行的代码
}

　　　　3，switch：特定多条件

var day = 2;
switch (day) {  // 变量名
  case 0:   // 条件数值
  console.log("Sunday");  // 满足条件执行的代码
  break;  // 退出，确保不会执行下面的代码
  case 1:
  console.log("Monday");
  break;
  default:
  console.log("...")   // 都不满足时执行的代码
}

　　　　循环

　　　　1，for：

for (var i=0;i<10;i++) {    // 声明变量i，设定条件，i自增
  console.log(i);
}

　　　　2，while：

var i = 0;
while (i < 10) {  // 满足条件进入循环
  console.log(i);
  i++;  // 自增，用于改变条件值来结束循环
}

　　　　3，三元运算：

var a = 1;
var b = 2;
var c = a > b ? a : b  // 当a>b时，返回冒号之前的a，反之返回冒号之后的b

　　JavaScript的函数

　　　　1，函数的定义

function 函数名() {
  函数体
}

// 可以设置参数
function 函数名(参数1，参数2，......) {
  函数体
}

// 可以有返回值
function 函数名() {
  函数体
  return 返回值
}

　　　　匿名函数

// 通过变量来接收
var func = function() {
  函数体
}

　　　　2，函数的调用

function foo() {
  console.log('tom');
}

// 函数调用
foo()

// 立即执行函数，直接执行。
(function(a, b){
  return a + b;
})(1, 2);

　　　　如果函数有参数，调用时传的参数即使和形参数量不同，也不会报错。为了避免这个问题，可以使用arguments，它会获取传的所有参数。通过判断它的长度，我们就可以确定传的参数是否满足条件。

function add(a,b){
  console.log(a+b);
  console.log(arguments.length)
}

add(1,2,3)  // 输出3  3

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

　　　　　　1，全局变量：在全局定义的变量，所有都可以访问它。

　　　　　　2，局部变量：在函数内定义的变量，只有函数内部的能访问它。当函数运行结束后就会清楚局部的变量。

　　　　4，函数的作用域

　　　　　　函数内部在找变量时，是从内向外找，逐步找到最外层。

　　　　5，函数的词法分析

　　　　　　在JavaScript中调用函数会先进性词法分析：

词法分析的过程：

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

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

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

　　JavaScript的对象和内置方法

　　　　在JavaScript中一切皆对象。我们也可以自定义对象。

　　　　1，自定义对象：

var a = {"name": "Alex", "age": 18}; // 自定义对象
console.log(a.name);  // 取值方式一
console.log(a["age"]);  // 取值方式二

　　　　2，JavaScript语句创建对象：

var person=new Object();  // 创建对象
person.name="Alex";  // 给对象添加属性和值
person.age=18;

　　　　3，内置对象和方法：

　　　　　　1，Date对象

var d1 = new Date(); // 创建Date对象
d1.getDate()  // 使用对象方法

getDate()    从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()    从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()    从 Date 对象以四位数字返回年份。
getHours()    返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()    返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()    返回 Date 对象的分钟 (0 ~ 59)。
getMonth()    从 Date 对象返回月份 (0 ~ 11)。
getSeconds()    返回 Date 对象的秒数 (0 ~ 59)。
getTime()    返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()    返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()    根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()    根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear()    根据世界时从 Date 对象返回四位数的年份。
getUTCHours()    根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds()    根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes()    根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth()    根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds()    根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear()    已废弃。 请使用 getFullYear() 方法代替。
parse()    返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()    设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()    设置 Date 对象中的年份（四位数字）。
setHours()    设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()    设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()    设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()    设置 Date 对象中月份 (0 ~ 11)。
setSeconds()    设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()    setTime() 方法以毫秒设置 Date 对象。
setUTCDate()    根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear()    根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()    根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds()    根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes()    根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth()    根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds()    setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear()    已废弃。请使用 setFullYear() 方法代替。
toDateString()    把 Date 对象的日期部分转换为字符串。
toGMTString()    已废弃。请使用 toUTCString() 方法代替。
toISOString()    使用 ISO 标准返回字符串的日期格式。
toJSON()    以 JSON 数据格式返回日期字符串。
toLocaleDateString()    根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()    根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()    据本地时间格式，把 Date 对象转换为字符串。
toString()    把 Date 对象转换为字符串。
toTimeString()    把 Date 对象的时间部分转换为字符串。
toUTCString()    根据世界时，把 Date 对象转换为字符串。
UTC()    根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()    返回 Date 对象的原始值。

Date内置方法

　　　　　　2，JSON对象

　　　　　　　　var obj = JSON.parse(字符串)：将字符串转换成对象；

　　　　　　　　var str = JSON.stringify(对象)：将对象转换成字符串。

　　　　　　3，RegExp对象

　　　　　　　　JavaScript中正则相关的对象。

　　　　　　　　1，正则定义的两种方式：

var reObj1 = new RegExp("正则语句");
var reObj2 = /正则语句/

　　　　　　　　2，常用的方法 ：RegExp对象.test("将要被校验的字符串")

　　　　　　　　3，正则的匹配模式：

　　　　　　　　　　1，g：全局匹配

　　　　　　　　　　2，i：不区分大小写

　　　　　　　　4，注意事项：

1. 正则表达式之间不能加空格
2. .test()不传值相当于.test(undefined)  --> .test("undefined")
3. 全局匹配模式注意事项
    var reObj = /abc/g;  -->按lastIndex的值进行匹配
    reObj.test("abc")    --> lastIndex属性被设置成下一位的索引3
    reObj.test("123abc") -->从索引3开始匹配，能匹配上abc所以就返回true

　　　　　　4，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)      返回角的正切。