JS数组方法(复习)https://www.cnblogs.com/jiajiamiao/p/11641574.html

www.cnblogs.com/jiajiamiao/…

记忆

易混:   splice slice join
查找:   indexOf/lastIndexOf find(找值)/findIndex(找下标) includex(通过值查找值)
        push pop unshift shift
        concat reverse sort 
迭代:   filter map forEach every some 
es6:    from of

常用方法

1,splice() 数组的增删改

删除 : splice(n,m)从索引n开始删除m项,删除的部分以新数组的方式返回,原来数组改变

 let arr = [10,20,30];
 let res = arr.splice(1,1);
 //res => [20]
 //arr => [10,30]

 let arr  = [10,20,30,40,50]
 let res = arr.splice(1);//只写一个参数,从第一项开始删除
 //arr => [10]
 //res => [20,30,40,50]

增加 : splice(n,0,x)从索引n开始不删除,八x添加到索引n的前面

 let arr = [10,20,30];
 let res = arr.splice(1,0,'hello','vue');
 //res => []
 //arr => [10, "hello", "vue", 20, 30]

2,concat()数组拼接

  let arr1 = [10,20];
  let arr2 = [30,40];
  let res = arr1.concat('hello',arr2);
  //res => [10, 20, "hello", 30, 40]

3,sort() 数组排序

局限:不传参数,只能处理10以内的排序

 let arr = [18,2,35,40,9,66];
 arr.sort();
 //arr => [18, 2, 35, 40, 66, 9]

传参实现升序,降序

  let arr = [18,2,35,40,9,66];
  arr.sort(function(a,b){
     //a-b升序  b-a降序
      return a-b;  
  });
  //arr => [2, 9, 18, 35, 40, 66]

4,slice(start, end) 返回下标 [start, end) 的数组

  let  arr = [10,20,30,40,50]
  let  res = arr.slice(2,4);
  //res => [30,40]
  //arr => [10,20,30,40,50]

  let  arr = [10,20,30,40,50]
  let  res = arr.slice(2);//只写一个参数,从指定下标开始删除之后的全部以数组返回
  //res => [30,40,50]

5,join()将数组中的所有数据按照一定规则拼接成字符串

 let res1 = arr.join()
 // res1 => 10,20,30,40,50
 
   let res2 = arr.join('')
 // res2 => 1020304050
 
 let res3 = arr.join('?')
 //res3 => 10?20?30?40?50

6,reverse() 数组反转,会修改原有的数组

 let  arr = [10,20,30,40,50]
 let res = arr.reverse()
 //res => [50, 40, 30, 20, 10]
 //arr => [50, 40, 30, 20, 10]

7,indexOf() 和 lastIndexOf() 查找第一个元素出现的索引值,若不存在则返回-1

 let arr = [10,20,30,40,50]
 let res = arr.indexOf(20)
 //res => 1

8,find(callback) 和 findIndex(callback) 找到第一个符合条件的数组元素,否则就是undefined

 let  arr = [10,20,30,40,50]
 let  res = arr.find((v,i)=>{
     retunr v > 20
 })
 //res => 30

 简写: 一行箭头函数的代码return可以省略
 let res = arr.find(v => v > 20)
 //res => 30

找到第一个符合条件的数组元素下标,否则-1
 let idx = [{id:154351},{id:112313}].findIndex(item=>{
    console.log(item);//item是数组中的每一个对象,'findIndex得到的是下标'
    return item.id == id
  });

9,includes('查找的值'[, 从索引几开始查找])用来判断数组中是否包含指定的值,返回布尔值

 [1,2,3,4].includes(3)    //true
 [1,2,3,4].includes(5)    //false
 [1,2,3,4].includes(3,3)  //false
 [1,2,NaN].includes(NaN)  //true

