ES6----内置对象拓展

Array的扩展方法

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

let arr = [1,2,3]
console.log( ...arr )
console.log( 1,2,3 )

1 2 3
1 2 3

在console.log()中可以输出多个变量，但是要使用逗号进行分隔，由于对数组扩展后个元素之间使用逗号分隔，所以输出为1 2 3。

可以使用扩展运算符进行数组的合并

方法1：

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1,...arr2]
console.log(arr3)

[ 1, 2, 3, 4, 5, 6 ]

方法2：

let arr1 = [1,2,3]
let arr2 = [4,5,6]
arr1.push( ...arr2 )
console.log(arr1)

[ 1, 2, 3, 4, 5, 6 ]

使用Array.from()方法可以使伪数组转为真正的数组

let arrLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
} 
let arr = Array.from( arrLike )
console.log(arrLike)
console.log(arr)

{ '0': 'a', '1': 'b', '2': 'c', length: 3 }
[ 'a', 'b', 'c' ]

此方法还可以传入第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

let arrLike = {
  '0': '2',
  '1': '4',
  '2': '8',
  length: 3
} 
let arr = Array.from( arrLike, item => item*2 )
console.log(arrLike)
console.log(arr)

{ '0': '2', '1': '4', '2': '8', length: 3 }
[ 4, 8, 16 ]

find()方法

用于找出第一个 符合条件的数组成员，如果没有找到返回undefined

let arr = [
  {
    id: 1,
    name: 'zs'
  },
  {
    id: 2,
    name: 'ls'
  }
]
//index下标没有用上，可以省略
let target = arr.find( ( item, index ) => item.id == 2 )
console.log( target )

{ id: 2, name: 'ls' }

findIndex()方法

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let arr = [
  {
    id: 1,
    name: 'zs'
  },
  {
    id: 2,
    name: 'ls'
  }
]
let index = arr.findIndex( item => item.id == 2 )
console.log( index )

1

includes()方法

表示某个数组是否包含给定的值，返回布尔值

let arr = [1,2,3]
console.log(arr.includes(2))
console.log(arr.includes(5))

true
false

String的扩展方法

模板字符串

模板字符串可以解析变量
模板字符串使用反引号，即

`模板字符串`

let name = 'zs'
let say = `hello, my name is ${name}`
console.log(say)

hello, my name is zs

模板字符串中可以换行

let s = `
  123
  123
  123
  123
`
console.log(s)

  123
  123
  123
  123

模板字符串可以调用函数

let fn = () => {
  return '123123'
}
let s = `456456 ${fn()}`
console.log(s)

456456 123123

startsWith()和endsWith()

startsWith()：表示参数字符串是否在原字符串的开头，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

let s = 'HELLO JAVASCRIPT'
console.log( s.startsWith('HELLO') )
console.log( s.endsWith( 'T' ) )
console.log( s.endsWith( 's' ) )

true
true
false

repeat()

repeat()方法表示将原字符串重复n次，返回一个新字符串

let s = 'HELLO JAVASCRIPT\n'
let newS = s.repeat(3)
console.log( newS )

HELLO JAVASCRIPT
HELLO JAVASCRIPT
HELLO JAVASCRIPT

Set数据结构

ES6提供了新的数据结构Set，类似于数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成Set数据结构

const s = new Set()

Set函数可以接受一个数组作为参数，用来初始化

const set = new Set( [1,1,1,2,2,2,3,3,3,4,5,6] )
console.log(set)

Set(6) { 1, 2, 3, 4, 5, 6 }

Set数据结构的实例方法

add(value)：添加某个值，返回Set结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表示该值是否为Set的成员
clear()：清除所有成员，没有返回值

let set = new Set()
set.add(1).add(2).add(3).add(4).add(5)
console.log(set)

let r1 = set.delete(1)
console.log(r1)
console.log(set)

let r2 = set.has(10)
console.log(r2)

set.clear()
console.log(set)

Set(5) { 1, 2, 3, 4, 5 }
true
Set(4) { 2, 3, 4, 5 }
false
Set(0) {}

forEach()遍历

let set = new Set()
set.add(1).add(2).add(3).add(4).add(5)
console.log(set)
// value为每次遍历的值
set.forEach( value => {
  console.log( value )
} )

Set(5) { 1, 2, 3, 4, 5 }
1
2
3
4
5