【无标题】JS和ES6的区别

ES6新特性

一、ES6的新特性

• ES6中的let命令，声明变量，用法和var差不多，但是let是为JavaScript新增了块级作用域，ES5中是没有块级作用域的，并且var有变量提升的概念，但是在let中，使用的变量一定要进行声明。
• ES6中变量的解构赋值，比如：var [a,b,c] = [0,1,2];
• ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念，听起来和Java中的面向对象编程的语法有些像，但是二者是不一样的。
• ES6中的函数定义也不再使用关键字function，而是利用了=>来进行定义；
• ES6中可以设置默认函数参数，如function A（x,y=9）{};

二、ECMAScript和JavaScript的关系

由于JavaScript的创造者Netscae公司的版权问题，ECMAScript不能叫Javascript。总之，ECMAScript和JavaScript的关系是，前者是后者的规格（语言规范），后者是前者的一种实现。

三、新语法，新特性：

// js中 value 在声明之前可以使用
value="黄大仙";
var value ="黄大仙1";
console.log(value);
//打印出刘大仙

// ES6 let 在声明之前不可使用
value="黄大仙";
let value ="黄大仙1";
console.log(value);
//报错

// js中 语句块内声明的对象可以在外面使用
{
    var value ="黄大仙";
}
console.log(value);
//黄大仙

// ES6中 语句块内声明的对象不可以在外面使用，增加了作用域的概念
{
    let value ="黄大仙";
}
console.log(value);

// 但是如果变量前面没有任何修饰符，则是全局变量，就可以使用
{
    name1 = "黄大仙1";
}
console.log(name1);

//报错

// 常量无法被更改
// const value = "黄大仙";
// value = "黄大仙1";
// console.log(value);

// 但是有例外，如果定义的是数组或对象，即指向的是地址，则可以变化
// const array = [1,2,3,4,5]
// array.push(6);

四、ES6函数的基本使用

// 函数的使用
// 正常函数
// function funcGeneric(){
//     alert("黄大仙");
// }
// funcGeneric();

// 匿名函数:必须用一个变量接收
// var funcNoName=function(){
//     alert("这是匿名函数");
// }
// funcNoName();

// 使用委托调用函数
// var delegate=funcNoName;
// delegate();

// 表达式使用函数：其实就是定义一个委托，委托的函数为匿名函数
// var delegate =()=>{
//     alert("这是表达式的方式声明函数");
// }

// 带一个参数的表达式
// var delegate =param1=>{
//     alert(param1);
// }
// delegate("我是黄大仙，请多指教");

// 带多个参数的表达式
// var delegate =(param1,param2)=>{
//     alert(param1+param2);
// }
// delegate("我是黄大仙",",请多指教");

五、js与ES6中一些基础语法使用的比较

// ES6中对字符串的处理
// js常规的操作字符串的方式
// 1.拼接字符串
// var str = "Hello World";
// var name = "黄大仙" + str;
// console.log(result);

// 2.字符串换行
// var str = "Hello World"
//     + "How Are You"
//     + "How Old Are You";

// ES6中对字符串的操作
// 1.拼接字符串
// let esStr = `Hello World`;
// let esName = `黄大仙${esStr}`;
// console.log(esName);

// 2.字符串换行
// let esStr1 = `Hello World
//              How Are You
//              How Old Are You`;


// 扩展运算符（是一个可伸缩的对象），作为参数只能放在最后面：...
// list1=1 list2=[2,3,4,5]
// var [list1, ...list2] = [1, 2, 3, 4, 5];
// console.log(list1);
// console.log(list2);

// function func(...list){
//     console.log(list);
// }
// 打印出来的结果都是数组
// func(1);
// func(1,2,3,4,5);

// ...还可以解析字符串为数组
// var array=[..."Hello"];
// 打印结果 ["H", "e", "l", "l", "o"]
// console.log(array);

// ...可以将html节点集合转换为单纯的标签数组
// var divArray = document.getElementsByTagName("div");
// var result = [...divArray];
// console.log(divArray);
// console.log(result);

// js中没有字典对象，只是把对象当作字典来用，ES6增加了字典对象
// 这种写法形成的只是对象的属性
// var user = {};
// user["name"] = "黄大仙";
// user.age = 19;
// console.log(user);

// 而map形成的是真正的键值对
// var userMap = new Map();
// userMap.set("name", "黄大仙");
// userMap.set("age", 19);
// console.log(userMap);
// console.log(userMap.get("age"));

// 遍历字典
// for (const [key, value] of userMap) {
//     console.log(key);
//     console.log(value);
// }

// 初始化map与扩展运算符结合使用
// let map = new Map([
//     [1, '黄大仙1'],
//     [2, '黄大仙2'],
//     [3, '黄大仙3']
// ]);
// 扩展运算符会将字典解析为三个数组
// let array = [...map];
// let arrKeys = [...map.keys()];
// let arrValues = [...map.values()];
// console.log(array);
// console.log(arrKeys);
// console.log(arrValues);

// js 与ES6中类用法的比较
// js中没有类的概念，通常是外部function大写充当类，类中的function小写
// function Class() {
//     function func() {

//     }
// }

// ES6中类的使用
class Sports {
    // 构造函数
    constructor(){
        this.Name="黄大仙1";
        // 原型属性
        this.Age=19;
    }
    // 成员属性
    Name = "黄大仙";
    // 方法
    run() {
        console.log("黄大仙是最帅的");
    }
}
// 继承
class PlayBasketBall extends Sports{
    // 如果和父类方法相同，会覆盖掉父类的方法
    run() {
        console.log("黄大仙是最有趣的");
    }
}

// let sport = new Sports();
// console.log(sport.Name);
// console.log(sport.Age);
// sport.run();

let playBasketBall=new PlayBasketBall();
playBasketBall.run();