js中获取月份date.getMonth()获取的是0-11

Ubuntu联网图标消失

  返回  

ES6标准入门(阮一峰)学习笔记06第8章数组的扩展,扩展运算符,解构赋值结合,函数的返回值,字符串,实现Iterator接口的对象,各种方法,数组的空位

2021/8/20 11:20:04 浏览:

1、扩展运算符spread…

…将一个数组转为都好分隔的参数序列

<script>
  let arry=['hello','world','!']
  console.log(arry)//(3) ["hello", "world", "!"]
  console.log(...arry)//hello world !
</script>

该运算符主要用于函数调用

<script>
  let myArray=[]
  function push (arry,...items) {
      arry.push(...items)
    return arry
  }

  let arry=push(myArray,3,4,5,'hello')
  console.log(arry)//(4) [3, 4, 5, "hello"]
</script>

2、替代数组的apply方法

扩展运算符可以展开数组,所以不再需要使用apply方法将数组转为函数的参数

<script>
  function fn(x,y,z){
    
  }
  let args=[2,3,4]
  fn(...args)
</script>

3、扩展运算符的应用

  • 合并数组
<script>
  let arr1=['a','b']
  let arr2=['c']
  let arr3=['d','e']

  //es6数组的合并
  let arr4=[...arr1,...arr2,...arr3]
  console.log(arr4)//(5) ["a", "b", "c", "d", "e"]
</script>

4、与结构赋值结合

扩展运算符可以与结构赋值结合起来,用于生成数组

<script>
  const [first,...rest]=[1,2,3,4,5]
  first//1
  rest//[2,3,4,5]
  
  const [first,...rest]=[]
  first//undefined
  rest//[]
  
  const [first,...rest]=['foo']
  first//foo
  rest//[]
</script>

5、函数的返回值

JavaScript函数只能返回一个值,如需返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的变通方法。
以下从数据库中取出一行数据,通过扩展运算符,直接将其传入构造函数Date中

var dateFields=readDateFields(database)
var d=new Date...dateFields)

6、字符串

扩展运算符还可以将字符串转为真正的数组

[...'hello]
//h e l l o

7、实现iteratro接口的对象

部署了Iterator接口可以直接转数组,没有部署了Iterator接口的对象不可以直接转数组

<script>
  //部署了Iterator接口可以直接转数组
  let nodelist=document.querySelectorAll('div')
  let nodarray=[...nodelist]//可以转数组

  //没有部署了Iterator接口的对象不可以直接转数组
  let obj={
    name:'zhangsan',
    age:24,
    address:'beijing',
  }

  let arr=[...obj]
  console.log(arr)//不可以转数组
</script>

8、map和set结构,generator函数

map和set都具有Iterator接口,因此可以直接被转为数组

<script>
  let map=new Map([
    ['a','one'],
    ['b','two'],
    ['c','three']
  ])

  let array=[...map.keys()]
  console.log(array)//(3) ["a", "b", "c"]


</script>

<script>
  let go=function*(){
    yield 1;
    yield 2;
    yield 3;
  }
  let arry=[...go()]
  console.log(arry)//(3) [1, 2, 3]

</script>

9、Array.from()直接对象转数组

将类似数组的对象转成数组
将可遍历的对象转成数组

<script>
  let obj={
    0:'zhangsan',
    1:'male',
    2:'beijing',
    length:3//必须要加length,因为数组的最大特征就是有个length
  }

  let array=Array.from(obj)
  console.log(array)//(3) ["zhangsan", "male", "beijing"]
  
</script>
  • 只要不输了Iterator接口的数据结构,Array.from都可以将其转换为数组(map,set等)
  • Array.from还可以接受第二个参数,用作类似于数组的map方方,用来将每个元素进行处理,将处理后的值放入返回的数组
<script>
  let obj={
    0:'zhangsan',
    1:'male',
    2:'beijing',
    length:3//必须要加length,因为数组的最大特征就是有个length
  }

  let array=Array.from(obj,x=>x+'er')
  console.log(array)//(3) ["zhangsaner", "maleer", "beijinger"]

</script>

10、Array.of()将一组值转数组

将一组值转数组

<script>
  let array=Array.of(3,11,22)
  console.log(array)//(3) [3, 11, 22]

</script>

11、copyWithin()

在当前数组内部将制定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组,也就是说,这个方法会修改当前数组
Array.prototype.copyWithin(target,start=0,end=this.length)
接受三个参数
target:从该位置开始替换数据
start:从该位置读取数据,负数为倒数,默认为0
end:到该位置前停止读取数据,默认等于数组长度,负值为倒数

<script>
 let array=[1,2,3,4,5,6,7,8,9]
 array.copyWithin(2,4,7)
 console.log(array)//(9) [1, 2, 5, 6, 7, 6, 7, 8, 9]
</script>

12、数组实例的find()和findIndex()

find():找出第一个符合条件的数组成员,参数是一个回调函数,所有数组成员一次执行该回调函数,直到找到第一个返回值为true的成员,然后返回该成员,如果没有符合条件的成员,则返回undefined

<script>
 let array=[1,2,3,4,5,6,7,8,9]
 let item=array.find((item)=>{return item>5})
 console.log(item)//6
</script>

findIndex()和find很像,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

<script>
 let array=[1,2,3,4,5,6,7,8,9]
 let item=array.findIndex((item)=>{return item>2})
 console.log(item)//2
</script>

13、数组实例的fill()

使用给定值填充一个数组
还可以接受第二和第三个参数,用于指定填充的起始位置和结束位置

<script>
 let array=[1,2,3]
 let newArray=array.fill(5)
 console.log(newArray)//(3) [5, 5, 5]

  let newarr=new Array(3).fill('hello')
  console.log(newarr)//(3) ["hello", "hello", "hello"]

  let finalarr=array.fill(7,1,2)
 console.log(finalarr)//(3) [5, 7, 5]


</script>

14、数组实例的entries(),keys(),values()

用来遍历数组,返回一个遍历对象,可以用于for…of循环遍历
entries:键值对遍历
keys:键值遍历
values:值遍历

<script>
 let array=['hello','world','!']
 for (let item of array.keys()){
   console.log(item)
 }
 for (let item of array.values()){
   console.log(item)
 }
 for (let item of array.entries()){
   console.log(item)
 }

</script>

15、数组实例的includes()

  • 返回一个布尔值,表示某个数组是否包含给定的值,与支付穿的includes方法类似
  • 可以接受第二个参数,表示起始位置,第二个参数如果为负数,则表示倒数作为起始位置
<script>
 let array=['hello','world','!']
 console.log(array.includes('world'))//true
 console.log(array.includes('hello',-1))//false
</script>

map和set数据结构有一个has方法,需要注意与includes的区分

  • Map结构的has方法是用来查找键名的。
  • set结构的has方法是用来查找值的

16、数组的空位

数组的某个位置没有任何值,如:
new Array(3),有三个数组空位

  • es6将空位转为undefined
  • 扩展运算符(…)也会将空位转为undefined
  • copywithin()会连空位一起复制
  • fill非将空位视为正常的数组位置
  • for…of也会遍历空位

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号