ECMAscript学习笔记(01)

      这段时间比较闲，所以重新学习了一下JS的基础知识，发现自己对JS的理解和认识，以及在实际应用的时候，有很多地方不到位。所以我想把自己这次的学习笔记拿到博客上，以便今后的今后的学习和复习(此文只是本菜鸟的学习笔记总结，如有不足之处还望各位前辈们能多多指导。hello world ！)

　　1.0 首先简单说明一下JavaScript的组成部分：

　　　　ECMAScript： 规定js的语法规范   

　　　　DOM：Document Object Model 给我们提供了一套完整的操作页面元素的api application programming interface 

　　　　BOM: Browser Object Model　

        2.0 JS数据类型 :　　　　

　　　　1.基本数据类型

　　　　　　string number boolean

 

　　　　2.复杂数据类型（引用类型）

　　　　　　Array Date Object RegExp function （ String Number Boolean 三大基本包装对象）

 

　　　　3.如何获取一个数据的数据类型

　　　　　　使用关键字 typeof

　　　　　　ypeof返回值为string类型

　　　　

4.String Number Date 首字母大写的都是构造函数

　　　　

5.两个空的类型

null （空）

undefined （声明未赋值）

 

6.什么时候对象会是null

    //变量不可能为null值，除非手动去设置

    //什么时候要给对象赋值为null？

    //要解除对象的占用（引用）的时候

　　 3. 0 js小知识点 ：

#### 1. 关键字：in

1.//in关键字

//1. 最常用的是在for in 循环中 遍历对象的键

//2. 判断属性是否存在于对象中

//语法 属性名 in 对象

//对象的键为字符串类型

//注意： 使用in关键字的时候，属性名称为字符串类型，需要用引号引起来

2.

// var propName = "name";

// var isExsit = propName in obj;

// console.log(isExsit);

 

// for(var k in obj){

// console.log(typeof k);

// }

 

var arr = [4, 6, 3, 4];

 

// console.log(0 in arr);

//这里会做一个隐式的类型转换

// console.log("0" in arr);

 

//注意： in关键字操作数组的时候判断的是索引是否存在，而不是值

console.log(6 in arr);

 

//如何判断数组中是否存在指定的值

//1. for循环 如果找到了就输出

//2. indexOf 返回值为指定的数对应的索引，如果没有找到 返回-1

console.log(arr.indexOf(9));

#### 2. 关键字：delete

<script>

var obj = {

name : "尼古拉斯@赵四",

age : 20

}

 

//delete关键字可以用来删除对象的属性，还有未使用var声明的变量

//delete关键字有返回值 用来表示删除属性是否成功

//如果删除的是不存在的属性，返回值为true

//如果删除的属性存在原型当中，那么返回值为true，但是并未删除

// console.log(obj.name);

 

// var result = delete obj.name;

 

// console.log(obj.name, result); // undefined

 

// var num = 10;

 

// num1 = 100;

 

// console.log(num1);

 

// result = delete num1;

 

// console.log(window.num1, result);

// var num = 10;

// var result = delete num;

//   console.log(result);

 

// var result= delete obj.gender;

// console.log(result);

        console.log(obj.toString());

var result = delete obj.toString;

        console.log(result);

     console.log(obj.toString());

#### 3.对象的动态特性

<script>

var obj = {

name: "刘德华",

age:50

};

 

//对象的动态特性

//对象的动态特性是指，在对象创建出来之后，为对象添加新的属性或者方法

// obj.gender = "male";

//

// obj.sayHello = function () {

// console.log("我想死你了");

// }

//

// obj.sayHello();

//

// obj.name = "xxx";

 

//使用点语法进行赋值的时候，如果对象存在该属性，是修改操作

//如果对象不存在该属性，是给该对象新增属性并且赋值

 

//对象是不是就是键值对儿的集合

// 通过[]的方式: 对象名[属性名] 注意这里的属性名 是字符串

