第五章引用类型（js高级程序设计）

作者: 简默丶XS | 来源:发表于2019-01-25 16:09 被阅读0次

Object类型

创建对象的方法

字面量 {} =>可以同时添加很多对象属性
new Object()

访问对象属性

object.key
object["key"] =>支持["xx yy"] ，变量支持 obecjt[某个变量字符串]

Array类型

数组的构造方法

new Array() new Array(20) new Array('a','b','c')
字面量 [] [1,2,3]

.length属性

可以减少扩展数据的长度 .length=12
可以往数组最后追加元素 object[object.length]='新元素'

检测数组

a instanceof Array a的原型链上有没有Array（弊端，多个全局环境Array定位不知，容易出问题）
a.isArray(value)

转换方法，数组转换字符串

toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串
toString() 数组的字符串表现形式（常用：可以将数组编程,隔开的字符串）
valueOf() 数字表现形式，没啥用，还那样
.join('|') 全能，可以将数组转换为任意符号分割的字符串

栈方法（后进先出）

.push() 数组尾部追加元素 a.push('a','b') 返回值是数组的当前长度
.pop() 数组尾部删除元素 a.pop() 返回值是被删除的元素

队列方法（先进先出）

.unshift() 数组的头部追加元素 a.unshift('a','b') 返回值是数组的当前长度
.shift() 数组的头部删除元素 a.shift() 返回值是被删除的元素

重排序方法

.reverse() 反转数组
.sort() 按照升序排列数组元素（原理：先调用toString（）转型方法，然后再比较排序）
所以再使用sort时候需要利用第一个参数比较函数，比较函数接受两个参数，如果第一个参数位于第二个参数之前则返回一个负数，两个数相等返回0，第一个参数位于第二个参数之后返回一个正数。

以下是一个升序代码：
colors.sort((a,b)=>{
            if(a>b){
                return -1
            }else if(a<b){
                return 1
            }else{
                return 0
            }
        })

如果sort只是给数值排序的话，可以使用以下简写方法

colors.sort(function(value1,value2){
            return value1 - value2
        })

reverse 和 sort 的返回值都是排序后的数组，当然原数组也被改变了

操作方法

concat 用于合并数组，得到新数组，不会改变原数组

var list = ['a','b','c']
const newList = list.concat('d','e')
console.log(list)
console.log(newList)

concat

slice(a,b)从下标a截取到下标b，得到新数组，不会改变原数组

var list = ['a','b','c','d','e']
const newList = list.slice(1)
const newList2 = list.slice(1,4)
console.log(newList)
console.log(newList2)

slice

splice 数组中删除，数组中插入，数组中替换

// splic删除元素
        var list = ['a','b','c','d','e','f','g']
        const newlist = list.splice(0,2)
        console.log(list)
        console.log(newlist)

splice删除

// splic插入元素
        var list = ['a','b','c','d','e','f','g']
        const newlist = list.splice(1,0,'王','后')
        console.log(list)
        console.log(newlist)

splice插入

// splice替换元素
        var list = ['a','b','c','d','e','f','g']
        const newlist = list.splice(1,3,'王','后')//bcd消失
        console.log(list)
        console.log(newlist)

splice替换

位置方法

indexOf和lastIndexOf都会返回查找元素的位置，找到返回位置下标，找不到返回-1，last是反向查找

        var list = [1,'2','a',1,'b']
        console.log(list.indexOf(1))
        console.log(list.indexOf('1'))
        //从下标2开始找1
        console.log(list.indexOf(1,2))
        console.log(list.lastIndexOf(1))
        console.log(list.lastIndexOf('1'))

查找

迭代方法，遍历方法

every,some 测试数组的元素是否都通过了指定函数的测试，every需要每项都通过返回true，some只需要一项通过返回true

        var arr = [1, 12, 32, 2, 3, 44, 120, 3, 5];
        
        var res1 = arr.every(function(item, index ,array){
            //有一项不满足条件,就会终止循环
            console.log(item)
            console.log(index)
            console.log(array)
            return item > 20;
        });
        console.log(res1); // false
        
        var res2 = arr.some(function(item, index ,array){
            //有一项满足了条件,就终止循环
            return item > 20;
        });
        console.log(res2); // true

every和some

filter 返回符合条件组成的新数组

        var arr = [1, 12, 32, 2, 3, 44, 120, 3, 5];
        
        var res1 = arr.filter(function(item, index, array){
            return item > 20
        })
        
        console.log(res1)

filter

map 也是返回新数组，不同的是，如果是逻辑判断：返回的是布尔值组成的数据；如果是运算表达式，就是计算后的结果

        var arr = [1, 12, 32, 2, 3, 44, 120, 3, 5];
        
        var res4 = arr.map(function(item, index, array){
          return item > 20;
        });
        console.log(res4); // false,false,true,false,false,true,true,false,false
        
        var res5 = arr.map(function(item, index, array){
          return item * 2;
        });
        console.log(res5); // 2,24,64,4,6,88,240,6,10

