Summary of ES6 knowledge points

1. Variable declaration keyword

1. The VaR global variable will be promoted

2.let local variables are similar to var, except that they can only function locally, that is, they function in a pair of {}, and they will not promote variables and cannot be declared repeatedly

3. The variable type declared by const is generally constant and must be assigned a value. The variable name must be capitalized

2. Structure

1. Array

1. Generally speaking, it can be simply understood as parsing an array or object into a separate variable

2. Basic format:

var [a,b,,c='defalut',...res]=arr

Parsing: comma represents the next bit,... res represents all the remaining elements in the array and can only be placed at the end of the array, and c='default 'represents the default value

3. Exchange variables

[a,b]=[b,a]

2. Structure

Basic format:

var {name,age,say='Hello',...res}

Note: there is no order of attribute names in the object

3. String

3.1. String template

Basic format: ` ${js variable} `, which can realize line feed, add special symbols and other operations

      var obj = { name: "Zhang San", age: 18 };
      var str4 = "Hello, he is" + obj.name + "this year" + obj.age + "year";
      console.log(str4);
      var str5=`Hello, he is ${obj.name},this year ${obj.age}`
      console.log(str5);

 

3.2. Traversal for of

      var str = "The party is in my heart, the powerful country has me";
      // 01 for of str
      for (let s of str) {
        console.log(s);
      }

3.3. There are three main detection methods: return true/false

3.3.1.include(sub) check whether it contains

 var str = "The party is in my heart, the powerful country has me";
      // 02 includes  
      console.log(str.includes("my")); //false
      console.log(str.includes("I")); //true

 

3.3.2.startWith(sub) detection starts with

 

 var str = "The party is in my heart, the powerful country has me";
      // 02 startsWith starts with 

      console.log(str.startsWith("wo")); //false
      console.log(str.startsWith("party")); //true

 

3.3.3.endtWith(sub) detection ends with

 var str = "The party is in my heart, the powerful country has me";
      // 02 endswith ends with
      console.log(str.endsWith("wo")); //false
      console.log(str.endsWith("I")); //true

  3.4 de blank

3.4.1 trim () remove the blank at both ends

      // 03 es5 Remove Blank trim remove blank at both ends 
      var str1 = "  The party is in my heart, the powerful country has me  ";
      console.log(str1);
      console.log(str1.trim());
      

 

3.4.2 trimleft() removes the left margin and trimlight() removes the right margin

    // 03 trimleft remove the left margin trimlight remove the right margin
      var str1 = "  The party is in my heart, the powerful country has me  ";
      console.log(str1);
      console.log(str1.trimLeft());
      console.log(str1.trimRight());

 

3.5 string repetition

      // 05 repeat repeat
      var str2 = "How do you do\n";
      console.log(str2.repeat(6));

 

3.6 filling. Padend (times, content)

 

      // 06 padding at the beginning of padstart and padding at the end of padEnd
      var str3 = "8987";
      console.log(str3.padStart(8, "0"));
      console.log(str3.padEnd(8, "0"));
      console.log("LOVE".padEnd(10, "-"));

  4. Array high order method

4.1forEach() traversal

      // 01 forEach traversal
      var arr = [1, 3, 5, 9];
      //   The element traversed by item, the subscript of the index element, and self the current array
      arr.forEach(function (item, index, self) {
        console.log(index, item, self);
      });

4.2map() mapping

//   02 map mapping, mapping a new array from an existing array
      var arr = [1, 3, 5, 9];
      var arr2 = arr.map(function (item, index, self) {
        return item * 100 + "¥";
      });
      console.log(arr);
      console.log(arr2);

     

4.3 filter


      //   03 filter filter
      var arr = [1, 3, 5, 9];
      var arr3 = [20, 1, 5, 36, 45];
      var arr4 = arr3.filter(function (val) {
        // When the returned value is true, the current element is retained
        // When the returned value is false, the current element is filtered
        return val > 5;
      });
      console.log(arr4);

4.4 reduce (cumulative)

      //   04 reduce cumulative
      var arr = [1, 3, 5, 9];
      var all = arr.reduce(function (res, val, index, self) {
        return res * 10 + val;
        // return res+val
      });
      console.log(all);
      // 1 1+3  1*10+3
      // 2 4+5  13*10+5
      // 3 9+9  135*10+9

     

4.5 some() has a


      // 05 some detection returns true as long as there is a match
      var arr = [1, 3, 5, 9];
      var res = arr.some(function (item) {
        return item > 10;
      });
      console.log(res); //false



     

