Array的扩展方法
扩展运算符(展开语法)
- 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let arr = [1,2,3,4]
// ...arr 1,2,3
console.log(...arr) // 1 2 3
- 扩展运算符-合并数组
let arr1 = [1,2,3]
let arr2 = [3,4,5]
//第一种方法
let arr3 = [...arr1,...arr2]
console.log(arr3)
// 第二种方法
arr1.push(...arr2)
console.log(arr1)
- 将类数组或可遍历对象转换为真正的数组
let oDivs = document.getElementsByTagName('div')
console.log(oDivs) //伪数组
console.log([...oDivs]) //真实的数组
构造函数方法 Array.from()
let obj = {
'0':'张山',
'1':'李四',
'2':'王五',
'length':3
}
let arr = Array.from(obj)
console.log(arr) //输出了一个真正的数组
let obj1 = {
'0':'1',
'1':'2',
'2':'3',
'length':3
}
let arr1 = Array.from(obj1,(item)=>{
return item*2
})
console.log(arr1) //输出的 是 [2,4,6]
实例方法
find()
- 用于找出第一个符合条件的数组成员,如果没有找到返回 undefined
let arr = [
{id:1,name:'张三'},
{id:2,name:'李四'},
]
let target = arr.find((item,index)=>{
return item.id === 2
})
console.log(target)
{id: 2, name: "李四"}
findIndex()
- 用于找出第一个符合条件的数组成员的位置,如果没有找到返回 -1
let arr = [1,5,10,15]
let index = arr.findIndex((value,index)=>value>9);
console.log(index)
includes()
let beeleans1 = [1,2,3].includes(2);
let beeleans2 = [1,2,3].includes(4);
console.log(beeleans1)
console.log(beeleans2)
String 的扩展方法
模板字符串
- ES6新增的创建字符串的方式,使用反引号定义
let name = `张山`
console.log(name)
- 模板字符串中可以 解析变量
let sayHello = `Hello,my name is ${name}`;
console.log(sayHello)
- 模板字符串中可以 换行
let result = {
name:'suni1024',
age:20,
sex:'男'
}
let html = `<div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div>`;
console.log(html)
- 模板字符串中可以 调用函数.
const sayHello = ()=>{
return `卧槽无情`
}
let greet = `${sayHello()},二货`
console.log(greet)
startsWith() 、 endsWith()
- startsWith()-表示参数字符串是否在原字符串的头部,返回布尔值
- endsWith()-表示参数字符串是否在原字符串的尾部,返回布尔值
let str = `Hellow world!`;
const a = str.startsWith('Hello');
const b = str.endsWith('!!');
console.log(a) //true
console.log(b) //false
repeat()
- repeat 方法表示将原字符串重复N次,返回一个新字符串
let x = 'X'.repeat(3)
let Hello = 'Hello'.repeat(2)
console.log(x) //xxx
console.log(Hello) //HelloHello
Set数据结构
- ES6提供了新的数据结构Set.类似于数组,但是成员的值都是唯一的,没有重复的值
Set本身是一个构造函数,用来生成Set数据结构
const s = new Set();
Set 函数可以接受一个数组作为参数,用来初始化.
const set = new Set([1,2,3,4,4])
console.log(s)
console.log(s.size)
数组去重
const set2 = new Set(['a',3,4,4])
console.log([...set2])
实例方法
- add(value):添加某个值,返回Set结构本身
- delete(value):删除某个值,返回一个布尔值,表示删除是否成功
- has(value):返回一个布尔值,表示该值是否为Set的成员
- clear():清楚所有成员,没有返回值
const s4 = new Set();
s4.add(1).add(2).add(3);//向set结构中添加值
console.log(s4)
s4.delete(2) //删除set结构中的2值
console.log(s4)
let a = s4.has(1) //表示set 结构中是否有1这个值,返回布尔值
console.log(a)
s4.clear() //清楚set结构中的所有值
console.log(s4)
const mySet = new Set();
mySet.add("蚂蚁部落");
mySet.add(4);
mySet.add("www.softwhy.com");
console.log(mySet)
遍历
- Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值
const s5 = new Set(['a','b','c','d'])
s5.forEach(value=>{
console.log(value)
})