//扩展运算符能将数组转为逗号分割的参数列表:[1,2,3] => 1,2,3
//扩展运算符的使用:
//数组克隆
const fruits = ['苹果','梨','橘子']
const newFruits = [...fruits]
console.log(newFruits)//['苹果','梨','橘子']
const num = [{a:1},{b:2},{c:3}]
const newNum = [...num]// 扩展运算符拷贝数组,如果数组中有引用类型的数据,则是浅拷贝。如果改变克隆数组某元素的值,原数组的值也会改变,要注意
console.log(newNum)//[{a:1},{b:2},{c:3}]
const newNum1 = JSON.parse(JSON.stringify(newNum))//深拷贝一份
newNum1[0].a = 11
console.log(num)//原数组就不会被改变了
//数组合并
const flowers1 = ['月季','玫瑰']
const flowers2 = ['牡丹','菊花']
const newFlowers = [...flowers1,...flowers2]
console.log(newFlowers)
//将伪数组转为真正的数组
let items = document.querySelectorAll('.item')
let newItems = [...items]
console.log(newItems)//转成真正的数组后就能使用forEach()
深拷贝与浅拷贝:
深拷贝:内存上重新拷贝值,开辟新内存。更改该数据,不会改变被拷贝的数据。
浅拷贝:拷贝引用地址,改变新数据,会改变被拷贝数据。
//7.1 新增的字符串方法
const str = '我们都有一个家'
console.log(str.includes('一')) //true
console.log(str.startsWith('我们')) //false,判断某个字符串是否在原字符串的头部
console.log(str.endsWith('家')) //true,判断某个字符串是否在原字符串的尾部
//7.2 新增的数组方法
const arr = [4,9,16,25]
//7.2.1 includes方法(es7新增的方法)
console.log(arr.includes(9)) //true
//注意,数组元素是引用类型的时候,使用includes()无法查找。
const arr = [{name:'yy'},{name:'uu'},{name:'jj'}]
console.log(arr.includes({name:'uu'}))//false
//7.2.2 map()方法:得到一个经过处理后的新数组
let newArr = []
arr.map(item=>{
newArr.push(Math.sqrt(item))
})
console.log(newArr)//[2,3,4,5]
//7.2.3 filter()方法:过滤操作,得到想要的结果
let newArr1 = arr.filter(item=>{
return item > 10
})
console.log(newArr1)
//7.2.4 reduce(prev,current,index,arr)
let total = arr.reduce((prev,current)=>{ //求和
return prev + current
})
console.log(total)
const arr1 = [[1,2],[3],[4,6]]
let newArr2 = arr1.reduce((prev,current)=>{ //二维数组变成一维数组(数组扁平化)
return prev.concat(current)
})
console.log(newArr2)
const arr2 = [1,2,[3,4,[5,6]],7,8]
function flatten(arr){
let newArr = arr.reduce((pre,cur)=>{ //多维数组变为一维数组(数组扁平化)
return pre.concat(Array.isArray(cur)?flatten(cur):cur)
},[])
return newArr
}
console.log(flatten(arr2))
//需求:把“我正在学习php和css”中的php和css替换成超链接
const arr = ['php','css']
const str = '我正在学习php和css'
let replaceStr = arr.reduce((pre,cur)=>{
return pre.replace(cur,`${cur}`)
},str)
document.body.innerHTML = replaceStr
//7.2.5 some(callback):检查数组中的每个元素是否符合条件,只要有一个满足条件就返回true,都不满足返回false
const ageArr = [16,17,18,19,20]
console.log(ageArr.some(item=>item>17))
//7.2.6 Array.from(new Set(arr)):数组去重
const arr3 = [1,1,2,3,4,5,5,5,6]
console.log(Array.from(new Set(arr3))) //[1,2,3,4,5,6]
//数组去重的其它方法:利用reduce()或者Object.keys(obj)
let arr31 = arr3.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(arr31)//[1,2,3,4,5,6]
let obj = {}
arr3.forEach(item=>{
obj[item] = 1
})
let newArr32 = Object.keys(obj).map(item=>{
return Number(item)
})
console.log(newArr32)//[1,2,3,4,5,6]
//7.2.7 find()和findIndex()
const arr = [{name:'yy'},{name:'uu'},{name:'jj'}]
let res = arr.find(item=>{ //查找数组中符合回调函数要求的第一个数组元素。意思就是:如果有多个元素元素都符合此要求,只返回符合的第一个
return item.name === 'uu'
})
console.log(res)
let index = arr.findIndex(item=>{ //查找数组中的指定元素的索引值
return item.name === 'uu'
})
console.log(index)//1
const Arr=[1,2,3,4];
var num = Arr.find(function(value){
return value > 2
})
console.log(num)
const Arr1 = [1,2,3,4];
var num1 = Arr1.findIndex(function(value){
return value > 2
})
console.log(num1)//2
//rest参数:...args,es6中引入这个参数获取多余的实参,代替es5中的arguments。
function sum(){
console.log(arguments)
}
sum(1,2,3)//结果不是个数组
function sum1(...args){
console.log(args)
}
sum1(1,2,3)//[1,2,3]
function multiple(a,...args){
return args.map(item=>{
return a * item
})
}
let result = multiple(3,4,5,6,7)
console.log(result)//[12,15,18,21]
//rest参数必须放到最后
function sum(a,b,...args){
console.log(a,b,args)
}
sum(1,2,3,4,5,6,7)//1 2 [3, 4, 5, 6, 7]
//repeat()方法按指定次数返回一个新的字符串。
console.log('hello'.repeat(2)); //'hellohello'
//padStart()/padEnd(),用参数字符串按给定长度从前面或后面补全字符串,返回新字符串
let arr = 'hell';
console.log(arr.padEnd(5,'o')); //'hello'
console.log(arr.padEnd(6,'o')); //'helloo'
console.log(arr.padEnd(6)); //'hell ',如果没有指定将用空格代替
console.log(arr.padStart(5,'o')); //'ohell'
函数可以设置默认参数,当调用函数时没有传入该参数时,会使用默认值。
function sayHi(name = "哇哈哈") {
console.log("你好", name);
}
sayHi();// 你好 哇哈哈
sayHi("胖胖");// 你好 胖胖
函数绑定”运算符(::)
参考链接1
参考链接2