10,from(想要转换为真数组的伪数组对象) 将伪数组转为真数组(只要有length的就可以转换成数组)

 Array.from('foo') //=> ['f','o','o']
 Array.from([1, 2, 3], x => 2*x) //=> [2, 4, 6]
 
 <ul>
     <li></li>
     <li></li>
 </ul>
 console.log(Array.from(document.querySelectorAll('li'))) //[li, li]
 console.log(document.querySelectorAll('li')) //NodeList(2) [li, li]
 '可以将DOM中的Nodelist和arguments转换为真数组'
 扩展: console.log(document.getElementsByTagName('li')) // HTMLCollection(2) [li, li]
 HTMLCollection 与 NodeList区别
 // 参考MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from

11,of()将一组值转换为数组,主要是为了弥补Array()的不足(Array中参数个数不同时产生不同的情况)

 Array.of(3, 4, 5) //=> [3,4,5]
 Array.of(3) //=> [3]
 
 Array(3) //=> [, , ,] 数组中会出现3*empty

push()在数组后边追加元素,pop()从数组后边删除元素

 let arr =  [10,20,30,40,50]
 arr.push('hello') //arr=>[10,20,30,40,50,'hello']

unshift()在数组的前边追加元素 shift()从数组的前边删除元素

 let arr =  [10,20,30,40,50]
 arr.unshift(100) //arr=> [100, 10, 20, 30, 40, 50]

数组的迭代方法

迭代方法实际应用-----对数据进行处理

例如:
echarts中的data想要数组中的每一个对象中只需要两个字段name和value
1.需要的字段类型:
data: [
  {name:'湖北', value:54406}
]
2. 数据请求时的返回数据中---很多很杂
[{
    comment: ""
    confirmedCount: 54406
    curedCount: 4821
    currentConfirmedCount: 48128
    deadCount: 1457
    locationId: 420000
    provinceName: "湖北省"
    provinceShortName: "湖北"
    suspectedCount: 0
}]
3. 将请求回来的数据进行处理

两种方式-------使用map返回新的
        -------使用forEach更改原来的

// 对于原来的数据没有影响, 只是摘出来自己想要的数据并做成指定格式
let newData = res.data.map(item => ({name: item.provinceShortName, value: item.confirmedCount}))

// 会在原来的res.data中新添加两个字段(name和value)
res.data.forEach(item => {
  item.name =  item.provinceShortName
  item.value = item.confirmedCount
})

手写推荐 juejin.cn/post/684490…

filter(callback) // 过滤返回满足要求的数组

//过滤,filter()使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。
Array.prototype.FILTER = function(cb){
	let arr = []
	for(let i =0;i<this.length;i++){
		cb(this[i]) && arr.push(this[i])
	}
	return arr
}

let arr = [2,4,6,8]
let res = arr.FILTER((v,i)=>{
	return v>5	
})
console.log(res);//[6, 8]

map(callback) // 映射返回一个数组调用函数后的结果

Array.prototype.MAP = function(cb){
	let arr = []
	for(let i =0;i<this.length;i++){
		arr.push(cb(this[i],i))	
	}
	return arr;
}

let a = [1,2,3].MAP((v,i)=>{
	return v*2
   })
console.log(a);//[2, 4, 6]

forEach(callback)//单纯便利数组没有返回值

Array.prototype.FOREACH  = function(fn){
	for(let i =0;i<this.length;i++){
		fn(this[i],i)
	}
};

[1, 2, 3].FOREACH((item,idx)=>{
	console.log(item,idx);
})

some(callback) 根据条件判断,数组的元素是否有一个满足,若有一个满足就返回true

Array.prototype.SOME=function (fn) {
for(let i=0;i<this.length;i++){
    if(fn(this[i])) {
        return true
    }
}
return false

};

```

every(callback) 根据条件判断,数组的元素是否全部满足,若全部满足就返回true

Array.prototype.EVERY=function (fn) {
for(let i=0;i<this.length;i++){
    if(!fn(this[i])) {
        return false
    }
}
return true

};

```

JS数组方法(复习)

记忆