day54 js基础

目录

• 一、变量
• 二、数据类型
  • 1 数值类型（number）
  • 2 字符类型（string）
  • 3 字符类型常用方法
  • 4 布尔值（boolean）
  • 5 null与undefined
  • 6 对象
  • 7 运算符
  • 8 流程控制
  • 9 函数
  • 10 全局变量和局部变量
  • 11 自定义对象
  • 12 Date对象
  • 13 json对象
  • 14 RegExp对象
  • 15 Math对象

一、变量

js变量的命名规范

• 变量名只能是数字、字母、下划线、$
• 变量名的命名规范
  • 支持驼峰式 userName
• 不能使用关键字做变量名

二、数据类型

1 数值类型（number）

js中整形和浮点型都属于数值类型

var a = 11;
typeof a;
>>> number

var b = 11.11;
typeof b;
>>> number

// 类型转换
parseInt()  // 转化成整形
parseFloat() // 转化成浮点型

parseInt(b)
>>> 11 // 这里要注意js中把浮点型转化成整形的时候会忽略小数点后的数字
parseFloat(a)
>>> 11

// js也支持把字符串转化成整形或者浮点型
parseInt('123asda123')
>>> 123 // 遇到非数字就停止取值

parseFloat('123.12asdas')
>>> 123.12

parseInt('asdasds123')
>>> NaN // 如果开头就是字母的话会显示NaN类型  not a number

// 小区分点
// js在转化字符串为整形或者浮点型的时候如果出现了非法数字组合不会报错，按常规的取
parseInt('1237.123.123asd')
>>> 1237
parseFloat('1237.123.123asd')
>>> 1237.123

2 字符类型（string）

// js中字符串用单引号'' 双引号"" 或者反引号 ``（支持写多行）
var name = 'hz'
var age = "18"
typeof name
>>> string

// 格式化输出 $
var sss = `
	my name is ${name} age is ${age}!
`
>>> my name is hz age is 18

// 字符串拼接 +
name+age
>>> hz18
name+19
>>> hz19

3 字符类型常用方法

`
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割
`
var a = 'hz'
var b = ' asd '

// .length
a.length
>>> 2

// .trim() #如果不用新名字接受就不会改变b的值  只能去除空格
// trimLeft() trimright() 左去除和右去除和去除用法相同
b.trim()
>>> asd

// .charAt(n)
a.charAt(1)
>>> z

// .concat(value1,value2....)  js是弱类型语言，遇到不同类型之间的操作会自动转换
a.concat(123,'asdas',123)
>>> hz123asdas123

// .indexOf(查找的字符，起始查找位置)
b.indexOf(' ')
>>> 0
b.indexOf(' ',1)
>>> 4

// .substring(起始索引位置，结束索引位置) 都可以不写，起始不写是0，结束不写是末尾（不是最后一个，因为顾头不顾尾） 但是不识别负数
var sss = 'hz is dsb'
sss.substring(3,5)
>>> is

// .slice(起始索引位置，结束索引位置) 用法和substring一样，但是支持负数（推荐）
sss.slice(0,-1)
>>> hz is ds

// .toLowerCase() 全部小写
// .toUpperCase()用法相同
sss.toLowerCase()
>>> HZ IS DSB

// .split(切割依据，切割后的元素的个数)
var x = 'hz,is,d,d,sb'
x.split(",")
>>> ['hz','is','d','d','sb']
x.split(",",4)
>>>  ["hz", "is", "d", "d"]

4 布尔值（boolean）

真：true
假：false
false：空字符串、0、null、undefined、NaN

5 null与undefined

• null表示空
  • 空表示一个状态，一个物体是空的，表示用空这种状态去填满了它。
  • 一般指定null或者清空一个变量时使用
• undefined表示无
  • 无是真的没有，和空有区别
  • 一般指在定义一个变量没有赋值，函数没有返回值的时候，返回的也是undefined

6 对象

js中一切皆对象

数组（类似于python中的列表） []

var l = [11,'aa',true,null,undefined] // 可以存放任意值
typeOf l
>>> 'object'

l[1] // 不支持负数索引
>>> 'aa'

// .length 显示长度
// .push(添加的元素1，元素2。。。)
l.push(123,456)
>>> [11,'aa',true,null,undefined,123,456]

// .pop() 删除最后一个元素
l.pop()
>>> [11,'aa',true,null,undefined,123]

// .unshift(在最开头加的元素1，元素2...)
l.unshift(0,1)
>>> [0,1,11,'aa',true,null,undefined,123]

// .shift() 删除开头元素
l.shift()
>>> [1,11,'aa',true,null,undefined,123]

// .slice(起始节选，结束节选) 顾头不顾尾
l.slice(0,3)
>>> [1,11,'aa']

// .reverse() 反转
var a = [1,2,3,'aa']
>>> ["aa", 3, 2, 1]

// .join 拼接字符串
a.join(",")
>>> "aa,3,2,1"

// .concat(拼接的对象1，2，3...) 可以是任意数据类型
a.concat(a)
>>>  ["aa", 3, 2, 1, "aa", 3, 2, 1]

// . sort() 排序 方式和python中相同
a.sort()
>>> 1,2,3,'aa'

// forEach 和 map 都会把对象里的每一个元素放到内部的函数中处理，forEach会修改原来的对象，而map会得到一个新的对象
// 都可以对内部函数传三个参数，分别是，元素、元素索引、元素数据来源（对象）
// 最少写一个，最多写三个

