从零开始学 Web 之 ES6(六)ES6基础语法四
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......
- github:https://github.com/Daotin/Web
- 微信公众号:Web前端之巅
- 博客园:http://www.cnblogs.com/lvonve/
- CSDN:https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一、字符串的扩展
includes(str)
: 判断是否包含指定的字符串startsWith(str)
: 判断是否以指定字符串开头endsWith(str)
: 判断是否以指定字符串结尾repeat(count)
: 重复指定次数
let str = 'abcdefg';
console.log(str.includes('a')); //true
console.log(str.includes('h')); //false
//startsWith(str) : 判断是否以指定字符串开头
console.log(str.startsWith('ab')); //true
console.log(str.startsWith('ac')); //false
//endsWith(str) : 判断是否以指定字符串结尾
console.log(str.endsWith('fg')); //true
console.log(str.endsWith('d')); //false
//repeat(count) : 重复指定次数a
console.log(str.repeat(3)); // abcdefgabcdefgabcdefg
二、数值的扩展
二进制与八进制数值表示法: 二进制用0b
开头, 八进制用0o
开头。
Number.isFinite(i)
: 判断是否是有限大的数Number.isNaN(i)
: 判断是否是NaNNumber.isInteger(i)
: 判断是否是整数Number.parseInt(str)
: 将字符串转换为对应的数值Math.trunc(i)
: 直接去除小数部分
console.log(0b1010); //10
console.log(0o56); //46
console.log('--------------------');
//Number.isFinite(i) : 判断是否是有限大的数
console.log(Number.isFinite(NaN)); //false
console.log(Number.isFinite(5)); //true
console.log(Number.isFinite(Infinity)); //false
console.log('--------------------');
//Number.isNaN(i) : 判断是否是NaN
console.log(Number.isNaN(NaN)); //true
console.log(Number.isNaN(5)); //false
console.log(Number.isNaN(undefined)); //false
console.log('--------------------');
//Number.isInteger(i) : 判断是否是整数
console.log(Number.isInteger(5.23)); //false
console.log(Number.isInteger(5.0)); //true
console.log(Number.isInteger(5)); //true
console.log('--------------------');
//Number.parseInt(str) : 将字符串转换为对应的数值
console.log(Number.parseInt('123abc')); //123
console.log(Number.parseInt('a123abc')); //NaN
console.log('--------------------');
// Math.trunc(i) : 直接去除小数部分
console.log(Math.trunc(13.123)); //13
三、数组扩展
Array.from(v)
: 将伪数组对象或可遍历对象转换为真数组Array.of(v1, v2, v3)
: 将一系列值转换成数组find(function(value, index, arr){return true})
: 找出第一个满足条件返回true的元素findIndex(function(value, index, arr){return true})
: 找出第一个满足条件返回true的元素下标
<body>
<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<!--
1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
-->
<script type="text/javascript">
//Array.from(v) : 将伪数组对象或可遍历对象转换为真数组,返回值即为真数组
// 使用 DOM操纵获取的元素集合是伪数组。
let btns = document.getElementsByTagName('button');
console.log(btns.length); //3
Array.from(btns).forEach(function (item, index) {
console.log(item, index);
});
//Array.of(v1, v2, v3) : 将一系列单独的值转换成数组
let arr = Array.of(1, 'abc', true);
console.log(arr);
//find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
let arr1 = [1, 3, 5, 2, 6, 7, 3];
let result = arr1.find(function (item, index) {
// 查找arr1数组中第一个大于3的元素
return item > 3;
});
console.log(result); //5
//findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
let result1 = arr1.findIndex(function (item, index) {
// 查找arr1数组中第一个大于3的元素下标值
return item > 3;
});
console.log(result1); //2
</script>
</body>
四、对象扩展
Object.is(v1, v2)
:判断2个数据是否完全相等。(内部是的实现原理是比较字符串是否完全相等)
console.log(Object.is('abc', 'abc'));//true
console.log(NaN == NaN);//false
console.log(Object.is(NaN, NaN));//true
console.log(0 == -0);//true
console.log(Object.is(0, -0));//false
Object.assign(target, source1, source2..)
: 将源对象的属性复制到目标对象上
let obj = {name : 'Daotin', age : 18, c: {d: 2}};
let obj1 = {};
Object.assign(obj1, obj);
console.log(obj1, obj1.name);
- 直接操作
__proto__
属性
let obj3 = {name : 'Daotin', age : 18};
let obj4 = {};
// obj4的隐式原型指向obj3
obj4.__proto__ = obj3;
console.log(obj4, obj4.name, obj4.age);// {name : 'Daotin', age : 18} Daotin 18
五、set容器和map容器
Set容器 : 无序不可重复的多个value的集合体。
Set容器需要通过new 来创建一个Set容器对象,参数即为多个value值。
let set = new Set([1,2,3,4,3,2,1,6]);
set容器对象的方法和属性:
Set()
:set容器的构造函数(不带参数value集合)Set(array)
:set容器的构造函数(带参数value集合)add(value)
:向set容器对象添加值valuedelete(value)
:删除set容器对象的value值has(value)
:判断set容器是否有value值clear()
:清空set容器size
:相当于数组的length
Map容器 : 无序的 key不重复的多个key-value的集合体。
注意:Map的参数数组的集合,每一个数组都是key-value的形式。整个数组集合的外面用
[]
包围,而不是{}
。
let map = new Map([['name', 'Daorin'],['age', 18]]);
Map()
Map(array)
set(key, value) // 类似于set容器的add方法
get(key)
delete(key)
has(key)
clear()
size
Set和Map的作用:
1、Set容器可以为数组去重。
let arr = [1, 2, 3, 4, 5, 2, 4, 5];
let set = new Set(arr);
arr = [];
for (let i of set) {
arr.push(i);
}
console.log(arr); // 1,2,3,4,5
2、Set和Map容器可以使用for ..of..
来遍历。
六、ES7 方法介绍
1、指数运算符:**
console.log(3**2); // 9
2、Array.prototype.includes(value);
:判断数组中是否包含指定value。(在ES6中有,str.includes(str1)
: 判断str中是否包含指定的字符串str1)
let arr = [1,2,3,4, 'abc'];
console.log(arr.includes(2));//true
console.log(arr.includes('a'));//false
从零开始学 Web 之 ES6(六)ES6基础语法四的更多相关文章
- 从零开始学 Web 之 ES6(四)ES6基础语法二
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 ES6(五)ES6基础语法三
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 ES6(三)ES6基础语法一
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 ES6(一)ES5严格模式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 ES6(二)ES5的一些扩展
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Vue.js(六)Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Ajax(二)PHP基础语法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- Python数据分析--Pandas知识点(三)
本文主要是总结学习pandas过程中用到的函数和方法, 在此记录, 防止遗忘. Python数据分析--Pandas知识点(一) Python数据分析--Pandas知识点(二) 下面将是在知识点一, ...
- Poiji:基于列名绑定方式将Excel单元行转换为JavaBean的开源框架
公司的日常事务中经常需要使用excel进行数据汇总,导入导出进行归类统计分析. 因为没有广泛流行的单元行到类转换/属性绑定工具,在功能开发之初或者很长一段时间内, 业务系统中我们处理普通excel数据 ...
- python的配置
1.下载python https://jingyan.baidu.com/article/0bc808fc42dfab1bd485b99f.html 2.转载:https://www.cnblogs. ...
- Loadrunner登录判断
loadrunner判断登录是否成功,以下方法可以解决:1.利用添加检查点web_reg_find函数的方法---------------------------- lr_start_transact ...
- Python3实战系列之八(获取印度售后数据项目)
问题:续接上一篇.说干咱就干呀,勤勤恳恳写程序呀! 目标:此篇开始进入正题了.为实现我们整个项目功能而开始实现各个子模块功能.首先实现第一篇列出的分步功能模块的第五步: 5.python连接SQL S ...
- 转载-js如何设置网页横屏和竖屏切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Android单片机与蓝牙模块通信实例代码
Android单片机与蓝牙模块通信实例代码 参考路径:http://www.jb51.net/article/83349.htm 啦啦毕业了,毕业前要写毕业设计,需要写一个简单的蓝牙APP进行交互,通 ...
- C#List源码
List // C# 源码 public class List<T> : IList<T>, System.Collections.IList, IReadOnlyList&l ...
- js将数组根据条件分组
//将数组根据条件分组 function getTreeDateByParam(list, param, fun){ var data = {}; if(list && list.le ...
- A1280. 最长双回文串
学习了回文树,地址:http://blog.csdn.net/u013368721/article/details/42100363: 这个题就是正这反着加一遍就好,一开始我想的是枚举每个位置,然后一 ...