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

在这里我会从 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) : 判断是否是NaN

  • Number.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容器对象添加值value
  • delete(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基础语法四的更多相关文章

  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. canvas（一） 基本线条绘制

    var dom = document.getElementById('canvasItem'), ctx = dom.getContext('2d'); //坐标位置默认基于 浏览器窗口(0,0),此 ...

  2. Error while executing: am start -n

    单纯clean project是不行的,选择File-Invalidate Caches/Restart,清除缓存,重启AS Android NDK 是在SDK前面又加上了"原生" ...

  3. AES-GCM算法

    一.简介 http://blog.csdn.net/t0mato_/article/details/53160772

  4. spring boot项目升级到2.0.1，提示java.lang.ClassNotFoundException: org.apache.log4j.Logger错误

    首先肯定是版本出现了一点兼容问题 所以我就进入项目,查看依赖树,cd到项目目录下,mvn dependency:tree 我看到我的项目原先是1.5.9和现在2.0.1的区别在于org.slf4j的依 ...

  5. CITROEN C8 BSI HC12 Mileage Correction with Digiprog3

    CITROEN C8 BSI HC12 odometer correction pinout to Digiprog III Digiprog 3 mileage programmer. The BS ...

  6. zeromq学习记录(四)使用ZMQ_ROUTER ZMQ_DEALER

    /************************************************************** 技术博客 http://www.cnblogs.com/itdef/   ...

  7. boost学习 内嵌类型检测 与 any 的代码练习

    本文是学习 boost源码的一些练习 参考文章来自 刘未鹏 C++的罗浮宫(http://blog.csdn.net/pongba) 目录 http://blog.csdn.net/pongba/ar ...

  8. 使用Maven搭建SpringMVC

    1.创建Maven Project 注意选择webapp 2.添加Maven依赖 <project xmlns="http://maven.apache.org/POM/4.0.0&q ...

  9. C# 创建Dll文件供程序调用方法

    C# 创建Dll文件供程序调用方法 使用C#创建动态Dll文件方法: 1.  在VS2017环境下,新建-项目-选择类库类型: 2. 新创建一个.cs文件(如test.cs),编写代码如下: usin ...

  10. Maven学习 三 Maven与Eclipse结合使用

    一检查是否已经集成了Maven 现在的Eclipse一般都是集成了Maven,如果确定集成开发工具是否集成了Maven, Windows->preferences->Maven,查看是否已 ...