目录
一、JS书写位置
1.行内式
<input type="button" value="点我试试" onclick="alert('Hello World')"/>- 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如: onclick
- 注意单双引号的使用：在HTML中我们推荐使用双引号， JS中我们推荐使用单引号
- 可读性差，在html中编写JS大量代码时，不方便阅读；
- 引号易错，引号多层嵌套匹配时，非常容易弄混；
- 特殊情况下使用
2.内嵌式
<script>
alert('Hello World!');
</script>- 通常在<head>标签内书写<script>
- 可以将多行JS代码写到<script>标签中
- 内嵌JS是学习时常用的方式
3.外部式
<script src="my.js"></script>- 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
- 引用外部JS文件的script标签中间不可以写代码
- 适合于JS代码量比较大的情况
二、基本语法
1.注释
（1）单行注释：//
（2）多行注释：/**/
2.输入输出语句
（1）prompt弹出输入框
prompt('请输入您的年龄');（2）alert弹出警示框
alert('欢迎使用该网站');（3）console.log控制台打印输出信息
console.log('我是程序员才能看到的');三、变量
1.变量的声明
var age; //声明一个名称为age的variable变量
var a = b = c = 9; //相当于var a = 9; b = 9; c = 9;//后两个是全局变量- JS的变量数据类型是程序在运行过程中，根据等号右边的值来确定的；
- JS是动态语言，变量的数据类型是可以变化的；
- 不声明变量直接赋值可以使用，该变量为全局变量。
2.简单数据类型：
（1）Number（默认值为0）
- 数字型，包含整型值和浮点型值，如21、0.21
- 八进制数字以0开头，十六进制数字以0x开头
- 最大值：Number.MAX_VALUE
- 最小值：Number.MIN_VALUE
- 无穷大：Infinity
- 无穷小：-Infinity
- 非数值：NaN（not a number）
- 判断函数isNaN( );
（2）Boolean（默认值为false）
布尔值类型，如true、false, 等价于1和0
（3）String（默认值为""）
- 字符串类型（带引号），如“张三”
- 引号嵌套：外双内单或外单内双
- 转义符：
转义符 解释说明 \n 换行符 \\ 斜杠\ \' 单引号 \" 双引号 \t tab缩进 \b 空格 - 检测获取字符串的长度length
var str = "my name"; alert(str.length); - 字符串的拼接+
var age=18; console.log(age+'岁'); //只要有字符串和其他类型相拼接，最终的结果是字符串类型
（4）Undefined（默认值为undefined）
var a; //声明了变量a但是没有给值，此时a = undefined（5）Null（默认值为null）
var a= null; //声明了变量a为空值，typeof返回的是一个空的对象object3.typeof获取变量数据类型
var num = 18;
console.log(typeof num); //返回类型number4.数据类型转换
（1）转换为字符串
- 利用+拼接字符串的方法实现转换效果（隐式转换，常用）
- toString()
var num = 10; var str = num.toString(); - String()强制转换
var num = 10; String(num);
（2）转换为数字型
- parselnt(string)函数
- parseFloat(string)函数
- Number()强制转换
- 利用算数运算- * /隐式转换
var num = ‘123’ – ‘120’; //3
（3）转换为布尔型
Boolean(v);
/*①代表空、否定的值会被转换为false；
②其余值都会被转换为true。*/四、运算符
1.算数运算符：+ - * / %
2.递增符：++ --（前置/后置）
3.比较运算符
==：等于（默认转换数据类型，会把字符串型的数据转换为数字型，18==’18’）
===：全等于（包括数值和类型）
!==：全等于（包括数值和类型）
4.逻辑运算符
&&：与
||：或
!：非
5.赋值运算符：= += -= *= /= %=
6.运算符优先级
| 优先级 | 运算符 | 顺序 |
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ -- ! |
| 3 | 算数运算符 | 先* / % 后+ - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先 && 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
五、流程控制与循环（同C）
1.if语句
2.三元表达式
3.switch语句
4.for循环
5.while循环
6.do-while循环
7.continue关键字
8.break关键字
六、数组
1.利用new创建数组
var arr1 = new Array(); //创建一个新的空数组
var arr2 = new Array(2); //长度为2的数组里面有2个空的数组元素
var arr3 = new Array(2, 3); //等价于[2,3]2.利用数组字面量创建数组
var arr = []; //创建一个空数组
var arr = [ '1', 2, true ]; //创建一个带初始值的数组3.访问数组元素
var arr = [ '1',2,true ];
console.log(arr[1]);4.“数组名.length”访问数组元素的数量
5.新增数组元素
（1）修改length长度
var arr = [ '1',2,true ];
arr.length = 5; //新增两个空元素（2）修改索引号（追加）
var arr = [ '1',2,true ];
arr[3] = false;七、函数
1.声明与调用
（1）利用函数关键字自定义函数（命名函数）
function fn() { } //fn是函数名
fn(); //调用（2）函数表达式（匿名函数）
var fn = function() { } //fn是变量名2.关键字return（返回一个值并中止函数）
3.函数内置属性arguments
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点:
- 具有length属性
- 按索引方式储存数据
- 不具有数组的push, pop等方法
function fn() {
console.log(arguments); //里面存储了所有传递过来的实参
}
fn(1,2,3);八、预解析
- 我们JS引擎运行JS分为两步:预解析、代码执行
- 预解析：JS引擎会把JS里面所有的var还有function提升到当前作用域的最前面
- 代码执行：按照代码书写的顺序从上往下执行
1.变量预解析（变量提升）
/*把所有的变量声明提升到当前的作用域最前面，不提升赋值操作*/
console.log(num); //undefined
var num = 10;
fun(); //报错
var fun = function() { //注意：fun是一个变量
console.log(22);
}2.函数预解析（函数提升）
/*把所有的函数声明提升到当前作用域的最前面，不调用函数*/
fn(); //可以执行
function fn() {
console.log(22);
}九、对象
1.创建对象
（1）利用字面量创建对象
var obj = {
uname: ‘张三’, //键值对格式——属性名：属性值
age: 18;
sex:'男',
sayHi: function() { //方法，相当于一个匿名函数
console.log(‘hi~’);
}
}
/*调用对象属性：对象名.属性名 或 对象名['属性名']*/（2）利用new Object创建对象
var obj = new Object(); //创建了一个空的对象
obj.uname = ‘张三’;
obj.age = ‘18’;
obj.sex = ‘男’;
obj.sayHi = function() {
console.log(‘hi~’);
}（3）利用构造函数创造对象
function Star(uname, age, sex) { //构造函数名字首字母要大写
this.uname = uname; //属性和方法前必须添加this
this.age = age;
this.sex = sex;
this.sing = function (sang) {
console.log('sang');
}
}
ldh.sing('冰雨');
var ldh = new Star('刘德华',18,'男'); //调用构造函数必须使用new（4）new关键字执行过程
- new构造函数可以在内存中创建一个空的对象
- this就会指向刚才创建的空对象
- 执行构造函数里面的代码，给这个空对象添加属性和方法
- 返回这个对象（所以构造函数不需要return）
2.for in遍历对象（重要）
var obj = new Object();
for (var k in obj) { //for(变量 in 对象)
console.log(k); //得到属性名
console.log(obj[k]); //得到属性值
}3.内置对象
（1）Math对象
- Math.abs( )：绝对值
- Math.PI( )：圆周率
- Math.floor( )：向下取整
- Math.ceil( )：向上取整
- Math.round( )：四舍五入，就近取整（3.5结果是4，-3.5结果是-3）
- Math.max( )/ Math.min( )：最大值/最小值
- Math.random( )：返回一个随机的小数（0≤x＜1）
（2）Date对象
- Date( )日期对象是一个构造函数，必须使用new来调用创建
var date = new Date(); - 使用Date，如果没有参数，返回当前系统的当前时间
- 参数常用的写法：2019,10,01（不推荐）或者 '2019-10-01 8:8:8'
- 获取日期指定的部分：
方法名
说明
代码
getFullYear()
获取当年
日期对象.方法()
getMonth()
获取当月（0-11）
getDate()
获取当天日期
getDay()
获取星期几（周日0到6）
getHours()
获取当前小时
getMinutes()
获取当前分钟
getSeconds()
获取当前秒钟
- 获得Date总的毫秒数
①通过valueOf( ) 或 getTime( )
var date = new Date( );
/*返回现在时间距离1970.1.1总的毫秒数*/
console.log(date.valueOf( ));
console.log(date.getTime( ));②简单写法（最常用的写法）
var date = + new Date(); //+ new Date()返回的就是总的毫秒数③H5新增的 获得总的毫秒数
var date = new Date();
console.log(Date.now());④项目：倒计时
<script>
/*倒计时效果
1.核心算法:输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的。
2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
3.把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)
转换公式如下：
d = parseInt(总秒数/ 60/60 /24);//计算天数
h = parseInt(总秒数/ 60/60 %24);//计算小时
m = parseInt(总秒数/60 %60 );//计算分数
s = parseInt(总秒数%60); //计算当前秒数
*/
function countDown(time) {
var nowTime = +new Date(); //返回的是当前时间总的毫秒數
var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //times是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24);//天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);//时
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);//分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); //秒
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-4-29 10:00:00'));
</script>
（3）数组对象
- 创建：见上方
- 检测是否为数组：instanceof或isArray( )
var arr =[]; var obj = {}; /*通过运算符instanceof检测*/ console.log(arr instanceof Array); //返回true console.log(obj instanceof Array); //返回false /*Array.isArray(参数)检测，这是H5新增的方法，ie9以上版本支持*/ console.log(Array.isArray(arr)); //返回true console.log(Array.isArray(obj)); //返回false - 添加数组元素
方法名
说明
返回值
push(参数1...)
末尾添加一个或多个元素
新的
长度
unshift(参数1…)
向数组的开头添加一个或更多元素
pop()
删除数组最后一个元素，把数组长度减1
删除元
素的值
shift()
删除数组的第一个元素，数组长度减1
- 翻转数组
var arr = [3,5,4]; arr.reverse(); - 数组排序
var arr1 = [3, 5, 4]; arr1.sort(); //适用于一位数 var arr2 = [13, 4, 77, 1, 7]; arr2.sort(function (a, b) { return a - b; //升序的顺序排列 //return b - a; //降序的顺序排列 }) - 数组索引方法
方法名
说明
返回值 indexOf()
在数组中查找给定元素的第一个索引
如果存在返回索引号，
如果不存在则返回-1
lastIndexOf()
在数组中的最后一个的索引
//indexOf(数组元素)作用 就是返回该数组元素的索引号 //它只返回第一个满足条件的索引号 //它如果在该数组里面找不到元素，则返回的是-1 var arr = ['red', 'green', 'blue', 'pink', 'blue']; console.log(arr.indexOf('blue'));//返回2 console.log(arr.lastIndexOf('blue'));//返回4 - 案例：数组去重
function unique(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { //遍历旧数组，然后拿着旧数组元素去查询新数组 if (newArr.indexOf(arr[i]) == -1) //如果该元素在新数组里面没有出现过，我们就添加 newArr.push(arr[i]); } return newArr; } - 将数组转换为字符串
// 1. toString() 将我们的数组转换为字符串 var arr = [1, 2, 3]; console.log(arr.toString()); // 1,2,3 // 2. join(分隔符) var arr1 = ['green', 'blue', 'pink']; console.log(arr1.join()); //green,blue,pink console.log(arr1.join('-')); //green-blue-pink console.log(arr1.join('&')); //green&blue&pink - 数组的连接、截取和删除
方法名
说明
返回值
concat()
连接两个或多个数组，不影响原数组
返回一个新的数组
slice()
数组截取slice(begin, end)
返回被截取项目的新数组
splice()
数组删除，会影响原数组
splice(第几个开始，要删除个数)
返回被删除项目的新数组
（4）字符串对象
- 字符串的不可变：指的是字符串里面的值不可变。虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一一个内存空间。
- 根据字符串返回位置
方法名
说明
indexOf(要查找的字符，开始的位置)
返回指定内容在元字符串中的位置，如果找不到就返回-1，开始的位置是index索引号
lastlndexOf()
从后往前找，只找第一个匹配的
- 根据位置返回字符
方法名
说明
使用
charAt(index)
返回指定位置的字符(index字符串的索引号)
str.charAt(0)
charCodeAt(index)
获取指定位置处字符的ASCII码(index索引号)
str.charCodeAt(0)
str[index]
获取指定位置处字符
HTML5，IE8+支持
和charAt()等效
- 字符串的连接和截取
方法名
说明
concat(str1,str2,str3...)
连接两个或多个字符串，等效于+（+更常用）
substr(start,length)
从start位置开始(索引号)，截取length个字符
slice(start, end)
从start位置开始，截取到end位置，end取不到 (他们俩都是索引号)
substring(start, end)
从start位置开始，截取到end位置，end取不到 基本和slice相同，但是不接受负值
- 替换字符replace
//替换字符replace('被替换的字符'，'替换为的字符') //它只会替换第一个字符 var str = 'andyandy'; console.log(str.replace('a', 'b'));//bndyandy //有一个字符串'abcoefoxyozzopp' 要求把里面所有的0替换为* var str1 = 'abcoefoxyozzopp'; while (str1.indexOf('o') !== -1) { str1 = str1.replace('o', '*'); } console.log(str1);//abc*ef*xy*zz*pp - 字符转换为数组
//字符转换为数组 split('分隔符') var str1 = 'red,pink,blue'; console.log(str1.split(',')); var str2 = 'red&pink&blue'; console.log(str2.split('&')); - 大小写转换
toUpperCase(str); //转换大写 toLowerCase(str); //转换小写 - 案例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串操作案例</title> <script> /* 给定一个字符串,如: "abasdffgghjkgfdssss3444343” , 问题如下： 1、字符串的长度 2、取出指定位置的字符,如: 0,3,5,9等 3、查找指定字符是否在以 上字符串中存在,如:i,c,b等 4、替换指定的字符,如: g替换为22,ss替换为b等操作方法 5、截取指定开始位置到结束位置的字符串,如:取得1 -5的字符串 6、找出以上字符串中出现次数最多的字符和出现的次数 */ var str = 'abaasdffggghhjjkkgfddsssss3444343'; //1、字符串的长度 console.log(str.length); //2、取出指定位置的字符,如: 0,3,5,9等 console.log(str.charAt(0) + '\b' + str.charAt(3) + '\b' + str.charAt(5) + '\b' + str.charAt(9)); //3、查找指定字符是否在以上字符串中存在,如:i,c,b等 function exitLetter(str, letter) { if (str.indexOf(letter) !== -1) console.log(letter + '存在'); else console.log(letter + '不存在'); } exitLetter(str, 'i'); exitLetter(str, 'c'); exitLetter(str, 'b'); //4、替换指定的字符,如: g替换为22,ss替换为b等操作方法 console.log(str.replace('g', '22')); console.log(str.replace('ss', 'b')); //5、截取指定开始位置到结束位置的字符串,如:取得1-5的字符串 console.log(str.substr(1, 5)); //6、找出以上字符串中出现次数最多的字符和出现的次数 var o = {}; for (var i = 0; i < str.length; i++) { var chars = str.charAt(i); //chars是字符串的每一个字符 if (o[chars]) { //o[chars]得到的是属性值 o[chars]++; } else { o[chars] = 1; } } var max = 0; var ch = ''; for (var k in o) { //遍历对象 //k得到是属性名 //o[k] 得到的是属性值 if (o[k] > max) { max = o[k]; ch = k; } } console.log('出现最多的字符是' + ch + ',次数为' + max); </script> </head> <body> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
