javascript学习笔记（二）

1 javascript对象

javascript的对象同java中的对象一样，都是拥有属性和方法的数据。

1.1 对象的定义

JavaScript 对象可以跨越多行，对象中的属是以name:value键值对的形式来写的，若对象有多个属性，则个属性之间用逗号隔开；对象的方法创建：方法名：finction(){ 方法代码}。

var person = {name:"lisa",sex:"man",age:20};

var person = {
   //对象的属性
   name:"lisa",
   sex:"man",
   age:20
    //对象的方法
   info:function() 
	{
       return this.name + " " + this.sex+ " " + this.age;
    }
};

1.2 对象的访问

• 可以通过两种方式来访问对象的属性

person.name;
person["name"];

• 访问对象的方法

person.info();

**注意：**访问对象的方法的时候如果写成了“person.info；”那么info方法会被当作一个属性，也就是说“info：”后面的内容会被当作字符串返回。

2 javascript函数

2.1 定义函数的语法

定义函数使用关键字function，关键字function必须小写，同java的方法一样，函数中也可以有入参共和返回值：

function myFunction(a,b)
{
    return a*b;
}

2.2 ES6新增箭头函数

ES6新增箭头函数可以使得函数的定义更加简介、易读。

// 传统定义函数方式
function Test () {
  执行代码
}
const Test = function () {
  //执行代码
}

// 使用箭头函数定义函数时可以省略 function 关键字
const Test = (...params) => {
  //执行代码
}

// 该函数只有一个参数时可以简写成：
const Test = param => {
  return param;
}

2.3 HTML中的全局变量

在HTML中，全局变量就是window对象，所有的数据变量都属于window对象。

function muFunction(){
    name="haha";
}

2.4 局部变量和全局变量的区别

• 声明位置不同。在javascript函数中使用var声明的变量是局部变量，所以只能在函数内部访问它，在函数外声明是变量是全局变量，网页上所有的脚本和函数都可以访问它；
• 声明周期不同。局部变量在函数运行结束后被销毁，全局变量在页面关闭后被销毁；

如果把值赋给一个尚未声明的变量，该变量将自动作为window的一个属性。

**注意：**如果变量子在函数内内衣使用var关键字声明，那么该变量就为全局变量。

// 此处可调用 carName 变量
function myFunction() {
    carName = "hahah";
    // 此处可调用 carName 变量
}

2.5 比较var和let 关键字

• let和var的声明方式相同，但是用let代替var来声明变量，可以将变量的作用域限定在当前代码块中。
• let 声明的变量只在其声明的块或子块中可用，这与 var 相似。二者之间最主要的区别在于 var 声明的变量的作用域是整个封闭函数。

3 javascript事件

常见的HTML时间有：

事件	描述
onchange	HTML元素改变
onclick	用户点击HTML元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

3.1 设置事件

• 在HTML标签元素中为该元素设置事件（）不推荐这种方式

<button id="test" onclick="changeContent()innerHTML=Date()">现在时间是</button>

• 但在JS中需要这样写：

var test = document.getElementById("test");
test.onclick = test.changeContent(){
    //执行代码
}

• 为元素添加事件和移除事件。

//为元素添加事件
element.addEventListener(event, function, [useCapture])
//移除元素的事件
element.removeEventListener(event,function,[userAcpture])

为元素添加点击事件的时候，不要将 event 参数设置为 onclick，而必须写成 click，去掉事件名称中的 on 即可。

<input id="test" type="button" value="提交"/>
<script>
    window.onload =function(){
    	var test=document.getElementById("test");
    	test.addEventListener("click",fun1);
    	test.removeEventListener("click",fun1);
 	}
    function fun1(){
    	alert("我是fun1");
	}    
	function fun2(){
    	alert("我是fun2");
	} 
</script>

4 javascript字符串

4.1 字符串

字符串是可以插到引号中的任何字符，可以使用单引号或者双引号。同时也可以想向ava中的字符串一样，使用索引来访问字符串的每个字符，使用字符串的内置属性length来计算字符串的长度。

var name = "holly";
var namechar = name[0];
var namelen = name.length;

注意：

