Python（三十九）JavaScript提升
2021-12-27 本文已影响0人
Lonelyroots
Python（三十九）JavaScript提升
这一篇基本上都是需要记忆的内容，与Python差不多，所以忘记的时候回过头来看看即可！
1. JS操作符
1.1. JS运算符
1.1.1. 算术运算符
算术运算符(基础数字运算)：＋、-、、/、%。
①当+号两边一旦有字符串(引号引起的部分)，那么+号就不再是数学运算了，而是拼接，结果是字符串。
②-、/、、%尽量将字符串转换成数字（隐式类型转换)
③NaN: Not a Number
1.1.2. 赋值运算符
+=、-=、*=、/=、=这些是基本的赋值运算符，除此之外还有++、--，这两个都存在隐式类型转换，会全部转成数字。
1.1.3. 逻辑运算符
JS中的逻辑运算用:&&、||、!来表示。&&和||不会进行类型转换，!则会进行类型转换，将后面的数据先转换为布尔型再取反。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS operator</title>
</head>
<body>
<script>
var a = 10
var b = '5'
var c = 'c'
// 除+以外，-、*、/都会在某种条件下，直接将结果转换成数字类型
console.log(a + b); // 进行拼接，得到105
// 隐式转换
console.log(a - b); // 是会转换成数字类型，得到5
console.log(a * b); // 是会转换成数字类型，得到50
console.log(a / b); // 是会转换成数字类型，得到2
console.log(a - c); // 得到NaN
console.log(a + null); // 空值就是0，得到10
// console.log(a + d); // d未定义，会报错
console.log(a++); // a++是先赋值，再加加，a++=a+1，得到10
console.log(++a); // ++a是先加加，再赋值，得到12
// 与（&&）：两边同时成立才为真；
// 或（||）:一边成立即为真；
// 非（！）：真->假，假->真。
console.log(a == 10 && b == 5); // ==：只要值是相等的，就成立，得到true。
console.log(a == 10 && b === 5); // ===：值和类型都要相等，才能成立，得到false。
console.log(a == 10 || b == 5); // 得到true。
console.log(a == 10 && !(b === 5)); // 得到true。
console.log(null == undefined); // 得到true。
console.log(NaN == NaN); // 得到false。
</script>
</body>
</html>
运行结果：
2. JS流程控制
JS中流程控制是if判断和switch选择。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS process control</title>
</head>
<body>
<script>
var weather = 'sunny'
if (weather === 'sunny'){
console.log('天气晴朗，出去吃好吃的')
}
else if(weather === 'rainy'){
console.log('好好学习天天向上')
}
else if(weather === 'Cloudy to sunny'){
console.log('去看电影')
}
switch (weather){
case "sunny":
console.log('天气转晴，出去吃好吃的')
break;
case 'rainy':
console.log('好好学习，天天向上')
break;
case 'Cloudy to sunny':
console.log('去看电影')
break;
default: // 都没有，则执行default的
console.log('去种地或者搬砖')
}
// 三目运算符
a = 10
console.log(a>1?2:3)
</script>
</body>
</html>
运行结果：
3. JS循环
3.1. for循环
JS中的for循环相当于while的简写。
3.2.while循环
while是一个基本的循环语句，expression为真的时候，就会执行循环体。
3.3. for...in...
JS中的for也支持类似于python中的用法，可以遍历对象所有的属性。
3.4. do/while
do/while和while类似，只是会先执行一个循环。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS loop</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
var ali=document.getElementsByTagName('li')
// var允许在同一作用域中声明同名的变量，而let不可以
var i=6
console.log(i)
// 被let声明的变量不会作为全局对象window的属性，而被var声明的变量却可以。
// let只在for循环中可用。
for (let i=0;i<ali.length;i++){
ali[i].onclick=function (){
console.log(i)
}
}
</script>
<script>
var a=0
for (var a=0;a<10;a++){
console.log(a)
}
var a=0
while (a<10){
console.log(a)
a++
}
var a=5
do{
console.log(a)
a++
}while(a<3)
// 与Python不同，JavaScript打印的是下标，而Python打印的是元素。
array=[1,2,3,4]
for (var a in array){
console.log(a,array[a])
}
</script>
</body>
</html>
运行结果：
4. JS字符串方法
length：长度；
split：分割；
slice：切片;
substring：截取；
indexOf：索引；
replace：替换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS string method</title>
</head>
<body>
<script>
var str="Only a fool thinks he can solve the world's problems"
console.log(str.length); // 获取字符串的长度。
console.log(str[30]); // 通过下标获取到对应的字符。
console.log(str.substring(1, 6)); // 截取，左闭右开，不可以设置成负数。
console.log(str.slice(-3,-1)); // 切片，左闭右开，可以设置成正数与负数。
console.log(str.slice(2, -2)); // 切片，左闭右开，可以设置成正数与负数。
console.log(str.substr(2, 5)); // 第一个参数是下标，第二个参数是数值，从第二个开始，取5个元素
console.log(str.split('o')); // 从什么位置开始分割。
console.log(str.replace('a','the')); // 替换
console.log(Object.keys(str)); // 打印所有的下标
console.log(Object.values(str)) // 打印所有的值
console.log(str.indexOf('fool')); // 找到元素打印其下标，若没找到则返回-1。
// 强转类型
var a=123
console.log(typeof(toString(a)));
var b=123
console.log(typeof (parseInt(b)));
</script>
</body>
</html>
运行结果：
5. JS数组方法
length：长度；
pop、shift：删除；
indexOf：查找;
push：追加；
unshift：添加；
slice：改；
join：拼接
sort、reverse：排序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>array method</title>
</head>
<body>
<script>
var array=['语文','数学','英语']
console.log(array.length);
array.push('地理','物理','化学') // 追加，同时往数组里增加多个元素
console.log(array)
array.unshift('生物') // 往数组的最前方里增加单个元素
console.log(array)
array.pop() // 删除最末尾的元素
console.log(array)
array.shift() // 删除最前面的元素
console.log(array)
console.log(array[1]) // 通过下标，找到值
console.log(array.indexOf('语文')); // 通过值，找到下标。
array[2]='政治' // 通过下标，改值
console.log(array);
var array_1=[1,2,4,4,3,5,6,2,1]
// console.log(array_1.sort()); // 从小到大排序
console.log(array_1.reverse()); // 单纯的反方向，不按照从大到小排序
console.log(array_1.join('*')); // 拼接，用*号拼接
</script>
</body>
</html>
运行结果：
文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！
Editor：Lonelyroots
