今日内容概要
- JS简介
- 变量与常量
- 基本数据类型
- 运算符
- 流程控制
- 函数
- 内置对象
今日内容详细
JS简介
全称JavaScript但是与Java一毛钱关系都没有 之所以这么叫是为了蹭Java的热度
它是一门前端工程师的编程语言 但是它本身有很多逻辑错误(不是很严谨)
IT行业鄙视链: 后端>前端、运维、测试、产品、老板
前端想一统天下:node.js
JS发展史>>>:JavaScript很容易学习
JS基础
1.注释语法
// 单行注释
/*多行注释*/
2.html引入js的多种方式
head内script标签内填写
head内script标签src属性引入外部js资源
body内最底部通过script标签src属性引入外部js资源(最常用)
ps:注意页面的加载是从上往下的 所以操作标签js代码一定要等待标签加载完毕再执行 这样页面才可以正常运行
3.结束符号
分号(很多时候不写也没问题)
变量与常量
'''
1.pycharm创建js文件或者html文件(适合编写较为复杂的js代码)
2.浏览器提供编写js代码的环境
'''
在js中声明变量需要使用关键字
变量:
var
var name = 'jason';
let
let name = 'kevin';
二者的区别是let是ECMA6新语法 可以在局部定义变量不影响全局
常量:
const
const p = 3.14;
声明后就无法修改
基本数据类型
数值类型
'''
在JavaScript中查看数据类型使用 typeof
'''
数值类型(Number)
在JS中整型与浮点型不分家 都叫做Number
NaN也属于数值类型全称Not A Number 意思是不是一个数字
数值类型的常用方法
parseInt("123.123") # 返回123 小数点后面的舍弃
parseInt("ABC") # 返回NaN,NaN属性是代表非数字值的特殊值。该属性用 于指示某个值不是数字。
parseFloat("123.456") # 返回123.456
字符类型
字符类型(String)
三种形式
单引号 'kevin'
双引号 "kevin"
模板字符串 `kevin` # 英文输入法数字1左边的键 支持多行字符
字符格式化输出
let name = 'kevin';
let age = 18;
let desc = `my name is ${name} my age is ${age}`;
console.log(desc) # my name is kevin my age is 18
在JavaScript中字符串拼接推荐使用加号
字符的常用方法:
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat() | 拼接 |
| .indexOf() | 子序列位置 |
| .substring() | 根据索引获取子序列 |
| .slice() | 切片 |
| .toLowerCase() | 转小写 |
| .toUpperCase() | 转大写 |
| .split() | 分割 |
布尔类型
布尔类型(Boolean)
JS里面的布尔值与python不同
JS是纯小写的 而Python中是首字母大写
true和false
在JS中空字符、0、null、underfined、NaN默认布尔类型都是false
null与underfined
null表示值是空 一般在需要制定或者清空一个变量的时候才会使用(曾经拥有过)
underfined表示当声明一个变量但未初始化时 该变量的默认值是underfined 还有就是函数无明确的返回值时 返回的也是underfined(从未拥有过)
null
underfined
对象
对象(object)
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型
对象之数组(Array)
使用单独的变量名来存储一系列的值。类似于Python中的列表
let l1 = ['kevin', 18]
console.log(l1[1]) # 18
对象之自定义对象(Object)
类似于Python中的字典 键也只能是字符串
有两种创建方式
let d1 = {}
let d2 = new Object();
添加数据和取数据通过句点符的方式
d1.name = 'jason'
d1.name # jason
数组的常用方法:
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push() | 尾部追加数据 |
| .pop() | 获取尾部的数据 |
| .unshift() | 头部插入数据 |
| .shift() | 头部移除数据 |
| .slice() | 切片 |
| .reverse() | 反转 |
| .join() | 将数组连接成字符串 |
| .concat() | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除指定元素 并向数组添加新元素 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
运算符
1.算数运算符
+ 加
- 减
* 乘
/ 除
% 取余
++ 自增
-- 自减
var x = 10;
var res1=x++; 加号在后面 先赋值再自增
var res2=++x; 加号在后面 先自增再赋值
2.比较运算符
!= 值不等 弱不等
== 值相等 弱相等
=== 值相等 强相等
!== 值不等 强不等
var 5=='5'; # true
var 5==='5'; # false
ps:区别在于会不会自动转换类型
3.逻辑运算符
&& 与
|| 或
! 非
流程控制
1.单if分支
if (条件){
条件成立执行的代码
}
2.if...else分支
if (条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
3.if...else if...else分支
if (条件1){
条件1成立执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}else{
条件1和2都不成立执行的代码
}
4.如果分支结构中else if很多的时候还可以考虑使用switch语法
switch(条件){
case 条件1:
条件1成立执行的代码;
break; 如果没有break的话会基于某个case一直执行下去
case 条件2:
条件2成立执行的代码
break;
case 条件3:
条件3成立执行的代码
break;
default:
条件都不满足执行的代码
}
var day = new Date().getDay();
应用:
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
for循环
for(起始条件;循环条件;条件处理){
循环体代码
}
应用:
for(var 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
JavaScript中: 条件?值1:值2
'''
函数
'''
python中函数的定义
def 函数名(形参):
"""函数注释"""
函数体代码
return 返回值
'''
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 f = (num1, num2) => num1 + num2;
等同于
var f = function(num1, num2){
return num1 + num2;
}
1.JS中函数的形参与实参个数可以不对应
传少了就把underfined传给少的参数 传多了就不用它
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体
内置对象
1.Date对象
var d = Date();
//getDate() 获取日
//getDay() 获取星期
//getMonth() 获取月(0-11)
//getFullYear() 获取完整年份
//getYear() 获取年
//getHours() 获取小时
//getMinutes() 获取分钟
//getSeconds() 获取秒
//getMilliseconds() 获取毫秒
//getTime() 返回累计毫秒数(从1970/1/1午夜)
2.JSON对象
var str1 = '{"name": "jason","age":18}';
var obj1 = {"name":"kevin","age":18};
//JSON字符串转换成对象
var obj = JSON.parse(str1); # 序列化 相当于python中的loads
//对象转换成JSON字符串
var str = JSON.stringify(obj1); # 反序列化 相当于python中的dumps
3.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')
/*第一个注意事项，正则表达式中不能有空格*/
// 全局匹配
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'); # true
reg2.test('tonydsb'); # false
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();