大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、字符串的扩展

  • includes(str) : 判断是否包含指定的字符串

  • startsWith(str) : 判断是否以指定字符串开头

  • endsWith(str) : 判断是否以指定字符串结尾

  • repeat(count) : 重复指定次数

  1. let str = 'abcdefg';
  2. console.log(str.includes('a')); //true
  3. console.log(str.includes('h')); //false
  4. //startsWith(str) : 判断是否以指定字符串开头
  5. console.log(str.startsWith('ab')); //true
  6. console.log(str.startsWith('ac')); //false
  7. //endsWith(str) : 判断是否以指定字符串结尾
  8. console.log(str.endsWith('fg')); //true
  9. console.log(str.endsWith('d')); //false
  10. //repeat(count) : 重复指定次数a
  11. console.log(str.repeat(3)); // abcdefgabcdefgabcdefg

二、数值的扩展

二进制与八进制数值表示法: 二进制用0b开头, 八进制用0o开头。

  • Number.isFinite(i) : 判断是否是有限大的数

  • Number.isNaN(i) : 判断是否是NaN

  • Number.isInteger(i) : 判断是否是整数

  • Number.parseInt(str) : 将字符串转换为对应的数值

  • Math.trunc(i) : 直接去除小数部分

  1. console.log(0b1010); //10
  2. console.log(0o56); //46
  3. console.log('--------------------');
  4. //Number.isFinite(i) : 判断是否是有限大的数
  5. console.log(Number.isFinite(NaN)); //false
  6. console.log(Number.isFinite(5)); //true
  7. console.log(Number.isFinite(Infinity)); //false
  8. console.log('--------------------');
  9. //Number.isNaN(i) : 判断是否是NaN
  10. console.log(Number.isNaN(NaN)); //true
  11. console.log(Number.isNaN(5)); //false
  12. console.log(Number.isNaN(undefined)); //false
  13. console.log('--------------------');
  14. //Number.isInteger(i) : 判断是否是整数
  15. console.log(Number.isInteger(5.23)); //false
  16. console.log(Number.isInteger(5.0)); //true
  17. console.log(Number.isInteger(5)); //true
  18. console.log('--------------------');
  19. //Number.parseInt(str) : 将字符串转换为对应的数值
  20. console.log(Number.parseInt('123abc')); //123
  21. console.log(Number.parseInt('a123abc')); //NaN
  22. console.log('--------------------');
  23. // Math.trunc(i) : 直接去除小数部分
  24. 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的元素下标

  1. <body>
  2. <button>测试1</button>
  3. <br>
  4. <button>测试2</button>
  5. <br>
  6. <button>测试3</button>
  7. <br>
  8. <!--
  9. 1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
  10. 2. Array.of(v1, v2, v3) : 将一系列值转换成数组
  11. 3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
  12. 4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
  13. -->
  14. <script type="text/javascript">
  15. //Array.from(v) : 将伪数组对象或可遍历对象转换为真数组,返回值即为真数组
  16. // 使用 DOM操纵获取的元素集合是伪数组。
  17. let btns = document.getElementsByTagName('button');
  18. console.log(btns.length); //3
  19. Array.from(btns).forEach(function (item, index) {
  20. console.log(item, index);
  21. });
  22. //Array.of(v1, v2, v3) : 将一系列单独的值转换成数组
  23. let arr = Array.of(1, 'abc', true);
  24. console.log(arr);
  25. //find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
  26. let arr1 = [1, 3, 5, 2, 6, 7, 3];
  27. let result = arr1.find(function (item, index) {
  28. // 查找arr1数组中第一个大于3的元素
  29. return item > 3;
  30. });
  31. console.log(result); //5
  32. //findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
  33. let result1 = arr1.findIndex(function (item, index) {
  34. // 查找arr1数组中第一个大于3的元素下标值
  35. return item > 3;
  36. });
  37. console.log(result1); //2
  38. </script>
  39. </body>

四、对象扩展

  • Object.is(v1, v2) :判断2个数据是否完全相等。(内部是的实现原理是比较字符串是否完全相等)
  1. console.log(Object.is('abc', 'abc'));//true
  2. console.log(NaN == NaN);//false
  3. console.log(Object.is(NaN, NaN));//true
  4. console.log(0 == -0);//true
  5. console.log(Object.is(0, -0));//false
  • Object.assign(target, source1, source2..): 将源对象的属性复制到目标对象上
  1. let obj = {name : 'Daotin', age : 18, c: {d: 2}};
  2. let obj1 = {};
  3. Object.assign(obj1, obj);
  4. console.log(obj1, obj1.name);
  • 直接操作__proto__属性
  1. let obj3 = {name : 'Daotin', age : 18};
  2. let obj4 = {};
  3. // obj4的隐式原型指向obj3
  4. obj4.__proto__ = obj3;
  5. console.log(obj4, obj4.name, obj4.age);// {name : 'Daotin', age : 18} Daotin 18

