一：js的书写方式
-
行内式（可读性差，引号易错，特殊情况使用）
<input type="text" onclick="alert('弹出')"> -
内嵌式（最常用）
<script> </script> -
外部式（利于HTML界面结构化，引用外部JS文件的script标签中间不可以写代码，适用于js代码量比较大的情况
<script src=""></script>
1.2 字符串转义字符
1.3js的输入输出语句
- alert（）浏览器弹出警示框
- consol.log（）浏览器控制台打印输出信息
- prompt（）浏览器弹出输入框，用户可以输入
二：变量
2.1 变量的使用（必须声明变量，并且赋值后才能使用，否则会报错）
-
var是一个js关键字，用来声明变量。使用该关键字声明变量后，计算机会自动会变量分配内存空间
-
age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
<script> var age; age=1; </script> <script> //1. 用户输入姓名 存储到一个 myname的变量里面 var myname = prompt(" 请输入您的名字"); //2. 输出这个用户名 alert(myname); </script> -
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
-
同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。
var age = 10, name = 'zs', sex = 2;
2.2 变量的命名规范
- 由字母（A-Za-z）、数字（0-9）、下划线、美元符号$组成
- 严格区分大小写，varapp和varApp是两个变量
- 不能以数字开头，18age是错误的
- 不能是关键字、保留字，例如：var、for、while
- 遵守驼峰命名法，首字母小写，后面单词的首字母要大写，如usrAge
三：数据类型
- 数字型 Number(0)
- 布尔型 Boolean(false)
- 字符串类型 String("")
- Undefined (var a;声明了变量a但没有给值，此时a=undefined)
- Null (var a=null;声明了变量a为空值)
3.1 字符串的拼接
-
多个字符串之间可以使用+进行拼接，字符串+任何类型=拼接之后的新字符串
-
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
<script> console.log('奥拓' + '汽车'); console.log('奥拓老师' + 18); console.log('奥拓老师' + true); console.log('12' + 12); console.log('奥拓老师' + 18 + '岁'); </script> -
将字符串与变量拼接时，变量不能添加引号，加引号的变量会变成字符串
var age = 25; console.log('奥拓老师' + age + '岁'); -
模板字符串（拼接字符串和变量）
<script> let age = 18 document.write(`我今年${age}岁了`)//反引号包裹 </script>
3.2 布尔型变量参与运算
console.log(true + 1); // 2
console.log(false + 1); // 1
3.3 undefined与null的特殊性
<script>
var str1=undefined
console.log(str1+'auto')//undefinedauto
console.log(str1+1)//NaN
var str2=null
console.log(str2+'auto')//nullauto
console.log(str2+1)//1
</script>
3.4 获取变量类型
3.5 数据类型转换
转换为字符串
-
toString()
-
String()强制转换
-
加号拼接字符串隐式转换
<script> var num = 10; var str = num.toString(); console.log(str); console.log(String(num)); console.log('' + num); </script>
转换为数字型
-
parseInt()
-
parseFloat()
-
Number()强制转换
-
（- * /）隐式转换
<script> var age = '18'; console.log(parseInt(age)); //18 console.log(parseInt('3.9')); //3 取整 console.log(parseInt('120px')); //120 自动去掉px console.log(parseInt('rem120px')); //NaN console.log(parseFloat('3.14')); //3.14 console.log(parseFloat('120px')); //120 console.log(parseFloat('rem120px')); //NaN console.log(Number('123'));//123 console.log('12'-0); //数字12 </script>
转换为布尔型
-
Boolean()
-
代表空、否定的值会被转换为false
console.log(Boolean('')); // false console.log(Boolean(0)); // false console.log(Boolean(NaN)); // false console.log(Boolean(null)); // false console.log(Boolean(undefined)); // false console.log(Boolean('小白')); // true console.log(Boolean(12)); // true
四：运算符
4.1算数运算符（+ - * / %取余数）
-
++i与i++在单独使用时效果是一样的
<script> let i=1 i++ console.log(i)//2 let a=1 ++a console.log(a)//2 </script> -
前置递增或后置递增与其他代码连用时，前置递增先加后运算，后置递增先运算，后返回自身++后的值
<script> let i=1 console.log(++i +1)//3 let a=1 console.log(a++ +1)//2(运算出结果为2后，a的值才变为2) </script> -
注意浮点数运算
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004 console.log(0.07 * 100); // 结果不是 7， 而是：7.000000000000001
4.2比较运算符
- 等号==有隐式转换，会将其它类型的元素转换为字符型进行比较
- 全等===要求两侧值和数据类型都一致才会显示true
4.3逻辑运算符
-
&&逻辑与（一假则假）
-
||逻辑或（一真则真）
-
！逻辑非（真变假，假变真）
-
短路运算原理：当有多个表达式（值）时，左边的表达式（值）可以确定结果时，就不再继续运算右边的值
<script> /* 短路运算 逻辑与短路运算特点 语法：表达式1&&表达式2 如果第一个表达式为真，则返回表达式2 如果第一个表达式为假，则返回表达式1 逻辑或运算特点 语法：表达式1||表达式2 如果第一个表达式为真，则返回表达式1 如果第一个表达式为假，则返回表达式2 */ console.log(123 && 456);// 456 console.log(0 && 456);// 0 console.log(0 && 1 + 2 && 456);// 0 console.log(123 || 456);// 123 console.log(0 || 456);// 456 </script>
4.4运算符优先级
五：流程控制
5.1if语句
-
条件表达式为真，则继续执行大括号里的代码，为假则不行
if(3<5) { alert('123'); }
5.2if else语句（多选一，分支较少）
-
如果条件表达式1满足就执行，语句1执行完毕后，退出整个if分支语句
-
如果条件表达式1不满足，则判断条件表达式2是否满足，以此类推
-
如果所有条件表达式都不满足，则执行else中的语句
//结构 if(条件表达式1){ //语句1 } else if(条件表达式2){ //语句2 } else if(条件表达式3){ //语句3 } else{ //最后的语句 }
5.3三元表达式
-
如果条件表达式结果为真，则返回表达式1的值；如果结果为假，则返回表达式2的值
条件表达式 ？ 表达式 1 ： 表达式 2
5.4switch语句（分支较多的情况）
-
如果case都没有匹配上，switch中如果有default语句则执行default，没有则不执行
-
switch后面的括号和case后的值事全等形式
-
switch后面的括号不能是浮点数
-
switch case语句常用于case为确定值的情况；if else常用于范围判断（大于，等于某个范围）
switch(表达式){ case value1:执行语句1;break; case value2:执行语句1;break; case value3:执行语句1;break; case value4:执行语句1;break; default:执行最后的语句; }
5.5while循环
<script>
// while循环案例
// 1. 打印人的一生，从1岁到100岁
var i = 1;
while (i <= 100) {
console.log(`这个人今年${i}岁了`);
i++;
}
// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
while (j <= 100) {
sum += j;
j++
}
console.log(sum);
// 3. 弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
while (true){
let str=promt('你爱我吗')
if (str==='爱')
break
}
</script>
break 与 continue区别
-
break用于立刻跳出整个循环
for (var i = 1; i <= 5; i++) { if (i == 3) { break; } console.log('我正在吃第' + i + '个包子'); } //打印结果： 我正在吃第1个包子 我正在吃第2个包子 -
continue用于立刻跳出本次循环，继续下一次循环（本次循环continue后的代码也不被执行）
<script> for (let i=1;i<=5;i++){ if (i===3){ continue } console.log(`我正在吃第${i}个包子`) } //打印结果： 我正在吃第1个包子； 我正在吃第2个包子； 我正在吃第4个包子； 我正在吃第5个包子； </script>
for循环
-
for循环外层循环一次，内层for循环全部执行
<script> //打印 5×5 阵列星星 var str = ''; //用于链接星星 for (var j = 1; j <= 5; j++) { //控制行数 for (var k = 1; k <= 5; k++) { str = str + '★'; } str = str + '\n'; } console.log(str); </script>
六：数组
6.1数组创建
//创建数组 两种方式
//1、利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);
//2 利用new Array()
var arr1 = new Array();
var arr2 = new Array(2);//表示数组长度为2 里面有两个空的数组元素
var arr3 = new Array(3, 3);//等价于 [3，3] 表示里面有两个数组元素，一个是3一个是3
console.log(arr3);
- 数组通过索引来访问，设置，修改对应的数组元素，数组下标从0开始，通过“数组名[索引]”的形式来获取数组元素
6.2新增数组元素
var arr1 = ['red', 'green', 'blue'];
arr1[3] = 'pink';
console.log(arr1);
arr1[4] = 'hotpink';
console.log(arr1);
arr1[0] = 'yellow'; // 这里是替换原来的数组元素
console.log(arr1);
arr1 = '一个数组';
console.log(arr1); // 不要直接给 数组名赋值 否则里面的数组元素都没有了
6.3数组筛选
-
声明一个新的数组用于存放新数据newArr
-
遍历原来的旧数组，找出符合条件的元素
-
依次追加给新数组newArr
<script> let arr = [2,0,6,1,77,9,54,3,78,7] let newArr =[] for (let i=0;i<arr.length;i++){ if (arr[i]>=10){ newArr.push(arr[i]) } } console.log(newArr) </script>
七：函数
-
函数不调用，函数不执行
-
调用函数--函数名（）；
-
声明函数用function关键字
<script> // 利用函数计算1-100之间的累加和 // 1. 声明函数 function getSum() { var sum = 0; for (var i = 1; i <= 100; i++) { sum += i; } console.log(sum); } // 2. 调用函数 getSum(); getSum(); </script>
7.1形参与实参
-
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参
-
形参：形式参数，函数定义的时候传递，当前并不知道是什么
-
实参：实际参数，函数调用时传递的参数，实参是传给形参的
-
如果实参的个数和形参的个数一致，则正常输出结果
-
如果实参的个数多余形参的个数会取到形参的个数
-
如果实参的个数小于形参的个数，假设形参（num1,num2）给了num1值没有给num2，但是函数的形参是一个局部变量，并且是一个没有接收值的underfined所以结果是：定义了，未赋值，结果为NaN
-
在函数内部，未声明直接赋值的变量也是全局变量
// 1. 利用函数求任意两个数的和 function getSum(num1, num2) { console.log(num1 + num2); } getSum(1, 3); getSum(3, 8); // 2. 利用函数求任意两个数之间的和 function getSums(start, end) { var sum = 0; for (var i = start; i <= end; i++) { sum += i; } console.log(sum); } getSums(1, 100); getSums(1, 10); // 3. 注意点 // (1) 多个参数之间用逗号隔开 // (2) 形参可以看做是不用声明的变量
7.2return
-
只要函数遇到return就把后面的结果返回给函数的调用者 后面的代码不会执行。 返回函数名（）=return后面的结果
-
只能返回一个值，如果需要返回多个值，则用数组return[num1.num2……]，或者用对象
-
如果函数里面有return则返回的是return后面的值，如果函数没有return，则返回的是underfined
-
return不仅能退出循环，还能返回return语句后面的值
// 1. return 终止函数 function getSum(num1, num2) { return num1 + num2; // return 后面的代码不会被执行 alert('我是不会被执行的哦！') } console.log(getSum(1, 2)); // 2. return 只能返回一个值 function fn(num1, num2) { return num1, num2; // 返回的结果是最后一个值 } console.log(fn(1, 2)); // 3. 我们求任意两个数的 加减乘数结果 function getResult(num1, num2) { return [num1 + num2, num1 - num2, num1 * num2, num1 / num2]; } var re = getResult(1, 2); // 返回的是一个数组 console.log(re); // 4. 我们的函数如果有return 则返回的是 return 后面的值，如果函数没有 return 则返回undefined function fun1() { return 666; } console.log(fun1()); // 返回 666 function fun2() { } console.log(fun2()); // 函数返回的结果是 undefined
7.3匿名函数
// 1. 利用函数关键字自定义函数(命名函数)
function fn() {
}
fn();
// 2. 函数表达式(匿名函数)
var 变量名 = function() {};
- 具名函数可以在声明函数前或后使用，匿名函数必须先声明后使用
7.4变量作用域
全局变量
-
在函数外部定义的变量
-
在代码任何位置都可以使用
-
在全局作用域下var/let声明的变量是全局变量
-
如果在函数内部，没有声明直接赋值的变量也属于全局变量
var num = 10; // num就是一个全局变量 console.log(num); function fn() { console.log(num); } fn(); // console.log(aru);
局部变量
-
在函数内部定义var/let的变量
-
局部变量只能在该函数内部使用
-
函数的形参就是局部变量
function fun(aru) { var num1 = 10; // num1就是局部变量 只能在函数内部使用 num2 = 20; } fun();
八：对象
8.1创建对象的三种方式
-
利用字面量创建对象
let star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); } }; -
利用new Object创建对象
var andy = new Object(); andy.name = 'pink'; andy.age = 18; andy.sex = '男'; andy.sayHi = function(){ alert('大家好啊~'); } -
利用构造函数创建对象
function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sayHi = function() { alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex); } }
8.2对象的调用
-
对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”
-
对象里面属性的另一种调用方式 : 对象[‘属性名’] ，注意方括号里面的属性必须加引号
-
对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号
console.log(star.name) // 调用名字属性 console.log(star['name']) // 调用名字属性 star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号
8.3遍历对象属性
for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}
8.4Math对象（不是构造函数，它具有数学函数的属性和方法）
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
<script>
// 1.绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs('pink')); // NaN
// 2.三个取整方法
// (1) Math.floor() 地板 向下取整 往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil() ceil 天花板 向上取整 往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 这个结果是 -1
</script>
随机数方法random（）
-
随机数方法 random() ： 返回的是一个浮点数 取值是[0,1) 0 =< x < 1 ，这个方法不跟参数
<script> // // 得到一个两数之间的随机整数 不包括两个数在内 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值 } console.log(getRandomInt(10, 20)); // 得到一个两数之间的随机整数 包括两个数在内 function getRandomIntInclusive(min, max) { // min = Math.ceil(min); // max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 } console.log(getRandomIntInclusive(20, 30)); </script>
8.5日期对象（是构造函数，需要实例化后才能使用）
-
使用第一步：获取当前时间必须实例化
var now = new Date(); console.log(now); -
第二步：Date()构造函数参数：如果括号里有时间，就返回参数里面的时间，new Date('2023-12-4')或new Date('2023/12/4')；如果括号里不写参数就返回当前时间
日期格式化
<script>
// 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2023
console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1
console.log(date.getDate()); // 返回的是 几号
console.log(date.getDay()); // 1 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
// 我们写一个 2023年 12月 4日 星期一
var year = date.getFullYear();
var month = date.getMonth() + 1;//补回上面的坑
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
// 格式化日期 时分秒
var date = new Date();
console.log(date.getHours()); // 时
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒
// 要求封装一个函数返回当前的时分秒 格式 08:08:08
function getTimer() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTimer());
</script>
8.6数组对象
增删数组元素
<script>
// 添加删除数组元素方法
// 1. push() 在我们数组的末尾 添加一个或者多个数组元素 push 推
var arr = [1, 2, 3];
// arr.push(4, 'pink');
console.log(arr.push(4, 'pink'));
console.log(arr);
// (1) push 是可以给数组追加新的元素
// (2) push() 参数直接写 数组元素就可以了
// (3) push完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
console.log(arr.unshift('red', 'purple'));
console.log(arr);
// (1) unshift是可以给数组前面追加新的元素
// (2) unshift() 参数直接写 数组元素就可以了
// (3) unshift完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 3. pop() 它可以删除数组的最后一个元素
console.log(arr.pop());
console.log(arr);
// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
// (2) pop() 没有参数
// (3) pop完毕之后，返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
// 4. shift() 它可以删除数组的第一个元素
console.log(arr.shift());
console.log(arr);
// (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift完毕之后，返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
</script>
数组排序
<script>
// 数组排序
// 1. 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
// 2. 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
</script>
数组索引
<script>
// 返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找
// 它只返回第一个满足条件的索引号
// 它如果在该数组里面找不到元素，则返回的是 -1
// var arr = ['red', 'green', 'blue', 'pink', 'blue'];
var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'));
// 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue')); // 4
</script>
