ES6----内置对象拓展

简介: 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

相关文章
|
7月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
88 2
|
2月前
|
安全
ES5/ES6 的继承除了写法以外还有什么区别
ES5 和 ES6 的继承主要区别在于实现机制和语法糖。ES5 通过原型链和构造函数模拟类的继承,而 ES6 引入了 class 关键字,使继承更加直观和简洁,支持 super 调用父类方法,提升了代码可读性和维护性。
|
6月前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
62 2
|
7月前
|
算法 JavaScript 前端开发
ES6学习笔记--对象的拓展
ES6学习笔记--对象的拓展
|
7月前
|
Serverless 网络架构
ES6学习笔记--函数与数组的拓展
ES6学习笔记--函数与数组的拓展
|
JavaScript 前端开发
如何把传统写法改成框架形式 es6
如何把传统写法改成框架形式 es6
57 0
ES5 / ES6 的继承除了写法以外还有什么区别
ES5 / ES6 的继承除了写法以外还有什么区别
110 0
【ES6】对象相关拓展
【ES6】对象相关拓展
44 0
|
JavaScript 前端开发
【ES6】对象的拓展
【ES6】对象的拓展
|
数据采集 存储 JavaScript
【ES6】字符串的拓展
【ES6】字符串的拓展
129 0