Javascript

一 普通对象

对象的分类

1. 内建对象
   • 由ES标准定义的对象，在任何ES实现都能使用
   • 如 Math String Number Boolean Function Object等
2. 宿主对象
   • 由JS运行环境提供的对象，主要指浏览器提供的对象
   • 如 BOM DOM等 console.log() document.write()
3. 自定义对象

对象基本操作

//使用new关键字调用的函数是构造函数constructor
//构造函数是专门用来创建对象实例的函数
var obj = new Object()
console.log(typeof obj)//object

//对象中保存的值称 属性
obj.name =  "woshishui"
//读取属性
console.log(obj.name)
//读取对象中没有的属性不会报错 而是undefined
console.log(obj.sex)
//修改属性
obj.name =  "shiwo"
//删除属性
delete obj.name

对象属性名与属性值

var obj = new Object()
//对象中属性值不需要遵守标识符规范但需要用 对象["属性名"] = 属性值 方式
obj.var =  "hello"
obj.123 = 789
console.log(obj.123)//出错
obj["123"] = 789//用这种方式
//使用 [] 可以传变量
var n ='123'
console.log(obj[n])
//JS对象属性值可以是任意数据类型
obj.t1 = null
obj.t1 = undefined
var obj1 = new Object()
obj1.name = "zhu"
obj.t2 = obj1
console.log(obj.t2.name)//多层取值

in 检测对象中是否有此属性

console.log("name" in obj)//有则返回true 无则返回false

使用对象字面量创建对象

//对象字面量的属性名可以加引号也可以不加
//但是使用一些特殊的名字，必须加引号
var obj = {
	name: "wo",
	age: 18
}

二 函数对象

创建函数

//=======使用 构造函数 创建一个函数对象=====
//可以将要封装的代码以字符串的形式传给构造函数
var fun = new Function("console.log('func');")
console.log(typeof fun)//function
//函数对象具有所有普通对象的特性
fun.name = "wo"
console.log(fun.name)//可以
//=======使用 函数声明 创建一个函数========
function fun([a1,a2]){//中括号表示可传可不传的参数
	console.log('a')
}
//=======使用 函数表达式 创建函数========
var fun1 = function(){//中括号表示可传可不传的参数
	console.log('a')
}

函数参数

//形参相当于在函数内部声明了对应的参数
//实参可以是任意类型的参数 对象 函数 都可以
function sum(a,b){
	console.log(a+b)
}
sum()//NaN
sum(1,2)//3
//调用函数时 解析器不会检查实参的类型
sum(123,'hello')//123hello
sum(true,false)//1
//调用函数时 解析器不会检查实参的数量
sum(123,456,'hello')//多余的实参不会被赋值
//缺少实参的参数会是 undefined
sum(123)

函数返回值

//返回值可以是任意类型
function fun(a,b){
	var c = a + b
	return
	//return空则会返回undefined
	//不写return返回的也是undefined
	alert('弹窗') //return后的内容不会被执行
}

function fun1(){
	function fun2(){
		alert('fun2')
	}
	return fun2
}
a = fun1()
console.log(a)//fun2
a()//执行fun2
fun1()()//执行fun2

实参可以是任意值

//实参可以是任意类型的参数 对象 函数 都可以
function fun(a){
	console.log("a= " + a)
}
//re() 为调用函数 相当于使用函数的返回值
//re 为函数对象   相当于直接使用函数对象
fun(function(){})
function re(a){
	return a*a
}
fun(re(10))

立即执行函数

(function fun2(){
	alert('fun2')
})()

遍历对象

//每次执行会将比对象中的一个属性的名字赋值给变量
for(var n in obj){
	console.log(n)
}

作用域

//全局作用域在页面打开时创建，在页面关闭时销毁
//在全局作用域中有一个全局对象window，由浏览器创建，我们可以直接使用
//全局作用域中创建的变量都会作为window对象的属性保存
//创建的函数都会作为window对象的方法保存
var a=10
console.log(window.a)
function fun(){
	consolel.log('hi')
}
window.fun()

全局作用域

//===========变量声明提前================
//使用var关键字声明的变量，会在所有代码执行之前被声明（但不会被赋值）
//如果声明时不用var关键字，则变量不会被声明提前
console.log(a)//undefined
var a = 10
//==========函数声明提前==================
//使用 函数声明 创建的函数会在所有代码执行之前就被创建（而不像变量只是将声明提前了）
fun()	//函数正常执行
function fun(){
	console.log('hi')
} 
//使用 函数表达式 创建的函数 声明会提前，但不会提前创建
f1()//出错
console.log(f1)//undefined
var f1 = function(){
	console.log('f1')
} 

函数作用域

