1.let

let可以声明块级作用域变量

1 'use strict';
2
3 if (true) {
4     let app = 'apple';
5 }
6
7 console.log(app);  //外面是访问不到app的

2.const

const可以声明常量

1 'use strict';
2
3 const app = 'apple';
4 console.log(app);
5
6 const app = 'peach';
7 console.log(app);  //报错,常量不能多次赋值

3.Destructuring 解构

解构赋值允许使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。

'use strict';function breakfast () {return ['egg','bread','milk'];
}//传统方法
var arr = breakfast(), egg = arr[0], bread = arr[1], milk = arr[2];
console.log(egg,bread,milk);//es6
let [t1,t2,t3] = breakfast();
console.log(t1,t2,t3);

4.对象解构

'use strict';function breakfast () {return {egg:'egg', milk:'milk', bread:'bread'};
}let {egg: a1, milk: a2, bread: a3} = breakfast();    //a1,a2,a3是自己定义的名字
console.log(a1,a2,a3);

5.字符模板

'use strict';let food1 = 'egg', food2 = 'bread';let str = `今天的早餐是 ${food1} 和       ${food2}`;  //通过反斜线引号可以对字符串换行console.log(str);

6.字符串相关函数

'use strict';let food1 = 'egg', food2 = 'bread';let str = `今天的早餐是 ${food1} 和 ${food2}`; console.log(str.startsWith('今天'),str.endsWith('bread'),str.includes('早餐'));  //true true true

7.函数默认值

1 'use strict';
2
3 function breadfast (food = '食物', drink = '饮料') {
4     console.log(`${food} ${drink}`);
5 }
6
7 breadfast();        //输出默认值
8 breadfast('面包', '啤酒');        //输出给定值

8.  ...操作符

1 'use strict';
2
3 function breakfast (food, drink, ...others) {        //...表示后面除了前面两个参数,其余参数都放在others这个数组里
4     console.log(food, drink, others);
5     console.log(food, drink, ...others);    //将others数组里面的值展开
6 }
7
8 breakfast('面包', '牛奶', '培根', '香肠');

9.Arrow Function(箭头函数)

 1 'use strict';
 2
 3 //breakfast是函数名字,箭头前面是传入的参数,箭头后面是返回值
 4 let breakfast = (food,drink) => food + drink;
 5
 6 console.log(breakfast('面包', '牛奶'));
 7
 8 //箭头后面的大括号可以写函数的具体操作
 9 let lunch = (food, drink) => {
10     return '今天午餐吃' + food + ',喝' +drink;
11 };
12
13 console.log(lunch('鸡肉', '汤'));

10.定义对象

 1 'use strict';
 2
 3 let food = '鸡肉', drink = '汤';
 4
 5 let breakfast = {
 6     food: food,        //添加属性
 7     drink: drink,
 8     eat(){}            //添加方法
 9 };
10
11 console.log(breakfast);
12
13 //添加属性的其他方法
14 let food1 = 'food1';
15
16 breakfast.afood = '面条';
17 breakfast['hot drink'] = '牛奶';
18 breakfast[food1] = '蔬菜';    //这里的food1是变量food1的值
19
20 console.log(breakfast);

11.setPrototypeOf(改变原型)

 1 'use strict';
 2
 3 let lunch = {
 4     getDrink(){
 5         return '啤酒';
 6     }
 7 };
 8
 9 let dinner = {
10     getDrink(){
11         return '可乐';
12     }
13 };
14
15 let food1 = Object.create(lunch);
16 console.log(food1.getDrink());                            //啤酒
17 console.log(Object.getPrototypeOf(food1) === lunch);    //true
18
19 Object.setPrototypeOf(food1, dinner);
20 console.log(food1.getDrink());                            //可乐
21 console.log(Object.getPrototypeOf(food1) === dinner);    //true

12.__proto__

 1 'use strict';
 2
 3 let lunch = {
 4     getDrink(){
 5         return '啤酒';
 6     }
 7 };
 8
 9 let dinner = {
10     getDrink(){
11         return '可乐';
12     }
13 };
14
15 //__proto__
16 let food2 = {
17     __proto__: lunch        //通过__proto__来指定food2的prototype
18 };
19
20 console.log(food2.getDrink());
21 console.log(Object.getPrototypeOf(food2) === lunch);    //true
22
23 food2.__proto__ = dinner;
24 console.log(food2.getDrink());
25 console.log(Object.getPrototypeOf(food2) === dinner);    //true

13.super

 1 'use strict';
 2
 3 let lunch = {
 4     getDrink(){
 5         return '啤酒';
 6     }
 7 };
 8
 9 let dinner = {
10     getDrink(){
11         return '可乐';
12     }
13 };
14
15 //super
16 let food3 = {
17     __proto__: lunch,
18     getDrink(){
19         return super.getDrink() + '和汤';    //super.getDrink()是调用原型的getDrink方法
20     }
21 };
22
23 console.log(food3.getDrink());

14.iterator迭代器

每次迭代后都会返回一个对象{value:xx,done:true/false},value表示返回的值,done表示当前还有没有东西可以迭代,没有返回true,否则返回false

 1 'use strict';
 2
 3 function chef(foods){
 4     let i = 0;
 5
 6     return {
 7         next(){
 8             let done = (i >= foods.length);
 9             let value = !done ? foods[i++] : undefined;
10
11             return {
12                 value: value,
13                 done: done
14             }
15         }
16     }
17 }
18
19 let meal = chef(['黄瓜', '鸡蛋']);
20 console.log(meal.next());        //Object {value: "黄瓜", done: false}
21 console.log(meal.next());        //Object {value: "鸡蛋", done: false}
22 console.log(meal.next());        //Object {value: undefined, done: true}