五、set容器和map容器

Set容器 : 无序不可重复的多个value的集合体。

Set容器需要通过new 来创建一个Set容器对象,参数即为多个value值。

  1. let set = new Set([1,2,3,4,3,2,1,6]);

set容器对象的方法和属性:

  • Set() :set容器的构造函数(不带参数value集合)
  • Set(array):set容器的构造函数(带参数value集合)
  • add(value):向set容器对象添加值value
  • delete(value):删除set容器对象的value值
  • has(value):判断set容器是否有value值
  • clear():清空set容器
  • size:相当于数组的length

Map容器 : 无序的 key不重复的多个key-value的集合体。

注意:Map的参数数组的集合,每一个数组都是key-value的形式。整个数组集合的外面用[]包围,而不是{}

  1. 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容器可以为数组去重。

  1. let arr = [1, 2, 3, 4, 5, 2, 4, 5];
  2. let set = new Set(arr);
  3. arr = [];
  4. for (let i of set) {
  5. arr.push(i);
  6. }
  7. console.log(arr); // 1,2,3,4,5

2、Set和Map容器可以使用for ..of.. 来遍历。

六、ES7 方法介绍

1、指数运算符:**

  1. console.log(3**2); // 9

2、Array.prototype.includes(value); :判断数组中是否包含指定value。(在ES6中有,str.includes(str1) : 判断str中是否包含指定的字符串str1)

  1. let arr = [1,2,3,4, 'abc'];
  2. console.log(arr.includes(2));//true
  3. console.log(arr.includes('a'));//false

从零开始学 Web 之 ES6(六)ES6基础语法四的更多相关文章

  1. 从零开始学 Web 之 ES6(四)ES6基础语法二

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 从零开始学 Web 之 ES6(五)ES6基础语法三

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 从零开始学 Web 之 ES6(三)ES6基础语法一

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 从零开始学 Web 之 ES6(一)ES5严格模式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. 从零开始学 Web 之 ES6(二)ES5的一些扩展

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 之 Vue.js(六)Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  8. 从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 从零开始学 Web 之 Ajax(二)PHP基础语法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 杨其菊201771010134《面向对象程序设计(java)》第一周学习总结

    第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com 安迪儿 程序设计评测:https://pintia.cn/ 迷路的麋鹿回不来家了 代码 ...

  2. 教你用PS快速抠出长发

    抠简单的长发背景时可以利用快速选择工具,十分方便就能抠出来. 这类背景的图片只需要一个工具就行了,没错,只用快速选择工具. 拖到ps,然后选择快速选择工具. 用工具选中大部分的人 选择.选择并遮住 选 ...

  3. 让.net core 支持静态文件

    想不到默认的.net core竟然不支持静态文件,还需要额外配置中间件来支持 1.Nuget安装  Microsoft.aspnetcore.staticfiles 2.在Startup.cs中使用服 ...

  4. python_day11

    一.简介 1.什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 2.关系型数据库 ...

  5. [uboot] (番外篇)uboot relocation介绍

    http://blog.csdn.net/ooonebook/article/details/53047992 以下例子都以project X项目tiny210(s5pv210平台,armv7架构)为 ...

  6. centos7 安装搜狗输入法

    1.root权限,卸载 ibus : yum remove ibus 2.加入EPEL源   sudo yum install epel-release 3.添加mosquito-myrepo源 su ...

  7. break语句和continue语句

    1. break 语句 break语句只能用在switch语句中,其作用是跳出switch语句或跳出本层循环. 2. continue 语句 continue语句只能用在循环体中,用于结束本次循环,即 ...

  8. C#实现录音录像录屏源码

    以前写过两篇录音和录像的文章(实现语音视频录制.在服务器端录制语音视频),最近有朋友问,如果要实现屏幕录制这样的功能,该怎么做了?实际上录屏的原理跟录音.录像是差不多的,如果了解了我前面两篇文章中介绍 ...

  9. 使用Phabricator进行代码审查

    Pharicator 是FB的代码审查工具,主要开发者为Evan Priestley,是一个开源软件,可在Apache许可证第2版下作为自由软件分发.详细信息可查看官方文档.这里从应用的角度,一步一步 ...

  10. iOS 抓包

    通过tcpdump对iOS进行流量分析(无需越狱 iOS Packet Tracing 将 iOS 设备通过 USB 连接到 Mac 打开 terminal rvictl -s $UDID 运行 tc ...