JavaScript编程语言

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

js基础

注释语法

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

引入js的多种方式

• script标签内支持编写
• script标签支持引入js文件

html任何位置都可以插入script标签，因为html文件是自上而下加载的，所以js代码可能在头部声明一些函数，也可能在尾部等待一些标签加载后执行。

结束符号

分号;

ps：可以在pycharm IDE中编写js文件

变量与常量

变量关键字：var、let

js的变量是变化类型，不必定义时指定数据类型。

> var a = 666
< undefined
> a
< 666
> let b = 777;
< undefined
> b
< 777

在浏览器console控制台输入代码，>表示代码执行，<表示返回值输出。

• let是ECMA6新语法，可以在局部定义变量不影响全局，这里的局部可以是循环体中之类的。
• 在新版浏览器中，我们应该习惯性的使用let创建。

常量关键字：const

常量定义了就不能再被赋值，只可读。

const c = 10;
c = 11;  // Assignment to constant variable.
console.log(c);  // 10

基本数据类型

可以用typeof进行类型查询，typeof本身属于一种运算符。

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

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

数值类型（Number）

在js中，整型和浮点型都是Number对象，但是我们也可以对数字进行一些转换操作。

• parseInt("123") 将数字字符转换成整型数字
• parseFloat("123.456") 将小数字符转换成浮点数字
• parseInt("abc") 返回NaN

NaN（not a number）

NaN在js中属于数值数据类型，表示不是一个数字。

字符类型（String）

单引号或者双引号引起来的数据，用于存储字符类型数据。

let s1 = "leethon"
let s2 = 'lee'

还可以用模板字符串（template string)：

let s3 = `可以支持
多行
字符串`
let name = 'jason', time="today";
`Hello ${name}, how are you ${time}?`  // 还支持嵌入字符串

字符串的拼接：

js中的字符串拼接支持+号，而且和大多数语言一样，其底层执行的效率不低。

Python中也支持，但是只有python用+拼接数据时底层效率比较低。

let na = "lee"
let me = "thon"
let name = na+me
console.log(name)  // leethon

字符串的常用方法：

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)个字符结束(不包含该位置字符)

布尔类型（Boolean）

true和false,在js中只认小写，这属于显式布尔值。

还有隐式布尔值。

• ""(空字符串)、0、null、undefined、NaN都是false属性。
• 其余为true属性。

null与undefined

• null 空，一般在指定或者清空某个变量时才会使用。
• undefined 未定义，1.变量声明但未初始化的默认值 2.函数无明确返回值时返回undefined

symbol

ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。

对象

js中，一切皆对象，之前罗列的数据类型也都属于对象。

允许自定义对象，也有内建对象，Number/String/Date/Array等都是js提供的内建对象。

对象只是带有属性和方法的特殊数据类型。

数组对象（Array）

很多语言中都有数组这种数据类型，而js的数组可以连续存储多种数据类型的值。

// 定义与索引取值
let l1 = [1, 2, 3, 'aaa']
console.log(l1[3]) // aaa

常用方法：

forEach()

str.forEach(function(currentValue, index, arr), thisValue){
    一些代码；
}
// function(currentValue, index, arr)
currentValue: 必要参数，指当前元素
index：可选，当前元素索引值
arr：可选，当前元素所属数组对象
// thisValue
额外参数，可选，如果有则传值给`this`值，如果没有传undefined给`this`

splice()

删除指定位置和个数的元素，添加新元素

str.splice(index,howmany,item1,.....,itemX)
// 参数
index：必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany：必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
		如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX：可选。要添加到数组的新元素

自定义对象（Object）

• 创建自定义对象

   let d1 = new Object()
   let d2 = {'name':'leethon','age':18}
  

• 对自定义对象进行增删改查

  // 查
  d2['name']  // 字符串形式的键
  d2.name  // 属性形式的键
  // 增
  d2['hobby'] = 'cola'
  d2.gender = 'male'
  // 改
  d2['age'] = 19
  d2.age = 20
  // 删
  delete d2.gender  // 返回true
  

运算符

算法运算符

+ - * / % ++ --

• %是去余

• 其中关于++和--是指自增和自减

  var x=10;
  var res1=x++;  // res1的值为10
  var res2=++x;  // res2的值为12
  

  造成上述运行结果是因为，

  自增运算符在变量后指先将x的值给别人再自增；

  自增运算符在变量后指先自增再将x的值给别人。

