從零開始學 Web 之 ES6（六）ES6基礎語法四

時間 2019-11-17

標籤開始 web es6 基礎語法欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

1、字符串的擴展

includes(str) : 判斷是否包含指定的字符串前端
startsWith(str): 判斷是否以指定字符串開頭java
endsWith(str): 判斷是否以指定字符串結尾
repeat(count): 重複指定次數git

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

2、數值的擴展

二進制與八進制數值表示法: 二進制用0b開頭, 八進制用0o開頭。github

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

3、數組擴展

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>

4、對象擴展

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

5、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的做用：

一、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

二、Set和Map容器可使用for ..of.. 來遍歷。

6、ES7 方法介紹

一、指數運算符：**

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

二、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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。