tnblog
首页
视频
资源
登录

js与ES6中基本语法异同比较

5094人阅读 2020/12/6 17:10 总访问:69308 评论:0 收藏:0 手机
分类: H5_ES6


前端刷副本日记chapter1!!
js中和ES6中声明变量的区别:

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


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


js 与 ES6 中语句块的区别:

// 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);
// console.log(array);



函数的基本使用:

// 函数的使用
// 正常函数
// 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();



















    

评价
a genius is the person who repeats the most times
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术