4.6 every


      //   06 every detection is true (every match is true)
      var arr = [1, 3, 5, 9];
      var result = arr.every(function (item) {
        return item > 5;
      });
      console.log(result); //false

    

4.7 find() find element

      // 07 find the first data greater than 10 in the data
      // Find find element
      var arr = [1, 8, 6, 3, 4, 20, 45, 0, 12];
      var n = arr.find((item) => item > 10);
      console.log("First digit:" + n);

4.8 findindex() find element subscript

      //  08 findIndex find element subscript
      var arr = [1, 8, 6, 3, 4, 20, 45, 0, 12];
      var ind = arr.findIndex((item) => item > 10);
      console.log("subscript:" + ind);

5. Arrow function

      // 01 arrow function omitted function

      // 02 = > left parameter

      // 03 function body and return value on the right of arrow

      // 04 pass two or more parameters in parentheses

      // 05 if there are multiple lines in the function body, curly braces need to be added, and return needs to be in the curly braces

      // 06 if an object is returned, wrap it with ()

      var obj = {
        name: "Zhang San",
        age: 20,
        grow: function () {
          // Who calls setInterval and who is this
          // The arrow function's this points to the function's upper scope this
          window.setInterval(() => {
            console.log(this);
            this.age++;
            console.log(this.name + "already" + this.age + "la");
          }, 1500);
        },
      };
      obj.grow();

6. Function

  6. Function

     function fn(a = 5, b = 6) {
        alert(a + b);
      }

      //   Call extension parameters
      var ps = ["Hello", "Zhu Yilong", "the weather is nice today", "Want to come out and play together?"];
      function meeting(p1, p2, p3, p4) {
        var str = `What should I say? ${p1},${p2},${p3},${p4}`;
        console.log(str);
      }
      //  ps array expansion, passing in
      meeting(...ps);

      //   Definition: indefinite parameter
      // Parameters are not necessarily... Arrays to receive
      function add(...arg) {
        var res = arg.reduce((a, b) => a + b);
        console.log(res);
      }
      add(1, 2, 3, 4);

7. Object: object abbreviation and object dynamic attributes

      // Object abbreviation
      var name = "Zhang San";
      var age = 22;
      var say = function () {
        alert(`Hello, I'm ${this.name}`);
      };
      var obj = {
        name,
        age,
        say,
        doit() {
          alert(this);
        },
      };
      console.log(obj);

      //   Dynamic attributes (object attributes can be spliced through js)
      var nick = "hello";
      var myobj = {
        name: "Zhang San",
        [nick + "speak"]: "Hello",
      };
      console.log(myobj);

  8. Class: this in definition class, instantiation class and instantiation class

Object oriented features:   01 inheritance (extensions)   02 package (constructor)   03 dynamic (04) interface

      // people
      //   Define class
      class Prerson {
        //   Constructor
        constructor(name, age) {
          // The class instance that this in the class points to
          this.name = name;
          this.age = age;
        }
        eat() {
          alert("I don't like the weather today");
        }
      }

      // Instantiation class
      //   P1 and P2 are called instances, instance objects
      var p1 = new Prerson("Zhang San", 30);
      var p2 = new Prerson("Li Si", 22);

      // teacher
      // Extensions inheritance
      class Teach extends Prerson {
        constructor(name, age, major) {
          super(name, age);
          this.major = major;
        }
        teach() {
          console.log(`I'm going to teach the students ${this.major}curriculum`);
        }
      }
      // Instantiation teacher
      var t1 = new Teach("Teacher Ju", 26, "biology");
      var t2 = new Teach("Teacher Wen", 22, "Physics");
      console.log(t1);
      console.log(t2);

  9. Module

9.1 import:

import{name,fun,Square from './api.js'}

Alias as, * for all
import*api from './api.js'
api.name;api.fun()

9.2 export:

Export {name, fun, square} is exported multiple times

export default Squart   By default, you can only export once

10.set: set (array) without duplicate elements

      // set array de duplication
      var arr = [1, 15, 16, 1, 2, 5, 1, 2, 3, 2, 3];
      var arr2 = [...new Set(arr)];
      console.log(arr2);
      //   Instantiate set
      var s1 = new Set([1, 8, 9, 8]);
      for (let s of s1) {
        console.log(s);
      }
      s1.add("love");
      s1.delete(8);
      console.log(s1.has("love"));
      console.log("Length:", s1.size, s1);

 

Tags: ECMAScript html

Posted on Fri, 15 Oct 2021 16:37:40 -0400 by neoboffins