扩展运算符 (展开语法)
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
let ary = [ 1, 2, 3 ];
... ary //1 ,2 ,3
扩展运算符可以将数组拆分成逗号分隔的参数序列
let ary = ['a','b','c'];
...ary // 'a','b','c'
console.log(...ary);
console.log('a','b','c'); // a b c
扩展运算符应用于数组合并
// 扩展运算符应用于数组合并2种方法
// 方法一:
let ary1 = [1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary1,...ary2]
console.log(ary3); //[1,2,3,4,5,6]
//方法二:
let ary1 = [1,2,3];
let ary2 = [4,5,6];
ary11.push(...ary2)
console.log(ary1); //[1,2,3,4,5,6]
Array 的扩展方法
扩展运算符
将类数组或可遍历对象转换为真正的数组
var oo = document.getElementsByTagName('div');
console.log(oo);
var arr = [...oo];
arr.push('a');
console.log(arr);
构造函数方法:Array.from()
将类数组或可遍历对象转换为真正的数组
案例一
let arrayLike = {
'0':'a',
'1':'b',
'2':'c',
'3':'d',
length:4
};
let arr2 = Array.from(arrayLike); // ['a','b','c']
案例二
变成数组:
var arrayLike = {
'0':'张山',
'1':'李四',
'2':'王五',
'3':'嘻嘻',
'4':'哈哈',
'length': 5
}
var ary = Array.from(arrayLike);
console.log(ary);
案例三
var arrayLike = {
'0':'1',
'1':'2',
'length':2
}
var ary = Array.from(arrayLike, item => item * 2)
console.log(ary);
数组实例方法:find()
用于找出第一个复合条件的数组成员,如果没有找到返回undefined
案例一
let ary = [{
id:1,
name:'张三'
},{
id:2,
name:'李四'
}]
let target1 = ary.find((item,index) => item.id == 1);
let target2 = ary.find((item,index) => item.id == 2);
let target3 = ary.find((item,index) => item.id == 3);
console.log(target1); // 1
console.log(target2); // 2
console.log(target3); // undefined
数组实例方法:findlndex()
用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1
用法:查找元素大于几的那个数组的索引
用法:查找元素大于几的数组里面 的元素索引号是几
案例一
let ary = [1,5,10,15];
let index = ary.findIndex((value,index) => value > 9);
console.log(index); //2 因为10的索引号是10
案例二
let ary1 = [10,20,50];
let index1 = ary1.findIndex( item => item > 15);
console.log(index1); // 1 因为20的索引号是1
数组实例方法:includes()
表示某个数组是否包含给定的值,返回值是布尔值
[ 1 , 2 , 3 ] . includes( 2 ) // true
[ 1 , 2 , 3 ] . includes( 5 ) // false
案例一
let arr = ['b','n','s']
let result1 = arr.includes('n')
console.log(result1); //true
let result2 = arr.includes('k')
console.log(result2); //false
String 的扩展方法
模板字符串
es6xin增加字符串的方式,使用反引号定义
let name = `小小`
let name = `是个模板字符串`
console.log(name); //是个模板字符串
模板字符串作用:可以解析变量,换行。
案例一
let name = `莹莹`;
let sayHello = `hello ,我的名字叫 ${name}`;
console.log(name); //莹莹
console.log(sayHello); //hello ,我的名字叫莹莹
模板字符串作用:可以换行,让代码更美观。
案例一
let result = {
name:'丽丽',
age:18
};
let html = `
<div>
<span>${result.name}</span>
<span>${result.age}</span>
</div>
`;
console.log(html); //<div> <span>丽丽</span> <span>18</span> </div>
模板字符串作用:可以调用函数。
案例一
const fn= ()=>{
return `我是函数`;
}
let html = `我是模板字符串 ${fn()}`;
console.log(html); //我是模板字符串 我是函数
实例方法:startsWIith() 和 endsWith()
startsWIith( ) : 表示参数字符串是否在原字符串的头部,返回值是布尔值
endsWith( ): 表示参数字符串是否在原字符串的尾部,返回值是布尔值
let str = `hello word`;
str.startsWith('hello') // true
str.endsWith('!') //true
实例方法:repeat ()
repeat方法表示将原字符串重复n次,返回一个新字符串。
' x '.repeat ( 3 ) //'xxx'
' hello '.repeat ( 2 ) //'hellohello'
可以将字符串重复多次,具体重复多少次看你repeat()多少个
console.log('b12'.repeat(3)); //b12b12b12
Set数据结构
es6 提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值。
哈希set set一般用于搜索比较多
Set本身是一个构造函数,用来生成set数据结构。
const dd = new Set ( );
Set函数可以接受一个数组作为参数,用来初始化。
const dd = new Set ( [1,2,3,4,5,6] );
案例一
const s1 = new Set();
console.log(s1.size); // 0
const s2 = new Set(['a','b','c'])
console.log(s2.size); // 3
Set数据结构做数组去重
const s3 = new Set(['a','a','c','c','c'])
console.log(s3.size); //2
const arr = [...s3];
console.log(arr) //变成数组 ["a", "c"]
Set 数据结构实例方法
- add(value): 添加某个值,返回值是Set结构本身
- delete(value): 删除某个值,返回一个布尔值,表示删除是否成功
- has(value): 返回一个布尔值,表示该值是否为Set的成员
- clear(): 清除所有成员,没有返回值
const s = new Set(); s.add(1).add(2).add(3); //向set结构中添加值 s.delete(2); //删除set结构中的2值 s.has(1); //表示 set结构中是否有1这个值,返回布尔值 s.vlear(); //清除set结构中的所有值
//在set中添加a,b 两个值
const s4 = new Set ();
s4.add('a').add('b');
console.log(s4.size); //2
//在set中删除值,用到的方法是是delete ,如果要删除里面没有,就false
const r1 = s4.delete('c')
console.log(s4.size); //2
console.log(r1); //false
//判断有没有存在d
const r2 = s4.has('d');
console.log(r2); //false
//清空所有,最后是0
s4.clear();
console.log(s4.size); //0