前端之JavaScript
JavaScript
一.JavaScript简介
1.ECMAScript和JavaScript的关系
1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
2.JavaScript语言
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript 在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时 Java 很流行，所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行。
随着 JavaScript 的发展，它已经成为了一门完全独立的语言，并且也拥有了自己的语言规范 ECMAScript。现在，它和 Java 之间没有任何关系。
可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等
3.HTML、CSS、JavaScript
HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面嵌入图片和视频。
CSS是一门样式规则语言，可将样式应用于HTML内容，例如设置背景颜色和字体，在多个列中布局内容。
JavaScript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。
二.JavaScript基础之语言规范
1.如何使用？
- head内script标签内编写
- head内script标签src属性引入外部js资源
- body内最底部通过script标签src属性引入外部js资源(最常用)
2.注释语法
// 单行注释
/*多行注释*/
3.结束符
JavaScript中的语句要以分号 ；为结束符
三.JavaScript基础
JavaScript也是一门面向对象的编程语言，即一切皆对象！！！
name = 'jason'
name = 123
name = [1, 2, 3, 4]
name可以指向任意的数据类型
但是又一些语言中，变量名之间指向一种后续不能更改
1.变量与常量
1).变量声明
在js中，首次定义一个变量名的时候需要用关键字声明
1.关键字var
var name = 'jason' // 全部都是全局变量
2.关键字let
let name = 'tony' // 可以声明局部变量
他们俩的区别：
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
"""
ps：let是ECMA6新语法，可以在全局定义变量，不影响全局
"""
2.常量
python中没有真正意义上的常量，默认全大写就是表示常量
js中有真正意义上的常量，需要使用关键字const声明，这个常量不允许更改，一旦进行更改就会报错
const pi = 3.14
pi = 3.44 // 报错
2.变量的命名规范
变量名是区分大小写的
JavaScript推荐使用驼峰式命名规范。
1.变量名命名规范(比python多一个&)
数字、字母、下划线、&
2.变量名命名规范(不遵循也可以)
1.js中推荐使用驼峰式命名
userName
dataOfDb
2.python推荐使用下划线的方式
user_name
data_of_db
3.不能使用关键字作为变量名
3.支持编写js代码的地方
1.可以单独开设js文件书写
2.也可以直接在浏览器提供的console界面书写
再用浏览器书写js的时候，左上方的清空按钮只是清空当前界面，代码其实还在，如果你想要重新来，刷新或者重新开设一个页面
(在使用浏览器书写你自己的js
代码的时候推荐你在自己的html页面打开)
4.基本数据类型
如何查看当前数据类型>>>:typeof 变量名;
js、python是一门动态类型，变量名绑定的数据值类型不固定
var name = 'jason'
name = 123
name = [11, 22, 33]
1).数据类型之数值类型(关键字number)
在js中不分整型、浮点型，统称之为数值类型
var a = 11;
var b = 11.11;
typeof a;
typeof b;
'number'
整型、浮点型都是number类型
2).数据类型之类型转换
parseInt() 转换整型
perseFloat() 转换浮点型
parseInt('123')
123
parseFloat('11.11')
11.11
parseInt('11.11')
11
parseInt('11adasdasdasd11')
11
parseInt('asddsad11')
NaN // 属于数值类型 表示的意思是 不是一个数字
为了与前端迎合，js做到了尽量避免报错
3).数据类型之字符类型(string)
var a = "Hello";
var b = "world";
var c = a + b;
console.log(c); // 得到Helloworld
var s = 'jason';
typeof s
'string'
var s1 = 'jason'
typeof s1;
'string'
var s2 = '''body'''
VM1243:1 Uncaught SyntaxError: Unexpected string // 不支持三引号
1.模板字符串
模板字符串除了可以定义多行文本外还可以实现格式化字符串操作
var s3 = `asadsadsad` // 数字1左边的那个符号`
undefined
typeof s3
'string'
模板字符串替换
书写${}会自动去前面找大括号里面的变量名对应的值
如果没有定义直接报错
案例：
var name = 'jason'
var age = 18
var sss = `
my name is ${name} and my age is ${age}
`
sss
'my name is jason and my age is 18'
2.字符串的拼接(内置方法)
在python中不推荐使用 + 做拼接，使用join
在JavaScript中推荐使用 + 做拼接，并且支持不同类型直接的拼接，它会自动尽自己最大的可能去进行类型转换然后拼接
var name = jason
var age = 18
name + jason
jason18
4).js常见内置方法
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
5).布尔类型(Boolean)
JS里面的布尔值与Python不同，JS是纯小写的(true，false)，Python是首字母大写(True，False)
6).null与undefined
null表示值为空(曾经拥有过)，undefined表示没有定义(从来没有过)
7).对象(object)
对象之数组(Array)>>>:类似于python中的列表
let l1 = []
对象之自定义对象(object)>>>:类似于python的字典
let d1 = {'name':'jason'}
let d2 = new object()
5.运算符
1).算术运算符
+ - * / % ++(自增1) --(自减1)
var x=10;
var res1=x++; 加号在后面 先赋值后自增
var res2=++x; 加号在前面 先自增后赋值
2).比较运算符
!=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
$\textcolor{red}{注意:}$
1 == “1” // true 弱等于
1 === "1" // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止断错误
3).逻辑运算符
&&(与) ||(或) !(非)
4).赋值运算符
= += -= *= /=
6.流程控制
-
单if分支
if (条件){ 条件成立执行的代码 } -
if-else分支
if(条件){ 条件成立执行的代码 }else{ 条件不成立执行的代码 } -
if-else if-else分支
if(条件1){ 条件成立执行的代码 }else if(条件2){ 条件1不成立条件2执行的代码 }else{ 条件1和2都不成立执行的代码 } -
switch语法
如果分支结构中else if很多可以考虑使用switch语法
switch(条件){ case 条件1: 条件1成立执行的代码; break; //如果没有break会基于某个case一直执行下去 case 条件2: 条件2成立执行的代码; break; case 条件3: 条件3成立执行的代码; break; case 条件4: 条件4成立执行的代码; break; default: 条件都不满足执行的代码 } -
for循环
for(起始条件;循环条件;条件处理){ 循环体代码 } 实操： for(let i=0;i<10;i++){ console.log(i) } let dd = {'name':'jason','age':18} for(let k in dd){ console.log(k) } -
while循环
while(循环条件){ 循环体代码 } -
三元运算
python：值1 if条件 else 值2 JS中：条件?值1:值2
7.函数
function 函数名(形参){
// 函数注释
函数体代码
return 返回值
}
// 匿名函数
var s1 = function(a, b){
return a + b;
}
//箭头函数
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;
}
注意:
1.JS中函数的形参与实参个数可以不对应
传少了就是undefined，传多了不要
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体
8.内置对象
-
Date对象
创建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()); //毫秒并不直接显示Data对象的方法
var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月（0-11） //getFullYear () 获取完整年份 //getYear () 获取年 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜) -
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')注意事项:
1.正则表达式中不能有空格 2.全局匹配时有一个lastIndex属性// 全局匹配 var s1 = 'egondsb dsb dsb'; s1.match(/s/) s1.match(/s/g) //使用match进行匹配的时候，返回的是一个对象，如果有值就会在前面显示出来 var s1 = 'asfdasddfasf aqgwefqwef asdfae' s1.match(/s/) 结果：['s', index: 1, input: 'asfdasddfasf aqgwefqwef asdfae', groups: undefined] s1.match(/s/g) 结果：(4) ['s', 's', 's', 's'] var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g reg2.test('egondsb'); reg2.test('egondsb'); reg2.lastIndex;当我们在正则表达式的后面写上一个g的时候表示全局匹配，这时候光标的移动跟文件的读取相似，当读取到末尾的时候会出现没有数据可读的情况，这时候就会返回false，并且重置光标到开头，我们可以使用lastIndex方法来查看光标目前所在的位置。
注意事项三：test匹配数据不传默认传undefined
// 校验时不传参数 var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/ reg2.test(); reg2.test(undefined); var reg3 = /undefined/; reg3.test();