//通过这种方式也可以获取对象的属性值

//也可以修改对象的属性值

//还可以为对象新增属性并赋值

 

// console.log(obj["name"]);

 

// obj["name"] = "黎明";

 

// console.log(obj["name"]);

 

// obj["car"] = {

// brand : "Ferrari"

// };

 

//这里如果使用的键不是字符串类型，会隐式的转换成字符串类型

obj["[object Object]"] = function () {

console.log("我添加成功了");

}

 

obj["[object Object]"]();

// console.log(obj);

 

//新增属性、方法的方式有：

//1.点语法

//2.通过 [] 的形式去添加

 

</script>

#### 4.逻辑中断 （短路运算）

<script>

//逻辑中断 （短路运算）

//表达式1 || 表达式2

//如果表达式1 为真 返回表达式1

//如果表达式1 为假 返回表达式2

// var num = 1 || 2;

 

// console.log(num);

//表达式1 && 表达式2

//如果表达式1为真

//判断表达式2 是否为真 若为真 则返回表达式2 若为假 则返回表达式2

//如果表达式1为假 直接返回表达式1

var num = 0 && 2;

console.log(num);

// var event = e || window.Event;

function and10(num) {

num = num || 0;

console.log(num * 10);

}

 

and10();

</script>

#### 5.continue 和 break 的作用以及区别

//continue是用来干什么的？

//跳出本次循环 继续下次循环，continue下面的代码不再执行

//break 是用来干什么的？

//终止循环 break后面的代码执行吗？

//调试工具的使用不会看视频

#### 6.异常处理

<script>

//异常最大的特征，就是一旦出现异常，后面的代码将不会再执行

 

//那为了保证后面代码在出现异常之后，还能继续执行，所以就要进行异常处理

 

//注意 语法异常 try catch无法捕获

 

//异常捕获语句

//try catch finally

 

// a();

//手动抛出异常信息 使用 throw关键字

 

//语法：

// try{

//// a();

// //可能会出现问题的代码

//

// throw "你的代码坏了！！！";

// }

// catch(e){

//

// //出现异常后的处理代码

// console.log(e);

// }

//

// function test() {

// console.log("我是之后的代码");

// }

 

// test();

 

function sum(num1, num2){

if(num1 == undefined || num2 == undefined){

throw {

errMsg: "能不能好好玩耍了，乖乖给我传参！！",

errCode: 13888888888

};

}else{

return num1 + num2;

}

}

 

// sum(0);

 

try{

sum(0);

}

catch(e){

console.log(e.errMsg);

}

 

//异常捕获语句的完整形式

 

try{

//可能出现异常的代码

xyz();

 

}

catch(e){

//出现异常后的处理代码

}

finally{

console.log("我是finally中的代码");

//不管有没有出现异常，这里的代码都会执行

//node.js

//做释放资源的操作。

}

 

</script>

### 4.值类型 和 引用类型

#### 1.两种数据类型的特征区别

<script>

1. //值类型： string number boolean undefined

// 存储的就是数据本身的变量就是值类型的数据

 

2.//引用类型：object

// 存储的是数据在内存中的地址，数据在内存中单独存储 就是引用类型的数据

 

3.//值类型的赋值

//直接将存储的数据复制一份进行赋值，两份数据在内存中是完全独立的

 

4.//引用类型赋值

//引用类型赋值的时候，是将变量中存储的地址复制一份单独存储，但是两个变量共享同一个对象

//修改其中一个对象，两外一个引用来访问的时候，也会访问到修改后的对象

</script>

#### 2.引用类型 和 值类型 在函数中的使用

<script>

var num = 10;

function changeNumber( num1 ){

//var num1 = num

num1 = 100;

//console.log(num1); //10 or 100

}

changeNumber(num);

console.log(num); //10 or 100

//实参：就是函数调用的时候，实际传入的参数

//形参：函数声明的时候，用来占位的变量名，没有具体的数值