foreach() 就是遍历，没返回值

        var arr = [1, 12, 32, 2, 3, 44, 120, 3, 5];
        
        var res7 = arr.forEach(function(item, index, array){
            //执行你想要的操作
            console.log(item)
        });
        console.log(res7); // undefined

归并方法

reduce，ruduceRight 常用于计算数组的合，回调中的两个参数分别是之前元素合当前遍历的元素。ruduceRight是倒着计算

        var arr = [1, 3, 2, 2, 3, 44, 120, 3, 5];
        
        var res6 = arr.reduce(function(prev, cur){
            //第一次prev是4,然后是6,然后是8...
            return prev+ cur;
        });
        console.log(res6); //183 即为合

Date类型

new Date() 默认返回当前时间的时间对象，可以传入毫秒数指定时间，也可以传入parse('May 25, 2004')简化，如例1.也可以用UTC(2005,4,5,12,33,33)[注意：其中4代表月份，是从0开始，也就是说4其实是5月]，如例2
当你直接再Date（）中写入数值时，会根据本地时间创建时间对象，如例3

例1：
var someDate = new Date(Date.parse("2019-12-2 12:24"));
例2：
// GMT 时间 2005 年 5 月 5 日下午 5:55:55 
var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));
例3：
// 本地时间 2005 年 5 月 5 日下午 5:55:55 
var allFives = new Date(2005, 4, 5, 17, 55, 55);

data.parse

Data.now()方法，返回表示调用这个方法时的日期和时间的毫秒数
计算一段代码运行所需要时间：

//取得开始时间
var start = Date.now(); 
//调用函数
doSomething(); 
//取得停止时间
var stop = Date.now(), 
 result = stop – start;

*时间的比较：时间对象在进行比较时，会先调用valueOf（）转换成毫秒数比较，所以日期靠后的毫秒数越大，值越大

        var time = new Date()
        setTimeout(()=>{
            var time2 = new Date()
            alert(time2 > time) //true
        },3000)

日期格式化

Date 类型还有一些专门用于将日期格式化为字符串的方法

toDateString()——以特定于实现的格式显示星期几、月、日和年；【Tue Jan 29 2019】
toTimeString()——以特定于实现的格式显示时、分、秒和时区；【11:41:58 GMT+0800 (中国标准时间)】
toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年；【2019/1/29】
toLocaleTimeString()——以特定于实现的格式显示时、分、秒；【上午11:41:58】
toUTCString()——以特定于实现的格式完整的 UTC 日期。【Tue, 29 Jan 2019 03:41:58 GMT】

日期时间组件方法

getTime() 返回表示日期的毫秒数；与valueOf()方法返回的值相同
setTime(毫秒) 以毫秒数设置日期，会改变整个日期
getFullYear() 取得4位数的年份（如2007而非仅07）
getUTCFullYear() 返回UTC日期的4位数年份
setFullYear(年) 设置日期的年份。传入的年份值必须是4位数字（如2007而非仅07）
setUTCFullYear(年) 设置UTC日期的年份。传入的年份值必须是4位数字（如2007而非仅07）
getMonth() 返回日期中的月份，其中0表示一月，11表示十二月
getUTCMonth() 返回UTC日期中的月份，其中0表示一月，11表示十二月
setMonth(月) 设置日期的月份。传入的月份值必须大于0，超过11则增加年份
setUTCMonth(月) 设置UTC日期的月份。传入的月份值必须大于0，超过11则增加年份
getDate() 返回日期月份中的天数（1到31）
getUTCDate() 返回UTC日期月份中的天数（1到31）
setDate(日) 设置日期月份中的天数。如果传入的值超过了该月中应有的天数，则增加月份
setUTCDate(日) 设置UTC日期月份中的天数。如果传入的值超过了该月中应有的天数，则增加月份
getDay() 返回日期中星期的星期几（其中0表示星期日，6表示星期六）
getUTCDay() 返回UTC日期中星期的星期几（其中0表示星期日，6表示星期六）
getHours() 返回日期中的小时数（0到23）
getUTCHours() 返回UTC日期中的小时数（0到23）
setHours(时) 设置日期中的小时数。传入的值超过了23则增加月份中的天数
setUTCHours(时) 设置UTC日期中的小时数。传入的值超过了23则增加月份中的天数
getMinutes() 返回日期中的分钟数（0到59）
getUTCMinutes() 返回UTC日期中的分钟数（0到59）
setMinutes(分) 设置日期中的分钟数。传入的值超过59则增加小时数
setUTCMinutes(分) 设置UTC日期中的分钟数。传入的值超过59则增加小时数
getSeconds() 返回日期中的秒数（0到59）
getUTCSeconds() 返回UTC日期中的秒数（0到59）
setSeconds(秒) 设置日期中的秒数。传入的值超过了59会增加分钟数
setUTCSeconds(秒) 设置UTC日期中的秒数。传入的值超过了59会增加分钟数
getMilliseconds() 返回日期中的毫秒数
getUTCMilliseconds() 返回UTC日期中的毫秒数
setMilliseconds(毫秒) 设置日期中的毫秒数
setUTCMilliseconds(毫秒) 设置UTC日期中的毫秒数
getTimezoneOffset() 返回本地时间与UTC时间相差的分钟数。例如，美国东部标准时间返回300。在某
地进入夏令时的情况下，这个值会有所变化

