内置对象:数组对象方法
1.连接数组arr.concat(数组)
//声明数组
let arr = [10,20,30]
//(1) arr.concat(数组) : 把两个数组连接成一个数组
//应用场景: 一般用于长列表(下一页),不断往后面拼接数组
let newArr = arr.concat([40,50])
console.log(newArr)//[10,20,30,40,50]
2.翻转数组arr.reverse()
let arr = [10,20,30]
//(2) arr.reverse() : 翻转数组
//应用场景: 价格从低到高 切换成 从高到低, 只需要翻转数组即可
arr.reverse()
console.log( arr )//[30,20,10]
3.拼接arr.join(‘分隔符’)
//(3) arr.join('分隔符') : 把数组每一个元素拼接成字符串
let arr1 = [80,90,55,60]
//应用场景 : 有些歌曲是多个人合唱,服务器会给我们一个数组。 这个时候就需要将数组元素通过join拼接起来然后再页面显示
let str = arr1.join('&')
console.log( str )//80&90&55&60
4.排序arr.sort(function(a,b){return a-b // return a-b //从小到大 //return b-a //从大到小})
//(4) arr.sort( function(a,b){return a-b} ) : 排序
let arr = [10,30,2]
arr.sort( function(a,b){
// return a-b //从小到大
return b-a //从大到小
} )
console.log(arr)//[30,10,2]
字符串对象
** 1. 字符串类似于数组,也有长度和下标**
let str='我要去曦度看武'
//1. 字符串类似于数组,也有长度和下标
console.log( str.length )//7
console.log( str[5] )//看
2. str.indexOf(‘字符串’) 获取 ‘字符串’ 在str中的首字母下标 如果字符串存在则返回首字母下标, 如果字符串不存在则返回固定值 -1 应用场景: 一般用户判断 str中是否有某个字符串 如果没有则返回-1,不是-1说明有
let str='我要去曦度武'
let index1=str.indexOf('度武')//4
let index1=str.indexOf('去武')//-1
3. str.split(‘分隔符’) 用分隔符切割字符串,得到切割之后的数组 应用场景 : 一般用户解析 网址
let url = 'http://www.baidu.com?name=张三&age=20'
console.log( url.split('|') )//['http://www.baidu.com?name=张三&age=20']
console.log( url.split('?') )//['http://www.baidu.com', 'name=张三&age=20']
console.log( url.split('=') )//['http://www.baidu.com?name', '张三&age', '20']
**4. str.substr(起始下标,截取长度) 截取字符串 应用场景 : 一般后台返回的数据 不会和前端完全匹配。 有时候需要自己截取一部分 例如: 商品价格后台返回 :价格58元 但是前端只需要显示58元,就需要截取 **
let str='我要去曦度看武剑仙降临'
console.log( str.substr(2,5) )//从2下标开始,往后截取5个字 //曦度看武剑仙
5.大小写转换 (中文没有大小写) 应用场景: 字母验证码不区分大小写 (一般无论你输入什么,都会转成大写或小写保持格式统一)
console.log('dsSFJSGDJHsdfs'.toLocaleLowerCase() )//小写 dssfjsgdjhsdfs
console.log('dsSFJSGDJHsdfs'.toLocaleUpperCase() )//大写 DSSFJSGDJHSDFS
原型对象:
一.构造函数
1.工厂函数(了解) : 用于创建对象的函数
2.构造函数 : 使用new调用一个函数
构造函数作用与工厂函数一致,都是用来创建对象的。但是代码更加简洁。
3.构造函数new工作原理
(1)创建空对象
(2)this指向这个对象
(3)对象赋值
(4)返回这个对象
4.构造函数new在使用时需要注意的地方
4.1 构造函数首字母一般大写, 为了提醒调用者不要忘记new关键字
4.2 如果在构造函数内部 手动return
return 值类型 : 无效,还是返回new创建的对象
return 引用类型 : 有效,会覆盖new创建的对象
function Person(name,age,sex){
//(1)创建空对象 {}
//(2)this指向这个对象 this = {}
//(3)对象赋值
this.name = name
this.age = age
this.sex = sex
//(4)返回这个对象 return this
}
let p1 = new Person('嘿嘿嘿',23,'男')
console.log(p1)//{name:'嘿嘿嘿',age:23,sex:'男'}
二.原型函数
(1)构造函数内部方法: 浪费内存资源 2.使用全局函数解决内存浪费3.使用对象 : 解决内存浪费 + 变量污染
// function Person(name,age){
// this.name = name
// this.age = age
// this.eat = function(){
// console.log('eat');
// }
// }
// let p1 = new Person('张三',18)
// let p2 = new Person('李四',20)
// console.log( p1,p2)
/* 思考: p1和p2都有eat方法,而是函数体相同。但是他们是同一个函数吗?
不是同一个: 因为每一次调用构造函数, 内部都会执行一次function,就会在堆中开辟一个新的空间。虽然代码是一样的,但是地址不同。 就会导致每调用一次构造函数,多出一个函数堆空间。导致内存资源浪费
*/
// console.log( p1.eat == p2.eat )//false
/* 2.使用全局函数解决内存浪费
导致新的问题: 全局变量污染
*/
// let eat = function() {
// console.log("吃东西")
// }
// let learn = function() {
// console.log("学习")
// }
// function Person(name, age) {
// this.name = name
// this.age = age
// this.eat = eat
// this.learn = learn
// }
// let p1 = new Person("张三", 18)
// let p2 = new Person("李四", 20)
// console.log(p1, p2)
/* 思考题:p1的eat和p2是不是同一个
答案:是的 因为构造函数内部并没有重新function创建一个函数,而是拷贝eat的地址赋值。 无论你调用构造函数多少次,都是拷贝eat的地址
*/
// console.log( p1.eat == p2.eat )//true
/* 3.使用对象 : 解决内存浪费 + 变量污染 */
let obj = {
eat: function() {
console.log("吃东西")
},
learn: function() {
console.log("学习")
}
}
function Person(name, age) {
this.name = name
this.age = age
this.eat = obj.eat
this.learn = obj.learn
}
let p1 = new Person("张三", 18)
let p2 = new Person("李四", 20)
console.log(p1, p2)
三.原型对象
** 原型继承 :把父对象 作为子对象构造函数的原型
1.原型对象是什么? : 任何函数在声明的时候,系统会自动帮你创建一个对象,称之为原型对象
2.原型对象作用? : 解决 内存浪费 + 变量污染
3.原型对象相关三个属性 : 描述 构造函数、原型对象、实例对象三者关系
(1)prototype : 属于构造函数, 指向原型对象
(2)proto : 属于实例对象,指向原型对象, proto : 属于实例对象的,指向原型对象
注意: 这个属性不是web标准,很多浏览器不会显示的。 这个属性在开发中不能使用,只能用于学习研究
(3) constructor : 属于原型对象,指向构造函数
**
/*
1.原型对象是什么? : 任何函数在声明的时候,系统会自动帮你创建一个对象,称之为原型对象
2.原型对象作用? : 解决 内存浪费 + 变量污染
3.原型对象相关三个属性
*/
//构造函数
function Person(name, age) {
this.name = name
this.age = age
}
//原型对象
console.log(Person.prototype)
Person.prototype = {
eat: function() {
console.log("吃东西")
},
learn: function() {
console.log("学习")
}
}
//实例对象 : 用new调用构造函数,返回的那个对象(new创建的那个对象)
let p1 = new Person('张三',