// 6 let const
// 相信基本上这个都会有人知道
// let 和 const 的出现 解决了js没有块级作用域和静态变量的问题,也解决了重复定义的这一非常规操作
for(var i = 0;i<10;i++){ }
// 等价于
var i;
for(i=0;i<10;i++){
}
// 当let时,
for(let i = 0;i<10;i++){
}
//等价于
let i;
for( i = 0;i<10;i++){
let j = i;
}
// 为什么这里要写一个j? 实际上这里是一个类比操作。
// 在括号表达式里面,是不可以申明变量的,因此,这里实际上被转译成了上面的形式,
//但是let又需要有一个暂存锁定区,因此这里的j实际上就等于i,每一次获取到i的最新的值然后暂存
// 既然有了块级作用域就可以在代码里深层次的嵌套代码块,虽然看起来没什么用
{
let name = 1;
{
let name = 2;
}
}
// 实际上const表达的含义是一个静态常量,这个常量一旦定义了就不可以再被重新声明和赋值,和 1 2 3 4 5 是等价的
// 程序员经常用到的10个ES6的操作
// 1. 默认值
// 1.1 函数默认值
function defaultValue(color) {
var color = color || "black"
//...
}
function es6defaultValue(color = "black") {
//...
}
// 1.2 解构默认值
let { name = 1 } = {}
let { myname = 1 } = { myname: 2 }
let { undefname = 3 } = { undefname: undefined }
let { nullname = 3 } = { newname: null }
// 2. 字符串模板
// 2.1 单行
let first = 'Vlan'
let last = 'Tom'
let name = 'Your name ' + first + ' ' + last;
let es6name = `Your name ${first} ${last}`
// 2.2 多行 ,多行时会保存 换行符,制表符,空白符等的空白符
let multiLine = 'first line \n\t scound line'
let es6multiLine = `first line
scound line `;
// 3 解构赋值 [] , {}
// 3.1类数组解构
let [index0, index1] = [1, 2];
let [set0, set1] = new Set([1, 2]);
// 3.2实现可迭代协议iterator
function* countAppleSales() {
var saleList = [3, 7, 5];
for (var i = 0; i < saleList.length; i++) {
yield saleList[i];
}
}
var appleStore = countAppleSales();
let [next0, next1, next2] = appleStore
// 3.3 对象解构
import React,{Component} from 'react';
let {somename} = {somename:1};
// 解构的嵌套,嵌套技巧按照3.1 ,3.3的常规操作即可,数组使用[],对象使用{}
let {nest:[myude]} = {
nest:[0]
}
// 额外:指定赋值对象
// 对象解构实际上是省略步骤的缩写,完整表达式为
let {complete} = {complete:'complete sync'}
// 等价于
let {complete:complete} = {complete:'complete sync'}
// 第二个complete才是实际上被赋值的变量,可以拆分为
// 第一个值为对象的属性值,第二个complete可以为定义的变量
let complete = {complete:'complete sync'}.complete;
// 可以单独定义变量
let {complete:assignName} = {complete:'complete sync'}
// 数组下标解构
// 这里需要归正一下 数组[ ] ,当我们用Object.keys(['name'])时,得到的是 ['0'],由此看来,数组本质上也是一组key-value结构。
// 因此,只要是用Object.keys得到的可枚举值,都是可以用对象解构得到的
let {1:index1} = [1,2];
// 但是Set则得不到可枚举值
let {0:setval} = new Set(['value']) // setval ==> undefined
// 4. 箭头函数
var ids = ['aaa','vvvv']
var message = ids.map(function(id){
return `id is ${id}`
})
var es6message = ids.map(id=>`id is ${id}`)
// es6 this
document.addEventListener('mouseover',function(mouseEvent){
// todo
// this --> document
})
window;
document.addEventListener('mouseover',mouseEvent=>{
// todo
this
})
// ---> 等价于
var _this = this;
document.addEventListener('mouseover',function(mouseEvent){
// todo
_this;
})
(()=>{
this;
_this
}).bind(document)
[].map(function(){
})
()=>{}
v=>{}
(val,aaa)=>{}
()=>console.log(0)
()=>{
return console.log(0)
}
function myname(name){
return function(lastname){
return name + lastname
}
}
let jack = myname("jack");
jack("112234")
jack112234
var myname = function (name){
return function(lastname) {
return name + lastname
}
}
()=>{ name:1 }
// 由此可以看出来,箭头函数是无法绑定上下文的但是却很好的可以调用当前的作用域的this对象
// 5. Promise
// Promise是转换回调写法的重要组成部分,在es7中,配合await/async,可以将写法从异步回调转为同步语法。但是本质上还是异步编程。
function promise(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve("返回结果")
},1000)
}).then(function(result){
console.log(result)
}).catch(function(error){
console.log(error)
})
}
(async function (){
let result = await new Promise(function(resolve,reject){
setTimeout(function(){
resolve("返回结果")
},1000)
await ...;
});
console.log(result);
})()
switch(ssss){
case 50:
return
}
xxx
// 7. class 和 继承
// es6上顺利的引入了 class,但是嚼起来发现还只是一个语法糖
// 当引入了class之后,继承关系就不再头疼,使用extends关键字即可完成继承,向面向对象进一步完善
function person(xxxxx){
this.xxxxx = xxxxx
}
prototype = person.constructor =person
new person()
class Person {
constructor(name ){
this.name = name;
}
}
__proto__
class Student extends Person {
constructor(name){
super(name);
}
}
// 8. es6 module
// 相比es5的module.export和require
epxorts = {
}
// es6提供了更友好的方式
import * as declarename from './modulefile'
export default class {}
// default关键字在一个模块里面只可以有一个
// 不用*或者解构时,默认导出一个模块就是使用default申明的,其余模块可以解构出来
import defaultmodule ,{ port } from 'modulefile'
// modulefile.js
export var port = 3000
export function declare(){
}
export default function(){
}