Function类型

函数是对象，每个函数都是Function类型的实例
普通创建函数：

function sum (num1, num2) { 
 return num1 + num2; 
} ;

var sum = function(num1, num2){ 
 return num1 + num2; 
};

构造器创建函数：

注：除了最后一个属性是函数体，其他都是函数的参数
var sum =new Function("num1" , "num2" , "return num1+num2")

函数既然是对象，那么他就能有多个引用

function sum (num1, num2) { 
 return num1 + num2; 
} ;
const sum2 = sum；
sum = null；// 断绝关系
sum2（1，2）//3 不影响

没有重载
因为js函数是对象，函数名是对象的引用，当函数名被覆盖了，引用也随之被覆盖，所以没有重载这一概念

function sum1(){
  alert(1)
}
sum1=function(){ //sum1的指向被修改，故弹窗2
  alert(2)
}

函数声明与函数表达式
函数声明有变量提升，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）。至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。

函数式声明，正常运行
函数表达式报错！
函数内部属性
arguments 参数
arguments.callee() 函数本身
arguments.callee().caller() 函数的调用者
this：函数执行作用域
正常执行sum函数：sum()
sum.apply(this,[a,b]) 在this作用域中执行sum函数
sum.call(this,a,b)
bind()会创建新的作用域实例

bind的用法

基本包装类型

为什么基本类型（例如string）能像对象一样调用substring（）方法？

程序在执行到字符串那一行时，会执行以下操作：

创建String类型的一个实例
在实例上调用指定的方法
销毁这个实例

string包装

布尔类型一样。布尔类型调用toString()会返回字符串表示
number类型
number.toFixed(2) 四舍五入保留两位小数
number.toExponential() 科学记数法表示
number.toPrecision() 智能表示
ps：Math.floor(15.778676 * 100) / 100 直接舍到小数点后两位
String类型的方法
str.length 注意没有(),字符串长度
str.charAt() 指定下标的字符
str.concat('pingjie'，'zufuchuan') 拼接字符串

image.png

slice，substring，substr都不会改变原字符串
slice(a,b) 截取从a到b（如果是负数倒着数）
substring(a,b) 截取从a到b（如果是负数返回全部）
substr(a,n) 从a开始截取n个

indexOf('o') 返回o首次出现的位置
indexOf('o',6) 从下标6开始找o的位置
lastIndexOf('o',6) 反向操作

trim() 去掉开头和末尾的空格
toUpperCase() 转大写
toLowerCase() 转小写

match() 正则查找方法，传入正则表达式，或者RegExp对象
search() 正则查找方法

replace(’a‘,'b') 替换字符串，将第一次出现的a替换成b
replace(/a/g,'b') 支持正则，将所有的a替换成b

str.split(',') 将字符串分割成数组
array.join('|') 将数组组成字符串

a.localeCompare(b) 比较a字符串和b字符串出现在字母表的位置，返回值为1 0 -1
fromCharCode(104，101) 将编码值转换为字符串，charCodeAt()的方向操作

单体内置对象

global对象

encodeURI()、encodeURIComponent()、decodeURI()和 decode-URIComponent()：可以对url进行编码反码
eval("") 整个 ECMAScript 语言中最强大的一个方法，eval能够将参数字符串作为代码执行

eval("alert(1)") 《==等于==》 alert(1)

eval注意点

web浏览器的global对象都挂在window下

Math对象
为保存数学公式和信息提供了一个公共位置

Math的属性说明

max() min()

一组数中的最大值最小值

利用max求数组中的最大值

舍入取整
Math.ceil() 向上取整
Math.round() 四舍五入
Math.floor() 向下取整

舍入取整
random()方法
Math.random() 返回0~1之间随机小数 0.2312812312
Math.floor(Math.random()10+1) 利用取整获得1-10之间的随机数
Math.floor(Math.random()10) 获得0-10之间的随机数
Math.floor(Math.random()*100) 获得0-100之间的随机数

获得数字之间的一个随机数方法

Math的其他方法

第五章引用类型（js高级程序设计）

Object类型

Array类型

Date类型

Function类型

基本包装类型

单体内置对象

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Javascript

第五章 引用类型（js高级程序设计）

Object类型

Array类型

Date类型

Function类型

基本包装类型

单体内置对象

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Javascript

第五章引用类型（js高级程序设计）