前端之JavaScript
js简介
全程javascript但是与java一毛钱关系都没有 之所以这么教是为了蹭当时大火的java的热度，所有我们一般把它叫做 JS
他是一门前端工程师的编程语言 但是它本身有很多逻辑错误（不是很严谨）
IT行业鄙视链：后端 > 前端、运维、测试、产品、老板
前端想统一天下：node.js
- JavaScript是脚本语言
- JavaScript是一种轻量级的编程语言
- JavaScript是可插入HTML页面的编程代码
- JavaScript插入HTML页面后，可由所有的现代浏览器执行
- JavaScript很容易学习
js基础
-
注释语法
- //单行注释
- /*多行注释*/
-
引入js的多种方式
- head内script标签内编写
- head内script标签 src属性引入外部js资源
- body内最底部通过script标签src属性引入外部js资源（最常用）
注意页面的加载是从上往下的 所有操作标签js代码一定要等待标签加载完毕再执行才可以正常运行
-
结束符
分号（很多时候不写也没问题）
变量与常量
- pycharm创建js文件或者html文件（适合编写较为复杂的js代码）
- 浏览器提供编写js代码的环境，一般是F12开启调试模式
在js中声明变量需要使用关键字
-
var
var name = 'jason'
可以覆盖定义 -
let
let name = 'ikun'
let不允许覆盖定义let 是ECMA6新语法 可以在局部定义变量不影响全局
在js中声明常量也需要使用关键字
- const
const pi = 3.14
常量一旦定义就不允许再修改
基本数据类型
在js中查看数据类型的方式 typeof
数值类型（number）
在js中整型与浮点型不分家都叫number
NaN也属于数值类型 意思是：不是一个数字（not A Number）
字符类型（String）
单引号 ‘jkun’
双引号 "ikun"
模板 `jjj`
let name1 = 'javascript'
let age1 = 18
let desc = `who am i ${name1} my age is ${age1}`
字符串拼接推荐使用加号
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n),at， | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
| .repeat(重复的次数) | 重复字符串几次 |
布尔类型（boolean）
js里面的布尔值与python不同
js是纯小写的 python中首字母是大写的
""(空字符串) 0 null undefined NaN都是false
null与undefined
null表示值为空（曾经赋值过）
undefined表示没有定义（从来没有过）
对象（object）
对象之数组（array）>>>:类似于python中的列表
let l1 = new Array(1,2,3,4);
let l2 = [1,2,3,4];
console.log(l1,l2);
[1, 2, 3, 4] [1, 2, 3, 4]
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
d1.forEach((value,index,arr)=>{
console.log(value,index,arr)
});
1 0 (3) [1, 2, 3]
2 1 (3) [1, 2, 3]
3 2 (3) [1, 2, 3]
d1.forEach((value)=>{
console.log(value,index,arr)
});
1
2
3
对象之自定义对象（object）>>>:类似于python的字典
//两种创建字典对象的形式
let d4 = new JSON.constructor({'name':'jason','pwd':'qwe'});
let d5 = new Object({'name':'李四','pwd':'我是ikun'})
/*
双引号形式
*/
let dd4 = new JSON.constructor({"name":"jason","pwd":"qwe"});
undefined
dd4
{name: 'jason', pwd: 'qwe'}
dd4.name
'jason'
dd4.stringify(dd) 序列化 前提必须是字典对象
dd4.parse(ss) 反序列化
JSON.stringify(dd) 序列化
JSON.parse(ss) 反序列化
运算符
-
算输运算符
+ - * / % ++(自增1) --(自减1) var x = 10; var res1 = x++; 加号在后面 先赋值后自增 var res2 = ++x; 加号在前面 先自增后赋值 res1 = 10 res2 = 12 -
比较运算符
//弱比较 !=(值不等 弱) ==(值相等 弱) //强比较 ===(值相等 强) !==(值不等 强) 弱比较会自动转换类型
-
逻辑运算符
&&(与) ||(或) !(非) //与python中的 and or not //用法一样
流程控制
-
单if分支
if (条件){ 条件成立执行的代码 } -
if...else分支
if (条件){ 条件成立执行的代码 }else{ 条件不成立执行的代码 } -
if...else if...else分支
if (条件1){ 条件1成立执行的代码 } else if(条件2){ 条件1不成立，条件2成立执行的代码 }else{ 条件1条件2都不成立执行的代码 } -
如果分支结构中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) } d1 = {'name':'jason','pwd':123} for(let i in d1){ console.log(i); }; //取的是key值 name pwd -
while循环
while(条件){ 循环体代码 } -
三元运算
python中： 值1 if 条件 else 值2 js中： 条件?值1:值2
函数
定义的形式
function 函数名(形参){
//函数注释
函数体代码
return 返回值
}
-
匿名函数
function(形参){ 函数体 return 返回值 } 也可以赋值给一个变量然后取调用 var f1 = function(形参){ 函数体 return 返回值 } f1() -
箭头函数(一般是用在匿名函数)
var f2 = (形参)=>{ 函数体 return 返回值 }; 等于下面 var f2=(形参)=>返回值; 等于下面 var f2 = function(形参){ 函数体 return 返回值 };
小知识
- js中的函数的形参与实参数可以不对应
传少了就是undefined字符形式 传多了不用 - 函数体代码中有一个关键字argments用来接收所有的实参
- 函数的返回值如果有多个需要自己处理成一个整体
内置对象
日期对象
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
正则对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
//加g为全局模式匹配多次
var reg2 = /^[a-zA-Z0-9][a-zA-Z0-9]{5,9}$/g
1.全局模式的规律
lastIndex
2.test匹配数据不传默认传undefined
