javascript第三天笔记

最新推荐文章于 2019-05-14 17:50:49 发布

一天一篇的博客

最新推荐文章于 2019-05-14 17:50:49 发布

阅读量237

点赞数

今天开始看HTML DOM事件；

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

dom看完了，就是用js来对html的元素进行操作；

在大多程序设计语言中，通常存在两种不同形式的数组：

一般性数组，也叫做索引型数组或枚举型数组（通常以数字为键值）
关联型数组，也叫做哈希表（通常以字符串为键值）

在 JavaScript 中，我们使用数组来表示所索引型数组，使用对象来表示关联型数组。

构造器函数

使用构造器函数构造函数，需要使用 new 操作符；否则，就是引用了一个函数。

function Func(name, age) {
  this.name = name;
  this.age = age;
}
var person = new Func();

构造器函数名的首字母通常使用大写，保持可读性。

constructor

当我们使用构造器创建对象时，实际上还同时赋予了对象一个构造器属性，该属性是一个引用，指向创建该对象的构造器。

console.log(person.constructor);
//Func(name, age)

如果使用的是对象字面量 {}，那么它实际上是由内建构造器创建的。

var obj = {};
console.log(obj.constructor);
//Object()

返回对象的函数

如果接收一个函数返回的对象（使用对象字面量创建），就相当于使用了内建构造器，构造器属性为 Object()。如果此时函数体内有其他属性，则上下文执行环境为全局对象。

function Factory(){
  name= "Sun";
  return {
    name: "Sean"
  }
}
var obj = new Factory();
console.log(obj.constructor);
//Object()
console.log(obj.name);
//Sean
console.log(window.name);
//Sun

内建对象

内建对象大致可以分为三组：

数据封装类对象：Object、Array、Boolean、Number 和 String，这些对象代表着 JavaScript 中不同的数据类型，并且都拥有各自不同的 typeof 返回值，以及 null 和 undefined 状态
工具类对象：Math、Date、RegExp 等
错误类对象：包括一般性错误对象以及其他各种更特殊的错误类对象

Object

Object 是 JavaScript 中所有对象的父对象。当我们使用对象字面量创建一个对象时，该对象的构造器属性指向的就是 Object()。

var obj = {};
console.log(obj.constructor);
//Object()

虽然上面创建的是一个空对象，实际上并非完全为空，还是包含了一些默认的属性和方法：

返回构造器函数的构造器属性
返回对象描述字符串的 toString() 方法
返回对象单值描述信息的 valueOf() 方法

Array

尽管数组是对象，但有一些特别之处：

它的属性名从 0 递增，自动生成
它拥有一个记录数组中元素数量的 length 属性
它是在父级对象的基础上对内建方法进行了扩展

当我们手动设置 length 属性时，如果设置的值大于当前数组中元素的数量，就会自动创建空属性填充，默认值为 undefined；如果设置的值小于数组中元素的数量，就会移除多余的属性。

var a = [1];
a.length = 5;
console.log(a);
//[1, undefined, undefined, undefined, undefined]
a.length = 3;
console.log(a);
//[1, undefined, undefined]

数组常用方法：

push()、pop() 是一对执行相反操作的方法，前者在数组尾部追加新元素，后者删除数组尾部的元素。此外，push() 的返回值为新数组的长度，pop() 返回移除的元素。

var arr = ["start"];
console.log(arr.push("end"));
//2
console.log(arr);
//["start", "end"]
console.log(arr.pop());
//end
console.log(arr);
//["start"]

sort() 是用于排序的方法。需要注意的是，如果没有传参，默认使用字典序排列，即使数组内都是数值也不例外，所以就会出现与预估迥异的结果。可以通过传递一个函数引用，来更改为按大小排序。

a = [1, 3, 12, 2, 11, 4];
a.sort();
//[1, 11, 12, 2, 3, 4]
function compare(a, b){
  return a - b;
}

a = [1, 3, 12, 2, 11, 4];
a.sort(compare);
//[1, 2, 3, 4, 11, 12]

join() 方法返回一个由目标数组中所有元素值连接而成的字符串。

a = [1, 3, 12, 2, 11, 4];
a.join("")
//"13122114"

slice() 方法可以在不修改目标数组的情况下返回数组的某个片段，需要传入目标片段的首尾索引作为参数。

var a = [1, 2, 4, 12, 5, 6];
a.slice(1,4)
//[2, 4, 12]

splice() 方法能够永久性改变数组，该方法的第一个参数，表示开始的索引位置，第二个参数表示数量，其后的参数表示用于填补的新元素值。这是一个非常强大的方法，使用它，就可以完成数组内的插入、删除和替换。

