JavaScript编程语言

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

字符串的常用方法：

方法	说明	补充
.length	返回长度
.trim()	返回清空两侧空白的字符	可以指定清除的字符
.trimLeft()	返回清空左侧空白的字符	py中的.lstrip()
.trimRight()	返回清空左侧空白的字符
.charAt(index)	传入索引值返回对应位置的字符
.concat(value,..)	对传入的字符串做拼接	拼接一般用+
.indexOf(substring,start)	返回子序列的索引	start表示搜索位置
.substring(from, to)	根据索引获取子序列	两种切片有异同
.slice(start,end)	根据索引获取子序列
.toLowerCase()	返回小写的字符串
.toUpperCase()	返回大写底的字符串
.split(delimiter,limit)	返回分割后的字符列表	可指定分割符|取几条分割后字符

substring和slice的异同

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

常用方法：

方法	说明	补充
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start,end)	切片取值
.reverse()	将数组翻转排列
.join(sep)	将数组元素拼接起来	sep是分隔符，以sep连接
.concat(val)	拼接多个数组	val是基本数据类型就直接添加，是数组就取出元素添加
.forEach()	将数组的每个元素传递给回调函数	新列表作为返回值，不对原列表做修改
.splice()	删除元素，并向数组添加新元素。	了解
.map()	返回一个数组元素调用函数处理后的值的新数组——映射	新列表作为返回值，不对原列表做修改

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);
  

• 创建日期对象

  需要通过new Date(参数)可以产生新的日期对象，表示一个具体的日期

  //方法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对象

new 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属性就是类似于游标的属性，第一次匹配会到字符串尾部停滞，第二次匹配就匹配不到于是回到字符串头部。