专栏首页从零开始学 Web 前端从零开始学 Web 之 ES6(六)ES6基础语法四

从零开始学 Web 之 ES6(六)ES6基础语法四

大家好,这里是「 从零开始学 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Sublime Text3 一些实用设置

    当你把脑袋扭过到显示器以外的地方后再回头看编辑器,光标呢?然后你可能会花点小功夫找到他,就像你平时找鼠标的时候。这个设置会让让光标所处在的那一行高亮,只是稍微亮...

    Daotin
  • js变量提升与函数提升的详细过程

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

    Daotin
  • 从零开始学 Web 之 DOM(七)事件冒泡

    事件冒泡:当有多个元素嵌套,并且这些元素绑定了相同的事件,这时候如果里面的元素事件触发了,那么外面的事件会自动触发。

    Daotin
  • 前端面试题 原

    我们在js的学习中,往往很多东西看过之后,一段时间不用,就忘记了。或者当时就没有深入的理解,能促使我们不断深入学习的动力最好的办法往往参加些面试,能找到自己的不...

    tianyawhl
  • 【专题】常用JavaScript正则表达式(regexp)汇编与示例

    目前收集整理了21个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 I...

    毛瑞
  • JS的数据类型/判断方法/栈与堆/深浅拷贝

    用来检测:undefined、string、number、boolean、symbol、object、function 无法检测引用类型里的Array

    杨肆月
  • 数据类型判断Object.prototype.toString.call

    越学习越觉得基础的不牢固,不懂的,摸棱两可的,学了忘了的,在从入门到放弃的路上一直走着。今天分享一下数据类型判断的方法。

    wade
  • JS 中可以提升幸福度的小技巧

    本文主要介绍一些JS中用到的小技巧,可以在日常Coding中提升幸福度,将不定期更新~

    Nealyang
  • js程序设计01——基本概念

    本文为js高级程序设计学习笔记,笔记中不乏本人学习js的一些心得demo,喜欢的朋友可以直接参考原书“javascript高级程序设计”,写本笔记的目的是对js...

    用户1141560
  • JS 中提升幸福度的小技巧

    然后使用 Number.isNaN来判断是否为 NaN,或者使用 a!==a 来判断是否为 NaN,因为 NaN!==NaN

    小生方勤

扫码关注云+社区

领取腾讯云代金券