分分钟带你欣赏ES6语法糖

前端开发 作者: 2024-08-23 10:15:01
let , const关键字 var 看习惯了java, 看js真的是忍不住想笑,比如说这个var,它太自由了,自由到{}根本限制不住它的生命周期 js的var关键字,无论在何处声明,都会被视为声明在

let,const关键字

var

function aa(bool) {
    if (bool) {
        var test = "hello";
    } else {
        console.log(test);
    }
}
aa(false);
function aa(bool) {
    var test;
    if (bool) {
        test = "hello";
    } else {
        console.log(test);
    }
}
aa(false);

let

function aa(bool) {

    if (bool) {
        let test = "hello";
    } else {
        console.log(test);
    }
}

const

function aa() {
    let a = 'abc';
    const test = a;
    a = "world";
    alert('a=='+a);
    alert('test=='+test);
}
aa();

模板字符串的拼接

console.log(name1 + "喜欢" + name2); 
console.log(`${name1}喜欢${name2}`); 

方法入参的默认值

function sayName(name = "张三") {
    alert(name);
}

箭头函数

对象的简写和解构

function people(name,age) {
return {
    name: name,age: age
}
}
function people(name,age) {
    return {
        name,age
    }
}

动态的添加属性,在java想都别想,

let p = {name: '张三',age: 680};
alert(p.name);
alert(p.age);
  • 添加属性
p.address = '山东';
  • 添加函数
p.add = () => {};

组装对象或数组SpreadOperator ...

const color = ['red','blue'];
const colorful = [...color,'green']
// 现在 colorful数组就是 三个颜色的数组,同样换成{}  也一样

Import 和 export

let fun = function () {
    console.log("fun")
}
export {fun}


// 在第二个文件 导入
import fun from "./fun";
// 然后使用
fun()

面向对象的编程模式-类

class person {
    // 构造函数
    constructor(name) {
        this.name = name; // 不提前定义变量? 不存在的,直接点就行了老铁
    }

    // 方法
    sayHello() {
        console.log("hello");
    }
}

// 类的继承
class Student extends person {
    constructor(name) {
        super(name);
    }

    sayHaha() {
        console.log("haha");
    }
}
//person stu = new Student('zhangsan');  
var stu = new Student('zhangsan');
stu.sayHaha();

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_67187.html