6、数组扩展
6.1 扩展运算符(...)
{ // 复制数组 let list1 = [1,2,3]; let list2 = [...list1]; list2.push(4) console.log(list1); console.log(list2); } { // 分割数组 let list1 = [1,2,3,'a','b','c']; let [,,,...list2] = list1; // 通过,进行占位 console.log(list1); console.log(list2); } { // 展开数组,给方法传参 function func(x,y){ return x+y; } let list = [1,2]; console.log(func(...list)); }
6.2 扩展函数
{ // fill 填充数组,常用于初始化 let list1 = [1,2,3,4]; let list2 = [...list1].fill('a'); // 数据全部填充成a let list3 = [...list1].fill('a',1,3); // 数据从下标1,到下标3之前,填充 console.log(list2); console.log(list3); } { let personList = [ {id:'1',name:'张三',sex:1}, {id:'2',name:'李四',sex:0}, {id:'3',name:'张三',sex:1}, ]; // find 查找,查找数组中第一个满足条件的元素 let person = personList.find(function(item){ return item.name=='张三' }) // findIndex 查找,查找数组中第一个满足条件的元素的下标 let personIndex = personList.findIndex(function(item){ return item.name=='张三' }) // some 判断是否存在符合条件的元素 let isFind = personList.some(function(item){ return item.name=='张三'; }); console.log(person); console.log(isFind); console.log(personIndex); } { // includes判断数组中是否包涵指定的值,一般对简单数据类型进行判断 let list1 = [1,2,3,4]; console.log(list1.includes(6)); } { // flat 展开数组,如果数组中还有数组,可以通过flat张开数组,合并成一层数组 let list1 = [1,2,3,[11,22,33,[111,222,333]]]; let list2 = list1.flat(2); // 参数2是展开的层级,默认是1 console.log(list2) } { // filter 过滤。过滤出数组中所有符合要求的元素 let personList = [ {id:'1',name:'张三',sex:1}, {id:'2',name:'李四',sex:0}, {id:'3',name:'张三',sex:0}, ]; let personList2 = personList.filter(function(item){ return item.name == '张三' }) console.log(personList2); }
6.2 filter
{ // filter 过滤。过滤出数组中所有符合要求的元素 let personList = [ {id:'1',name:'张三',sex:1}, {id:'2',name:'李四',sex:0}, {id:'3',name:'张三',sex:0}, ]; let personList2 = personList.filter(function(item){ return item.name == '张三' }) console.log(personList2); }
// filter() 去掉空字符串、undefined、null let arr = ['','1','2',undefined,'3.jpg',undefined] let newArr = arr.filter(item => item) console.log(newArr)
// filter() 数组去重 let arr = [1, 2, 2, 3, 4, 5, 5, 6]; let newArr = arr.filter((x, index,self)=>self.indexOf(x)===index) console.log(newArr)
// 去重复还是推荐set去重 let arr = [1, 2, 2, 3, 4, 5, 5, 6]; let newArr =Array.from(new Set(arr)) console.log(newArr)
6.3 map
map是返回一个新的被改变过后的数组。需要return.
{ // map 常用于数据的映射 let personList = [ {id:'1',name:'张三',sex:1}, {id:'2',name:'李四',sex:0}, {id:'3',name:'张三',sex:1}, ]; let newPersonList1 = personList.map(function(item){ return { id:item.id, name:item.name, sex:item.sex ? '男' : '女' } }) // 如果只想改变数组中的特定属性 let newPersonList2 = personList.map(function(item){ let obj={}; Object.assign(obj,item); obj.sex = item.sex ? '男' : '女'; return obj; }) console.log(personList) console.log(newPersonList1) console.log(newPersonList2) }
6.4 reduce
{ /** * reduce 是对数组中的每个元素进行回调,升序执行后,将回调的值进行汇总 */ let str = 'abcdasegsa'; let result = str.split('').reduce(function(acc,cur){ // acc 是一个初始化的值,cur是循环中的元素 acc[cur] ? acc[cur]++ : acc[cur]=1; return acc; },{}); console.log(result); }
7、箭头函数
{ const func1 = (x)=>{ console.log('箭头函数'); } func1('1'); const func2 = x => x*2; console.log(func2(1)) }
特点:使用简洁。不绑定this。
{ let person = { name:'张三', age:18, showName1:function(){ setTimeout(function(){ // 这里的this是window console.log(this.name,this); },1000); }, showName2:function(){ setTimeout(()=>{ // 这里的this是person console.log(this.name,this); },1000); } } person.showName1(); person.showName2(); }