1.js语法基础
1.注释(和c语言注释一样)
单行注释：在注释文字前加//
/*
多行注释1
多行注释2
*/
2.标识符
由字母、数字、下划线和符不轻易使用，在jquery有特殊的意义)
num = 23
_num = 100
js语句后面可以写分号，可以不写分号
但是写分号就尽量都写，不然就不写
3.关键字
for、if、var、while、function、true、false等
4.数据类型
- 类型
类型名首字母都是大写的
Number(数字)、String(字符串)、Boolean(布尔)、Array(数组)、Object(对象)
a.Number - 包含所有的数字(包括整数和小数), 例如：10, 0.23, -8
b.String - 用双引号或者单引号引起来的字符集，支转义字符和编码字符
c.Boolean - 只有true和false两个值，分别代表真和假
d.Array - 相当于python中的列表，用中括号括起来的多个元素 [12, false, '123', [1,2,3]]
e.Object - - typeof函数
- 类型名(数据) - 类型转换
parseFloat(数据) - 将数据转换成浮点数
parseInt(数据) - 将数据转换成整数
// typeof(数据) - 获取数据对应的类型
x = Number(7.9)
console.log(x) //console.log()在控制台打印，相当于python的print
console.log(typeof(x))
5.语句
一行一般情况下只写一条语句，语句结束可以有分号也可以没有；如果一行有多条语句，语句之间必须有分号
缩进无要求
大小写是敏感的
变量
1.声明变量的语法
语法1：
变量名 = 值语法2：
var 变量名/var 变量名 = 值说明
变量名 - 标识符、不能是关键字；采用驼峰式命名
声明变量如果没有给变量赋值(语法2才支持)，变量的默认值是undefind
num = 100
var num2
studentName = '小明'
//同时声明多个变量，赋相同的值
a = b = c = 10
//同时声明多个变量，赋不同的值
var a1, b1=10, c1=30
运算符
js支持数学运算符、比较运算符、逻辑运算符、赋值运算符、(位运算)
1.数学运算符：+, -, *, /, %, ++, --
+, -, *, /, %和python一样
- 自加1运算：变量++, ++变量
num = 10
num ++ // num += 1
console.log(num) // num=11
++num
console.log(num) // num=12
2)自减1运算：变量--, --变量
num = 10
num--
console.log(num)
--num
console.log(num)
3)自加自减的坑
num = 10
num2 = num++ // num2 = num; num += 1
console.log(num2)
num = 10
num2 = ++num // num+=1; num2=num
console.log(num2)
2.比较运算符：>,<,==,!=,>=,<=, ===, !==
比较大小和python一样
== : 判断值是否相等(不管类型)
=== : 同时判断值和类型是否相等(python中的==)
console.log(5 == '5') // true
console.log(5 === '5') // false
console.log(5 != '5') // false
console.log(5 !== '5') // true
支持表示范围的连续写法
num = 10
result = 0 < num < 100
console.log(result)
3.逻辑运算: &&(逻辑与运算)、||(逻辑或运算)、~(逻辑非运算)
和python中的and, or, not功能一样
console.log(true && true, true && false)
console.log(true || true, true || false)
console.log(!true)
4.赋值运算符：=, +=, -=, *=, /=, %=
和python一样
5.复合运算符
和python一样
6.三目运算符 - 表达式?值1:值2
判断表达式的值是否为true,如果为true整个运算的结果为值1,否则是值2
age = 16
result = age>18?'成年':'未成年'
console.log(result)
分之结构
js有if和switch两种分之结构
1.if分之
- 结构1
js写法：
if(条件语句){
满足条件执行的代码块
}
python写法：
if 条件语句:
满足条件执行的代码块
- 结构2: if-else
js写法：
if(条件语句){
满足条件执行的代码块
}else{
不满足条件执行的代码块
}
python写法：
if 条件语句:
满足添加执行的代码块
else:
不满足条件执行的代码块
- 结构3：if-elif...else
js写法：
if(条件语句1){
满足条件1执行的代码块
}else if(条件语句2){
满足条件2执行的代码块
}
...
else{}
python写法：
if 条件语句1:
满足条件1执行的代码块
elif 条件语句2:
满足条件2执行的代码块
...
else:
...
2.switch
语法：
switch(表达式){
case 值1：
代码块1
case 值2:
代码块2
case 值2:
代码块3
break
...
default:
代码块N
}执行过程
先计算表达式的结果，然后让这个结果一一按顺序从前往后和每个case后面的值进行比较
如果case后面的值和表达式的结果相等，就将这个case作为入口，依次执行后面所有的的代码块
直到执行完最后一个代码块或者遇到break为止
如果每个case后面的值都和表达式的结果不相等，直接执行default后面的代码块 (default可以不写，在不满足情况的时候不执行语句)
循环结构
js中循环分为for循环和while循环
1.for循环
- for-in循环
for(变量 in 序列){
循环体
}
让变量依次获取序列中元素的下标(下标/属性名),一个一个取，取完为止，每取一个执行一次循环体
str1 = 'abc'
for(x in str1){
console.log(x, str1[x])
}
- c中的for循环
for(表达式1;表达式2;表达式3){
循环体
}
执行过程：先执行表达式1,再判断表达式2的值是否为True;如果为true执行循环体,执行完循环体再执行表达式3
再判断表达式2的值是否为True;如果为true执行循环体,执行完循环体再执行表达式3
再判断表达式2的值是否为True;如果为true执行循环体,执行完循环体再执行表达式3
以此类推，直到表达式2的结果为false,循环结束
相当于python中的以下结构:
表达式1
while 表达式2:
循环体
表达式3
2.while循环
- while循环
while(条件语句){
循环体
}
执行过程和python一样
- do-while循环
do{
循环体
}while(条件语句)
执行过程:执行循环体,判断条件语句是否为true,是true再执行循环体
执行完循环体又判断条件语句是否为true
以此类推,直到条件语句为false循环结束
结构相当于:
循环体
while(条件语句){
循环体
}
/*方法1*/
sum1 = 0
for(num=1;num<100;num++){
sum1 += num
}
console.log(sum1)
/*方法2*/
sum1 = 0
num = 1
while(num<=100){
sum1 += num
num++
}
console.log(sum1)
/*方法3*/
sum1 = 0
num = 1
for(;num<=100;){
sum1 += num
num++
}
console.log(sum1)
上述三种方法功能一样
练习：打印所有的水仙花数
在js中/不能整除
for(x=100;x<=999;x++){
num1 = x % 10
num2 = parseInt(x/10)%10
num3 = parseInt(x/100)
if(num1**3+num2**3+num3**3 == x){
console.log(x)
}
}
函数
1.语法
function 函数名(参数列表){
函数体
}
function sum(num1, num2=20){
console.log(num1,num2, num1+num2)
}
//位置参数有效
sum(10, 30)
//关键字参数不报错，但是位置无效
sum(num1=2, num=4) // 2 4 6
sum(num2=9, num1=8) // 8 8 17
//参数可以设置默认值(有默认值的参数要在后面)
sum(10) // 10 20 30
function sum1(num1=10, num2){
console.log(num1,num2, num1+num2)
}
sum1(20) // 20 undefined NaN(无效数字)
//不支持不定长参数
// function sum2(*nums){
// console.log(nums)
// }
// sum2(1,3)
function sum3(num1, num2){
return num1+num2
}
console.log(sum3(12,2))
//声明函数其实就是声明一个类型是function的变量
x = sum3
console.log(typeof(x))
console.log(x(3,21))
2.匿名函数
function(参数列表){
}
func1 = function(x,y){
console.log(x, y, x+y)
return x+y
}
func1(1,2)
a = function(x,y){
console.log(x, y, x+y)
return x+y
}(10,20)
console.log(a) // 30
字符串
1.字符串
单引号或双引号引起来的字符集，支持转义字符和编码字符
str1 = 'hello world'
str2 = 'hello\t\'world\''
2.获取字符
字符串[下标]
注意：1)下标只有正值，没有负的 2)下标越界不会报错，获取到的值是undefined
console.log(str1[0])
console.log(str1[-1]) // undefined
js中不支持[]对应的切片语法，但是有相应的方法
3.相关操作
- 加法运算
支持字符串和任何数据相加，如果数据另一个数据不是字符串就先转换成字符串再进行拼接操作
console.log('abc'+'hello')
console.log('abc'+123)
比较运算：和python一样
字符串长度：字符串.length
console.log(str2.length)
4.相关方法
str2 = new String('hello world')
console.log(str2)
1)字符串.charCodeAt(下标) 获取字符编码
console.log(str2.charCodeAt(0))
2)字符串.match(正则表达式) 匹配
re = /\d{3}[a-z]{3}/
console.log('246adf'.match(re))
3)字符串.slice(开始下标,结束下标)
console.log(str2.slice(0,3))
数组
js中的数组相当于python中的列表
1.查
arr1 = [10,2,30,4,12]
- 获取单个元素:数组[下标]
console.log(arr1[3]) // 4
console.log(arr1[10]) // undefined
- 遍历 直接遍历数组，获取到的值是下标值
for(index in arr1){
console.log('index:'+index, arr1[index])
}
```
####2.增
1) 数组.push(元素) - 在数组的最后添加元素,并返回新数组的长度
```
arr1.push(100)
console.log(arr1)
```
2) 数组.splice(下标,0,元素) - 在指定的下标前插入指定的元素
数组.splice(下标,0,元素1,元素2,...) - 在指定的下标前插入多个元素
```
arr1 = [1,2,3,6,7,8]
arr1.splice(3,0,4)
console.log(arr1)
```
####3.删
1) 数组.pop() - 删除数组中的最后一个元素,并返回删除的元素
```
re = arr1.pop()
console.log(arr1, re)
```
2) 数组.shift() - 取出数组中的第一个元素
```
re = arr1.shift()
console.log(arr1,re)
```
3) 数组.splice(开始删除的下标, 删除的个数) - 将数组从开始下标开始，删除指定个数的元素
```
arr2 = [10, 30, 20, 40]
arr2.splice(1,1)
console.log(arr2)
```
####4.改
数组[下标] = 值
```
arr1[0] = 200
console.log(arr1)
```
####5.排序
sort(函数对象)
函数对象 - 函数,有两个参数(代表数组中的两个元素),返回值代表排序方法
```
nums = [90, 23, 56, 7, 89, 70]
```
数组元素从大到小排序 b到a 从大到小
```
new_nums = nums.sort(function(a,b){return b-a})
console.log(new_nums, nums)
```
数组元素从小到大排序 a-b 从小到大
```
new_nums = nums.sort(function(a,b){return a-b})
console.log(new_nums, nums)
```
```
students = [
{name:'小明', age:18, score:90},
{name:'小华', age:20, score:70},
{name:'小李', age:15, score:78},
]
//将数组元素按照元素的age属性从小到大排序
// students.sort(function(a,b){return a.age-b.age})
// console.log(students)
//将数组元素按照元素的score属性从大到小排序
students.sort(function(a,b){return b.score-a.score})
console.log(students)
```
##对象
####1.什么是对象
和python类的对象一样,主要由对象属性和对象方法组成
####2.创建对象
1) 对象值
```
obj1 = {
name:'小明',
age:18,
gender:'男'
}
console.log(typeof(obj1), obj1)
```
2) new 类型()
```
obj2 = new Object()
console.log(typeof(obj2), obj2)
```
####3.构造方法 - 一个用来创建对象的函数
1) 函数名相当于类名,首字母要大写
2) 函数的功能是通过this添加对象属性和对象方法 (这儿的this就相当于python的self)
```
function Person(name, age, gender='男'){
//通过new的方式调用, this：Person{}
//直接调用, this: Window{}
console.log(this)
//添加对象属性
this.name = name
this.age = age
this.gender = gender
//添加对象方法
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
return this
}
```
####4.使用构造函数创建对象
对象 = 构造方法()
```
p1 = new Person('小花', 20, '女')
p2 = new Person('小明', 17)
console.log(p1)
```
####5.通过对象使用对象属性和掉调用对象方法
```
p1.name = '小花花'
console.log(p1.name, p1['name']) // 两种方法都可以获取属性
p1.eat('面条')
p2.eat('面包')
```
####6.添加/修改属性
对象.属性 - 值
属性存在即为修改;不存在即为添加 (添加的属性仅为某个示例对象的属性，其他属性并没有添加属性)
```
function func1(){
console.log('普通函数')
console.log(this)
}
window.func1()
num = 100
console.log(num, window.num)
```