// .forEach(function(元素，元素索引，元素数据来源){函数体代码},对象)
// 参数最少1个最多三个
ll.forEach(function(value,index,arr){console.log(value,index,arr)},ll)
VM2430:1 111 0 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 222 1 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 333 2 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 444 3 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 555 4 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 666 5 (6) [111, 222, 333, 444, 555, 666]

// .splice(起始位置，删除元素个数,删除后添加的对象) 第三个参数可不写
var l = [1,2,3,4,5,6]
l.splice(1,2,['aa',123])
>>> [1, Array(2), 4, 5, 6]

// .map()
var l1 = [11,22,33,44,55,66]
undefined
l1.map(function(value){console.log(value)},l1)
VM3115:1 11
VM3115:1 22
VM3115:1 33
VM3115:1 44
VM3115:1 55
VM3115:1 66
l1.map(function(value,index){return value*2},l1)
(6) [22, 44, 66, 88, 110, 132]
l1.map(function(value,index,arr){return value*2},l1)
(6) [22, 44, 66, 88, 110, 132]

7 运算符

// 算数运算符
var x = 10
var res1 = x++;
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

"""
一定要注意到底什么时候返回的是布尔值 什么是返回的是数据
按照后端逻辑理解吧 js这块看看就行了
"""

// 赋值运算符
= += -= *= ....

8 流程控制

// if(条件){条件成立后执行的代码}
if (age>18){
  console.log('来啊 来啊')
}
// if-else
if (age>18){
  console.log('来啊 来啊')
}else{
  console.log('没钱 滚蛋')
}
// if-else if else
if (age<18){
  console.log("培养一下")
}else if(age<24){
  console.log('小姐姐你好 我是你的粉丝')
}else{
  console.log('你是个好人')
}

// switch 提前写好出现的条件和解决方式
var num = 2;
switch(num){
  case 0:
  	console.log('喝酒');
  	break;  // 不加break 匹配到一个之后 就一直往下执行
  case 1:
  	console.log('唱歌');
  	break;
  case 2:
  	console.log('洗脚');
  	break;
  case 3:
  	console.log('按摩');
  	break;
  case 4:
  	console.log('营养快线');
  	break;
  case 5:
  	console.log('老板慢走 欢迎下次光临');
  	break;
  default:
  	console.log('条件都没有匹配上 默认走的流程')
}

// for循环
// 打印0-9
for(let i=0;i<10;i++){
    console.log(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
// 名字 = 条件?条件成立的值：条件不成立的值
var res = 2>5?8:10 // 10

9 函数

// 定义函数的关键字  function
// 格式

function 函数名（形参1，形参2，...）｛函数体代码｝

// 函数的传参多了没关系，只取对应的值，少了没关系，少的那个是undefined

// 关键字arguments 可以获取到函数接受到的所有参数

function fun1(a,b,c){
    console.log(arguments) // 等于 console.log(a,b,c)
}
// 根据这个关键字，我们可以对传参个数进行限制

function func2(a,b){
  if(arguments.length<2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}

// return 返回值只能有一个
return 666,777  // 只返回666

// 箭头函数，用来处理简单的业务逻辑
// var func = (参数1，参数2...) => 返回值

10 全局变量和局部变量

// 和python中的查找顺序一致
var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f()
>>> "ShenZhen"

// 闭包函数
var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

11 自定义对象

// 可以看成是python中的字典，但是js里的操作更加方便

// 第一种创建自定义对象的方式
var d1 = {'name':'hz','age':18}

d1['name']
>>> hz
d1.name
>>> hz
for (let i in d1){
    console.log(i,d1[i])
}
>>>name hz
>>>age 18

// 第二种创建自定义对象的方式
var d2 = new Object()  

d2.name = 'jason'
{name: "jason"}

d2['age'] = 18
{name: "jason", age: 18}

12 Date对象

let d3 = new Date()
Fri May 15 2020 14:41:06 GMT+0800 (中国标准时间)

d3.toLocaleString()
"2020/5/15 下午2:41:06"

// 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()

let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString()  // 月份从0开始0-11月
"1111/12/11 上午11:11:11"

// 时间对象具体方法
let d6 = new Date();
d6.getDate()  获取日
d6.getDay()		获取星期
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()					时间//

13 json对象

"""
在python中序列化反序列化
	dumps 		序列化
	loads		反序列化

在js中也有序列化反序列化
	JSON.stringify()								dumps
	JSON.parse()									loads
"""
let d7 = {'name':'jason','age':18}
let res666 = JSON.stringify(d7)
"{"name":"jason","age":18}"

JSON.parse(res666)
{name: "jason", age: 18}

14 RegExp对象

// 两种书写正则对象的方式
let 名字 = new RegExp(正则匹配规则)
let 名字 = /正则匹配规则/

let reg = /^[a-zA-Z][a-zA-A0-9]{5,11}/ 匹配任意数字字母 长度5-11

var a = 'asdas123s'
sss.match(/s/)  // 拿到一个s就停止了
sss.match(/s/g)	// 全局匹配  g就表示全局模式

sss.match(/s/)
["s", index: 5, input: "egondsb dsb dsb", groups: undefined]
sss.match(/s/g)
(3) ["s", "s", "s"]

// 全局匹配模式吐槽点
// 全局模式有一个lastIndex属性，第一次找到结束，lastindex指向最后一个元素，下一次查找从他开始，所以下一次查找就会找不到，如果出现找不到，lastIndex会重新指向开头

let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('egondsb')

reg3.test('egondsb')
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false
reg3.lastIndex
0
reg3.test('egondsb')
true
reg3.lastIndex
7
// 如果什么都不传，默认是undefined
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()

reg4.test()
true
reg4.test()
true

reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true

15 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)      返回角的正切。