Javascript学习笔记3——数组方法&&深浅拷贝&&字符串方法

数组

遍历数组forEach方法

被遍历的数组.forEach(function (当前数组元素，当前元素索引号){
    //函数体
})

• 当前数组元素必写，索引号可选
• 没有返回值

//1.声明一个字符串变量
let str = ''

//2.遍历数组数据
goodList.forEach(item => { //遍历数据
    str += `
	<div class="item">
		//...
	</div>
	`
})

//3.生成的字符串添加给list
document.querySelector('.list').innerHTML = str

数组常见实例方法！！！

方法	作用	说明
forEach	遍历数组	不返回数组，用于查找遍历数组元素
filter	过滤数组	返回新数组，返回筛选满足条件的数组元素
map	迭代数组	返回新数组，返回处理之后的数组元素
reduce	累计器	返回累计处理的结果，经常用于求和等

reduce 返回累计处理的结果

arr.reduce(function(){},起始值)

arr.reduce(function(上一次值，当前值){}，初始值)

• 若有起始值，则把起始值累加到里面

const arr = [1,5,8]

const total = arr.reduce(function (prev,current){
    return prev + current
})
console.log(total)  //14

//箭头函数写法
arr.reduce((prev,current) => prev + current,10)

执行过程

1. 若没有起始值，则上一次值以数组第一个元素的值
2. 每一次循环，把返回值给作为下一次循环的上一次值
3. 若有起始值，则起始值为上一次值

//计算薪资案例
const arr = [
    {
        name:'张三'
        salary：10000
    }，{
    name:'李四'
    salary:10000
    },{
    name:'王五'
    salary:10000
    }
]
const total = arr.reduce((prev,current) => {
    return prev + current.salary*1.3
},0)
concole.log(total) //39000

数组其他常见方法

方法	作用
join	数组元素拼接为字符串，返回字符串
find	查找元素，返回符合的第一个数组元素值，没有返回Undefined
every	检测数组所有元素是否符合指定条件，全通过返回true，否则返回false
some	检测数组中元素是否满足指定条件，有元素满足返回true，否则返回false
concat	合并两个数组，返回生成新数组
sort	对原数组单元值排序
splice	删除或替换原数组单元
reverse	反转数组
findIndex	查找元素索引值

find使用

const arr = [
    {
        name:'小米'，
        price:1999
    },
    {
        name:'华为',
        price:3999
    },
]
//找小米这个对象，并返回**对象**
const mi = arr.find(function (item){
    return item.name === '小米' //返回的是数组元素
})
console.log(mi) //{name:'小米'，price:1999}

every使用

const arr1 = [10,20,30]
const flag = arr1.every(item => item >= 10)
console.log(flag) //true

伪数组转换为真数组

Array.from()

深浅拷贝

浅拷贝和深拷贝只针对引用类型

浅拷贝

• 拷贝的是地址

常见方法

1. 拷贝对象：Object.assign() /展开运算符 {…obj} 拷贝对象
2. 拷贝数组：Array.prototype.concat() 或者 […arr]

const obj = {
    uanme: 'pink',
    age: 18
}
const o = {...obj}
o.age = 20

//法2
cosnt o = {}
Object.assign(o,obj)
o.age = 20

• 可以拷贝单层，多层就有问题了

深拷贝

深拷贝拷贝的是对象，不是地址

常见方法

1. 通过递归实现深拷贝
2. lodash / cloneDeep
3. 通过JSON.stringify()实现

const obj = {
    uname:'pink',
    age:18
}
const o = {}
//拷贝函数
function deepCopy(newObj,oldObj) {
    for(let k in oldObj) {
        //newObj[k] = oldObj[k]
        newObj[k] = oldObj[k]
    }
}
deepCopy(o,obj)

String 字符串

常见实例方法

方法	作用
length	获取字符串长度
split(‘分隔符’)	将字符串拆分为数组
substring (需要截取的开始的字符的索引号[，结束的索引号])	用于字符串截取
startsWith(检测字符串[，检测位置索引号])	检测是否以某字符开头
includes(搜索字符串[，检测位置索引号])	判断一个字符串是否包含在另一字符串中，根据情况返回true/false
toUpperCase	将字母转换成大写
toLowerCase	将字母转换成小写
indexOf	检测是否包含某字符
endsWith	检测是否以某字符结尾
replace	替换字符串，支持正则匹配
match	查找字符串，支持正则匹配

• split把字符串转换为数组

• join把数组转换为字符串

• 截取字符串如果省略结束的索引号，默认截取到最后

• 不包含结束索引号的字符

const str = 'pink老师上课中'
//截取字符串
console.log(str.substring(5,7))
//检测字符串开头
console.log(str.startsWith('pink')) //true
//判断字符串包含
console.log(str.includes('pink'))  //true
console.log(str.includes('pink'),5) //false