• JavaScript-ES6-基础语法

    ES6-基础语法

    1. let & const

    1.1. let

    声明变量用let

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lettitle>
head>
<body>
    <script>
        // define variables
        let a;
        let b,c,d;
        let e = 100;
        let f = 521, g = 'iloveyou', h = [];

        //1. can not state variables repeatedly
        // let star = 'michael';
        // let star = 'father';

        //2. block level scope  global, function, eval
        // if else while for 
        // {
        //     let girl = 'lisa from blackpink';
        // }
        // console.log(girl);

        //3. there is no variable promotion
        // console.log(song);
        // let song = 'love the way you lie';

        //4. the scope chain is not affected
        {
            let school = 'school w3';
            function fn(){
                console.log(school);
            }
            fn();
        }

    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    1.2. cont

    tips:

    • 对象属性修改和数组元素变化不会发出const错误
    • 声明 对象类型使用const，非对象类型声明选择let
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>const 定义常量title>
head>
<body>
    <script>
        // state constant variables
        const SCHOOL = 'school w3';

        // 1. must assign an initial value
        // const A;
        // 2. normal constants use uppercase (defaul rule)
        // const a = 100;
        // 3. vale of constant can not be changed
        // SCHOOL = 'school w3';
        // 4. block level scope
        {
            const PLAYER = 'michael jordan';
        }
        console.log(PLAYER);
        //5. it is not counted as changes to constancts to change the values of elements of arrays and objects, and no error is reported
        const TEAM = ['UZI','MXLG','Ming','Letme'];
        // TEAM.push('Meiko');      
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    2. 模板字符串

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template stringtitle>
head>
<body>
    <script>
        // ES6 introduces a new way to declare string 『``』 '' "" 
        //1. statement
        // let str = `here is the string`;
        // console.log(str, typeof str);

        //2. a newline character can appear directly in the content
        let str = `
      
                    
    • michael
      • 
                    
    • harry
      • 
                    
    • lisa
      • 
                    
    • allen
      • 
                    
    `    ;
        //3. variables splice
        let lovest = 'michael';
        let out = `${lovest} is the best developer in my heart!!`;
        console.log(out);

        script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    3. 解构赋值

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>decontractive assignment of a variabletitle>
head>
<body>
    <script>
        //ES6 allows to extract values from arrays and objects and assign to variales in a certain pattern，
        //assignment of decontruction。
        //1. array  deconstruction
        const F4 = ['Lisa','Jennie','Rose','Jisoo'];
        let [lisa, jennie, rose, jisoo] = F4;
        console.log(lisa);
        console.log(jennie);
        console.log(rose);
        console.log(jisoo);

        //2. object deconstruction
        const zhao02 = {
            name: 'lisa',
            age: '18',
            dance: function(){
                console.log("Lisa is good at dancing!!!");
            }
        };

        // let {name, age, dance} = zhao02;
        // console.log(name);
        // console.log(age);
        // console.log(dance);
        // dance();

        // 
        let {dance} = zhao02;
        dance();

    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    4. 对象的简化写法

    //ES6 allows to write variables and functions directly inside curly braces as properties and methods of objects
//makes it simple and specific
var nameWold = 'michael'
var change = function(){
    console.log('michael can change the world!!!')
}

const michael = {
    nameWold,
    change,
    dance: function(){
        console.log('michael can dance in the object!!!')
    }

}

console.log('nameWold: ', nameWold)
michael.change()
michael.dance()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    5. 箭头函数

    basic information about arrow function

    // ES6 allows to define a function by =>

// 1. define arrow function
// define a funtion by traditional way
function fun1(){
    console.log('here is the logging from fun1!!!')
}
fun1()

var fun2 = function(para){
    console.log('here is the log from fun2 with param!!!')
}
fun2()

// arrow functon
var arrowFun = () => {
    console.log('here is the log from arrow fun !!!')

}
arrowFun()

var arrowFunWithParam = (a, b) => {
    return a + b
}
console.log('a + b: ', arrowFunWithParam(6, 10))

// abbreviated form of arrow function
var arrowFunWithAbbr = a => a * a
console.log('a * a: ', arrowFunWithAbbr(10))


// 2. this in the arrow function
// in arrow function: this is static, this always points to the value of this in the scope in which the function is declared
function getThisFromFunction(){
    console.log('this from traditional function:', this);   
}
getThisFromFunction()  //  Object [global]

var getThisFromArrowFunc = () => {
    console.log('this from arrow function:', this)
}
getThisFromArrowFunc()  // {}

const MICHAEL = {
    price: '$99'
}

// call the function by keyword key
getThisFromFunction.call(MICHAEL)   // { price: '$99' }
getThisFromArrowFunc.call(MICHAEL)  // {}