//在函数调用时，会默认的将实参赋值给形参

 

var obj = {

name : "宅男"

};

 

function jinhua(param){

//param = obj

param.name = "高富帅";

//下面的这句代码，重新创建了一个对象，修改了param的指向

//但是，obj还指向原来的那个对象 所以，在修改param的时候，修改的是

//新创建的对象，跟obj没有关系

param = {

name:"腐女"

};

param.name = "宅男";

}

 

jinhua(obj);

 

console.log(obj.name); //高富帅 or 宅男 or 腐女

 

//值类型做函数的参数

//函数内部的变量，也就是形参和实参只是简单的赋值操作，两个数据独立存储于内存中的

//在函数内部对形参进行修改，不会影响外面的变量

 

//引用类型做函数的参数

//还是把实参存储的地址赋值给了形参，在函数内部，形参同样也指向该对象，

//所以，在函数内部对该对象进行修改，会影响到外面的变量

 

//注意：如果在函数内部重新创建对象，为该形参赋值，那么两个对象将不再有关系

//修改其中一个，另外一个不受影响

</script>

​

### 5.定义函数（function）

<script>

//1.函数声明

function funcName(){

//函数体

}

 

//2.函数表达式

//在使用函数表达式声明函数的时候，function后面可以跟函数名

//但是 这个函数名。只限在函数内部使用，外部无法访问

 

var funcName1 = function name(){

//

console.log("谁说不可以");

}

 

//3.Function

var funcName2 = new Function();

funcName1();

</script>

### 6.DOM的简述

<script>

//增 删 改 查

//增

//document.createElement

//appendChild

 

//删

//removeChild

 

//改

//style

//id

//className

//innerHTML

//innerText

 

//查

//getElementById

//getElementsByTagName

//getELementsByClassName

 

</script>

## 2.面相过程编程 和 面相对象编程 (两者都是一种思维方式)

### 1.举例说明（面向对象编程基本概念）

<script>

//洗衣服

//1.收集衣服

//2.打开洗衣机盖子

//3.把衣服放进去

//4.关洗衣机盖子

//5.设定洗衣程序

//6.打开洗衣机盖子

//7.晾衣服

//8.收衣服

 

//面向过程的思维方式：

//就是把解决问题的关注点，放到解决问题的每一个详细的步骤上面！

 

//面向对象的思维方式：

//就是把解决问题的关注点，放到解决问题需要的一些列对象身上

 

//1.找个女朋友

 

//去餐馆吃饭

 

//面向过程的思维方式

//1.进餐馆

//2.点菜

//3.做菜

//4.上菜

//5.吃菜

//6.结账

//7.拍拍PG走人

 

//面向对象的思维方式

//1.我

//2.餐馆

</script>

### 2.相关概念

<script>

//1、什么是对象！！！！

//万物皆对象

 

//2、对象的特征

//对象的特征就是用来描述对象的相关信息

//比如一个人对象，特征就有：name age gender height

 

//3、对象的行为

//对象行为就是描述对象的行为

//比如一个人对象，行为就有：吃 跑 跳 睡 唱 抽烟 喝酒 烫头

//4、在JS当中 什么是对象？

//键值对儿的组合就是对象

 

//5、现实生活中的对象的特征对应到JS当中是对象的属性！

 

//6、现实生活中的对象的行为对应到JS当中就是对象方法！

 

//例子：写一个JavaScript对象来描述一个学生， 学生的信息（学号 年龄 班级 电话）

var student = {

id : 100,

grade : "幼儿园",

class : "大2班",

phone : [phone]

};

//如何在一句话中找出所有的对象

//名词提炼法！！！

//小明在公交车上牵着一只叼着香肠的狗

 

var xm = {

name:"小明",

age:12,

liuDog:function () {

console.log("遛狗啦！！！");

}

}

 

var bus = {

brand : "Benz",

color : "yellow",

zaiCustomer: function () {

console.log("拉了好多人，跑起来");

}

}

 

