ES6——ES6内置对象
文章目录
- 前言
- 一、array 的扩展方法。
- 1. 展开语法
- 2. Array.from()方法
- 3. array.find() 方法
- 4. array.findindex()方法
- 5. array.includes()方法
- 二、String的扩展方法
- 1. 模板字符串定义
- 2. 模板字符串解析变量
- 3. startsWith()、endsWith()
- 4. repeat( )
- 三、Set Map 数据结构
- 1. Set 数据结构
- 2. Map 数据结构
- 四、 DOM classList 属性
- 1. add(class1,class2)
- 2. contains(class)
- 3. item(index)
- 4. remove(class1,class2)
- 5. toggle(*class,* true\|false)
一、array 的扩展方法。
1. 展开语法
...扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
举例1：
let ary = [1, 2, 3];
console.log(...ary); // 1 2 3,相当于下面的代码
console.log(1,2,3);
举例2：
合并数组
let arr1 = [1, 2, 3];
let arr2 = [4,5,6];
// let arr3 = [...arr1,...arr2];
arr1.push(...arr2);
console.log(arr1);
举例3：
将类数组转为数组
let eledivs = document.getElementsByTagName('div');
eledivs = [...eledivs];//Array.prototype.slice.call(eledivs);
2. Array.from()方法——方法名为大写，意为Array 的属性
将伪数组或可遍历对象转换为真正的数组。
举例1：
Array.from('12345') // [1,2,3,4,5]
举例2：
let arr1 = {
1:'a',
2:'b',
'length':3
}
console.log(Array.from(arr1));//undefined ,a,b.
3. array.find() 方法——写法为小写，意为当前数组的方法
find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
举例1：
let arr1 = [1,2,3,2];
let target = arr1.find( item => item==2);
console.log(target);//2,如果未找到，返回undefined
举例2：
let person = [
{name:"张三",age:16},
{name:"李四",age:17},
{name:"王五",age:18},
]
let target = person.find((item,index)=>{return item.name=='张三'});
console.log(target.name);
4. array.findindex()方法
定义：用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。
举例1：
let ary = [1, 5, 10, 15];
let index = ary.findIndex((item, index) => item > 9);
console.log(index); // 2
5. array.includes()方法
定义：判断某个数组是否包含给定的值，返回布尔值。
举例1：
let ary = [1, 5, 10, 15];
console.log(ary.includes(5));//true
二、String的扩展方法
1. 模板字符串定义
ES6新增的创建字符串的方式，使用反引号定义 let name = `张三`;
2. 模板字符串解析变量
-- 反引号定义模板
let name = '张三';
let sayHello = `hello,my name is ${name}`; // hello, my name is Lee
-- 模板字符串换行
let result = {
name: '张三',
age: 28,
sex: '男'
}
let html = ` <div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div> `;
console.log(html);
-- 模板字符串中调用函数
const sayName = function () {
return '张三';
};
let greet = `${sayName('张三')} ，你好！`;
console.log(greet);
3. startsWith()、endsWith()
- startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
- endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
举例1：
let str = 'Hello world!';
str.startsWith('Hello'); // true
str.endsWith('!'); // true
str.endsWith('xx'); // false
4. repeat( )
repeat方法表示将原字符串重复n次，返回一个新字符串。
举例：
console.log('hello'.repeat(2));//hellohello
三、Set Map 数据结构
1. Set 数据结构
ES6 提供了新的数据结构 Set,它类似于数组，但是成员的值都是唯一的，没有重复的值。
'
定义： const s = new Set();
初始化：const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4};
数据遍历：forEach方法，用于对每个成员执行某种操作，没有返回值。
s.forEach( v => console.log(v));
举例：
const s = new Set();
s.add(1).add(2);//添加值
s.delete(2);//删除值，不是索引
console.log(s.has(2));//set有无2，有返回true
console.log(s.clear());//清除所有的值
2. Map 数据结构
JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制，map的键不限于字符串，对象也可以称为键。是一组一组的key valued 的值。
举例：
let info = {age:18,height:173};
let person = new Map();
person.set(info,'人的详细信息');
person.set('name','张三'); //添加值
console.log(person.get("name")); //得到值
console.log(person.size);//获得map的个数
person.delete('name');//删除元素
console.log(person.size);
console.log(person.get(info));//对象作为键
//person.clear();//清空所有的值
console.log(person);
Person.keys()//获得所有的键
Person.values()//获得所有的值
Person.size//获得键的数量
四、 DOM classList 属性
1. add(class1,class2)
添加一个类，如果类不存在则不添加。
document.getElementById("mydiv").classList.add("demodiv","demodiv1");
2. contains(class)
判断元素中是否存在某个类。存在返回true，反之返回false。
let x = document.getElementById("mydiv").classList.contains("demodiv");
console.log(x);
3. item(index)
返回元素中索引值对应的类名。索引值从 0 开始。 如果索引值在区间范围外则返回 *null*
document.getElementById("mydiv").classList.item(0);
4. remove(class1,class2)
移除元素中一个或多个类名，移除不存在的类名，不会报错。
let mydom = document.getElementById("mydiv");
mydom.classList.add("demodiv");
console.log(mydom.classList.contains("demodiv")); // true
mydom.classList.remove("demodiv");
console.log(mydom.classList.contains("demodiv"));//false
5. toggle(*class,* true\|false)
在元素中切换类名。 第一个参数为要在元素中移除的类名，并返回 false。 如果该类名不存在则会在元素中添加类名，并返回 true。 第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。
let mydom = document.getElementById("mydiv");
mydom.classList.toggle("demodiv");
console.log(mydom.classList.contains("demodiv"));
mydom.classList.toggle("demodiv");
console.log(mydom.classList.contains("demodiv"));