大家好，这里是「 从零开始学 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'));//trueconsole.log(NaN == NaN);//falseconsole.log(Object.is(NaN, NaN));//trueconsole.log(0 == -0);//trueconsole.log(Object.is(0, -0));//falseObject.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的隐式原型指向obj3obj4.__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,52、Set和Map容器可以使用for ..of.. 来遍历。
六、ES7 方法介绍
1、指数运算符：**
console.log(3**2); // 92、Array.prototype.includes(value); ：判断数组中是否包含指定value。（在ES6中有，str.includes(str1) : 判断str中是否包含指定的字符串str1）
let arr = [1,2,3,4, 'abc'];console.log(arr.includes(2));//trueconsole.log(arr.includes('a'));//false从零开始学 Web 之 ES6（六）ES6基础语法四
原文地址：https://www.cnblogs.com/lvonve/p/9569163.html