网站前端_JavaScript.0008.JavaScript对象数组

对象简介:

说明: 类/类型是一种数据结构,用于将数据和功能组织在一起,虽然Js是一种面向对象的语言,却不具备传统面向对象那样可以自定义类结构

对象相关:

说明: Object实例虽然不具备多少功能但对于应用程序中的存储和传输数据而言,确实是非常理想的选择

// 创建对象
//          - 第一种方式
var newObj = new Object()
//          - 第二种方式
var newObj = new Object
//          - 第三种方式
var newObj = {
    name: "李满满",
    // 对象属性支持引号括住
    ‘age‘: 25,
    "sex": ‘男‘
}
// 添加属性
//         - 第一种方式
newObj.name = "刘珍珍"
//         - 第二种方式
newObj[‘age‘] = 24
// 读取属性
//         - 第一种方式
console.log(newObj.name)
//         - 第二种方式
console.log(newObj[‘age‘])
// 遍历属性
for(key in newObj){
    console.log(key, ‘->‘, newObj[key])
}
// 对象方法 
//         - 第一种方式
var newObj = {
    ‘toRun‘: function (){
        return ‘running...‘
    }
}
console.log(newObj.toRun())
// 删除属性
delete newObj.toRun

function userShow(userInfo){
    // 可以传递userInfo对象进来对其属性操作
    for(key in userInfo){
        console.log(key, ‘->‘, userInfo[key])
    }
}
userInfo = {‘userName‘: "李满满", ‘age‘: 25}
userShow(userInfo)

数组相关:

说明: Js中的数组每个元素可以保存任何类型,而且大小是可以调整的,但是数组最多包含 4294967295 个元素,超出即会发生异常

// 创建数组(可以省略new)
//          - 第一种方式
var newArr = new Array()
//          - 第二种方式
var newArr = new Array(10)
//          - 第三种方式
var newArr = new Array(‘李满满‘, 25, ‘男‘)
//          - 第四种方式
var newArr = [‘李满满‘, 25, ‘男‘]
// 获取数组长度
var arrLen = newArr.length
console.log(arrLen)
// 数组元素赋值
newArr[0] = ‘刘珍珍‘
newArr[newArr.length] = ‘XXOO‘
console.log(newArr)
// 稍微复杂数组
var newArr = [
    {
        name: ‘李满满‘,
        age: 25,
        sex: ‘男‘
    },
    [‘李满满‘, 25, ‘男‘],
    ‘25‘,
    ‘男‘
]

说明: 对象和数组都具有toLocalString()/toString()/valueOf(),其中toString()和valueOf()无论重写了谁,都会返回相同的值

var userArr = [‘李满满‘, 25, ‘男‘]
// 会隐式调用toString()
alert(userArr)
console.log(
    // 不会调用toString()
    userArr,
    // 和valueOf()返回一致
    userArr.toString(),
    // 和toString()返回一致
    userArr.toLocaleString()
)
// 使用join()方法,则可以使用不同的分割符来构建字符串
console.log(userArr.join(‘ | ‘))

说明: 数组可以像栈一样操作,栈是一种数据结构(后进先出),也就是说最新添加的元素最早被移除,而栈中元素的压入(push())或弹出(pop())只发生在一个位置,也就是栈顶,push()支持接收任意数量的参数,把它们逐个添加到数组的末尾,并返回修改后数组的长度,而pop()方法则从数组末尾移除最后一个元素,减少数组的length的值,然后返回移除的元素

var userInfo = [‘李满满‘, 25, ‘男‘]
var newLen = userInfo.push(‘杭州市富阳市‘)
console.log(‘数组被压入栈后长度改变为: ‘ + newLen)
var lastItem = userInfo.pop()
console.log(‘数组弹出最新压入的数据为: ‘ + lastItem)

说明: 队列方法是先进先出,队列在数组的末端添加元素,从数组的前端移除元素,通过push()向数组末端添加一个元素,然后通过shift()方法从数组的前端移除一个元素,还有一个unshitf()方法,和shitf()完全相反,为数组的前端添加一个元素,但是在IE浏览器下unshift()方法返回的不是数组的长度而是undefined

var userInfo = [‘李满满‘, 25, ‘男‘]
var newLen = userInfo.push(‘杭州市富阳市‘)
console.log(‘数组被压入队列后长度改变为: ‘ + newLen)
var shitfItem = userInfo.shift()
console.log(‘数组从队列头部移除的元素是: ‘ + shitfItem)
var newLen = userInfo.unshift(‘李满满‘)
console.log(‘向数组头部插入元素后的长度: ‘ + newLen)

说明: sort默认按照字符串的方式来比较,导致比较结果出乎意料,常常需要自己编写比较器函数,传递给sort,如果从大到小排序则比较器大于返回1小于返回-1否则返回0

var numArr = [1, 2, 3, 4, 5]
console.log(
    // 倒序排列,原数组被修改,返回排序后的数组
    numArr.reverse(),
    // 正序排序,原数组被修改,返回排序后的数组
    numArr.sort()   
)
var numArr = [‘1f‘, ‘11f‘, ‘2f‘, ‘22f‘]
// 定义比较器
function cmp(x, y){
    var xVal = parseInt(x)
    var yVal = parseInt(y)
    return xVal>yVal?1:(xVal==yVal?0:-1)
}
// 传入比较器
alert(numArr.sort(cmp))

说明: Js已经为包含在数组中的元素提供了很多方法,concat(arrayX...)合并数组,slice(start, end)获取数组指定区域元素,splice()对源数组插入/删除/替换等操作

var userInfo = ["李满满", 25, ‘男‘]
// 数组合并-.concat(arrayX....)可以基于当前数组创建一个新的数组,源数组不受影响
//         - 第一种方式,参数支持数组,返回值为合并后的数组
var newInfo = userInfo.concat([‘武汉‘])
console.log(newInfo)
//         - 第二种方式,参数支持非数组,返回值为合并后的数组
var newInfo = userInfo.concat(‘武汉‘, ‘18814818764‘)
console.log(newInfo)
注意: 数组对象的concat参数可以为数组或非数组,而且还支持空,这样相当于在数组的深拷贝
// 数组切割 -.slice(start, end)可以基于当前数组,获取指定区域元素并创建一个新数组,包含开始索引但不包含结束索引元素,结束索引支持复数
var newInfo = userInfo.slice(0, 3)
console.log(newInfo)
//                -非常金典的用法是写评级组件
var rate = 3
document.write("★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate))
// 数组删除 -.splice(index, howmany, item1...itemX),如果只写前两个参数,则会截取从0开始后的2的元素返回,源数组被截取的元素被删除
var deletedItems = userInfo.splice(0, 2)
console.log(deletedItems)
console.log(userInfo)
// 数组插入 -.splice(index, howmany, item1...itemX),如果传多个参数,将用item1..itemX这些元素去覆盖howmany个原有元素,如果howmany为0,在直接就在index的位置插入item1....itemX
userInfo.splice(0, 0, ‘李满满‘, 25)
userInfo.splice(0, 1, ‘刘珍珍‘)
console.log(userInfo)