class Animal{
constructor(name){
this.name=name
}
Spack(){
console.log(name)
}
}
class Dog extends Animal{
constructor(name,age){
super(name);//子类中如果有constructor,就必须有super
this.age=age
}
Spack(){
super.Spack()//如果没有,则重写Spack方法,有则在Spack中添加内容
console.log(age)
}
}

模块化

//导出
var name = 'Rainbow';
var age = '24';
export {name, age};
导入
import {name,age} from '来源';

箭头函数

()=>1
v=>v+1
(a,b)=>a+b
()=>{
alert("foo");
}
e=>{
if (e == 0){
return 0;
}
return 1000/e;
}

模板字符串

let name=Tom
`welcome ${name}`

解构赋值

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3 [x, y = 'b'] = ['a', undefined]; // x='a', y='b' for (let [key, value] of map) {
console.log(key + " is " + value);
}

延展操作符

function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); let [a,b,...c] = [1,2,3,4,5,6,7,]
console.log(a,b,c)//1 2 [3,4,5,6,7] var arr = [1, 2, 3];
var arr2 = [...arr]; // 等同于 arr.slice()

Promise

var promise = new Promise(function(resolve, reject) {
// ... some code if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(value) {
// success
}, function(error) {
// failure
});
promise.then((value) => {
// success
}, (error) => {
// failure
});
promise.then((value) => {
// success
}).catch((err) => {
//failure
});

Generator函数

function * gen(x){
var y = *yield* x + 2;
return y;
} var g = gen(1);
g.next() // { value: 3, done: false }
g.next(2) // { value: 2, done: true }

async/await

*async* function process(array) {
for *await* (let i of array) {
doSomething(i);
}
}
async function process(array) {
for await (let i of array) {
doSomething(i);
}
}

正则

/foo.bar/.test('foo\nbar')// false
/foo.bar/s.test('foo\nbar') // true let str = '2019-07-31'
let reg = /(\d{4})-(\d{2})-(\d{2})/
let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
console.log(str.match(reg).groups) let reg = /^(?<name>welcome)-\k<name>-\1$/
let str = welcome-welcome-welcome
console.log(reg.test(str))

Proxy

let json = {
name,
age
}
let newJson = new Proxy(json,{
set(target,property,value){
if(property == 'age'){
if(!Number.isInteger(value)){
<!-- throw new TypeError('年龄是整数') -->
return false
}
}
target[property] = value
return true
},
get(target,property){
if(property in target){
console.log(`你访问了${property}属性`)
return target[property]
}else{
console.log(`没有这个属性`)
return null
}
},
has(target,key){
return key in target;
},
deleteProperty(target,property){
return true
}
}) var target = function () { return 'I am the target'; };
var handler = {
apply: function () {
return 'I am the proxy';
}
};
var p = new Proxy(target, handler);
p() const DOM = new Proxy({},{
get(target,property){
return function(attr={},...children){
console el = document.createElement(property)
for(let key of Object.keys(attr)){
el.setAttribute(key,attr[key])
}
for(let child of children){
if(typeof child == 'string'){
child = document.createTextNode(child)
}
el.appendChild(child)
}
return el
}
}
})
let oDiv = DOM.div(
{id:'id1',class:'cl1'},'div','1123',
DOM.ul({},
DOM.li({},111)
DOM.li({},222)
DOM.li({},333)
)
)

ES6.x的更多相关文章

  1. ES6模块import细节

    写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...

  2. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  3. ES6的一些常用特性

    由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...

  4. ES6(块级作用域)

    我们都知道在javascript里是没有块级作用域的,而ES6添加了块级作用域,块级作用域能带来什么好处呢?为什么会添加这个功能呢?那就得了解ES5没有块级作用域时出现了哪些问题. ES5在没有块级作 ...

  5. es6小白学习笔记(一)

    1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...

  6. ES6之变量常量字符串数值

    ECMAScript 6 是 JavaScript 语言的最新一代标准,当前标准已于 2015 年 6 月正式发布,故又称 ECMAScript 2015. ES6对数据类型进行了一些扩展 在js中使 ...

  7. ES6之let命令详解

    let与块级作用域 { var foo='foo'; let bar='bar'; } console.log(foo,'var'); //foo varconsole.log(bar ,'bar') ...

  8. ES6 箭头函数中的 this?你可能想多了(翻译)

    箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...

  9. ES6+ 现在就用系列(二):let 命令

    系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...

  10. ES6+ 现在就用系列(一):为什么使用ES6+

    系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...

随机推荐

  1. BZOJ 1861书架

    小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书,看完后放回书柜然后再拿下一本.由于这些书太有吸引 ...

  2. 深入学习 OLED Adafruit_SSD1306库(8266+arduino)

    QQ技术互动交流群:ESP8266&32 物联网开发 群号622368884,不喜勿喷 单片机菜鸟博哥CSDN 1.前言 SSD1306屏幕驱动库,最出名应该就是u8g2,读者可以参考 玩转u ...

  3. 笔记||Python3之文件的读写

    [文件的读模式]            文件的对象:文件的读写通过文件操作对象进行. Python2  -----  File Python3  -----  TextIOWrapper       ...

  4. centos与内核版本对应关系

    centos是基于redhat的二次开发,redhat会封装不同版本的内核,有时候,我们需要指定内核版本的centos,下面两个网站或许对你有帮助: https://access.redhat.com ...

  5. 2.成产出现 max(vachar2)取值问题

    uat 测试结果正确max(9)>max(8),结果生产出现 max(9)>max(12) 原因:字符类型,默认比较第一个字符的ASCII码. 解决方式: max(to_number(va ...

  6. 函数中this的指向

    每个函数在被调用时都会自动取得两个特殊变量:this和arguments:内部函数在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量. f 1 var name ...

  7. SpringBoot电商项目实战 — 商品的SPU/SKU实现

    最近事情有点多,所以系列文章已停止好多天了.今天我们继续Springboot电商项目实战系列文章.到目前为止,整个项目的架构和基础服务已经全部实现,分布式锁也已经讲过了.那么,现在应该到数据库设计及代 ...

  8. 重构 JAVA 聊天室 —— CS 模式的简单架构实现

    前言 自从开始弄起数据挖掘之后,已经很久没写过技术类的博客了,最近学校 JAVA 课设要求实现一个聊天室,想想去年自己已经写了一个了,但是有些要求到的功能我也没实现,但看着原有的代码想了想加功能好像有 ...

  9. 【CV现状-1】磨染的初心——计算机视觉的现状:缘起

    #磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...

  10. c++-多态小案例

    多态小案例 C面向接口编程和C多态 函数类型语法基础 函数指针做函数参数(回调函数)思想剖析 函数指针做函数参数两种用法(正向调用.反向调用) 纯虚函数 抽象类 抽象类基本概念 抽象类在多继承中的应用 ...