5、JavaScript基础
一、JavaScript语言规范
1、引入方式
// (1)head标签内设置Script标签，然后写代码
<script>
// 在这里写你的JS代码
</script>
// (2)引入额外的JS文件
<script src="myscript.js"></script>
2、注释/输出命令/结束符
// 这是单行注释
/*
这是
多行注释
*/
console.log('这是输出命令')
/*JavaScript中的语句要以分号（;）为结束符。
如果不写分号，也能够正常执行，但是它就相当于没有结束符*/
二、JavaScript语言基础
1、变量
/*
1、JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
2、声明变量使用 var 变量名; 的格式来进行声明
*/
// 示例:在js中首次声明变量需要使用关键字
var name='poco'
/*补充：
在ES6版本里，新增了let命令用于声明变量，其用法与var类似，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。
*/
let age='22'
// 如果你的编辑器支持的版本是5.1那么无法使用let，如果是6.0则向下兼容var和let
/*
总结
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
*/
2、常量
// 我们知道，在Python中，常量只是一种规范，没有真正的常量，但在ES6里，新增了const命令来声明常量。一旦声明，其值就无法改变。
const PI = 3.1415926; // 常量的命名-纯大写为规范
三、JavaScript数据类型
JavaScript是动态类型语言
var name = 'poco' // 此时name是字符串
var name = 123 // 此时name是数字
var name = [1,2,3,4] // 此时name是数组
// name可以指向任意的数据类型
// 但是有一些语言中，变量名之内指向一种后续不能更改
1、数值类型(number)
JavaScript不区分整型和浮点型，就只有一种数字类型。
var a = 10;
var b = 12.14;
// 如何查看当前数据类型
typeof a;
typeof b;
"number"
// 特殊的 NaN:数值类型 表示的意思是“不是一个数字” NOT A NUMBER
// 类型转换
parseInt()
parseFloat()
parseInt('123') // 返回123
parseInt('11.11') // 返回11
parseFloat('11.11') // 返回11.11
parseInt('123abcd789efg') // 返回123 （只能识别开头的）
parseInt('abc123def456') // 返回NaN （开头不是数字返回NaN）
2、字符类型(string)
var a = 'Hello'
var b = "world"
var c = a + b;
console.log(c); // 字符串拼接得到Helloworld
// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
var name = 'poco';
var age = 18;
var sss = 'my name is ${name} and my age is ${age}';
console.log(sss)
`
// 在写js代码的时候 不要去管左侧箭头的内容
// 字符串的拼接
// 在python中不推荐你使用+做拼接 join
// 在js中推荐你直接使用+做拼接
name + age
字符类型常用方法
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
// 返回长度 示例
var name = 'poconb'
undefined
name.length
6
// 移除空白示例
var name1 = ' pocoNB '
undefined
name1
" pocoNB "
name1.trim()
"pocoNB"
name1.trimLeft()
"pocoNB "
name1.trimRight()
" pocoNB"
3、布尔值(boolean)
/*
1.在python中布尔值是首字母大写的
True
False
2.但是在js中布尔值是全小写的
true
false
布尔值是false的有哪些
空字符串、0、null、undefined、NaN
*/
4、null与undefined
null表示值为空，一般都是指定或者清空一个变量时使用
undefined表示声明了一个变量 但是没有做初始化操作(没有给值)
函数没有指定返回值的时候 返回的也是undefined还不明白？参考博客图解
https://www.cnblogs.com/Dominic-Ji/p/9111021.html
四、对象(Object)
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
1、数组
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
var a = [11,22,33,44,55]
typeof a // 查看类型
"object"
var l1 = [11,'abc',11.11,true]
// 按索引取值
l1[1]
"abc"
l1[-1] // 不支持负数索引
常用方法
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
// 示例
var l = [111,222,333,444,555,666] // 创建数组
undefined
l.length // 查看长度
6 // 结果
l.push(777) // 尾部追加元素
Array(7) [ 111, 222, 333, 444, 555, 666, 777 ] // 结果
l.shift() // 头部移除元素
111
l.slice(0,3) // 切片
Array(3) [ 222, 333, 444 ]
l.join('S') // 将数组元素连接成字符串
"222S333S444S555S666S777"
l.forEach(function(value){console.log(value)},l)
222 debugger eval code:1:35 // 循环遍历
333 debugger eval code:1:35
444 debugger eval code:1:35
555 debugger eval code:1:35
666 debugger eval code:1:35
777
l.forEach(function(value,index){console.log(value,index)},l)
222 0 debugger eval code:1:41 // 两个参数就是元素 + 元素索引
333 1 debugger eval code:1:41
444 2 debugger eval code:1:41
555 3 debugger eval code:1:41
666 4 debugger eval code:1:41
777 5
2、运算符
// 算术运算符
var x = 10;
var res1 = x++; //此时res1是10，x是11
var res2 = ++x;
res1 10
res2 12
// ++表示自增1 类似于 +=1，加号在前先加后赋值 加号在后先赋值后加
// 比较运算符
1 == '1' // 弱等于 内部自动转换成相同的数据类型比较了
true
1 === '1' // 强等于 内部不做类型转换
1 != '1'
false
1 !== '2'
true
// 逻辑运算符（在python中，是and、or、not，而在js中，是&&、||、!）
5 && '5' // '5'
0 || 1 // 1
!5 && '5' // false
// 赋值运算符
=、+=、-=、*= 、/=
3、流程控制
// if判断语法
if(条件1)
{条件成立之后指向的代码块1}
else if(条件2)
{条件成立之后指向的代码块2}
else
{条件成立之后指向的代码块3}
// switch判断语法（提前列举好可能出现的条件和解决方式）
switch(表达式){
case 取值1:
条件成立的执行语句;
break; // 不加break 匹配到一个之后 就一直往下执行
case 取值2:
条件成立的执行语句;
break;
default:
条件成立的执行语句;
}
// for循环语句
// 在js中代码是没有缩进的,只不过我使用python习惯了，所以加上的
流程控制案例
// if判断案例1
var age = 28;
if (age>22)
{console.log('好好上班别摸鱼')}
else
{console.log('赶紧写作业去')}
// if判断案例2
var age = 25;
if (age<18)
{console.log("小妹妹期末考了多少分啊")}
else if(age<24)
{console.log('小姐姐你好，有男朋友了吗')}
else
{console.log('富婆请抱抱我~')}
////////////////////////////////////////////////////////////////////////////
// switch判断案例1
var num = 3;
switch(num){
case 1:
console.log('唱歌');
break; // 不加break 匹配到一个之后 就一直往下执行
case 2:
console.log('跳舞');
break;
case 3:
console.log('打游戏');
break;
case 4:
console.log('弹钢琴');
break;
default:
console.log('请输入正确的编号')
}
////////////////////////////////////////////////////////////////////////////
// for循环案例
// 题目1：打印0-9数字
for(let i=0;i<10;i++){
console.log(i)
}
// 题目:2：循环打印出数组里面的每一个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++)
{console.log(l1[i])}
////////////////////////////////////////////////////////////////////////////
// while循环
var i = 0
while(i<100){
console.log(i)
i++;
}
////////////////////////////////////////////////////////////////////////////
// 三元运算符
// python中三元运算符 res = 1 if 1>2 else 3
// JS中三元运算 res = 1>2?1:3
// 条件成立取问好后面的1 不成立取冒号后面的3
var res = 2>5?8:10 // 结果：10
var res = 2>5?8:(8>5?666:444) // 结果：666
// 三元运算符不要写的过于复杂
4、函数
/* 在python定义函数需要用到关键字def
在js中定义函数需要用到关键字function */
// 格式
function 函数名(形参1,形参2,形参3...){函数体代码}
////////////////////////////////////////////////////////////////////////////////
// 无参函数
function func1(){
console.log('hello world')
}
func1() // 加括号调用，跟python是一样的
////////////////////////////////////////////////////////////////////////////////
// 有参函数
function func2(a,b){
console.log(a,b)
}
func2(1,2) // 结果：1 2
// 传多了没关系，只要对应的数据
func2(1,2,3,4,5,6,7,8,9) // 结果：1 2
// 少了也没关系
func2(1) // 结果：1 undefined
///////////////////////////////////////////////////////////////////////////////
// 关键字arguments
function func2(a,b){
console.log(arguments) // 能够获取到函数接受到的所有的参数
console.log(a,b)
}
function func2(a,b){
if(arguments.length<2){
console.log('传少了')
}else if (arguments.length>2){
console.log('传多了')
}else{
console.log('正常执行')
}
}
func2(1,2,3,4) // 结果：传多了
////////////////////////////////////////////////////////////////////////////////
// 函数的返回值，使用的也是关键字return
function index1(){
return 666
}
index1() // 结果：666
function index2(){
return 666,777,888,999
}
// 只能拿到最后一个
res = index(); // 999
////////////////////////////////////////////////////////////////////////////////
// 匿名函数 就是没有名字
function(){
console.log('哈哈哈')
}
var res = function(){
console.log('哈哈哈')
}
// 箭头函数(仅了解内容)主要用来处理简单的业务逻辑 类似于python中的匿名函数
var func1 = v => v; //箭头左边的是形参，右边的是返回值
// 等价于
var func1 = function(v){
return v
}
var func2 = (arg1,arg2) => arg1+arg2
// 等价于
var func1 = function(arg1,arg2){
return arg1+arg2
}
函数的全局变量与局部变量
// 跟python查找变量的顺序一致
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); // 输出结果是ShenZhen
////////////////////////////////////////////////////////////////////////
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是BeiJing
////////////////////////////////////////////////////////////////////////
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret(); // 打印结果是ShangHai
/*
1、全局变量写在函数的最前面，局部变量写在函数体内，局部变量省略了 var 也就默认成为了全局变量！
2、函数体内部可以读取到函数外的变量，而函数外不能读取到函数内的变量！
*/
5、自定义对象
你可以看成是我们python中的字典 但是js中的自定义对象要比python里面的字典操作起来更加的方便
// 创建自定义对象 {}
"""第一种创建自定义对象的方式"""
var d1 = {'name':'poco','age':18}
typeof d // 查看d的类型，结果是"object"类型
d1['name'] // 可以取值
d1.name // 可以拿到值，而且比python从字典获取值更加的方便
d1.age
for(let i in d){
console.log(i,d[i])
} // 支持for循环，暴露给外界可以直接获取的也是键
"""第二种创建自定义对象的方式 需要使用关键字 new"""
var d2 = new Object() // {}
d2.name = 'poco'
{name: "poco"}
d2['age'] = 18
{name: "poco", age: 18}
Date对象
let d3 = new Date() // Fri May 15 2020 14:41:06 GMT+0800 (中国标准时间)
d3.toLocaleString() // 可以获取就，结果：2021/5/14 下午2:41:06
// 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()
// 时间对象具体方法
let d5 = new Date();
d5.getDate() // 获取日
d5.getDay() // 获取星期
d5.getMonth() // 获取月份(0-11)
d5.getFullYear() // 获取完整的年份
d5.getHours() // 获取小时
d5.getMinutes() // 获取分钟
d5.getSeconds() // 获取秒
d5.getMilliseconds() // 获取毫秒
d5.getTime() // 时间戳
JSON对象
/*
在python中序列化反序列化：dumps→序列化，loads→反序列化
在js中也有序列化反序列化：SON.stringify()相当于dumps，JSON.parse()相当于loads
*/
let d6 = {'name':'jason','age':18}
let res666 = JSON.stringify(d6) //序列化
// res666内容如下："{\"name\":\"jason\",\"age\":18}"
JSON.parse(res666) // 反序列化
// 反序列化之后又变回了：Object { name: "jason", age: 18 }
RegExp对象
// 在python中如果需要使用正则需要借助于re模块，而在js中需要你创建正则对象
// 第一种（有点麻烦，不推荐）
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
// 第二种（推荐）
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
// 匹配字符
reg2.test('pocoNB') // true
// 题目：获取字符串里面所有的字母s
let sss = 'egondsb dsb dsb'
sss.match(/s/) // 拿到一个就停止了
sss.match(/s/g) // 全局匹配，g就表示全局模式
6、Math对象(了解性质内容)
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
浙公网安备 33010602011771号