Github: https://github.com/SHENLing0628/JavaScriptStudy
欢迎star,转载请标注来源
1. Object类型
1.1 创建方法
// 1. new一个Object对象,使用Object构造函数
var person = new Object()
person.name = "Cindy"
person.age = 27
// 2. 对象字面量法 - 用JSON对象的方式直接创建
var person = {
name: "Cindy",
age: 27
}
// 对象字面量法补充
var person = {} // 和 new Object() 相同
1.2 对象访问方法
person.name // 输出:Cindy
person["name"] // 输出:Cindy
// 方括号传入string的方法便于传入变量,动态获取对象中不同值
2. Array类型
ECMAScript的Array特点:每个位置都可以存入不同类型的数据,例如第一个位置是string,第二个是Object
2.1 创建方法
// 1. new一个Array对象,使用Array构造函数
var colors = new Array()
var colors = new Array(20)
var colors = new Array('red', 'blue', 'yellow')
var colors = Array("Gray") // 可以不用new
// 2. 数组字面量法
var colors = []
var colors = ['red', 'blue', 'yellow']
2.2 对象访问方法
// Array对象包含length属性
alert(colors.length) // 3
// Array对象可用下角标引用
colors[0] = "gray"
alert(colors[0]) // 输出:“gray”
2.3 检测数组 Array.isArray()
// 1. instanceof
alert(color instanceof Array) // true
// 2. Array.isArray()
alert(Array.isArray(colors)) // true
// 备注:instanceof的问题:假定仅存在一个全局执行环境,当网页存在多个框架时,则有多个全局执行环境,instanceof就不对
2.4 转换方法 - toLocaleString、toString、valueOf
// 每个对象都包含toLocaleString()、toString()、valueOf()方法
// toString() - 返回数组中每个字符串拼接而成的,以逗号分隔的字符串
// valueOf() - 返回数组本身
var colors = ['red', 'blue', 'yellow']
alert(colors.toString()) // red, blue, yellow
alert(colors.valueOf()) // red, blue, yellow
alert(colors) // red, blue, yellow
2.5 栈方法 - push、pop
用push和pop方法把数组模拟为栈
Push() - 在末尾推入数据项,return入栈后的数组长度
pop() - 获取当前栈的最后一项,并从栈中推出这一项
注意:两个方法作用的位置都是栈的顶部,也就是数组的最后一个位置
var colors = []
// 1. 推入两项
var count = colors.push('red', 'blue')
alert(count) // 2
// 2. 再在末尾推入1项
count = colors.push('yellow')
alert(count) // 3
alert(colors) // red, blue, yellow
// 3. 获得最后一项,并从栈中推出该项
var item = colors.pop()
alert(item) // yellow
alert(colors.length) // 2
2.6 队列方法 - push、shift
用push和shift方法把数组模拟为队列
Push()- 在队列末尾推入数据项,return入队列后的数组长度
shift() - 从数组前端取得项,并将数组长度减1(移除该数据)
用unshift和pop方法将数组模拟为队列:
- Unshift() - 在数组前端添加任意个数据项,并返回新数组长度
- pop() - 获取当前栈的最后一项,并从栈中推出这一项
var colors = []
// 1. 推入两项
var count = colors.push('red', 'blue')
alert(count) // 2
// 2. 再在末尾推入1项
count = colors.push('yellow')
alert(count) // 3
alert(colors) // red, blue, yellow
// 3. 获得队列最前面的一项,并从队列中推出该项
var item = colors.shift()
alert(item) // red
alert(colors.length) // 2
// 4. 在数组前端推入两项
count = colors.unshift('yellow', 'gray')
alert(count) // 4
alert(colors) // yellow, gray, red, blue
// 5. 在数组最后推出一项
item = colors.pop()
alert(item) // green
alert(colors.length) // 3
2.7 重排序方法 - reverse、sort
// 1. reverse - 反转数组顺序
var values = [1, 2, 3, 4, 5]
values.reverse() // 5, 4, 3, 2, 1
// 2. sort - 按照字符串升序排序(即使数组内为Number,也是按照字符串排序)
var values = [0, 1, 5, 10, 15]
values.sort() // 0, 1, 10, 15, 5
// 2.1 按照升序排序 - 先写一个compare方法,然后调用
function compare(value1, value2) {
if (value1 < value2) return -1
else if (value1 > value2) return 1
else return 0
}
values.sort(compare) // 0, 1, 5, 10, 15
// 2.2 通过compare方法实现降序排序
function compare(value1, value2) {
if (value1 < value2) return 1
else if (value1 > value2) return -1
else return 0
}
values.sort(compare) // 15, 10, 5, 1, 0
// 2.3 数值类型比较的简易升序compare方法
function compare(value1, value2) {
return value1 - value2
}
2.8 操作方法 - concat、slice、splice
// 1. concat - 拼接数组
var colors = ['red', 'blue', 'yellow']
var colors2 = colors.concat('green', ['black', 'brown']) // red, blue, yellow, green, black, brown
// 2. slice - 截取部分数组
// 参数1:起始位置
// 参数2: 结束位置(如果不传入该值,则默认结束为止为数组末尾)
// 注意:如果结束位置小于起始位置,则返回空数组
var colors = ['red', 'blue', 'yellow', 'green', 'black']
var colors2 = colors.slice(1) // red, yellow, green, black
var colors3 = colors.slice(1, 2) // blue, yellow
var colors4 = colors.slice(-4, -3) // 效果同slice(1, 2)相同
// 3. splice - 数组删除、插入、替换
// 3.1 删除:传入两个参数:(删除第一项位置, 要删除的项数)
var colors = ['red', 'blue', 'yellow', 'black']
var remove = colors.splice(0, 2)
alert(colors) // yellow, black - 删除原数组:从第0个位置开始,删除2项
alert(remove) // red, blue - 被移除的数组
// 3.2 插入:传入三个参数:(插入起始位置, 0, 要插入的项)
var insert = colors.splice(1, 0, 'green', 'orange')
alert(colors) // yellow, green, orange, black - 插入原数组:从位置1开始,插入两项
alert(insert) // [] - 返回空数组
// 3.3 替换:传入三个参数:(起始位置, 要删除的项数, 要插入的任意数量的项)
var replace = colors.splice(1, 1, 'red', 'purple') // 插入两项,删除一项
alert(colors) // yellow, red, purple, orange, black - 删除与插入:在1的位置,删除1项,插入2项
alert(replace) // red - 返回被删除的一项
2.9 位置方法 - indexOf、lastIndexOf
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]
// 1. indexOf:从前往后查询,找到查询值的位置,返回对应index,反之返回-1
var result1 = numbers.indexOf(4) // 3
var result2 = numbers.indexOf(10) // -1
// 2. lastIndexOf:从后往前查询,找到查询值的位置,返回对应index,反之返回-1
var result3 = numbers.lastIndexOf(4) // 5
// 注意:两者均可传入两个参数:(要查找的数据项, 查找起始的索引值)
var result4 = numbers.indexOf(4, 4) // 5
2.10 迭代方法 - every、filter、forEach、map、some
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]
// 1. every() - 对数组中每一项运行给定函数,如果该函数对每一项都返回true,则返回true
var everyResult = numbers.every(function(item, index, array) {
return item > 2
})
alert(everyResult) // false - 因为传入的每一项不是都返回true,所以结果为false
// 2. some() - 对数组中每一项运行给定函数,如果该函数某一项返回为true,则整体返回true
var someResult = numbers.some(function(item, index, array) {
return item > 2
})
alert(someResult) // true - 传入部分项返回为true,则最终结果为true
// 3. filter() - 对数组中每一项运行给定函数,返回该函数会返回true的项组成的数组
var filterResult = numbers.filter(function(item, index, array) {
return item > 2
})
alert(filterResult) // [3, 4, 5, 4, 3]
// 4. map() - 对数组中每一项运行给定函数,返回每次函数调用的结果组成的数组
var mapResult = numbers.map(function(item, index, array) {
return item * 2
})
alert(mapResult) // [2, 4, 6, 8, 10, 8, 6, 4, 2] - 返回每个数乘以2的结果组成的数组
// 5. forEach() - 对数组中每一项运行给定函数,该方法无返回值
numbers.forEach(function(item, index, array) {
// 执行操作
})
forEach 和 map 的区别:
forEach没有返回值,map会返回新数组
forEach可以修改原数组
forEach执行速度 < map执行速度
every和 some 的区别:
every是每一项执行返回都为true,整体才能返回true
some是只要有一项返回为true,整体就能返回true
2.11 归并方法 - reduce、reduceRight
迭代一个数组中的所有项,最终得到一个返回值
reduce - 从数组第一项开始向后迭代
reduceRight - 从数组最后一项开始向前迭代
// 通过reduce对数组求和
var values = [1, 2, 3, 4, 5]
var sum = values.reduce(function (prev, cur, index, array) {
return prev + cur
})
alert(sum) //15
3. Date类型
推荐momentjs库进行时间日期转换
// 创建一个日期对象,自动获取当前日期
var now = new Date()
// 接收日期表示字符串,转换为相应日期毫秒数
Date.parse("6/13/2008")
// 日期格式化
toDateString() // 以特定实现的格式显示星期几、月、日和年
toTimeString() // 以特定实现的格式显示时、分、秒和时区
toLocaleDateString() // 以特定于地区的格式显示星期几、月、日和年
toLocaleTimeString() // 以特定于地区的格式显示时、分、秒
toUTCString() // 以特定实现的格式显示UTC日期
4. RegExp类型
使用类似Perl语法,创建正则表达式
var expression = / pattern / flag
flag - 表名正则表达式行为:
- g - 全局模式,应用于所有字符串
- i - 不区分大小写
- m - 多行模式,到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项
5. Function类型
函数本身也是引用类型,可以用引用类型的构造函数进行对象创建
// 1. 函数声明 - 常规创建function方法
function sum (num1, num2) {
return num1 + num2
}
// 2. 函数表达式 - 用function构造函数方式创建引用,效果同上方相同
var sum1 = function (num1, num2) {
return num1 + num2
}
// 备注1:指针引用
var sum2 = sum1 // sum1和sum2均指向同一个function内容
// 备注2:用指针解释function没有重载
var add1 = function (num) { return num + 100 }
add1 = function(num) { return num + 200 } //创建第二个函数的时候,实际上覆盖了第一个引用,故没有重载
5.1 函数声明和函数表达式
函数声明与函数表达式:
- 函数声明方法 - 解析器会率先读取函数声明,添加到执行环境中,故调用时,代码可写在函数声明之前
- 函数表达式法 - 解析器无法对函数声明进行提升,率先添加到执行环境,故调用时,必须写在表达式之后
/* 1. 函数声明的调用
* 注:调用方法可写在函数声明前面,因为解析器已经提前将该function添加到执行环境中,随时可以调用
*/
test(1, 2) // 3
function test (val1, val2) {
return val1 + val2
}
/* 2. 函数表达式的调用
* 注:此处的test2是一个引用类型变量,通过var进行声明,调用这个var需要放在初始化之后进行
*/
test2(1, 2) // error
var test2 = function (val1, val2) {
return val1 + val2
}
test2(1, 2) // 3 - 合法
5.2 将function作为值进行传递
因为function本身就是变量,所以function也可以作为参数进行传递
// 1. 将function作为参数传递到另一个function中
function add1(num) {
return num + 1
}
function add2(num2) {
return num2 + 2
}
var result = add2(add1(10)) // 13
// 2. 从函数中返回一个函数
function createCompareFunction(propName) {
return function (obj1, obj2) {
var value1 = obj1[propName]
var value2 = obj2[propName]
if (value1 < value2) return -1
else if (value1 > value2) return 1
else return 0
}
}
var data = [
{ name: 'name1', age: 20 },
{ name: 'name2', age: 28 }
]
data.sort(createCompareFunction('age'))
5.3 函数内部属性 - this、arguments
// 1. arguments - 用callee属性进行解耦调用
// example:阶乘
function fac (num) {
if (num <= 1) return 1
else return num * arguments.callee(num - 1) // 新方法:消除紧密耦合问题,使无论调用函数时写什么名字都能正常完成递归调用
// else return num * fac(num - 1) // 常规方法:必须调用名称同函数名称一致
}
var trueFac = fac // trueFac获得了fac的值,引用、指针
fac = function() { // 覆盖原fac,如果不使用callee方法,则会影响到trueFac内部,变为return num * 0
return 0
}
alert(trueFac(5)) // 120
// 因为原fac中,使用了callee,所以能返回正常的阶乘数据,
// 否则会因为对fac的覆盖,导致trueFac中return num * 0 = 0
alert(fac(5)) // 0
// 2. this - 函数执行的环境对象
window.color = 'red'
var o = { color: 'blue' }
function sayColor () {
alert(this.color)
}
sayColor() // 'red' - 此处this指向全局环境对象window
o.sayColor = sayColor // o中创建属性sayColor
o.sayColor() // 'blue' - o中的sayColor属性调用的this,指向的是对象o,故输出blue
// 备注:sayColor依然是一个指针,无论是内部还是外部指向的是同一个指针变量,只是调用时的this对象是不同的
// 更为优雅的调用方法:5.4节中的call()方法
5.4 函数属性和方法 - length、prototype
- length属性:希望接收的命名参数的个数(不是arguments的个数)
function foo0 () {
return ''
}
function foo1 (num) {
return num
}
function foo2 (num1, num2) {
return num1 + num2
}
foo0.length // 0
foo1.length // 1
foo2.length // 2
-
prototype属性
prototype保存引用类型所有实例方法,包括toString()、valueOf()等
prototype属性不可枚举,故使用for-in无法发现
本处重点介绍三个方法:apply、call、bind
- 每个function都包含两个非继承得到的方法:apply和call
- apply和call的用途:在特定作用域中调用函数,设置函数体内this对象的值
- apply和call的区别:传参方式不一,主要是第二个参数传入内容不同
- bind的用途:创建对象的实例,将需要使用的对象的this绑定到function中
// 1. apply的第二个传参是arguments对象或者数组
function sum(num1, num2) {
return num1+ num2
}
function callSum1 (num1, num2) {
return sum.apply(this, arguments)
}
function callSum2 (num1, num2) {
return sum.apply(this, [num1, num2])
}
callSum1(10, 20) // 30
callSum2(10, 20) // 30
// 2. call方法传递给函数的参数必须逐个列举,而不是传入array
function callSum3 (num1, num2) {
return sum.call(this, num1, num2)
}
callSum3(10, 20) // 30
// 3. call和apply的应用 - 扩大作用域 - 对象无需与方法产生耦合关系
window.color = 'red'
var o ={ color: 'blue' }
function sayColor() {
alert(this.color)
}
sayColor() // red - 直接调用:返回全局对象的this.color
sayColor.call(this) // red - 传入全局对象this,返回this.color
sayColor.call(window) // red - 传入全局对象window,返回window.color
sayColor.call(o) // blue - 传入对象o,返回o.color
/*
* 普通方法:对象与方法之间产生了耦合关系,对sayColor的覆盖重写等改变都会造成影响
* o.sayColor = sayColor
* o.sayColor()
*/
// 4. bind方法 - 创建函数的实例
var objSayColor = sayColor.bind(o) // 让objSayColor的this值就是o.this,而非全局的this
objSayColor() // blue - 全局调用时,objSayColor获取的是o.this
sayColor() // red - - 全局调用时,sayColor获取的是window
// 5. valueOf() - 仅返回函数代码
sayColor.valueOf()
/* 输出结果:
* ƒ sayColor() {
* alert(this.color)
* }
*/
5.5 基本包装类型 - Boolean、Number、String
基本类型值具备一些包装好的方法供基本类型使用:var s2 = s1.substring(2)
引用类型与基本包装类型的主要区别:对象的生存期
- 用new创建的引用类型对象,在执行流离开当前作用域之前一直都保存在内存中,可在运行时添加属性和方法
- 自动创建的基本包装类型对象,只存在于一行代码的执行瞬间,然后立即被销毁,不可在运行时添加属性和方法
// new调用构造函数和直接使用同名的转型函数不一样
var value = '25'
var number = Number(value) // 转型函数
alert(typeof number) // number
var obj = new Number(value) // 构造函数
alert(typeof obj) // object
-
Boolean类型 - 建议不要使用实例化方法(new方法),容易产生混淆
Boolean类型的实例重写了以下几个方法:
valueOf() - 返回基本类型值true/false
toString() - 返回字符串‘true'/'false'
基本类型与引用类型的布尔值的区别:
- typeof操作符对基本类型返回'boolean',对引用类型返回'object'
- 由于Boolean对象是Boolean类型的实例,所以使用instanceof的时候,对象返回true,基本类型返回false
-
Number类型 - 不建议直接实例化使用(new方法)
Number类型重写以下几个方法:
- valueOf() - 返回对象表示的基本类型的数值
- toString() - 返回字符串形式的数值
基本类型与引用类型的Number值的区别:
- typeof操作符对基本类型返回'number',对引用类型返回'object'
- 由于Number对象是Number类型的实例,所以使用instanceof的时候,对象返回true,基本类型返回false
// Number类型提供的其他方法: var num1 = 10 var num2 = 10.005 // 1. toFixed - 按照指定的小数位返回数值的字符串表示,且四舍五入 num1.toFixed(2) // 10.00 num2.toFixed(2) // 10.01 // 2. toExponential - 指数表示法 num1.toExponential(1) // 1.0e+1 // 3. toPrecision - 按照何时的方法返回合适的数值格式 var num3 = 99 num3.toPrecision(1) // 1e+2 num3.toPrecision(2) // 99 num3.toPrevision(3) //99.0
-
String类型
// 1. 使用构造函数创建 var strObj = new Sting('hello world') // 2. length() - 获得字符串长度 var str = 'hello world' alert(str.length) // 11 // 3. 字符方法 // 3.1 charAt() - 以单字符串形式返回给定位置的那个字符 var strVal = 'hello world' alert(strVal.charAt(1)) // e // 3.2 charCodeAt - 以字符编码形式返回给定位置的那个字符 alert(strVal.charCodeAt(1)) // 101 // 3.3 直接使用方括号[]访问给定位置的字符(IE8以前版本不支持) alert(strVal[1]) // e // 4. 字符串操作方法 // 4.1 concat() - 将一个或多个字符串拼接起来,返回拼接得到的新字符串(注:用+号也有相同效果) var str1 = 'hello' var str2 = str1.concat(' world') // hello world var str3 = str1.concat(' world', '!') // hello world! var str4 = str1 + ' world' + '!' // hello world! // 4.2 slice() - 截取从起始位置到结束位置的字符串 var str5 = strVal.slice(3) // lo world - 若未指定结束位,则默认为最后一位 var str6 = strVal.slice(3, 7) // lo w - 指定结束位时,返回字符串不包含最后一位 // 4.3 substr() - 截取从起始位置到结束位置的字符串 var str7 = strVal.substr(3) // lo world - 若未指定结束位,则默认为最后一位 var str8 = strVal.substr(3, 7) // lo worl - 指定结束位时,返回字符串包含最后一位的下一位 // 4.4 substring() - 截取从起始位置到结束位置的字符串 var str9 = strVal.substring(3) // lo world - 若未指定结束位,则默认为最后一位 var str10 = strVal.substring(3, 7) // lo w - 指定结束位时,返回字符串不包含最后一位 // 5. 字符串位置方法 var str11 = strVal.indexOf('o') // 4 - 从第一位开始往后查询 var str12 = strVal.lastIndexOf('o') // 7 - 从最后一位开始往前查询 var str12 = strVal.indexOf('o', 6) // 7 - 从第6位开始往后查询 var str13 = strVal.lastIndexOf('o', 6) // 4 - 从第6位开始往前查询 // 6. trim() - 删除前后空格 var str14 = ' hello ' var str15 = str14.trim() // 'hello' // 7. 大小写转换 var str16 = strVal.toUpperCase() // HELLO WORLD var str17 = str16.toLowerCase() // hello world // 8. 字符串模式匹配方法 - match()/search()/replace() - 类似调用RegExp的exec()方法,用于匹配正则表达式或RegExp对象 var text = 'cat, bat, sat, fat' var pattern = /.at/ var matches = text.match(pattern) // 返回一个数组 alert(matches.index) // 0 alert(matches[0]) // 'cat' alert(pattern.lastIndex) // 0 var pos = text.search(/at/) // 1 - at在text中第一次出现的位置 var rep = text.replace('at', 'ond') // cond, bat, sat, fat - 替换字符串 var rep2 = text.replace(/at/g, 'ond') // cond, bond, sond, fond var sp = text.split(', ') // ['cat', 'bat', 'sat', 'fat'] - 按符号分割 // 9. localeCompare() - 比较两个字符串 /* 比较规则: * a. 如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(-1) * b. 如果字符串等于字符串参数,返回0 * c. 如如果字符串在字母表中应该排在字符串参数之后,则返回一个正数(1) */ var stringValue = 'yellow' stringValue.localeCompare('bricke') // 1 stringValue.localeCompare('yellow') // 0 stringValue.localeCompare('zooooo') // -1 // 10. fromCharCode() - 接收一个或多个字符串编码,并将他们转换成字符串 String.fromCharCode(104, 101, 108, 108, 111) // hello
5.6 单体内置对象
有ECMAScript提供的,不依赖于宿主环境 的对象。开发人员无需显式的实例化内置对象
例如:Object、Array、String、Global、Math
下面强调介绍Global和Math对象
-
Global对象
常见方法:
isNaN()
、isFinite()
、parseInt()
、parseFloat()
等-
其他方法:
-
encodeURI()
- 对整个URI进行编码,一边发送给浏览器,用特殊的UTF-8编码替换所有无效的字符,从而让浏览器可以接受和理解;但不会对本身属于URI的特殊字符进行编码 -
encodeURIComponent()
- 对URL种某一段进行编码,对其发现的任何非标准字符进行编码 decodeURI()
deCodeURLComponent()
-
-
特别方法:
eval()
// 下面语句等同于: alert('hi') eval("alert('hi')")
- eval将传入参数进行解析,解析为代码块后执行
- eval中创建的任何变量或函数都不会被提升作用域,外部无法访问到eval内部创建的任何变量或函数
- 严格模式下,为eval赋值也会导致错误
-
Global对象属性:
Undefined, Nan, Infinity, Object, Array, Function, Boolean, String, Number, Date, RegExp, Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError
- ECMASctipt 5 明确禁止给undefined、NaN和Infinity赋值
-
window对象
WEB浏览器将全局对象作为window对象的一部分加以实现;
在全局作用域中声明的所有变量和函数,都是window对象的属性
-
-
Math对象 - 辅助完成计算
-
Math对象的属性
Math属性 说明 Math.E 自然对数的底数,常量e的值 Math.LN10 10的自然对数 Math.LN2 2的自然对数 Math.LOG2E 以2为底的e的对数 Math.LOG10E 以10为底的e的对数 Math.PI π的值 Math.SORT1_2 1/2的平方根(2的平方根的倒数) Math.SORT2 2的平方根 -
min()
和max()
var values = [1, 2, 3, 4, 5, 6] var max = Math.max.apply(Math, values) // 6 - 最大值 var min = Math.min.apply(Math, values) // 1 - 最小值 // 另一种方法 max = Math.max(1, 2, 3, 4, 5, 6) // 6 - 最大值 min = Math.min(1, 2, 3, 4, 5, 6) // 1 - 最小值 // 另一种方法 - 解构values max = Math.max(...values) // 6 - 最大值 min = Math.min(...values) // 1 - 最小值
-
舍入方法 -
ceil()
、round()
、floor()
-
Math.ceil()
- 向上舍入:向上舍入为最接近的整数 -
Math.round()
- 标准舍入:将数值四舍五入为最接近的整数 -
Math.floor()
- 向下舍入:将数值向下舍入为最接近的整数
Math.ceil(25.9) // 26 Math.ceil(25.5) // 26 Math.ceil(25.1) // 26 Math.round(25.9) // 26 Math.round(25.5) // 26 Math.round(25.1) // 25 Math.floor(25.9) // 25 Math.floor(25.5) // 25 Math.floor(25.1) // 25
-
random()
方法 - 获得返回大于0小于1的随机数
-
Github: https://github.com/SHENLing0628/JavaScriptStudy
欢迎star,转载请标注来源