比较运算符

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

要强调的是==与===的区别：

• ==是弱等于，5=='5'的结果是true
• ===是强等于，5==='5'的结果是false

!=和!==也是同样的区别。

因为js本身是一门弱类型语言，==比较运算会自动转换一些数据的类型。

逻辑运算符

赋值运算符

= += -= *= /=

流程控制

分支结构-if

if(条件1){
    条件1成立执行的代码
}else if(条件2){
    条件2成立执行的代码
}else{
    条件不成立执行的代码
}

分支结构-switch

很多语言中都还存在着switch语法，而python中砍掉了。

switch(条件){
    case 条件1:
        条件1成立执行的代码;
        break;  // 如果没有写break，只要条件1满足，会一直执行到大括号结尾
    case 条件2:
        条件2成立执行的代码;
        break;
        ...
    case 条件n:
        条件n成立执行的代码;
        break;
    default:
        条件都不成立执行的代码;
}

注意：case子句通常需要加break阻断switch语句，否则后续的case子句也会执行

循环结构-for

for(起始条件;循环条件;条件处理){
    循环体子代码;
}
// 遍历数组对象
for (let i = 0; i < 10; i++) {
    console.log(i)
}
// 遍历自定义对象
let d1={'name':"leethon",'age':18}
for(let k in d1){   // 直接迭代拿出键（字符串形式）
    console.log(d1[k])
}

循环结构-while

while(循环条件){
    循环体子代码;
}

三元运算：条件?值1:值2

函数

匿名函数

function(参数){
    函数体
}

函数结构和简化结构

function 函数名(参数){
    // 注释
   函数体代码；
   return 返回值
}

// ES6中允许使用“箭头”（=>）定义函数。
function p1(a,b){
    return a+b
}
// 等同于
let p1 = (a,b) => a+b
// 即箭头左侧为形参，箭头右侧为返回值

// 定义完立即执行：
function p1(a,b){
    return a+b
}(1,2);
// 定义完立即传参执行一下。

参数与返回值特性

• 参数多传或者少传不会导致报错
• 所有实参实际上都传入了参数arguments组织为一个数组对象
• 如果我们想要取某个实参但arguments没有接收到对应的实参，则默认是undefined
• 返回多个值不会自动帮助我们组织为一个数组，只能返回一个值，我们需要手动组织数组或自定义对象

名称空间与闭包

局部变量、全局变量、存活周期、作用域、闭包函数的概念都与很多语言相似：

可以通过 python语法之名称空间 和 菜鸟-js闭包 来理解。

内置对象

js中一切皆对象，常见对象如下表：

这里简单介绍几个常见对象。

Date对象

• 查看日期对象的日期

  // 首先要先将日期对象转换成字符串
  s1 = 日期对象.toLocaleString();
  console.log(s1);
  

• 创建日期对象

  //方法1：不指定参数
  var d1 = new Date();
  console.log(d1.toLocaleString());
  //方法2：参数为日期字符串
  var d2 = new Date("2004/3/20 11:12");
  console.log(d2.toLocaleString());
  var d3 = new Date("04/03/20 11:12");
  console.log(d3.toLocaleString());
  //方法3：参数为毫秒数
  var d3 = new Date(5000);
  console.log(d3.toLocaleString());
  console.log(d3.toUTCString());
  
  //方法4：参数为年月日小时分钟秒毫秒
  var d4 = new Date(2004,2,20,11,12,0,300);
  console.log(d4.toLocaleString());  //毫秒并不直接显示
  

• Date对象的方法

  方法	说明
  getDay()	获取星期几
  getDate()	获取日
  getMonth()	获取月（0-11）
  getFullYear()	获取完整年份
  getHours()	获取小时
  getMinutes()	获取分钟
  getSeconds()	获取秒
  getMilliseconds()	获取毫秒
  getTime()	返回累计毫秒数(从1970/1/1午夜)

JSON对象

• 将js对象转换为json字符串：let str = JSON.stringify(obj)
• 将json字符串解析为js对象：let obj = JSON.parse(str)

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

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

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

全局匹配的bug现象

就是上述代码中的第二种情况，测试结果一次true、一次false，因为lastIndex属性就是类似于游标的属性，第一次匹配会到字符串尾部停滞，第二次匹配就匹配不到于是回到字符串头部。