01 js 语法基础

js基础语法

1. 变量

// 驼峰命名 userName  (数字，字母，下划线，$)
// 需要关键字申明（var或者let）
	var在for循环里面定义也会影响到全局
	let在局部定义只会在局部生效

2. 常量(定义之后不可修改)

// python中没有真正意义上的常量 默认全大写就是表示常量
// js中是有真正意义上的常量的
	const pi = 3.14

3. 数据类型

注意：js/python是一门拥有动态类型

name = 'wesley'
name = 123
name = [1,2,3,4]
# name可以指向任意的数据类型 
# 但是有一些语言中，变量名之内指向一种后续不能更改 

3.1 数值类型（number）

注意：特殊的 NaN:数值类型 表示的意思是“不是一个数字” NOT A NUMBER

var a = 11;
var b = 11.11;
// 如何查看当前数据类型
typeof a;

// 类型转换
parseInt('12312312')
12312312
parseFloat('11.11')
11.11
parseInt('11.11')
11
parseInt('123sdasdajs2312dasd')
123
parseInt('asdasdad123sdasdajs2312dasd')
NaN

3.2 字符类型（string）

// 1. 单双引号（不能三引号）
var s = 'wesley'
typeof s
var x = "wesley"

// 2. 模板字符串
var y = `
lalalalala
lalalalala
`
// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
var name = 'wesley'
var age = 18
var sss = `my name is ${name} and my age is ${age}`

// 3.字符串拼接
// 在python中不推荐你使用+做拼接 建议用join
// 在js中推荐你直接使用+做拼接
name + age

3.3 字符类型常用方法

"""
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
	联想记忆
		MySQL
			concat
			concat_ws
			group_concat
		python
			join
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割
"""
// ps:
// 1. indexof
var lala = "asdf"
undefined
lala.indexOf("sd")         //返回字串的位置
1
// 2. substring
lala.substring(1,3)        // 返回索引1~2  左闭右开   不识别复数 不建议使用
"sd"
// 3. slice 建议使用 
lala.slice(0,3)            // 左闭右开
"asd"
// 4. split
var lalala = "wesley|leo|yebobo"
undefined
lalala
"wesley|leo|yebobo"
lalala.split("|")
(3) ["wesley", "leo", "yebobo"]
lalala.split("|",2)
(2) ["wesley", "leo"]
lalala.split("|",10)
(3) ["wesley", "leo", "yebobo"]

3.4 布尔值(boolean)

"""
1.在python中布尔值是首字母大写的
	True
	False
2.但是在js中布尔值是全小写的
	true
	false
# 布尔值是false的有哪些
	空字符串、0、null、undefined、NaN
"""

3.5 null与undefined

null
	表示值为空 一般都是指定或者清空一个变量时使用
		name = 'wesley'
		name = null
undefined
	表示声明了一个变量 但是没有做初始化操作(没有给值)
	函数没有指定返回值的时候 返回的也是undefined

4. 对象

• 一切皆对象
  • 数组

show code

var l = [11,22,33,44,55]
typeof l
"object"

l[1]           // 不支持负数索引
22
l.length
5
l.push(66)     // 数组最后添加
6
l
(6) [11, 22, 33, 44, 55, 66]
l.pop()        // 最后元素删除
66
l
(5) [11, 22, 33, 44, 55]
l.unshift(11)  // 最前面添加
6
l
(6) [11, 11, 22, 33, 44, 55]
l.shift()      // 删最前面的元素
11
l
(5) [11, 22, 33, 44, 55]
l.slice(0,3)   // 切片
(3) [11, 22, 33]
l.reverse()    // 倒序
(5) [55, 44, 33, 22, 11]
l.join('$')    // 拼接
"55$44$33$22$11"
l.concat([99,88])           // extend
(7) [55, 44, 33, 22, 11, 99, 88]
l.sort()
(5) [11, 22, 33, 44, 55]
l.concat([99,88]).sort()    //排序
(7) [11, 22, 33, 44, 55, 88, 99]


// 三个比较重要的方法
// 1. forEach 
var ll = [111,222,333,444,555,666]
ll.forEach(function(value){console.log(value)},ll)
VM2277:1 111  # 一个参数就是数组里面每一个元素对象
VM2277:1 222
VM2277:1 333
VM2277:1 444
VM2277:1 555
VM2277:1 666

ll.forEach(function(value,index){console.log(value,index)},ll)
VM2346:1 111 0  # 两个参数就是元素 + 元素索引
VM2346:1 222 1
VM2346:1 333 2
VM2346:1 444 3
VM2346:1 555 4
VM2346:1 666 5

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]

// 2. splice
ll
(6) [111, 222, 333, 444, 555, 666]
ll.splice(0,3)  # 两个参数 第一个是起始位置 第二个是删除的个数
(3) [111, 222, 333]
ll
(3) [444, 555, 666]
ll.splice(0,1,777)  # 先删除后添加
[444]
ll
(3) [777, 555, 666]
ll.splice(0,1,[111,222,333,444])
[777]
ll
(3) [Array(4), 555, 666]

// 3. map
ll.map(function(value){console.log(value)},ll)
VM3056:1 111
VM3056:1 222
VM3056:1 333
VM3056:1 444
VM3056:1 555
VM3056:1 666
ll.map(function(value,index){return value*2},ll)
(6) [222, 444, 666, 888, 1110, 1332]
ll.map(function(value,index,arr){return value*2},ll)
(6) [222, 444, 666, 888, 1110, 1332]

5. 运算符

// 算术运算符
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

"""
一定要注意到底什么时候返回的是布尔值 什么是返回的是数据
"""

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

6. 流程控制

// if判断
var age = 28;
// 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('你是个好人')
}
"""
在js中代码是没有缩进的 只不过我们处于python书写习惯人为的加上了而已
()条件
{}代码块
"""

// 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)
}
// 题目1  循环打印出数组里面的每一个元素
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
"""
三元运算符不要写的过于复杂
"""

7. 函数及其内置对象

• 函数及其内置对象