ES6 new features (1)

Table of contents

1. String extension

(1) String traverser interface (for...of...)

(2) Template string

2. Method of adding string

(1) Include method

 (2) Repeat method

(3) Completion method

(4) Method of eliminating spaces

(5) Return the character at the specified position

three. array spread operator

(1) traverse the array

 (2) Find the maximum value

 (3) Merge arrays 

---

1. String extension

(1) String traverser interface (for...of...)

<script>
        for (let i of 'abcdefg') {
            console.log(i)
        }
</script>

(2) Template string

Use · to indicate (wavy line button), the specific function is as follows: dynamic link can be realized.

<script>
        let href = "http://www.abidu.com"
        let text = "百度"
        var s = `<a href="${href}">${text}</a>`
        console.log(s);
    </script>

2. Method of adding string

(1) Include method

includes: returns a Boolean value, indicating whether the parameter string is found
startsWith: returns a Boolean value, indicating whether the parameter string is placed in the header of the original string

endsWith: returns a Boolean value indicating whether the parameter string is at the end of the original string

The above three parameters can accept the second parameter to indicate the position to start searching

<script>
        let s = "abcdefg";
        console.log(s.includes('a')); //true
        console.log(s.includes('o')); //false
        console.log(s.startsWith("ab")); //true
        console.log(s.startsWith("abcd")) //true
        console.log(s.endsWith("f")); //false
        console.log(s.endsWith('g')); //true
    </script>

 (2) Repeat method

repeat: returns a new string, indicating that the original string is repeated n times

<script>
        console.log("s".repeat(3));
        console.log("abc".repeat(3));
    </script>

(3) Completion method

If a string is not enough to the specified length, it will be completed at the head or tail.

padStart() is used for header completion

padEnd() for tail completion

<script>
        console.log("as".padStart(5, "s"));
        console.log("o".padStart(3, "aopc"));
        console.log("opop".padEnd(5, "abcd"));
        console.log("l".padEnd(3, "iopl"));
    </script>

(4) Method of eliminating spaces

trim() eliminates leading and trailing spaces

trimStart() eliminates spaces at the beginning of the string

trimEnd() eliminates trailing spaces

They return new strings and do not modify the original strings

<script>
        var s = "  sio p    ";
        console.log(s.trim());
        console.log(s.trimStart());
        console.log(s.trimEnd());
    </script>

(5) Return the character at the specified position

at() accepts an integer as a parameter, returns the character at the position specified by the parameter, and supports negative indexes (that is, the position of the reciprocal)

<script>
        var s = "abcdef";
        console.log(s.at(2));
        console.log(s.at(-2));
    </script>

three. array spread operator

The spread operator is three dots (...), you can understand it as expanding the array, let's look at some application scenarios

(1) traverse the array

 <script>
        var a1 = [10, 30, 50, 60];
        console.log(...a1);
    </script>

 (2) Find the maximum value

<script>
        var a1 = [10, 30, 50, 60];
        console.log(Math.max(...a1));
    </script>

 (3) Merge arrays 

 <script>
        var a1 = [10, 30, 50, 60];
        var a2 = [1, 2, 3];
        console.log([...a1, ...a2]);
    </script>