爱站程序员基地js语法基础篇（此处对照paython）
一、认识js
1.什么是js
js是JavaScript的缩写，是一门专门用来控制前端页面的编程语言（属于脚本语言）
js是web标准中的行为标准 – 主要负责网页中内容的修改
2.js代码写在哪儿(和css像)
内联js – 将js代码写标签的事件属性中
内部js – 将js代码写在script标签
外部js – 将js代码写在js文件中，然后在html中用script标签导入
注意：同一个script标签只能在导入外部js和写内部js两个功能中选一个
3.js能干什么
a.修改/获取标签内容
b.修改/获取标签属性
c.修改标签样式
d.在网页中插入html代码
4.js怎么写（语法）
a.大小写敏感
b. 一行语句结束一般不需要分号, 箭头函数之前需要加分号
c.命名采用驼峰式命名
d. js中的标识符：由字母、数字、下划线和$组成，数字不能开头
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><!-- ===============js写在哪儿================ --><!-- 内联js --><!-- <button οnclick=\"alert(\'你好,js!\')\" type=\"button\">按钮1</button> --><!-- 内部js --><!-- <script type=\"text/javascript\">// 这儿可以写js代码alert(\'这是内部js\')</script> --><!-- 外部js --><!-- <script src=\"./js/02-认识js.js\" type=\"text/javascript\" charset=\"utf-8\"></script> --><!-- ================js能干什么================ --><p id=\"p1\">我是段落1</p><img id=\"img1\" src=\"img/bear.png\" ><br><br><!-- 修改内容 --><button type=\"button\" onclick=\"document.getElementById(\'p1\').innerText = \'hello js!\'\">修改内容</button><button type=\"button\" onclick=\"document.getElementById(\'img1\').src = \'img/hat1.png\'\">修改图片</button><button type=\"button\" onclick=\"document.getElementById(\'p1\').style.color=\'red\'\">修改颜色</button><script type=\"text/javascript\">// for(i=0;i<10;i++){// document.write(\'<a class=\"c1\" href=\"\">我是超链接</a>\')// }names = [\'张国荣\', \'王祖贤\', \'张曼玉\', \'周润发\', \'刘德华\']for(x in names){document.write(\'<p>\'+names[x]+\'</p>\')}</script></body></html>
二、变量
1.定义变量
1)语法：
js一共有四种定义变量的方法：
| 方法序号 | 定义方式 |
|---|---|
| 1 | 变量名 = 值 |
| 2 | var 变量名 = 值 |
| 3 | let 变量名 = 值 |
| 4 | const 变量名 = 值 |
定义方式如下所示：（console.log相当于python中的print）
studentName = \'小明\'console.log(studentName)var age = 18console.log(age)let sex = \'男\'console.log(sex)const height = 180console.log(height)
2）四种方法的区别
a.前三种方式定义的变量，变量的值可以修改；用const定义的变量的值不能修改
studentName = ‘张三’
age = 20
sex = ‘女’
console.log(studentName, age, sex)
// height = 190 //报错，因为const定义的变量中的数据不能修改
b.不同的作用域
a. 变量名 = 值 – 这儿的变量是全局变量(不管在哪儿定义)
b. var 变量名 = 值 – 在函数中定义是局部变量，没有定义在函数中就是全局
c. let 变量名 = 值 – 在{}中定义的是局部变量，没有定义在{}中的是全局的
num = 100 // num是全局的var x = \'hello\' // x是全局的let a = 11{num2 = 200 // 全局的var x2 = \'you\' //全局的let a2 = 22 //局部的}function func1(){num3 = 300 //全局var x3 = \'are\' //局部let a3 = 33 //局部console.log(\'函数中:\', num, x, a, num2, x2)}func1()console.log(num, num2, num3)console.log(x, x2)console.log(a)// console.log(a2) //a2实局部变量，没法再外面输出，会报错// console.log(a3) //a2实局部变量，没法再外面输出，会报错if(age>=18){let school = \'清华大学\'console.log(\'if里面:\',school) //局部变量可以再局部输出}// console.log(school) //school实局部变量，没法再外面输出，会报错
2、同时定义多个变量
a：方式一： 变量名1=变量名2=变量名3=… = 值
a=b=c=100console.log(a,b,c)
b：方式二：var/let/const 变量1,变量2,变量3,…
var a1,b1,c1 = 20console.log(a1, b1, c1) // undefined undefined 20var b1,b2,b3console.log(b1, b2, b3) // undefined undefined undefinedvar c1=100, c2=200, c3=300console.log(c1, c2, c3)
三、运算符
1.数学运算：+、-、*、/、%、++、–（相较于python，无整除运算符）
console.log(10+20) //30console.log(10-20) //-10console.log(10*20) //200console.log(5/2) //2.5console.log(9%2) //1// ++(自增1)、--(自减1)// 变量++、++变量age = 18age++ //age = age+1console.log(age) //19++ageconsole.log(age) //20age--console.log(age) //19--ageconsole.log(age) //18// 增操作，++/--放在前面和后面的时候的不同num = 10num2 = ++num // num+=1; num2=numconsole.log(num2) //11num = 10num2 = num++ //num2 = num; num+=1console.log(num2) //10a = 10result = 12 + a++ - --a + ++a/*第一次：12+10- --a+ ++a ->a=11第二次：12+10-10+ ++a ->a=10第三次：12+10-10+11 ->a=11*/console.log(result) //23
2.比较运算运算符：>、<、>=、<=、、!=、=、!==
结果都是布尔值
注意：==和！=等号比较的是文本内容，不比较类型
===和！比较运算符和python中和！=功能一样，除了内容，还需比较类型
console.log(10 > 20) // falseconsole.log(5 == \'5\') // trueconsole.log(5 == 5) // trueconsole.log(5 === \'5\') //falseconsole.log(5 === 5) // true// 注意: js中的比较运算符，不支持连写表示范围age = 30// console.log(18<=age<=28) // true
3.逻辑运算符: &&(逻辑与运算)、||(逻辑或运算)、!(逻辑非运算)
在python中为and，or，not
console.log(true && true)console.log(true && false)console.log(false && true)console.log(false && false)console.log(true || true)console.log(true || false)console.log(false || true)console.log(false || false)console.log(!true)num = 18console.log(num%3==0 && num%7==0)
4.赋值运算符: =、+=、-=、*=、/=、%=
// 运算规则和python一样num = 100num += 10 // num = num+10num -= 20
5.三目运算符：?:
表达式?值1:值2 – 判断表达式的结果是否为true，如果是，整个运算表达式的结果是值1否则是值2
age = 18result = age>=18?\'成年\':\'未成年\'console.log(result)num = 10result = num%3?\'不是3的倍数\':\'3的倍数\'console.log(result)// 不同运算符的优先级和python一样
四、分支结构
1. if分支结构（类C语言）
语法：
if(条件语句){代码块}if(条件语句){满足条件要执行的代码块}else{条件不满足要执行的代码块}if(条件语句1){代码块1}else if(条件语句2){代码块2}else if(条件语句3){代码块3}...else{代码块N}执行过程和应用和python一样
2.switch
语法：如果没有break存在，表达式值如果等于值2，那么代码块2，3…N都会执行，里面如果有输出，那么所有的内容都会进行输出，而不管表达式是否等于后续的case中的值！
switch(表达式){case 值1:{代码块1}case 值2:{代码块2}case 值3:{代码块3}...defualt:{代码块N}}
说明：
1） switch和case、defualt是关键字
2.）case语句后面的{}可以省略
3） 表达式可以是任何有结果的表达式
4）值也必须是有结果的表达式，通常会直接写一个固定的数据
执行过程：
先计算表达式的值，然后让表达式的值依次和每个case后面的值进行比较，哪个case后面的值和表达式的值相等，
就将这个case作为入口，依次执行和这个case以及它后面所有的代码块，直接执行完或者遇到break就结束。
如果没有哪个case后面的值和表达式的值相等，就将defualt作为入口（注意：defualt不是一定要放在最后）
五、循环结构
1.while循环
1）whilewhile(条件语句){循环体}2) do-while(保证循环至少执行一次)do{循环体}while(条件语句)
2.for循环
1) for-in
for(变量 in 序列){循环体}
注意：变量取的不是元素而是下标或者key
2) 标准for
for(表达式1;表达式2;表达式3){循环体}//相当于：表达式1while(表达式2){循环体表达式3}
执行过程:
先执行表达式1, 然后判断表达式2的结果是否为true，如果为true是执行循环体，执行完循环体再执行表达式3;
再判断表达式2是否为true,为true又执行循环体，执行完循环体再执行表达式3;
以此类推，如果表达式2的结果是false整个循环就结束
六、函数
1.函数的定义
function 函数名(参数列表){函数体}
注意： js中每个函数中都有一个局部变量arguments, 用来接收这个函数在调用的时候传的所有的实参
function sum(num1, num2){return num1+num2}function func1(a, b=10, c=20){// console.log(\'a:\', a, \'b:\', b, \'c:\', c)console.log(`a:${a} b:${b} c:${c}`)}// 有默认值的参数可以放在没有默认值参数的前面function func2(a=10, b, c=20){console.log(`a:${a} b:${b} c:${c}`)}
2.函数的调用
// 函数名(实参列表)console.log(sum(10, 30))func1(40)func2(1,2,3)// 注意: js中使用关键字参数传参无效, 只能使用位置参数func1(c=300,a=200,b=100) // a:300 b:200 c:100// 调用函数的如果不给没有默认值的参数传参，不会报错，这个参数的值会是undefinedfunc1() // a:undefined b:10 c:20func1(1,2,3,4,5,6,7,8) // a:1 b:2 c:3
3.arguments
js中每个函数中都有一个局部变量arguments,用来接收这个函数在调用的时候传的所有的实参
function func3(){console.log(arguments)}func3()func3(10)func3(10,20)func3(\'name\', \'age\', 30)console.log(\'======================\')function func4(x){console.log(\'x:\', x)console.log(arguments)for(i in arguments){console.log(\'i:\', i, arguments[i])}}func4()func4(100, 200)func4(1, 4, 9, 19, 80)
4.匿名函数
//css的匿名函数函数名 = function (参数列表){函数体}函数名 = lambda 参数列表: 返回值 //(python中的匿名函数)
匿名函数举例：
sum2 = function(x,y){console.log(x+y)return x+y}sum2(12.5, 10)
5.箭头函数
(参数列表)=>{函数体}
sum3 = (x,y)=>{console.log(`x+y: ${x+y}`)return x+y}sum3(100, 200)
6.补充内容
1）输出方式对比：
name = \'小明\'python: f\'你的名字是:{name}\'js: `你的名字是:${name}`
2）js排序方式：
从小到大 排序：（使用实参高阶函数加上匿名函数的方式）
nums = [19, 89, 78, 65, 12]nums.sort(function(item1, item2){return item1-item2})console.log(nums) // [12, 19, 65, 78, 89]
从大到小 排序：（使用实参高阶函数加上匿名函数的方式）
nums = [19, 89, 78, 65, 12]nums.sort(function(item1, item2){return item2-item1})console.log(nums) // [89, 78, 65, 19, 12]
按照 个位数从大到小
nums = [19, 89, 78, 65, 12]nums.sort(function(item1, item2){return item2%10-item1%10})console.log(nums) // [19, 89, 78, 65, 12]
3）正则写法：/ 正则内容/
re = /^\\d{3}$/result = re.test(\'789asdf\')console.log(result)