//调用函数时创建函数作用域，函数执行完后，函数作用域销毁
//每调用一次函数就会创建一个新的函数作用域，他们之间相互独立
//函数作用域中可以访问到全局变量，全局作用域中无法访问到函数作用域的变量
//当在函数作用域中操作一个变量时，会先在自身作用域中寻找，如果有就直接使用
//如果没有则向上一级作用域中寻找，直到全局作用域，若全局作用域也没有则报错
//在函数中要访问全局变量可以使用window
var a= 10
function fun(){
	var a= 20
	console.log(window.a)//10** **
}
//函数中也有 变量声明提前 和 函数声明提前
//在函数中，不使用var声明的变量都会成为全局变量
var c= 33
function fun1(){
	console.log(c);
	c=10
	d=100//相当于window.d
}
fun1()//c=33
console.log(c)//10
console.log(d)//100

this

//解析器在调用函数每次都会向函数内部传递一个隐含的参数（this）
//this指向的是一个对象，这个对象称为 函数执行的上下文对象
//根据函数的调用方式不同，this会指向不同的对象
function fun(){
	console.log(this.name)
}
var name = "全局"
var obj = {
	name: "对象",
	sayName:fun
}
fun()//this指向全局
obj.sayName()	//this指向obj

使用工厂方法创建对象

function create(name,age){
	var obj = new Object()
	obj.name = name
	obj.age = age
	return obj
}
var obj1 = create("wo",19)
var obj2 = create("ni",20)

构造函数

//构造函数和普通的函数没有区别，只是习惯上将首字母大写
//构造函数和普通函数的区别是调用方式不同，普通函数直接调用，构造函数需要使用new关键字来调用
//==========构造函数的执行流程===========
//1 立刻创建一个新对象
//2 将新建的对象设置为函数中的this
//3 逐行执行函数中的代码
//4 将新建的对象作为返回值返回
//使用同一个构造函数创建的对象，称为一类对象，也将一个构造函数称为一个类
//将通过一个构造函数创建的对象，称为该类的实例
function Create(name,age){
	this.name = name
	this.age = age
	this.sayName = function(){
		alert(this.name)
	}
}
var obj1 = new Create("wo",19)
var obj2 = new Create("ni",20)
console.log(obj1 instanceof Create)//true
//所有对象都是Object的后代
console.log(obj1 instanceof Object)//true

构造函数中方法的改进

//方法放在构造函数内部，每创建一个实例就需要一片内存创造一个方法，很浪费内存，所以将方法放在全局中
function Create(name,age){
	this.name = name
	this.age = age
	this.sayName = function(){
		alert(this.name)
	}
}
var obj1 = new Create("wo",19)
var obj2 = new Create("ni",20)
console.log(obj1.sayName == obj2.sayName)//false
//============全局================
function Person(name,age){
	this.name = name
	this.age = age
	this.sayName = fun
}
function fun(){
		alert(this.name)
}
var p1 = new Person("wo",19)
var p2 = new Person("ni",20)
console.log(p1.sayName == p2.sayName)//true

原型对象

//创建函数时，解析器会向函数中添加一个prototype属性，指向一个对象（原型对象）
//函数作为普通函数调用prototype没有任何作用
//函数以构造函数调用时，实例中会有一个__proto__指向原型对象
//原型对象作用：可以将公共内容存放在原型对象中
//当我们访问对象的一个属性时，会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找
function myClass(){}
myClass.prototype.a = 1
var mc = new myClass()
var mc2 = new myClass()
console.log(mc.__proto__ == myClass.prototype)//true
mc.a = 2
console.log(mc.a) //2
console.log(mc2.a)//1

垃圾回收

//当一个对象没有变量或者属性对它进行引用，此时我们永远无法操作该对象，这种对象就是一个垃圾
//JS有自动垃圾回收机制
//我们要做的就是把不再使用的对象设置为null
var obj = new Object()
obj =null

三 数组对象

数组字面量

//数组的存储性能比普通对象好
var arr = new Array()
console.log(typeof arr)//object
//读不存在的所以会返回undefined
//使用字面量创建数组
var arr1 = []
//使用构造函数和字面量创建数组时，都可以添加元素
var arr = new Array(1，2，3)
var arr1 = [1，2，3]
arr=[10]//只有一个元素10
arr1 = new Array(10)//长度为10

forEach