</script>

### 3.学习面向对象编程的作用

<script src="jquery-1.12.2.js"></script>

<script>

 

window.onload = function () {

//要求创建出来一个div 并且设置样式，然后加到body标签当中

//使用面向过程的思维方式来解决js问题

//1.创建div

// var div = document.createElement("div");

// //2.设置div的样式

// div.style.height = "200px";

// div.style.width = "200px";

// div.style.border = "1px solid pink";

// //3.添加div到body中去

// document.body.appendChild(div);

//使用面向对象的思维方式来解决js问题

$("body").append("<div style='width:200px;height:200px;border:1px solid pink'></div>")

 

//面向对象是对面向过程的封装，有了面向对象并不意味着，就可以抛弃面向过程

 

}

</script>

### 4.面向对象编程 举例

<script>

window.onload = function () {

//设置页面中的div和p的边框为1px solid red

//1.设置div的样式

 

//1.1、获取div们

var divs = document.getElementsByTagName("div");

//1.2、遍历获取到的div们

//little tip: itar 敲tab就可以出现for循环

for (var i = 0; i < divs.length; i++) {

var div = divs[i];

//1.3、在循环中给div设置样式

div.style.border = "1px solid red";

}

 

//2.设置p的样式

var ps = document.getElementsByTagName("p");

for (var j = 0; j < ps.length; j++) {

var p = ps[j];

p.style.border = "1px solid red";

}

//编写代码的时候的原则：DRY

//Dont repeat yourself

}

 

</script>

 

//编写代码的时候的原则：DRY

//Dont repeat yourself

### 5.使用函数进行封装（编程举例）

<script>

//使用函数将代码封装，使得复用性更高

 

//使用函数封装带来的问题：

//1.全局变量污染

//2.代码结构不够清晰，维护不方便

 

window.onload = function () {

 

var divs = tag("div");

setStyle(divs);

 

var ps = tag("p");

setStyle(ps);

}

 

function tag(tagName){

return document.getElementsByTagName(tagName);

}

 

function setStyle(elements){

for (var j = 0; j < elements.length; j++) {

var ele = elements[j];

ele.style.border = "1px solid red";

}

}

</script>

### 6.使用对象进行封装

<script>

   //使用函数将代码封装，使得复用性更高

     //使用函数封装带来的问题：

    //1.全局变量污染

    //2.代码结构不够清晰，维护不方便

    //使用对象进行封装后的优势

    //1.暴露在全局的只有一个对象名 不会造成全局变量污染

    //2.使用对象将代码进行功能模块的划分，有利于日后的维护

 

window.onload = function () {

 

var divs = itcastQuery.tag("div");

itcastQuery.setStyle(divs);

 

var ps = itcastQuery.tag("p");

itcastQuery.setStyle(ps);

}

var itcastQuery = {

//获取dom元素的方法们

getEle:{

tag: function (tagName){

return document.getElementsByTagName(tagName);

},

id: function (id){

return document.getElementById(id);

}

//通过classname获取元素的方法

//....

},

//设置样式的方法们

setCss: {

setStyle: function (elements){

for (var j = 0; j < elements.length; j++) {

var ele = elements[j];

ele.style.border = "1px solid red";

}

},

css:function(option){},

addClass:function(){},

//..

}

//事件处理模块

}

</script>

### 7.关于（面向对象编程思维方式）的一些理解

- **面向对象编程思维方式就是对面向过程的封装。**

- **使用面向对象的思维方式进行封装的意义**：**重复利用**，**为了能高效解决问题**，

- **例如：Jquery，就是将面向过程的思维方式用函数封装成代码块，再以对象的形式封装成一个功能强大的类库。**

- **面向对象编程思维方式：其实就一种将客观存在的对象抽象化然后根据对象客观存在的特征和行为以编程的方式将之运用到计算机的编程中**

 

 

...荆轲刺秦王！