【ES6】 — ECMAScript6快速入门02

最新推荐文章于 2024-03-09 11:22:14 发布
最新推荐文章于 2024-03-09 11:22:14 发布
阅读量274 收藏
点赞数
文章标签： ecmascript6 ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32629809/article/details/78515904
版权
复制数组
  • 1、删除数组中一个元素
var arr = [1,2,3];
var arr2 = arr;
arr2.pop();
console.info(arr,arr2);

ECMAScript6快速入门

  • 2、复制数组，然后再删除里面的一个元素
var arr = [1,2,3]
var arr2 = [];

for(var i=0;i<arr.length;i++) {
    arr2[i] = arr[i];
}
arr2.pop();
console.info(arr, arr2);

ECMAScript6快速入门

  • 3、实现上面第2种的操作我们可以这样做：
var arr = [1,2,3]
var arr2 = Array.from(arr);
arr2.pop();
console.info(arr, arr2);

或者使用ES6新特性

var arr = [1,2,3]
var arr2 = [...arr];
arr2.pop();
console.info(arr, arr2);
循环
  • 之前在ES5中遍历循环有一下两种：
    • 1、普通for循环
    • 2、for in循环
  • 现在使用ES6，可以用for…of循环
    使用for…of循环数组 
var arr = ['红楼梦','三国演义','水浒传','西游记','金瓶梅'];
for(var name of arr) {
    console.info(name);
}
console.info("---------------------------------------");
for(var name of arr.entries()) {
    console.info(name);
}
console.info("---------------------------------------");
for(var name of arr.keys()) {
    console.info(name);
}
![ECMAScript6快速入门](https://img-blog.csdn.net/20171112225850718)

使用for…of遍历json

var json = {'a': 'apple','b': 'banana', 'c': 'pear','d': 'orange'};
for(var name in json) {
    console.info(name,json[name]);
}
![ECMAScript6快速入门](https://img-blog.csdn.net/20171112230211625)
Map对象
  • Map对象创建以及简单操作
var map = new Map();        //创建Map对象
map.set('a','apple');       //设置值操作
map.set('b','banana');
map.set('c','orange');
map.delete('c');            //删除操作
console.info(map);

ES6之Map对象

  • 遍历Map对象：
var map = new Map();
map.set('a','apple');
map.set('b','banana');
map.set('c','orange');
map.set('d','pear');
for(var name in map) {
    //不能使用for...in来进行遍历Map对象
    console.info(map);
}
console.info("1----------------------------");
for(var name of map) {
    //获取map键值对
    console.info(name);
}
console.info("2----------------------------");
for(var [key,value] of map) {
    //分开获取key和value
    console.info(key,value);
}
console.info("3----------------------------");
for(var name of map.entries()) {
    //获取map键值对
    console.info(name);
}
console.info("4----------------------------");
for(var key of map.keys()) {
    //获取map中的所有key
    console.info(key);
}
console.info("5----------------------------");
for(var [key,value] of map.entries()) {
    //对map键值对进行遍历且解构赋值
    console.info(key,value);
}
console.info("6----------------------------");
for(var val of map.values()) {
    //获取map中的所有value值
    console.info(val);
}

遍历Map集合

箭头函数
  • 用箭头函数替换普通函数
var fn = function(){
    //普通函数
    return 'string';
}
var fn0 = () => {
    //箭头函数：样式一
    return 'string0';
}
var fn1 = () => 'string1';      //箭头函数：样式二
  • 利用箭头函数可以实现什么?
var square = (x) => x*x;            //封装求平方函数
var add = (x,y) => x+y;             //封装求和函数
var isEven = (x) => x%2 == 0;       //判断是否是偶数
var not = (fn) => (...args) => {    //对函数执行结果进行否定
    console.info(args);
    return !fn.apply(null,args);
}
//普通函数遍历map并且打印出各个元素的平方
[5,6,7].map(function(item){
    console.info(item*item);
});
console.info([5,6,7].map(square));  //使用ES6箭头函数

箭头函数和普通函数区别

  • 1、箭头函数中没有this
var json = {
    a: 1,
    b: 2,
    show: () => {
        console.info(this);         //指向了window
        console.info(this.a);       //undifined
    }
};
json.show();
  • 2、箭头函数不能作为构造函数，因为箭头函数没有this
var Fn = function() {
    this.name = "xx";
}
console.info(new Fn());
var Fn0 = () => {
    this.name = "xxxx";
}
console.info(new Fn0());
  • 3、arguments：形参，箭头函数中没有arguments
var fn = function() {
    console.info("fn参数为",arguments);
}
fn(4,5,6,7);
var fn1 = () => {
    console.info("fn1参数为");
    console.info(arguments,typeof arguments);
}
fn1(4,5,6,7);       //会报错

箭头函数中没有arguments
- 4、箭头函数不能作为生成器

ES6对象
  • 对象语法简洁化：
  • 单例模式（就是json）
var name = 'abc';
var age = 101;
var person = {
    name,
    age,
    showName() {
        return this.name;
    },
    showAge() {
        return this.age;
    }
};
console.info(person.showName());            //输出 -> abc

面向对象：

  • 创建类与对象
//ES5使用构造函数创建类与对象
function Person(name,age) {
    this.name = name;
    this.age = age;
}
Person.prototype.showName = function(){
    return this.name;
};
Person.prototype.showAge = function(){
    return this.age;
}
var p1 = new Person('abc',10);
console.info(p1.showName());
//使用ES6创建类与对象
class Person {  //类
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
var p1 = new Person('aaa',10);
var p2 = new Person('bbb',20);
//console.info(p1.name,p1.showName());
console.info(p1.constructor == Person);         //对象的constructor指向构造函数或者类

面向对象继承

  • 原型继承：子类.prototype=new 父类();
class Person {//类
    constructor(name='default',age=0) {
        this.name = name;
        this.age = age;
    }
    showName() {
        return this.name;
    }
    showAge() {
        return this.age;
    }
}
class Worker extends Person {           //继承
    constructor(name,age,job="扫地的") {
        super();            //调用父类的方法
        this.job = job;
    }
    showJob() {
        return this.job;
    }
}
var v1 = new Worker('aaa',12,'学生');
console.info(v1.showJob());

面向对象的应用

  • 第一个：封装队列，即类似于数组的函数
class Queue {
    constructor(content = []) {
        this._queue = [...content];         //拷贝数组
    }
    shift() {
        const value = this._queue[0];
        this._queue.shift();
        return value;
    }
    push(n) {
        this._queue.push(n);
        return this._queue.length;
    }
}
var q = new Queue([1,2,3,4]);
console.info(q.shift(),q.shift(),q._queue);
  • 第二个：Tab选项卡
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .on {
                background: #F60;
                color: #FFF;
            }
            .box div {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                display: none;
            }
        </style>
        <script>
            class Tab {
                constructor(id) {
                    this.oBox = document.getElementById(id);
                    this.aBtn = this.oBox.getElementsByTagName('input');
                    this.aDiv = this.oBox.getElementsByTagName('div');
                    this.init();
                }
                init() {
                    for (let i=0;i<this.aBtn.length;i++) {
                        this.aBtn[i].onclick = function(){
                            this.hide();
                            this.show(i);
                        }.bind(this);
                    }
                }
                hide() {
                    for(let i=0;i<this.aBtn.length;i++) {
                        this.aBtn[i].className = "";
                        this.aDiv[i].style.display = "none";
                    }
                }
                show(index) {
                    this.aBtn[index].className = "on";
                    this.aDiv[index].style.display = "block";
                }
            }
            window.onload = function(){
                new Tab('box');
            }
        </script>
    </head>
    <body>
        <div id="box" class="box">
            <input class="on" type="button" value="aaa" />
            <input type="button" value="bbb" />
            <input type="button" value="ccc" />
            <div style="display: block;">111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </body>
</html>
  • 第三个：利用继承制作自动播放Tab选项卡
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .on {
                background: #F60;
                color: #FFF;
            }
            .box div {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                display: none;
            }
        </style>
        <script>
            class Tab {
                constructor(id) {
                    this.oBox = document.getElementById(id);
                    this.aBtn = this.oBox.getElementsByTagName('input');
                    this.aDiv = this.oBox.getElementsByTagName('div');
                    this.iNow = 0;
                    this.init();
                }
                init() {
                    for (let i=0;i<this.aBtn.length;i++) {
                        this.aBtn[i].onclick = function(){
                            this.iNow = i;
                            this.hide();
                            this.show(i);
                        }.bind(this);
                    }
                }
                hide() {
                    for(let i=0;i<this.aBtn.length;i++) {
                        this.aBtn[i].className = "";
                        this.aDiv[i].style.display = "none";
                    }
                }
                show(index) {
                    this.aBtn[index].className = "on";
                    this.aDiv[index].style.display = "block";
                }
            }
            class AutoTab extends Tab {
                constructor(id) {
                    super(id);
                    this.next();
                    setInterval(this.next.bind(this),1000);
                }
                next() {
                    console.info(111);
                    this.iNow++;
                    if(this.iNow == this.aBtn.length) this.iNow = 0;
                    this.hide();
                    this.show(this.iNow);
                }
            }
            window.onload = function(){
                new AutoTab('box');
            }
        </script>
    </head>
    <body>
        <div id="box" class="box">
            <input class="on" type="button" value="aaa" />
            <input type="button" value="bbb" />
            <input type="button" value="ccc" />
            <div style="display: block;">111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </body>
</html>
模块化
  • 主页html如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/traceur.js" ></script>
        <script type="module">
            import modA from './js/a.js';
            import modB from './js/b.js';
            console.info(modA, modB, modA + modB);      //12 5 17
        </script>
    </head>
    <body>
    </body>
</html>
  • a.js文件内容如下：
const a = 12;
export default a;
  • b.js文件内容如下：
const a = 5;
export default a;
有心博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2018最新高清ECMAScript 6入门
04-19
《2018最新高清ECMAScript 6入门》是一份全面介绍ECMAScript 6（ES6）的离线学习资料，由知名技术作者阮一峰编写。这份资源旨在帮助开发者掌握JavaScript语言的新特性，提升编程效率和代码质量。ES6，全称ECMAScript...
ECMAScript6入门优化版.pdf
01-09
ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
快速入门ES6语法（ECMAScript 6）
提笔忘字的帝国
05-27 2891
🍎前言 ECMAScript 6（简称 ES6）是 JavaScript 语言的下一代标准，在 2015 年 6 月正式发布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。对于常见的ES6和JS是什么关系的话题呢，我在这里提一下：ES6是JS的规格，而JS是ES6的一种实现。 🍎语法 🔰let声明变量 在使用ES6之前我们更多的是使用var来声明一个变量，而var变量的声明是没有作用域的概念的，使用var对相同的变量名是可以声明多次的；而let就.
【前端】ECMAScript6从入门到进阶
互联网小阿祥
09-29 1225
ECMAScript6入门到进阶
ES6语法，快速入门
weixin_72707764的博客
03-09 1129
ECMAScript1.变量不能重复声明2.块儿级作用域 全局，函数，eval if else while for 里的{}3.不存在变量提升4.不影响作用域链1.一定要赋值初始化2.一般常量使用大写(潜规则)3.常量值不能修改4.块儿级作用域5.对于数组和对象的元素修改,不算做对常量的修改,不会报错循环计数器,对象,数组常使用const来定义ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值，这被称为解构赋值1.数组的解构
【ES6】 — ECMAScript6快速入门01
有心博客
11-12 270
ES6和JS的关系 ES6： ECMAScript6 js： 组成部分：ECMA DOM BOM 什么是ECMA?ECMA是标准，JS是实现，换句话来说也有可能有其他xxxScript来实现ECMAECMAScript：简写ECMA或者ES 目前版本： 低级浏览器：主要支持ES3.1 高级浏览器：正在从ES5过渡到ES6 历史： 1996 ES1.0 js稳定
es6 ECMAScript6
wangZY的博客
05-21 178
一套JavaScript规范 Vue.js是什么？就是前端的JavaScript框架！ 所以ES6和Vue.js就是编程语言和编程框架的关系。 自学参考：ES6 入门教程 一、ECMAScript6 //传统方式定义对象 const p1 = {name:name,age:age} console.log(p1) //es6定义变量 const p2 = {name,age} console.log(p2) 简介 ECMASc...
ECMAScript 6 入门（第三版）
11-07
ECMAScript 6 入门（第三版） ECMAScript 6 入门（第三版）
ECMAScript6入门
12-10
ECMAScript6入门》全面介绍了ECMAScript6新引入的语法特性，覆盖了ECMAScript6与ECMAScript5的所有不同之处，对涉及的语法知识给予了详细介绍，并给出了大量简洁易懂的示例代码。 《ECMAScript6入门》为中级难度，...
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Objective-C语言的基础教程.md
最新发布
07-31
Objective-C是一种面向对象的编程语言，是C语言的扩展。它主要用于苹果的iOS和macOS应用程序开发。
暂存暂存暂存暂存暂存暂存暂存暂存
07-31
暂存暂存暂存暂存暂存暂存暂存暂存
Java实现HTTP断点续传的多线程安全解决方法.zip
07-31
Java实现HTTP断点续传的多线程安全解决方法
数据库课程设计报告-宿舍信息管理系统.doc
07-31
系统要处理的对象包括宿舍楼基本信息、学生基本信息、宿舍基本信息、楼栋管理员基本信息、物品出入基本信息等五个方面，各个对象包括信息如下所示（详细的数据见于数据字典）： 1．学生基本信息(Student)：包括 学生编号、学生所在学院信息、学生姓名、学生性别、学生来自省份、学生出生日期、学生入学时间、学生所学专业、所在班级等方面的信息，可以方便学生信息的查询和更新； 2．宿舍楼基本信息(Dormitory)：包括 宿舍楼编号、每一幢宿舍楼楼管处的电话、宿舍楼楼管员信息、宿舍楼性别分类信息等方面，这样可以方便管理者对宿舍楼的管理，提高查询效率； 3．宿舍基本信息(Room)： 包括 宿舍编号、舍长信息、舍员信息、楼栋号； 4．楼栋管理员基本信息(Worker)：包括 工作人员编号、工作人员姓名、工作类型、工资、性别、联系方式、工作时间等数据项，可以方便管理人员对宿舍楼道工人的任用、信息查询及更改； 6．物品出入基本信息(ArticalInOut)：包括出入物品的学生信息、出入的物品信息、出入物品时的负责人信息、出入物品时间，尽量减少宿舍事故的发生，保障学生宿舍财产的安全。
Java面试经验、面试技巧、常见面试知识点整理。.zip
07-31
Java面试经验、面试技巧、常见面试知识点整理。
智能汽车轨迹跟踪多目标显式模型预测控制_赵树恩.caj
07-31
智能汽车轨迹跟踪多目标显式模型预测控制_赵树恩
《ECMAScript6标准入门》- 阮一峰
"《ECMAScript6入门》是由阮一峰编著的一本关于ECMAScript6（简称ES6）的教程，旨在介绍与ES5相比的所有新特性。该书适用于已经熟悉ES5的读者，提供了详细的语法知识解析和丰富的示例代码，帮助读者了解JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值