文章目录
三、JavaScript初级
（一）预解析
JavaScript代码是由浏览器中的JavaScript解析器来执行的，JavaScript解析器在运行JavaScript代码的时候分为两步：
预解析 和 代码执行
1、预解析：（面试常问）
js引擎会吧js里面所有的 var 还有 function 提升到当前作用域的最前面
（二）js对象
1、对象是由***属性***和***方法***组成的
2、创建对象的三种方式
2.1 利用字面量创建对象{}
var obj = { uname:'张三丰'， age：18； sex：'男'， sayHi:function(){ console.log('hello'); } }2.1.1 里面的属性和方法采用键值对的方式
2.1.2 多个属性和方法中间用逗号隔开
2.1.3 方法冒号后面跟的是一个匿名函数
2.2 new object 创建对象
var obj = new Object(); obj.uname = '张三丰'; obj.age = 18; obj.sex = '男';
2.3 利用构造函数来创建对象
2.3.1 可以一次创建多个对象
2.3.2 属性相同的部分给它抽取出来，封装到一个函数里面
//构造函数的语法格式 function Star(uname,age,sex){ //构造函数首字母要大写 this.name = uname; this.age = age; this.sex = sex; this.sing = function(sang){ console.log(sang); } } var ldh = new Star('刘德华',18,'男'); console.log(ldh.name); console.log(ldh['age']); var zxy = new Star('张学友',19,'男'); zxy.sing('李香兰');2.3.3 构造函数不需要return就能个返回结果
2.3.4 调用构造函数必须使用 new
2.3.5 我们只要new Star（）调用函数就创建一个对象
2.3.6 构造函数类似于java语言中的“类（class）”。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fuIaor80-1636971142373)(C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20211109202917767.png)]
3、使用对象
//第一种方式 obj.uname obj.age obj.sex obj.sayHi() //第二种方式 obj['uname'] obj['age']案例：
var dog = { name = '可可', type = '阿拉斯加犬', age = 5, color = red, sayBark:function(){ console.log('汪汪汪'); }, showFilm:function(){ console.log('我会演电影'); } } console.log(dog.name);
4、遍历对象
for in 遍历对象
function Star(uname,age,sex){ //构造函数首字母要大写
this.name = uname;
this.age = age;
this.sex = sex;
}
new Star('刘德华',18,'男');
for(var k in Star){
console.log(k); //得到属性名
console.log(Star[k]); //得到属性值
}
5、小结
(1)对象可以让代码结构更清晰
(2)对象复杂数据类型object
(3)本质：对象就是一组无序和相关属性和方法的集合
(4)构造函数泛指某一大类，比如苹果，不管是红色还是绿色，都统称为苹果
(5)对象实例特指一个事务
(6)for … in 语句用于对象的属性进行循环操作等
（三）js内置对象
JavaScript中对象可以分为三种：自定义对象、内置对象、浏览器对象
前两种属于ECMAScript；第三个浏览器对象属于js独有的
内置对象就是指JS自带的一些对象，这些对象供开发者使用，并且提供了一些常用的属性和方法。
常用的内置对象：Math、Date、Array、String等
1、Math对象
1.1 不是一个构造函数，所以不需要new来使用，而是直接使用里面的属性和方法即可。
//使用Math对象来完成简单的运算操作 console.log(Math.PI); console.log(Math.max(1,77,6,77,33434,54325,4235)); console.log(Math.max(-1,-42,-423)); console.log(Math.max(1,3,'hello')); //NaN console.log(Math.mai()); //-Infinity
1.2 案例：封装自己的数学对象
//案例:利用对象封装自己的数学对象，里面有PI、最大值、最小值 var myMath = { PI = 3.141592653, max: function () { //不确定用户传多少个参数过来，用arguments var max = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; }, min: function () { var min = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (arguments[i] < min) { min = arguments[i]; } } return min; } } console.log(myMath.PI); console.log(myMath.max(1, 3, 5, 6, 342));
1.3 常用的Math成员：
Math.PI() //圆周率 Math.floor() //向下取整 Math.ceil() //向上取整 Math.round() //四舍五入（就近区取整） 注意：-3.5 结果是-3 Math.abs() //绝对值 Math.max() //最大值 Math.min() //最小值
1.4 Math.random()
公式: (Math.random() * (max - min + 1) + min)
function getRandom(min, max) { return Math.floor(Math.random() * (max -min + 1)) + min; } console.log(getRandom(1,10)); //随机点名 var arr = ['张三','李四','王五','月月航']; console.log(arr[getRandom(0,arr.length - 1)]);
1.5 案例： 猜数字
function guess() { var n = parseInt(Math.random() * 101) + 0; //公式：Math.random() * (max - min + 1) + min while (true) { var a = prompt("猜猜这个数是几,输入t可退出"); if (a > n) { alert("大了一点，距离目标已经接近了，加油！"); } else if (a < n) { alert("小了一点，加油加油！"); } else if (a == n) { alert("猜对了，真棒！") break; } else { if (a != ('t')) { alert("请输入正确的格式！！！") } else { break; } } } }
2、Date日期对象的使用
2.1 创建Date实例用来处理日期和时间。Date对象基于1970年1月1日（世界标准时间）起的毫秒数。
2.2 Date()方法的使用
2.2.1 获取当前时间必须实例化
var now = new Date(); console.log(now);2.2.2 里面的参数
如果里面有时间，就返回参数里面的时间
2.2.3 常用方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QskUr8Ny-1636971142374)(C:\Users\86176\AppData\Roaming\Typora\typora-user-images\image-20211112105506733.png)]
//案例，今天的日期 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日','星期一', '星期二','星期三','星期四','星期五','星期六']; var day = date.getDate(); console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);//获取当前的时间 function nowTime(){ 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 +':'; }
2.3 Date对象里面的 valueOf()方法 和 getTime() 方法
用来获取Date总的毫秒数(时间戳) ，永远不会重复！
var date = new Date(); console.log(date.valueOf()); console.loh(date.getTime()); //简单写法（最常用的写法） var data1 = +new Date(); //+new Date() 返回的就是总的毫秒数 console.log(data1); //H5新增的 获得总的毫秒数 console.log(Date.now());
2.4 倒计时案例
function countDown(time) {
var nowTime = +new Date();
var inputTime = +new Date(time);
var times = (inputTime - nowTime) / 1000; //得到秒数
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-1-1 00:00:00'));
var date = new Date();
console.log(date);
3、Array数组对象
3.1 instanceof 运算符 它可以用来检测是否为数组
//判断是不是数组 var arr = []; var obj = {}; console.log(arr instanceof Array); console.log(obj instanceof Array); //第二种方法：Array.isArray(参数); 这是H5新增的方法，只有ie9以上的版本支持 console.log(Array.isArray(arr)); console.log(Array.isArray(obj));
3.2 添加或删除数组元素
3.2.1 push()方法 原数组末尾添加一个或多个元素 返回一个新数组的长度
3.2.2 pop()方法 删除数组最后一个元素，把数组长度减一 返回它删除元素的值
3.2.3 unshift() 向原数组的开头添加一个或更多元素 返回一个新数组的长度
3.2.3 shift() 删除数组的第一个元素 返回的是第一个元素的值
案例： 筛选数组
var arr = [1200,1566,5225,45646,561,11654,6456]; var newArr = []; for(var i = 0; i < arr.length;i++){ if(arr[i] < 2000){ // 老方法 // newArr[newArr.length] = arr[i]; newArr.push(arr[i]); //新方法，更好理解 } }
3.3 数组排序
3.3.1 reverse()方法，翻转数组
3.3.2 sort() 数组排序（冒泡算法） : 只比较数字的第一位，两位数就没法排序，需要传一个函数进去。
var arr1 = [13,455,88,66,42,2,3,64]; //这个sort里面穿的函数的写法比较固定，记住就行 arr1.sort(function(a,b){ return a - b; //升序的顺序排列，如果要降序，就返回b - a; });3.3.3 indexOf() 方法 返回数组元素索引号，从前往后找 没有就返回-1
lastIndexOf() 从后往前找，也是返回数组元素索引号
案例： 数组去重（重点案例）
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; } var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'b', 's', 'b', 'q']; console.log(unique(arr));
- 4数组转换为字符串
toString() 转换为字符串，用逗号隔开
join() 可以选择分隔符
var arr = [1,2,3]; console.log(arr.toString()); console.log(arr.join('&'));3.4.1 slice(begin，end) 数组截取 返回被截取项目的新数组
4、字符串对象
4.1 基本包装类型
4.2 字符串类型不可变性
字符串所有的方法都不会修改字符串本省，操作完成会返回一个新的字符串。
4.3 常用方法
4.3.1 indexOf() 返回字符的位置
案例1： 查找字符串某个字符出现的位置
var str = 'jkoajofoldasoojkofalsofa'; var index = str.indexOf('o'); while(index !== -1){ console.log(index); //第二个参数指定查找到位置，从第一个查找完后往后查找 str.indexOf('o',index + 1); }案例2： 根据位置返回字符
str.charAt(0) 根据位置返回字符
str.charCode(0) 返回相应索引号的字符ASCII值 目的：判断用户按了哪个按键
str[index] 获取指定位置处的字符 H5新增的
//案例： 思路 把字符串分解成对象的属性，判断该对象是否有无该属性，有就加一，没有就赋值为1 var str = 'jkoajofoldasoojkofalsofa'; var o = {}; for(var i = 0; i < str.length;i++){ var chars = str.charAt(i); if(o[chars]){ //o[chars]得到的是属性值 o[chars]++; }else{ o[chars] = 1; } } console.log(o); //遍历对象 var max = 0; var ch = ''; for(var k in o){ //k得到的是属性名 //o[k]的到的是属性值 max = o[k]; ch = k; } console.log(max); console.log('最多的字符是：' + ch);
4.3.2 replace(‘被替换的字符’，’替换为的字符‘) 它只会替换第一个字符
split(‘分隔符’) 字符转换为数组
5、作业小结
var str = 'hkjafhklahfkashfla';
//1.求字符串的长度
console.log(str.length);
//2.取出2,5,6位置的字符
/* var str2 = str.charAt(2);
var str3 = str.charAt(5);
var str4 = str.charAt(6);
console.log(str2); */
console.log(str[2], str[5], str[6]);
//3.查找h，j，o字符是否在字符串中存在
var cha = ['h', 'j', 'o'];
var index = ' ';
for (var i = 0; i < cha.length; i++) {
index = str.indexOf(cha[i]);
while (index !== -1) {
console.log(cha[i] + '出现在第：' + index + '位置');
index = str.indexOf(cha[i], index + 1);
}
if (index == -1)
console.log(cha[i] + '没有出现');
}
//4.替换指定的字符，把j换成22
var repStr = str.replace('j','22');
console.log(repStr);
（四）js中简单数据类型和复杂数据类型
1、简单数据类型
简单类型又叫基本数据类型或者值类型，在存储变量中存储的是值本身
2、复杂数据类型
复杂数据类型又叫引用类型，在存储变量中存储的仅仅是地址。
通过new关键字创建对象
3、堆和栈
3.1 堆
存储复杂类型，一般有程序员分配释放，如不释放，由垃圾回收机制回收。
3.2 栈
console.log(cha[i] + '出现在第：' + index + '位置');
index = str.indexOf(cha[i], index + 1);
}
if (index == -1)
console.log(cha[i] + '没有出现');
}
//4.替换指定的字符，把j换成22
var repStr = str.replace('j','22');
console.log(repStr);
（四）js中简单数据类型和复杂数据类型
1、简单数据类型
简单类型又叫基本数据类型或者值类型，在存储变量中存储的是值本身
2、复杂数据类型
复杂数据类型又叫引用类型，在存储变量中存储的仅仅是地址。
通过new关键字创建对象
3、堆和栈
3.1 堆
存储复杂类型，一般有程序员分配释放，如不释放，由垃圾回收机制回收。
3.2 栈
由操作系统自动分配释放存放函数的参数值，局部变量的值等。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
