ES6(ECMAScript2015) 基础知识 浅析
1.块级作用域(let)
{
let fruit = “apple”;
}
console.log(fruit)
会报错,因为{ }大括号包含的区域为块级作用域,let在其中申明的变量只能在该块中生效
2.恒量声明(const)
const fruit = "apple";
fruit = "banana";
console.log(fruit)
会报错,因为const声明的是恒量,不能被重新赋值,只能用方法改变,如const arr = [ ],可以使用arr.push()
3.结构写法
数组写法:
function breakfast() {
return ["cake", "tea", "apple"];
}
let [dessert, drink, fruit] = breakfast();
console.log(dessert, drink, fruit) ------ cake tea apple
对象写法:
function breakfast() {
return { dessert: "cake" , drink: "tea" , fruit: "apple"};
}
let {dessert: drink , drink: dessert , fruit: fruit} = breakfast();
console.log(dessert, drink, fruit) ------ tea cake apple
4. …用法
当做展开的用法:
let fruits = ['apple', 'banana'],
foods = ['cake', ...fruits];
console.log(fruits) ------ ["apple", "banana"]
console.log(...fruits) ------ apple banana
console.log(foods) ------- ["cake", "apple", "banana"]
函数参数数组包容:
function breakfast(dessert, drink, ...foods) {
console.log(dessert, drink, foods) ------ cake tea ["apple", "pear"]
}
breakfast("cake", "tea", "apple", "pear")
5.字符模板
let dessert="cake",drink="tea";
let breakfast=`今天早餐是${dessert}和${drink}!`; 使用反引号包裹
console.log(breakfast) ------ 今天早餐是cake和tea!
查看字符串以什么开头:
console.log(breakfast.startsWith(‘今天’)) ------ true
查看字符串以什么结尾:
console.log(breakfast.endsWith(‘今天’)) ------ false
查看字符串以是否包含什么:
console.log(breakfast.includes(‘今天’)) ------ true
标签字符串:kitchen是设置的任意标签名
var dessert = "cake",drink = "tea";
var breakfast = kitchen `今天早餐是${dessert}和${drink}!`;
function kitchen(string, ...values) {
console.log(string); ------ ["今天早餐是", "和", "!", raw: Array[3]]
console.log(values); ------ ["cake", "tea"]
}
6.函数设置
设置函数参数的默认值:
function breakfast(drink = "tea", fruit = "apple") {
return `${drink} ${fruit}`;
}
console.log(breakfast()) ------ tea apple
console.log(breakfast("coffee", "banana")) ------ coffee banana
结构对象:
function breakfast(dessert, drink, {location,name}={}) { 设置默认值防止报错
console.log(dessert, drink, location,name) ------ cake tea 兰州 董小姐
}
breakfast("cake", "tea", {location:"兰州",name:"董小姐"})
name属性:
let func=function breakfast() { }
console.log(func.name) ------ breakfast
Arrow Functions 箭头函数:
let breakfast = (dessert, drink) => {
console.log(dessert + drink) ------ caketea
return dessert
}
console.log(breakfast('cake', 'tea')) ------ cake
let lunch = (dessert, drink) => dessert
console.log(lunch('cake', 'tea')) ------- cake
创建对象属性中的函数
let dessert = 'cake' , drink = 'tea';
let food = {
dessert,
drink,
breakfast() { } 类似于breakfast: function() { }
}
console.log(food) ------ Object {breakfast: () , dessert: "cake" , drink: "tea"}
console.log(food.breakfast) ------ breakfast() {}
迭代next():
function* chef(foods) { function后面加上*号
for (var i = 0; i < foods.length; i++) {
yield foods[i];
}
}
let dinner = chef(["egg" , "apple"])
console.log(dinner.next()) ------ Object {value: "egg", done: false}
console.log(dinner.next()) ------ Object {value: "apple", done: false}
console.log(dinner.next()) ------ Object {value: undefined, done: true}
7.对象设置
设置具有空格的属性名:
let food={};
// food.hot drink="tea"; 直接设置会报错
food['hot drink']="tea";
console.log(food) ------ Object {hot drink: "tea"}
判断相等:
console.log(+0 === -0) ------ true
console.log(Object.is(+0, -0)) ------ false
console.log(NaN === NaN) ------ false
console.log(Object.is(NaN, NaN)) ------ true
属性赋值:
let breakfast = {}
Object.assign(
breakfast,
{drink: 'beer'},
{fruit: 'apple'},
{fruit: 'pear'} 此处会替换上面设置的apple
)
console.log(breakfast) ------ Object {drink: "beer", fruit: "pear"}
判断设置对象的prototype:
let breakfast = {
getDrink() { return "beer" }
}
let lunch = {
getDrink() { return "tea" }
}
let sunday = Object.create(breakfast);
console.log(sunday.getDrink()); ------ beer
console.log(Object.getPrototypeOf(sunday) === breakfast) ------ true
Object.setPrototypeOf(Sunday , lunch);
console.log(sunday.getDrink()); ------ tea
console.log(Object.getPrototypeOf(sunday) === lunch) ------ true
设置对象的__proro__:
let breakfast = {
getDrink() { return "beer" }
}
let lunch = {
getDrink() { return "tea" }
}
let sunday = { __proto__:breakfast }
console.log(sunday.getDrink()); ------ beer
console.log(Object.getPrototypeOf(sunday) === breakfast) ------ true
sunday.__proto__=lunch;
console.log(sunday.getDrink()); ------ tea
console.log(Object.getPrototypeOf(sunday) === lunch) ------ true
sunday = {
__proto__: breakfast,
getDrink() {
return super.getDrink() + "tea"; super可以执行之前设置的方法
}
}
console.log(sunday.getDrink()); ------ beertea
8.类class
创建一个类:
class chef {
constructor(food) {
this.food = food;
this.dish = [];
}
set menu(dish) {
this.dish.push(dish);
}
get menu() {
return this.dish
}
cook() {
console.log(this.food); ------ apple
}
static cook2(food) { 设置静态的方法
console.log(food) ; ------ orange
}
}
let dinner = new chef("apple")
dinner.cook();
console.log(dinner.menu = "banana"); ------ banana
console.log(dinner.menu = "pear"); ------ pear
console.log(dinner.menu); ------ [‘banana’ , ‘pear’]
chef.cook2("orange") 调用静态方法
类的继承:
class Person {
constructor(name, birthday) {
this.name = name;
this.birthday = birthday;
}
intro() {
return `${this.name},${this.birthday}`;
}
}
class Chef extends Person { Chef通过extends继承Person的内容
constructor(name, birthday) {
super(name, birthday); 执行Person中的内容
}
}
let dinner = new Chef('Tom', '1992-03-07');
console.log(dinner.intro()); ------ Tom,1992-03-07
9.创建一个Map
let food = new Map();
let fruit = {} , cook = function() {} , dessert = 'cake';
food.set(fruit, 'apple');
food.set(cook, 'fork');
food.set(dessert, 'cake');
console.log(food); ------ Map {Object {} => "apple", function => "fork", "cake" => "cake"}
console.log(food.size); ------ 3
console.log(food.get(fruit)); ------ apple
food.delete(dessert);
console.log(food.has(dessert)); ------ false
food.forEach((value, key) => {
console.log(`${key}=${value}`);
})
------ [object Object]=apple
------ function () {}=fork
food.clear();
10.模块导入需要使用辅助工具,查阅相关文档
ES6(ECMAScript2015) 基础知识 浅析的更多相关文章
- Ajax基础知识 浅析(含php基础语法知识)
1.php基础语法 后缀名为.php的文件 (1) echo 向页面中输入字符串 <?php 所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...
- Nodejs 基础知识 浅析
1. 模块化 ①常用模块化规范 CommonJS + nodejs AMD(Asynchronous Module Definition) + RequireJS CMD(Common Module ...
- es2015(es6)基础知识整理(更新中...)
1.let let可以声明块级作用域变量 'use strict'; if (true) { let app = 'apple'; } console.log(app); //外面是访问不到app的 ...
- ES6的基础知识总结
一. ES6 ES6中定义变量使用 let/const let 使用let定义的变量不能进行"变量提升" 同一个作用域中,let不能重复定义相同的变量名 使用var在全局作用域中定 ...
- ES6的基础知识(一)
1.ECMAScript 6.0(以下简称ES6). 2.ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的其中一种实现. 3.对ES6支持的浏览器:超过 90% ...
- es6 generator 基础知识
1.定义和使用 function *gen() { return 'first generator'; } // 有点类似类的实例化过程 let generatorResult = gen() // ...
- Echarts 基础知识浅析
1. 引入Echarts Echarts是基于canvas的数据可视化产品,由百度公司推出 参考官方文档,引入教程示例即可,注意有两种引入方式: (1)直接引入 (2)模块化引入 2. 基本API使用 ...
- Angular1 基础知识 浅析(含锚点)
1.angular:前端js框架 https://angularjs.org ① SPA单页应用程序 通过ajax从后台获取数据,动态渲染页面,不出现白屏,提高效率,节省流量 (1)锚点值 锚点:是 ...
- canvas2D 基础知识 浅析
1.canvas HTML5给出的一个可以展示绘图内容的标签 使用领域: (推荐网站:threejs.org) 1. 游戏 2. 可视化数据 3. Banner广告 4. 多媒体 (1)在 c ...
随机推荐
- kudu是什么
Apache Kudu Overview 建议配合[Apache Kudo]审阅本文(http://kudu.apache.org/overview.html) 数据模式 Kudo是一个列式存储的用于 ...
- Linux安装mysql以及安装时踩下的坑
安装: 检测是否已经安装了mysql rpm -qa | grep mysql 如果已经安装了,将其卸载,如: rpm -e --nodeps mysql-libs-5.1.71-1.el6.x86 ...
- scidb
貌似是给科学家用的数据库,暂不研究
- (2)分布式下的爬虫Scrapy应该如何做-关于对Scrapy的反思和核心对象的介绍
本篇主要介绍对于一个爬虫框架的思考和,核心部件的介绍,以及常规的思考方法: 一,猜想 我们说的爬虫,一般至少要包含几个基本要素: 1.请求发送对象(sender,对于request的封装,防止被封) ...
- 最火的.NET开源项目[转]
综合类 微软企业库 微软官方出品,是为了协助开发商解决企业级应用开发过程中所面临的一系列共性的问题, 如安全(Security).日志(Logging).数据访问(Data Access).配置管理( ...
- github 初始化操作小记
Git作为一种越来越重要的工具,github又如此流行,现在就简单记录一下git的基础操作,希望能帮助大家快速体验入门! 1 查看本地是否存在”公钥”和”私钥” 如果没有,则执行: ssh-keyg ...
- zabbix从入门到精通
第1章 zabbix监控 1.1 为什么要监控 在需要的时刻,提前提醒我们服务器出问题了 当出问题之后,可以找到问题的根源 网站/服务器 的可用性 1.1.1 网站可用性 在软件系统的高可靠性(也 ...
- Bellman_ford标准算法
Bellman_ford求最短路可以说这个算法在某些地方和dijkstra还是有些相似的,它们的松弛操作基本还是一样的只不过dijkstra以图中每个点为松弛点对其相连接的所有边进行松弛操作 而Bel ...
- [Binary Search] Leetcode 35, 74
35. Search Insert Position Description Given a sorted array and a target value, return the index if ...
- 树莓派搭建 Hexo 博客(二)
Hexo 一个开源的博客框架,本文记录了一下在树莓派上搭建 Hexo 博客的过程. 上一篇介绍了 Hexo 的配置,现在网站已经能在本地访问了,也能通过 hexo generate 命令生成静态界面 ...