15.es6中的class

 1 'use strict';
 2
 3 class Chef {
 4     constructor(food){        //创建一个Chef类实例时会自动执行constructor方法
 5         this.food = food;
 6     }
 7
 8     cook(){
 9         console.log(this.food);
10     }
11 }
12
13 let chef1 = new Chef('鸡蛋');
14 chef1.cook();

16.Set

 1 'use strict';
 2
 3 //Set类似于数组
 4 let food = new Set('鸡蛋');
 5 console.log(food);
 6
 7 food.add('菜');        //添加新的项
 8 food.add('豆');
 9
10 console.log(food);
11
12 console.log(food.size);            //food的长度
13 console.log(food.has('菜'));    //判断是否含有某一项
14 food.delete('豆');                //删除某一项
15 console.log(food);
16
17 food.forEach(food => {            //批量对food中的项进行操作
18     console.log(food);
19 });
20
21 food.clear();                    //清空food
22 console.log(food);

转载于:https://www.cnblogs.com/NickyLi/p/6687063.html

es2015(es6)基础知识整理(更新中...)相关推荐

  1. 前端基础知识(更新中)

    HTML和CSS基础知识 本文章为B站尚硅谷前端学习视频的笔记整理 一.基本语法 (一)元素 标题:一到六级标题:h1到h6 <h1></h1> 段落:<p>< ...

  2. ACM 基础知识(更新中)

    ACM算法整理 纯纯小白,把自己学过的一些算法整理一下 取模法则 (a + b) % p = (a % p + b % p) % p (a - b) % p = (a % p - b % p) % p ...

  3. 前端使用Canvas绘图(基础知识)--持续更新中

    文章目录 前言 canvas文档 一.canvas代码提示(插件和注释) 1.1.使用插件方式(推荐这种方式) =>canvas-snippets 1.2.使用注释方式 二.初始canvas 2 ...

  4. Swing基础知识(更新中)

    Swing是什么 做桌面应用程序的界面,GUI. 组件和容器:容器是特殊的组件. 布局管理器: 一般放中间容器,用来控制容器中组件的排列方式. 常见: ① FlowLayout 流布局(默认布局) 左 ...

  5. jQuery学习总结之基础知识----持续更新中

    语法总结和注意事项 1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象 ...

  6. 数学公式基础知识(更新中...)

    一.概率 1.定义: 对于古典试验中的事件A,它的概率定义为:P(A)=m/n,其中n表示该试验中所有可能出现的基本结果的总数目.m表示事件A包含的试验基本结果数. 由于频率nA/n总是介于0和1之间 ...

  7. 前端基础知识(持续更新中)

    HTML Hyper Text Markup Language 超文本标记语言 1.html5为什么只需要写<! DOCTYPE HTML> 答:这是w3c制定的规则,是文档类型声明,语义 ...

  8. java一个式子开根号语句_[基础篇]-基础知识整理-03-JAVA中的运算符

    Java中的运算符 Java 语言中常用的运算符 Ø 算术运算符 Ø 赋值运算符 Ø 比较运算符 Ø 逻辑运算符 Ø位运算符 Ø 条件运算符(三元运算符) 算数运算符 算术运算符主要用于进行基本的算术 ...

  9. 前端基础知识整理汇总(中)

    前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...

  10. 2022年最新互联网大厂前端面试题及答案-前端工程必备技能(持续整理更新中【关注收藏不迷路】)

    对于做前端的朋友,或者做了前端几年了,基础不好的,或者想进大厂的想了解深入,下面的知识点很多前端朋友都没有深入了解.很重要,看完有种茅塞顿开感觉,**关注+收藏哦,总有一天用的得.** 涉及到知识点: ...

最新文章

  1. Python 代理爬取网站数据
  2. 计算机学机械制图吗,机械制图与计算机绘图(少学时·任务驱动模式)
  3. C#操作Excel文件(转)
  4. Bitmap的内存占用
  5. 幸运从来都只偏爱有准备的人——大龄码农的慌张日记
  6. python科学计算_可视化图解Python科学计算包NumPy
  7. 【C语言】不能使用 while(fgetc(fp)!=EOF)进行文件复制
  8. Python学习笔记:爬取网页图片
  9. 使用PyQt打包命令pyinstall的几个问题
  10. 用html5写个炫酷的3d电子相册
  11. SPSS均值过程分析教程
  12. Android 微信、QQ、微博分享问题汇总
  13. json转Java_在线JSON转Java实体类—在线工具
  14. 银行机构的分类、特点及转型方向
  15. 人工智能截稿日期重磅
  16. 950个织梦网dede模板源码
  17. 赛力斯华为智选SF5入驻华为旗舰店,将通过华为零售渠道销售
  18. 计算机中rom,计算机中RAM和ROM
  19. 直流电机PID转速闭环调速控制系统
  20. 抽象代数之群同态基本定理的证明之群同态的核是群G的正规子群

热门文章

  1. component多个 vue_VUE多个组件示例
  2. linux进程tss和ldt,x86体系下linux中的任务切换与TSS
  3. mysql系统服务初始化_MySql服务初始化、安装、启动
  4. java用户输入_如何用Java获取用户输入?
  5. tomcat处理html流程,Tomcat 简单配置使用,基本工作原理(流程图)
  6. php生成字母数字订单,php生成唯一订单号可控制位数字母和数字
  7. 15 Process State and O.S. Scheduling
  8. MySQL Spatial Analysis Functions(空间计算方法)
  9. 1.7 什么时候该改变开发_测试集和指标
  10. 朴素贝叶斯(naive Bayes) 二