//forEach IE8以上才支持
var arr = [1，2，3]
//第一个参数是正在遍历的元素
//第二个参数是索引
//第三个参数是正在遍历的数组
arr.forEach(function(value,index,obj){
	console.log(a)
}
//像这种由我们创建的，但不由我们调用的称 回调函数
//数组中有几个元素，函数就执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来

slice

//从数组中提取指定元素，不改变原数组，将提取的元素装到一个新数组中返回
var arr = [1,2,3, 4, 5]
var ans = arr.slice(1，3)//左闭右开 索引 1 2
var ans = arr.slice(1)//下标1往后全部
var ans = arr.slice(-3, 4)//负数相当于 负数加上数组长度

splice

//删除数组中的元素并添加元素，会影响原数组，将被删除的元素返回
var arr = [1,2,3, 4, 5]
var ans = arr.splice(1，2)//开始位置的索引 删除的数量
var ans = arr.splice(1,0,"tinajia")//添加到索引1

concat

//连接两个或多个数组，返回新数组，不会对原数组进行修改
var arr1 = [1,2,3, 4, 5]
var arr2 = [1,2,3, 4, 5]
var arr3 = [1,2,3, 4, 5]
var ans = arr1.concat(arr1,arr2,"xin","de")
// 12312345 xin de

join

//将数组转换为一个字符串，不会对原数组产生影响
var arr1 = [1,2,3, 4, 5]
var ans = arr1.join('')//指定连接符号，默认是逗号,

reverse

//逆转数组，会对原数组产生影响
var arr1 = [1,2,3, 4, 5]
arr1.reverse()

sort

//会对原数组产生影响
var arr1 = [1, 2, 3, 4, 5]
//返回大于0的值，元素会交换位置
//返回小于等于0的值，元素不会交换位置
arr1.sort(function(a,b){
	return a-b//a>b 从小到大排
})
console.log(arr1)

call和apply

//call()和applay()都是函数对象的方法，需要通过函数对象来调用
//对函数调用call()和apply()都会调用函数执行
//在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象会成为函数执行时的this
function fun(a,b){
	console.log(a)
	console.log(b)
	console.log(this.name)
}
var obj = {name:"na"}
fun.apply()//三者效果一样
fun.call()
fun()
fun.call(obj)//this指向obj
fun.apply(obj)
//call可以在对象后面传实参 apply需要封装到一个数组中
fun.call(obj,1,2)
fun.apply(obj,[1,2])

arguments

//在调用函数时，解析器会为函数传递两个隐含的参数
//1 函数执行上下文 this
//2 封装实参的对象 arguments,类数组对象，可以通过索引操作数据，可以获取长度
//在调用函数时，传递的实参都会封装到arguments中
//即使不定义形参，也可以通过arguments使用实参
function fun(){
	console.log(arguments.length)//2
	console.log(arguments[0])//hello
	//callee 指向当前函数
	console.log(arguments.callee)//打印出本函数
}
fun("hello",1)

Date

//创建一个当前时间
var d = new Date()
//创建一个指定时间对象
//	月/日/年 时:分:秒
var d2 = new Date("1/12/2019 17:45:00")

//getFullYear()	返回四位数年份
//getMonth()		返回月份 0-11
//getDate()		返回本月中第几日
//getDay()			返回星期0-6
//getHours()		返回小时
//getMinutes()		返回分
//getSeconds()		返回秒
//getTime()		返回时间戳（表示日期的毫秒数） 茨贝格1970年1月1日 0:0:0开始
//计算机底层使用的就是时间戳
//获取当前时间戳
time = Date.now()
console.log(time)

四 包装类

//一般不用，会出现很多错误
//String()把基本数据类型字符串转换为String对象
//Number()把基本数据类型数字转换为Number对象
//Boolean()把基本数据类型布尔值转换为Boolean对象
var num = new Number(3)
var str = new String('he')
var bool = new Boolean(true)
console.log(typeof num)//Object
console.log(typeof str)//Object
console.log(typeof bool)//Object
//可以给对象添加属性
num.hello = "hello"
//对象可以添加方法和属性，但是基本数据类型不能
//当我们对基本数据类型调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后调用对象的属性和方法
//调用完后，再将其转换为基本数据类型

五 字符串

//charAt charCodeAt
var str="hello";
console.log(str.charAt(3));//返回l
console.log(str.charCodeAt(3));//返回l的编码
console.log(str.charAt(6));//undefined
//fromCharCode 根据字符编码获取字符
console.log(String.fromCharCode(73))//H

//concat连接两个或两个以上字符串 用 + 就行
var ans =  str.concat("str1","str2") 

//indexOf lastIndexOf
console.log(str.indexOf("ll",2);//若无 返回-1 从索引2开始
console.log(str.indexOf("o",4);

//slice 截取字符串
console.log(str.slice(1,3));	//左闭右开
console.log(str.slice(1));//从1截取完
console.log(str.slice(-3));//从2截取完
console.log(str.slice(-3，-1));//从2截取到4

//substring 截取字符串
console.log(str.substring(-2,5));//substring遇到负数会转成0
console.log(str.substring(5,-2));//substring会自动转换把小的作为起始位置

//substr 截取字符串 
console.log(str.substr(-2,5));	//第一个参数为负数会加上字符串长度，第二个参数为截取的长度

//split 把字符串分割成数组
var arr='wewew-dad-werg';
var ans = arr.split('-')
var ans1 = arr.split('')//将每个字符都拆分
console.log(ans[0]);//wewew
console.log(ans.length);//3
//replace
var tel="adad-faf";
console.log(tel.replace('-',' '));

//toUpperCase() toLowerCase()

六 正则表达式

正则表达式基础

//var reg = new RegExp("正则表达式","匹配模式")
//i忽略大小写 g全局匹配
var reg = new RegExp('ab','i')
console.log(typeof reg)//Object
//test() 检查一个字符串是否符合正则表达式的规则 true false
var ans = reg.test('abc')//有ab返回 true
var ans = reg.test('bc')//无ab返回 false

//使用字面量创建正则表达式 var reg = /a/i
var reg = /a/i

// | [] 或
reg = /a|b|c/ 	//a或b
reg = /[ab]/	//a或b
reg = /[A-Z]/i	//任意字母，忽略大小写
reg = /[A-z]/	//任意字母

// ^ 除了
reg = /[^ab]/	//判断有没有除了a b以外的字符
reg = /[^0-9]/	//判断有没有除了数字以外的字符
console.log(reg.test('a'))

//量词
reg = /a{3}/
console.log(reg.test('aaab')) //true
reg = /(ab){3}/	//不加()默认只对前面的一个内容起作用
console.log(reg.test('ababab')) //true
reg = /ab{1,3}c/	//b出现一次到三次
console.log(reg.test('abbc')) //true
reg = /ab{3,}c/	//b出现三次及以上
console.log(reg.test('abbbbc')) //true
reg = /ab+c/	//b出现至少一个
console.log(reg.test('abbbbc')) //true
reg = /ab*c/	//b出现零个或多个
console.log(reg.test('ac')) //true
reg = /ab?c/	//b出现零个或一个
console.log(reg.test('abc')) //true

//开头 结尾
reg = /^a/	//是否有以a开头
console.log(reg.test('abbbbc')) //true
reg = /a$/	//是否有以a结尾
console.log(reg.test('abbba')) //true
reg = /^a$/	//是否有以a开头结尾，只能有一个a
console.log(reg.test('a')) //true
reg = /^a|a$/	//以a开头或者以a结尾
console.log(reg.test('abb')) //true

//判断手机号的规则
//1 以1开头
//2 第二位3-9任意数字
//3 三位以后任意数字9位
reg = /^1[3-9][0-9]{9}$/
console.log(reg.test('14220055667')) //true

// . 表示匹配任意字符 要检查是否有.得用转义字符\.
reg = /./
console.log(reg.test('adad'))	//true
reg = /\./
console.log(reg.test('a..'))	//true
//而字符串中\表示转义
//console.log('\')	//报错，把后面的单引号给转义了
console.log('\\')	//输出一个\
// 检查\
//虽然有两个\，但是只表示一个\，一个为转义字符
reg = /\\/	
//字符串中虽然两个\\ 但一个是转义字符
console.log(reg.test('b.w\\')) 

/*
\w 任意字母、数字、_ [A-z0-9z_]
\W 除了字母、数字、_ [^A-z0-9z_]
\d 任意数字 [0-9]
\D 除了数字 [^0-9]
\s 空格
\S 除了空格
\b 单词边界 
\B 除了单词边界
*/
// \b 单词边界 某个字符串以child开始或结束
reg = /\bchild\b/
console.log(reg.test('my child')) //true
console.log(reg.test('mychild')) //false

//去除字符串开头结尾的空格
var str = '    hel lo    '
str = str.replace(/^\s*|\s*$/g, '')

字符串与正则表达式

var str = '1a2b3c4d5e'
//split
var ans = str.split(/[A-z]/)//根据任意字母拆分
//search
var ans = str.search('b3')//返回3 索引 如果没有找到则返回-1
var ans = str.search(/a[1bc]c/)
//match 从一个字符串中将符合条件的内容提取出来

//默认只会找到第一个符合要求的内容，可以将正则表达式设置为全局匹配模式，就会匹配到所有内容
//可以为一个正则表达式设置多个匹配模式，且顺序无所谓
//match会将匹配到的内容封装到一个数组中，即使只有一个查询结果
var ans = str.match(/[A-z]/g)
var ans = str.match(/[a-z]/ig)

//replace() 默认只替换第一个
var ans = str.replace(/[a-z]/ig,'!!!')
//全局替换所有匹配到的