in 关键字
- 作用：
1.检测属性，语法“属性” in 对象，返回布尔值类型
2.遍历（对象）
var obj = {name:'zs'};
if('name' in obj){
console.log('obj对象中存在属性 name');
}
for(var k in obj){
//遍历对象在这里需要使用[]语法，不能使用点语法
console.log(k,obj[k]);
}
补充数组的 for in 遍历
在数组中，索引是 key ，数组的元素是 value；
var arr = [1,2,3,4,5,6];
for(var k in arr){
console.log(k,arr[k]);
}
//2是索引
console.log(2 in obj);
console.log(6 in obj); //false
delete 关键字
- 作用：
1.删除对象中的属性
2.删除没有用 var 关键字声明的全局变量
注意
1.返回值：布尔类型的值（我们可以通过该值判断是否删除成功）
2.使用var 关键字声明的变量无法被删除
3.删除对象中不存在的属性没有任何变化
4.不能删除 window 下面的全局变量（使用 var 声明）但是可以删除直接定义在 window 上面的属性
var dog = {
name:"阿黄",
color:"红色"
}
console.log(delete dog.color);
console.log(dog.color); //undefined
var a = 10;
b = 20; //没有使用var关键字声明的变量默认会成为全局变量,全局变量默认都会成为window的属性
console.log(b);
delete b;
//console.log(b);
console.log(a);
console.log(delete a); //删除不成功 false
console.log(a);
console.log(delete dog.age); //返回的是成功还是失败? 成功
//window
console.log(window.a);
delete window.a;
console.log(window.a);
window.demo = "demo";
console.log(window.demo);
delete window.demo;
console.log(window.demo);
调试工具的使用
1.快捷键
windows F12
Mac command + ctrl + j
2.console(控制台输出)它和页面处于同一个环境
3.断点
- 普通断点
- 条件断点
4.网络知识点
网络通信：请求 + 响应
请求：客户端向服务器索要数据的行为
响应：服务器端把数据返回给客户端的行为
请求的方式一共有8种，其中4种为常用的PUT/Delete/POST/GET
请求的内部细节：
请求头（描述信息，客户端以及请求本身的描述信息） + 请求体（参数）
响应的内部细节：
响应头（描述信息，服务器端以及响应本身的描述信息） + 响应体（具体数据） + 状态码
异常处理
- 异常处理的结构
try{
}
catch(e){
}
- 正餐情况下，如果程序出现了错误或者是异常那么该代码后面的所有代码都无法得到执行，但是，有些时候我们需要保证几遍程序出现了问题，后面的代码也能够正常执行，这种情况就可以使用异常捕获结构
- 手动抛出异常
语法 throw 具体的信息
抛出的内容：字符串 + 对象
自己编码规范：如果出错或者是有异常，那么就抛出一个对象（msg code）
函数未定义 1001
变量未定义 1002
访问了错误的数据 1003 - 完整的异常捕获结构
try{
}
catch(e){
}
finally{
}
function demo(){
console.log('我是测试的函数');
}
try {
var a = 0;
console.log(a);
a(); //报错
//把可能出现错误的代码，放在 try 代码块中
}
catch(e){
//如果上面的代码出现了错误，那么就会执行这个 catch 代码块中的任务
//一般在这个代码块中要左相应的补救处理
console.log('出错了');
//参数 e 异常信息
console.log(e);
}
demo();
try{
//可能出现问题的代码
function sum(){
if(a == undefined){
//throw '请输入具体的参数！'
throw{
ErrMsg:"找不到该对象！";
ErrCode:1004;
}
}
console.log(a + b);
}
sum();
}catch(e){
console.log(e,'____');
}
try{
//可能出错的代码
}catch(e){
console.log(e,'____');
//出错了就执行这个代码块
}
finally{
//不管是否出错，都会执行这里的代码块
//一般在前端开发终不悔使用，多用于后端开发 Node.ks 主要用于在最后释放资源
}
DOM 操作
var divDemo = document.createElement('div');
divDemo.innerText = '测试的标签';
divDemo.style.backgroundColor = 'red';
document.body.appendChild(divDemo);
var dicTest = document.getElementByTagName('div')[0];
document.body.removeChild(dicTest);
函数和对象的创建
- 函数的几种创建
- 声明函数
- 函数表达式
- 使用构造函数创建函数对象
- 对象的创建
- 字面量
- 使用构造函数创建
function 函数名称(形参1，形参2){
//函数体
}
//调用
//函数的名称();
fuction funcName(){
}
函数表达式
var func01 = function(){
};
//命名的函数表达式
var func02 = function(){
};
构造函数创建
//没有内容（没有函数体）
var func = new Function();
func();
//等价
function funcTest (){};
var func02 = new Function("console.log('demo')");
func02;
var obj = {name:'zhangsan'};
var obj2 = new Object();
var obj3 ={};
面向对象和面向过程编程
- 面向过程
- 面向对象
都是一种解决问题的思路（思想）；
面向过程在解决问题的时候，关注的是解决问题需要一个接着一个的过程（步骤）；
面向对象在解决问题的时候，关注的是解决问题所需要的对象
面向对象编程的相关概念
- 什么是对象
对象是具体的事物 - 对象的特征（静态的描述信息）
人的名字、性别、班级、年龄 - 有的对象有行为（动态的特征）
人的吃饭、跑步、打球 - 现实中的对象和编码中的对象
静态的描述信息：属性
动态的行为特征：方法 - 面向对象和面向过程都是解决问题的一种方式（思想），没有孰优孰劣之分，面向对象本身是对面向过程的封装
- 面向对象编程最重要的是什么？
找到对象（内置对象 + 自己创建）
var dog = {
name:"阿黄",
age:13,
color:"黄色",
eat:function(){
console.log("吃狗粮");
},
run:function(){
console.log("runrunrurn");
}
}
var zhangsan = {
name:"张三",
age:66,
height:2.01,
sex:"男",
dog:dog,
eat:function(){
console.log("吃");
},
sleep:function()
{
console.log("睡");
},
liuDog:function(){
console.log("遛狗");
},
coding:function(){
console.log("_____");
}
}
面向对象编程的优点
- 更方便
- 复用性更好
- 高内聚和低耦合（电路）
冗余（重复的东西） ----》 封装（提取相同的部分作为函数体，抽取不同的部分作为参数）
面向对象创建并设置标签样式小案例
var $ = {
getEle:{
getElementsByTagName:function (eleName) {
return document.getElementsByTagName(eleName);
},
getElementsById:function (id) {
return document.getElementById(id);
},
getElementsByClassName:function (className) {
return document.getElementsByClassName(className);
}
},
setStyle:{
setBorder:function (eles){
for (var i = 0; i < eles.length; i++) {
eles[i].style.border = "1px solid #002";
}
},
setColor:function (eles){
for (var i = 0; i < eles.length; i++) {
//......
}
},
setCss:function (eles){
for (var i = 0; i < eles.length; i++) {
//.....
}
},
}
}
$.setStyle.setBorder($.getEle.getElementsByTagName("div"));
$.setStyle.setBorder($.getEle.getElementsByTagName("p"));