es6语法

. . . . .

已于 2022-05-26 17:19:14 修改

阅读量187

点赞数

分类专栏： HTML5 文章标签： javascript 前端开发语言

于 2018-09-06 11:02:47 首次发布

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/82457399

版权

HTML5 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1. JavaScript中var、let、const区别？

使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；
使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；
使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。使用const声明的变量只可以在声明时赋值，不可随意修改，这是最大的特点。
参考链接1
参考链接2
参考链接3

5. 模块化

export default 和export的区别：

export default 在一个文件中只能用一次，导出一个对象，导出时不需要指定导出的名字是什么，只需要在import的时候定义一个对象名称即可，而且在import的时候不需要加花括号。
export 在一个文件中可用用多次，来导出多个对象，导出时要指定导出的对象名字是什么。在import的时候需要用花括号来包住对象名字。

例如：
在这里插入图片描述

在这里插入图片描述

对于 import { fn1, fn2} from './util2.js'
也可以这样写： import * as util from './util2.js'把导入的内容进行打包，然后通过util.fn1、util.fn2来使用。
但是上面这种组件化的es6语法在浏览器中目前并没有得到很好的支持。

6. 函数的Rest参数和数组的扩展

...在不同的位置具有不同的作用

Rest参数就不多说了(看下面demo)
对数组、字符串的扩展：
…具有拆解功能
例如：
…[1,2,4] -> 1 2 4
[…[1,2,4] ] -> [1, 2, 4]
…‘es6’ -> ‘e’,‘s’,‘6’
[…‘es6’] -> [‘e’,‘s’,‘6’]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6-2Demo演示</title>
</head>
<body>
<h2>
    ES6-2Demo演示
</h2>
<script>
    function sum(x,y,z){
        let total = 0;
        if(x)total+=x;
        if(y)total+=y;
        if(z)total+=z;

        console.log(`total:${total}`)
    }

    sum(5,"",9)

    function sum2(...m){
        console.log('m:', m)
        let total = 0;
        for(var i of m){
            total += i;
        }
        console.log(`total:${total}`)
    }

    sum2(4,8,9,10);

    let sum3 = (...m)=>{
        let total = 0;
        for(var i of m){
            total += i;
        }
        console.log(`total:${total}`)
    };

    sum3(4,8,9,10);

    var [x,y] = [4,8]

    console.log(...[4,8]);

    let arr1 = [1,3];let arr2 = [4,8];
    console.log("concat:"+arr1.concat(arr2));
    console.log('-----------')

    //  [...arr1,...arr2]

    //  var [x,y] = [4,8];

    var [x,...y] = [4,8,10,30]
    console.log(y)

    let [a,b,c] = "ES6";
    console.log(a)
    console.log(b)
    console.log(c)
    let xy = [...'ES6'];
    console.log(xy)


</script>
</body>
</html>

运行结果：

在这里插入图片描述

7. 类的静态属性和静态方法以及和构造函数的对比

7.1 构造函数的静态函数和静态方法

function Person(name, age) {
		    this.name = name
		    this.age = age
		}
		//静态属性
		Person.info = '我是小明'
		//静态方法
		Person.say = function () {
		    console.log('我在说话...')
		}
		Person.prototype.sleep =  function() {
		    console.log('我在睡觉...')
		}
		let p1 = new Person('小明', 20);
		console.log(p1.name)
		console.log(Person.info)
		console.log(Person.say())

7.2 类的静态函数和静态方法

class Person2 {
		    constructor (name, age) {
		        this.name = name
		        this.age = age
		    }
		    //相当于构造函数中通过向prototype中添加的属性
		    sleep () {
		        console.log('我在睡觉.....')
		    }
		    //相当于构造函数中的静态属性
		    static info = '我是小红'
		    //相当于构造函数中的静态方法
		    static say () {
		        console.log(`${this.name}正在讲话...`)
		    }
		}
		let p2 = new Person2('小红', 18)
		console.log(p2.name)
		console.log(Person2.info)
		console.log(Person2.say())

8. 类和类的继承

class Person {
  constructor(name, age) {
    console.log(3)
    this.name = name
    this.age = age
  }

  say() {
    console.log('这是 Person中的 say 方法')
  }
  // static info = 123
}


// 使用 extends 实现继承，extends 前面的是子类，后面的是父类
class Chinese extends Person {
  constructor(name, age, color, language) {
    console.log(1)
    // 注意： 当使用 extends 关键字实现了继承， 子类的 constructor 构造函数中，必须显示调用 super() 方法，这个 super 表示父类中 constructor 的引用
    super(name, age)
    this.color = color
    this.language = language
    console.log(2)
  }
}


// var p1 = new Person('zs', 12)
// console.log(p1)

var c1 = new Chinese('张三', 22, 'yellow', '汉语')
console.log(c1)
// 父类中任何东西，子类都能继承到
// c1.say();
// console.log(Chinese.info)


// 真正的面向对象语言是由 三部分组成： 封装、继承、多态
// 多态 和 接口、虚拟方法有关


class Animal {
  // 父类只定义了方法的名称，和作用，但是并没有具体的实现逻辑
  say() {
    // console.log('喵喵')
  }
}

class Cat extends Animal {
  // 当子类继承了父类之后，必然要继承父类中的方法，但是，发现say方法空有其壳，如果子类想要调用 say， 必须自己先实现这个方法，才能调用；
  say() {
    console.log('miaomiao')
  }
}

class Dog extends Animal {
  say() {
    console.log('wangwang')
  }
}

9. 多态：

父类引用类型指向子类对象
在这里插入图片描述

. . . . .

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
es6语法

1. JavaScript中var、let、const区别？使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现*象；使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。使用const声明的变量只可以在声明时赋值，不可随意修改，这是最大的特点。2. 函数声明、函数表达式、匿名函数...
复制链接

扫一扫