前端开发-vue前置基础-数值类型及方法

1.值类型和引用类型

值类型(基本数据类型)

在栈中存储数据

赋值操作, 拷贝的是数据, 修改 拷贝后的数据 对 原数据 没有影响

let num = 10
let num1 = num
num1 = 20
console.log( num,num1 )//10 20

引用数据类型(数组对象)

栈中储存地址,堆中储存数据

修改拷贝后的数据对原数据有影响(通过不同的地址修改同一个数据)

// 引用类型： (相当于钱存银行， arr是银行卡)
let arr = [10,20,30]
// 引用类型: (拷贝地址， 相当于你的支付宝绑定银行卡了)
let arr1 = arr
// 操作堆数据, (相当于你拿着支付宝扫码了。 你的银行卡钱也会变化)
arr1[0] = 100// 改堆：通过arr来修改堆中0下标数据
console.log(arr,arr1)//[100,20,30]  [100,20,30]

2.字符串常用方法

1) str.indexOf('字符串')

判断字符串在不在str中, 在则返回首字符下标。不在则返回固定值-1

let str = '字符串常用方法'
console.log( str.indexOf('数组') )// -1
console.log( str.indexOf('常用') )// 3

2) str.split('分隔符')

把str按照分隔符，分割成几个部分放入数组中

let url = 'http://www.baidu.com?id=123'
console.log( url.split() )// ['http://www.baidu.com?id=123']
console.log( url.split('?') )// ['http://www.baidu.com','id=123']
console.log( url.split('=') )// ['http://www.baidu.com?id','123']

3) str.replace('字符串','替换后的字符串')

把str中的 字符串 调换成 其他内容

//替换 + 删除字符
console.log( str.replace('字符串','数组'))  // '数组常用方法'
console.log( str.replace('常用',''))  // '字符串方法'

4) 字符串转大小写

只有英文才有大小写

console.log( 'afdsaSDFSDsfds'.toLocaleLowerCase() )//afdsasdfsdsfds
console.log( 'afdsaSDFSDsfds'.toLocaleUpperCase() )//AFDSASDFSDSFDS

3.数组常用方法

1) 增删改查

增:

arr.push(...元素) : 往数组后面添加元素 , 返回数组长度 
arr.unshift(...元素) : 往数组前面添加元素 , 返回数组长度

删:
arr.pop() : 删除数组最后一个元素, 返回删除的那个元素
arr.shift() : 删除数组第一个元素, 返回删除的那个元素

改
arr.splice(开始下标,删除几个元素,...在删除位置插入元素)

查

 arr.slice(起始下标,结束下标)

2) arr.join('分隔符')

将数组元素拼接成用分隔符连接的字符串

console.log(['数组', '字符串'].join('&'))  // 数组&字符串

3) arr.reverse()

翻转数组  有的页面列表可以反向排列

4) arr.sort( (a,b)=>a-b )

将数组元素从小到大排

或者从大到小 arr.sort( (a,b)=>b-a )

a和b就是数组中相邻的元素

let pArr = [
            { name: '张三', age: 18 },
            { name: '李四', age: 15 },
            { name: '王五', age: 22 },
        ]
        //根据年龄排序  a和b就是数组中相邻的元素
        pArr.sort((a, b) => {
            return a.age - b.age
        })
        console.log(pArr);  

//pArr = [
{name: '李四', age: 15},
{name: '张三', age: 18},
{name: '王五', age: 22}
]

4.数组遍历方法