1.JavaScript 操作符
2.JavaScript 流程控制
3.JavaScript 循环
4.JavaScript 字符串方法
5.JavaScript 数组方法
知识点一 操作符
变量声明
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 声明变量声明了就要赋值
const x=123;
console.log(x);
//可以先定义再赋值
var a,b,c,d;
a = 1;
b = 2;
c = 2;
d = 4;
alert(a+b+c+d)
//基本上用在函数里面
{
let e,f;
e = 1;
f = 2;
}
</script>
</body>
</html>操作符
算数运算符
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
算数运算符(基础数字运算)
+ - * / %(求余数)
当不是数字的运算的时候 + 一旦有string 就是拼接，最终的结果是字符串
- / % * 尽量将字符串转换成数字(隐式转换)
NaN : Not a Number number
*/
var a,b;
a = '888';
b = 888;
console.log(a==b);
console.log(a===b);
var a = '55';
var b = 88;
console.log(a-b);
var c = 'c';
var d = 8;
console.log(c-d);
console.log(typeof (c-d));
console.log(0.1+0.2);
</script>
</body>
</html>赋值运算
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/* 赋值运算符
+= -= /= %=
++ -- 两个都是隐式类型转换,会全部转换为数字
++x x++
*/
var a = 8;
a += 2;
alert(a)
var c = 6;
var d = c++; //先赋值，d = c;再加一 c = c+1
console.log(d,c)
var q = 1;
var w = ++q; //先加一 q = q+1;然后再赋值 w=q
console.log(w,q);
</script>
</body>
</html>逻辑运算符
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
针对布尔值 true false
&& 与 两边都为真，结果才为真,其他都是假
|| 或 两边都为假,结果才为假,其他都是真
! 非 取反，真变假，假变真
当逻辑运算符，两边不一定是布尔值的时候
&& 遇到假就停 不会进行数据转换
|| 遇到真就停 不会进行数据转换
! 隐式类型转换，将后面的数据先转换为布尔值再取反
*/
var a = !3;
console.log(a)
</script>
</body>
</html>知识点二 流程控制
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
if(1<2){
alert('真')
}else {
alert('假')
}
8>3? alert(true):alert(false) //三目运算
var x = 8;
if(x>50){
alert('大于50')
}else if (x>30){
alert('大于30')
}else if (x>10){
alert('大于10')
}else {
alert('都不对')
}
</script>
</body>
</html>知识点三 循环
html
#for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 初始值，判断条件，自增量
for (var i=1;i<9;i++){
for (var j=1;j<5;j++){
console.log(i+'配对'+j)
}
}
for (let i=0;i<5;i++){
if(i===3)continue;
console.log(i)
}
var a = 0;
while (a<10){
console.log(a)
a++
}
</script>
</body>
</html>
html
#标签使用循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
</style>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ali = document.getElementsByTagName('li');
var len = 5;
for (let i=0;i<len;i++){
ali[i].qq = i //qq自定义变量
console.log(ali[i].qq);
ali[i].onclick = function (){
alert(this.qq)
}
}
</script>
</body>
</html>
html
#九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
for (let i=1;i<=9;i++){
for (let j=1;j<=i;j++){
let sum = j*i
document.write(j+'*'+i+'='+sum+' ')
}
document.write('<br>');
}
</script>
</body>
</html>
html
#do while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var i = 0;
do{
console.log(i);
i++;
}while(i<=10);
</script>
</body>
</html>知识点四 字符串方法
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
string 字符串
索引，下标，偏移量---从0开始
str[index];通过索引取字符串
str.length;获取长度 空格也算
value.toString();--转换字符串
str.substring();--截取字符串会比较参数值的大小，小的参数在前面
str.slice()--切片，不会交换位置，负数从右到左数
str.split()--字符串切割，返回数组
str.index0f --查找字符串，成功返回索引，反之返回-1
str.toUppweCase()--全部转换大写
str.toLowerCase()--全部转换小写
*/
var str = 'who am i?'
console.log(str.length);
console.log(str[2]);
str[2] = 'Q'; //不可以写，不能修改属性;
var a = 8;
//alert(typeof a.toString());
var str1 = 'who am i, where am i';
console.log(str1.substring(4,11)); //左闭右开
console.log(str1.substring(11,4)); //(4,11)
console.log(str1.substring(-4,11)); //(0,11)
console.log(str1.slice(4,11));
console.log(str1.slice(11,4));
console.log(str1.slice(-8,-3));
console.log(str1.split(' '));
alert(str1.indexOf('a'))
alert(str1.indexOf('z'))
alert(str1.indexOf('a',5)) //从5开始找
console.log(str1.toUpperCase());
</script>
</body>
</html>知识点五 数组方法
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
数组 主要存放数据的
元素.length
查看数组的个数
元素.[]
可读可写
元素.push
在后面添加 能同时添加多个值
元素.unshift()
在前面添加 能同时添加多个值
元素.pop()
删除数组的最后一个
元素.shift()
删除数组的第一个
元素.splice()
(3)数组的长魔
(0,1) 从第0位开始删除第一个，返回副除的那个
(2,3,'a') 从第二位开始往后面的三个全部删除，补充一个'a'
(2,0,'a') 第二位开始前面插入 a
元素.sort()
升序来排序
元素.reverse()
倒序排序
元素.join()
arr.join('a')以'a'为界限拼接字符串
*/
//var arr = [];
var arr = ['捡起','福福','贝贝','呆呆'];
console.log(arr.length);
console.log(arr[1]);
arr[3]='dindin';
console.log(arr)
var arr2 = [1,6,5,2,4,5,7,8]
console.log(arr2.sort())
var arr3 = [-1,6,5,-2,4,-5,7,8]
console.log(arr2.sort())
arr3.sort(function (a,b) {
return a-b;//从小到大
return b-a;//从大到小
});
console.log(arr3);
var arr4 = ['jianqi','fufu'];
var q = arr4.join('+');
console.log( q);
var arr5=[1,2,3];
var arr6=[4,5,6];
var arr7=[7,8,9];
var arr8=arr7.concat(arr6).concat(arr5);
console.log(arr8);
</script>
</body>
</html>