var a = [1, 2, 4, 12, 5, 6];
//删除
a.splice(1,2);
//[2, 4]
console.log(a);
//[1, 12, 5, 6]
//插入
a.splice(1,0, "hi");
//[]
console.log(a);
//[1, "hi", 12, 5, 6]
//替换
a.splice(3,2,1,3);
//[5, 6]
console.log(a);
//[1, "hi", 12, 1, 3]

Function

Function() 是函数对象的内建构造器。以下三种定义函数的方式是等效的：

function sum(a, b){
  return a + b;
}
var sum = function(a, b) {
  return a + b;
}
var sum = new Function('a', 'b', 'return a + b;');

应该避免使用 Function()、eval() 和 setTimeout()，因为它们始终会以字符串的形式通过 JavaScript 的代码检查，存在潜在的不安全性。

与其他对象不同的是，函数对象中含有一个构造器属性。

function func(){}
console.log(func.constructor)
//Function()

函数对象中，最重要的是 prototype 属性：

每个函数的 prototype 都指向一个原型对象
它只有在该函数是构造器时才会发挥作用
该函数创建的所有对象都会持有一个对当前函数 prototype 属性的引用，并可以将其当成自己的属性来使用

function func(){}
console.log(func.prototype)
//func{}

arguments

尽管 arguments 看上去像一个数组，但它实际上是一个类似数组的对象。和数组相似的是，arguments 对象中也包含了索引元素和 length 属性。

在此之外，arguments 还有 callee 属性。相关介绍见《JS 上下文执行对象》一文。

Number

常用方法

//虽然（12345）是一个原始值，
//但在后台会自动转换为 Number 对象并调用既定方法
//方法执行完毕后会自动销毁 Number 对象
(12345).toExponential()
//"1.2345e+4"

String

toUpperCase() 和 toLowerCase() 是一对相反操作的方法，作用分别是将字符串转换为大写和小写。

charAt() 用于返回指定位置的字符。如果指定位置不存在字符，返回空字符串。

var name = "sean";
name.charAt(2);
//"a"

indexOf() 和 lastIndexOf() 用于在字符串中查找特定字符串，返回索引值，如果没有就返回 -1。也可以使用可选参数指定开始检索的索引值，搜索过程区分索引值。

var str = "adfadfasdfasdf";
str.indexOf("fas");
//5
str.indexOf("fas", 6);
//9

由于匹配的第一个字符的索引为 0，就不能使用常规的条件检测。

//正确方式
if(s.indexOf(str) !== -1){
  ...
}

splice() 和 substring()，这两个方法都可以用于返回目标字符串中的指定的区间，其参数分别指定检索的首尾区间。不同之处在于对负值的处理上，substring() 会忽略负值参数，采用正整数，此时该参数表示查找的字符串长度，如果两个参数均为负值，则返回空字符串；slice() 方法会用字符串长度加上负值参数，如果第二个参数大于第一个参数，则返回空字符串。

var str = "adfadfasdfasdf";
console.log(str.substring(1, 5));
//"dfad"
console.log(str.substring(1, -5));
//"a"
console.log(str.substring(1, -15));
//"a"
console.log(str.slice(1, 5));
//"dfad
console.log(str.slice(1, -5));
//"dfadfasd"
console.log(str.slice(1, -15));
//""

splic() 可以根据传递的参数划分字符串为数组。

var str = "adfa dfasdf asdf";
str.split(" ")
//["adfa", "dfasdf", "asdf"]

concat() 方法通常用于追加字符串，它的功能与基本字符串类型的 + 操作符类似。

var str = "Sean";
str.concat(" Sun");
//"Sean Sun"

Math

常用属性：

PI：圆周率
SQRT2：2 的平方根
E：欧拉常数
LN2：2 的自然对数
LN10： 10 的自然对数

常用方法：

random(): 生成随机数，((max - min) * Math.random()) + min
max()/min(): 最值
round(): 对数值四舍五入
floor(): 向下取整，比如：1.9 -> 1，-1.9 -> -2
ceil(): 向上取整，比如：1.9 -> 2， -1.9 -> -1
pow(n, m): 求 n 的 m 次方
sqrt(): 开平方
sin()、cos()、atan()

Date

Date.parse(string)，该方法用于解析字符串为时间戳，如果解析失败，返回 NaN。

Date.parse("June 4, 2015");
//1433347200000
Date.parse("二零一五年六月四日");
//NaN

常用方法：

getTime(): 获取 Date 对象中的时间
getFullYear(): 获取 Date 对象中的完整年份
getMonth(): 获取 Date 对象中的完整月份
getDate(): 获取 Date 对象中的日期信息
getDay(): 获取 Date 对象中的星期数，0 为星期日
getHours()、getMinutes()、getSeconds()、getMilliseconds()

文／pinggod（简书作者）
原文链接：http://www.jianshu.com/p/09f0592352db
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

在查看内建对象时发现的这篇，简书是一个不错的网站

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

JavaScript 基于 prototype，而不是基于类的。

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。