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"));
ES6——ES6内置对象相关推荐
- ES6新增语法与内置对象扩展
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.什么是ES6 ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项 ...
- ES6学习笔记（五）：轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
- es6 内置对象扩展rest, Arry 扩展方法Array.from(),find(), findIndex(),includes()
1.es6内置对象扩展rest实参 2. Arry 扩展方法 (1)构造函数方法:Array.from() (2) find() (3) findIndex() (4)includ ...
- 对JavaScript内置对象arguments的一些见解
深入理解JavaScript内置对象arguments 这两天有伙伴问到我关于arguments的问题,使我产生了一种arguments对象容易被学习者忽略的想法,想分享一下自己对于JavaScrip ...
- javascript . 05 json的组成、for...in 遍历对象、简单数据类型与复杂数据类型的传值与传址、内置对象...
对象字面量 JSON var obj = { aaa :999}; var json={"aaa":999,"bbb":888}; "kay&quo ...
- python给js变量赋值_python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）...
11.4 JavaScript 11.41 变量 1.声明变量的语法 //1. 先声明后定义 var name; //声明变量时无需指定类型,变量name可以接受任意类型 name= "eg ...
- 《JavaScript高级程序设计（第四版）》红宝书学习笔记（第五章：基本引用类型，原始值包装类型，单例内置对象）
第五章:基本引用类型 引用值(或者对象)是某个特定引用类型的实例.新对象通过使用new操作符后跟一个构造函数(constructor)来创建. 5.1 Date 这里不对Date进行详细深入,仅基于书 ...
- python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）...
11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...
- JS内置对象操作方法整理
JS对象操作方法整理 文章目录 JS对象操作方法整理 数组 ES5 ES6 字符串 String 日期 Date() 数字 Number 算数 Math 数组 ES5 concat() 连接两个或更多 ...
- javascript对象分类（原生对象，内置对象）
<!-- javascript对象分类 javascript的对象大致可以分为以下几种: --原生对象:又名本地对象.native object.独立于宿主环境的ECMAScript实现提供的对 ...
最新文章
- 5s的app显示无法连接服务器,苹果5s无法连接app store解决方法汇总
- 流水灯实例，点亮发光管LED并闪烁（查表操作）
- jq实现文字个数限制_分布式系统高可用实战之限流器（Go 版本实现）
- WS2812自动生成花样c语言,WS2812实时时钟程序 STM32F103C8T6+WS2812串行总线控制60个全彩LED - 下载 - 搜珍网...
- 垃圾收集算法与垃圾收集器
- 【UOJ575】光伏元件【网络流建图】【上下界网络流】【费用流】
- 无废话WPF系列5：控件派生图
- 什么是二叉树？以及二叉树如何遍历？
- 企业实战_02_MyCat基本元素
- workbench提示工作负载高度不平衡_功率因数负载组
- 3.4.3 深度探索linux,3.2.4 vmlinux.bin的构建过程（3）
- NYOJ-邮票分你一半（dp）
- 一步一步写算法（之排序二叉树删除-3）
- does not esixt in the current content error
- str python3_python3.4.3如何转换str字符串？
- 用Excel 随机抽取不重复n行数据
- 深度学习训练中噪声减小吗_深度学习中噪声标签的影响和识别
- Matlab 图像处理
- REST-assured简介
- 软文标题怎么写吸引人？记住这几个套路