// 3. arrow function can not instantiate an object as a construct
let Product = (count, price) => {
    this.count = count
    this.price = price
}

// let product = new Product(100, 200)
// console.log('product: ', product)  // TypeError: Product is not a constructor

let CommonProduct = function(count, price) {
    this.count = count
    this.price = price
}

let commonProduct = new CommonProduct(100, 200)
console.log('common product: ', commonProduct) // CommonProduct { count: 100, price: 200 }

// 4. arrow function can not use arguments variables
let commonFun = function(){
    console.log('arguments from function: ', arguments)
}
commonFun(1, 3, 5, 9)

let arrowFunction = () => {
    console.log('arguments from arrow function: ', arguments)
}
// arrowFunction(1, 3, 5, 9)  // 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78

    arrow function practice

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>arrow function practice</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        // requirement 1: the color is changed to be pink after  2 seconds since click the div
        // get the element
        let ad = document.getElementById('ad')

        // bind event
        // implement by common function
        // ad.addEventListener("click", function(){
        //     // save this
        //     let _this = this
        //     console.log('_this: ', _this)   // ad
        //     setTimeout(function(){
        //         console.log('this: ', this) // window w
        //         // this.style.background = 'pink'
        //         _this.style.background = 'pink'
        //     }, 2000)
        // })

        // implement by arrow function
        ad.addEventListener('click', function(){
            setTimeout(() => {
                console.log('this: ', this)
                this.style.background = 'pink'
            }, 2000)
        })

        // requirement 2: return the odd elements from an array
        const arr = [1,6,9,10,100,25];
        const result = arr.filter(function(item){
            if (item % 2 === 0){
                return true
            }else{
                return false
            }
        })

        const result2 = arr.filter(item => item % 2 === 0)
        console.log('result: ', result)
        console.log('result2: ', result2)
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    6. rest 参数

    ES6 引入rest参数，用于获取函数的实参，用来替代arguments
    rest参数非常适合不定个数参数函数的场景

    // ES6 introduces rest arguments, which take arguments to functions instead of arguments
// rest arguments are well suited to scenarios where functions with an indefinite number of arguments are used

// ES5
function girlGroup(){
    console.log(arguments)
}
girlGroup('Lisa', 'Rose', 'Jennie', 'Jisoo')  // [Arguments] { '0': 'Lisa', '1': 'Rose', '2': 'Jennie', '3': 'Jisoo' }

// rest arguments
function newGirlGroup(...args){
    console.log(args)
}
newGirlGroup('Lisa', 'Rose', 'Jennie', 'Jisoo') // [ 'Lisa', 'Rose', 'Jennie', 'Jisoo' ]

// rest param must be placed at the end of the parameters
function newGirlGroupFromKorean(member1, member2, ...args){
    console.log(member1)
    console.log(member2)
    console.log(args)
}
newGirlGroupFromKorean('Lisa', 'Rose', 'Jennie', 'Jisoo') 
// Lisa
// Rose
// [ 'Jennie', 'Jisoo' ]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    7.spread 扩展运算符

    扩展运算符(spread)也是三个点(…), 好比rest参数的逆运算, 讲一个数据准尉用逗号分割的参数序列，对数组进行解包

    // ... expansion operator converts an array to a comma-separated sequence of arguments
// 1. expand array
// state an array
const blackpink = ['lisa', 'rose', 'jennie', 'jisoo']

// state a function
function girlGroup(){
    console.log(arguments)
}

girlGroup(...blackpink) // [Arguments] { '0': 'lisa', '1': 'rose', '2': 'jennie', '3': 'jisoo' }

// 2. expand object
// state objects first
const object1  = {
    field1:'fieldVaule',
    field2:'field2Value'
}

const object2  = {
    field3:'fieldVaule',
    field4:'field2Value'
}

const contactObject = {...object1, ...object2}
console.log('contactObject: ', contactObject)

// array concat
const part1 = ['lisa', 'rose']
const part2 = ['jennie', 'jisoo']
const concatArray = part1.concat(part2).concat(part2)
console.log('concatArray: ', concatArray)

// array clone
const cloneArray = [...blackpink]
console.log('cloneArray: ', cloneArray)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
  • 相关阅读:
    AI伦理：科技发展中的人性之声
    Java连接FTP服务器，并使用ftp连接池进行文件操作
    基于Java的行李寄存系统设计和实现(源码+lw+部署文档+讲解等)
    蓝牙无线IP网络多功能多媒体音柱带遥控
    NPOI导出千分位带.00格式显示
    C#图解教程(第四章)
    Elasticsearch跨集群检索配置
    verilog-延迟语句
    详细计算机专业毕业设计开题报告书写方法
    Chromium VIZ工作流
  • 原文地址：https://blog.csdn.net/weixin_46036165/article/details/127955903