• 字符串的索引也是从 0 开始；
• 若字符串中也有引号，则需要引号的字符可以使用不同于字符串的引号括住，如果字符串中也还有其他特殊字符，可以使用使用反斜杠 () 来转义，转移同java一样。

4.2 字符串对象

可以使用字符创建一个字符串，也可以使用new关键字将字符串定义为一个对象。但不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用。

<script>
	var x = "holly";              // x是一个字符串
	var y = new String("holly");  // y是一个对象
	document.getElementById("demo").innerHTML =typeof x + " " + typeof y;
</script>

**注意：**直接创建的字符串和使用new关键字创建的字符串是不一样的。===为绝对相等，即数据类型与值都必须相等。

var x = "John";              
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

4.3 比较和=

**对于基础类型：**对于 string和number 等基础类型，== 和 === 是有区别的。

• 不同类型间比较，== 之比较 “转化成同一类型后的值” 看 “值” 是否相等，=== 如果类型不同，其结果就是不等。
• 同类型比较，直接进行 “值” 比较，两者结果一样。同类型比较，直接进行 “值” 比较，和=两者结果一样。

**对于高级类型：**对于 Array,Object 等高级类型，== 和 === 是没有区别的，都是进行 “指针地址” 比较。

**对于基础类型和高级类型：**基础类型与高级类型，== 和 === 是有区别的。

• 对于 ==，将高级转化为基础类型，进行 “值” 比较。
• 因为类型不同，=== 结果为 false。

var num=1;
var str="1";
var test=1;
test == num   //true　相同类型　相同值 
test === num  //true　相同类型　相同值 
num == str   //true 　把str转换为数字，检查其是否相等。 
num === str  //false  类型不同，直接返回false 

!=是==的非运算，!==是===的非运算。

5 运算

5.1 各类型进行运算的转变

• 字符串和数字相加，数字转成字符串.；

• 数字和布尔值相加，布尔值 false 转成 0，true 转成 1；

• 字符串与布尔值相加，布尔值转化成字符串。

• 数字与 null(空值) 相加，null 转化为数字 0；

• 字符串与 null(空值) 相加，null 转化为字符串；

• 取模运算的结果符号只与%左边值的符号相同；

var x = 8 % 3; // 结果为 2
var y = 8 % (-3); // 结果为 2
var z = (-8) % 3; // 结果为 -2

• 其他数据类型转换为布尔类型的规则: null、undefined、0、NaN、空字符串转换为false，其他转化为 true。

• switch语句 中 case的判断是===的判断，即数据类型和值的双重判断，这点要注意。另外switch的判断条件可以是String 、Number、Boolean、char、枚举、null、undefined。

5.2 不同类型的循环

• for - 循环代码块一定的次数

• while - 当指定的条件为 true 时循环指定的代码块

• do/while - 同样当指定的条件为 true 时循环指定的代码块

• for/in - 循环遍历对象的属性；for in 循环不仅可以遍历对象的属性，还可以遍历数组。

var person = {name:"holly",sex:"man",age:25};
for(x in person){   // x 为属性名
    info = info + person[x];
}

• for…of 是 ES6 新引入的特性。**for-of **的语法看起来跟 **for-in **很相似，但它的功能却丰富的多，它能循环很多东西。

let iterable = [10, 20, 30];
for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

let iterable2 = "boo";
for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

**注意：**定义了数组后对数组进行赋值，中间如有某些下标未被使用（即未被赋值），在遍历的时候，采用一般的 for 循环和 for…in 循环得到的结果不同。for…in 循环会自动跳过那些没被赋值的元素，而 for 循环则不会，它会显示出 undefined。

<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var array = new Array();
    var x;
    var txt=""
    array[0] = 1;
    array[3] = 2;
    array[4] = 3;
    array[10] = 4;
    for( x in array ){
        alert(array[x]);     // 依次显示出 1 2 3 4
    } 
    alert(array.length);    // 结果是11
    for( var i=0 ; i<4 ; i++){
        alert(array[i]);     // 依次显示出 1 undefined undefined 2 
    }
    document.getElementById("demo").innerHTML = txt;
}
</script

**参考javascript学习资料：**https://www.runoob.com/js/js-tutorial.html