es6入门笔记

renweihub 发布于2019-08-20 17:22 / 1900人阅读

摘要：批量声明循环箭头函数中可以省略，如果括号里只有返回的表达式，那么花括号和关键字也可以省略。箭头函数指向实例的指向是该函数被调用的指向该函数是被哪个对象所调用时的就是箭头函数中的指向是定义时的指向实例的指向

常量const

const a = 1;
a +=2;
console.log(a);
//报错  VM6833:2 Uncaught TypeError: Assignment to constant variable.
//常量只读，不可以更改

列表项目

es5/es6作用域

举个栗子：

//es5


(function(){
    var arr = [];
    for(var i =0;i<=2;i++){
        arr[i]=function(){
            return i+1;
        }
    }
    arr[0]();//4,i并没有进入循环，而是在循环完，i++到i=3;
    arr[1]();//4 一个闭包的存在，当执行arr[2]()时，i已经是3
 })()
--------
//es6
{
    let arr = [];
    for(let i = 0;i<=2;i++){
        arr[i] = ()=>i+1;
    }
    arr[0]();//1
    arr[1]();//2
}

总结： es5要通过立即执行函数对作用域进行隔离，es6只需要{}即可这样就不会污染全局变量，可以多次使用同样的变量

let变量声明

{
 let a = 1;
}
console.log(a);//报错 a is not defined

//不要在声明之前使用，在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
var tmp = 123;
if (true) {
  tmp = "abc"; // ReferenceError
  let tmp;
}

批量声明

{
 let [a,b,c]=[1,2,3];
 console.log(typeof a);//number
}

循环

for in&&for of
var arr=[1,3,4]
for(var i in arr){
console.log(i);
}
//0,1,2

for(var i of arr){
//1,3,4;
}

箭头函数

es5:

(function(i){
   i+=1;
   console.log(i);
})(1)   //2

es6:

((i)=>{
    i+=1;
    console.log(i);
})(1)   //2

es6中function可以省略，如果括号里只有返回的表达式，那么花括号和return关键字也可以省略。

箭头函数this指向：

//es5
{
    var factory = function(){
        this.a = "a";
        this.b = "b";
        this.c = {
            a:"a+",
            b:function(){
                return this.a;
            } 
        }
    }
    console.log(new factory().c.b())//a+
}

 //es6
{
    var factory = function(){
        this.a = "a";
        this.b = "b";
        this.c = {
            a:"a+",
            b:()=>this.a
            
        }
    }
    console.log(new factory().c.b())//a
}

es5实例的this指向是该函数被调用的指向（该函数是被哪个对象所调用时的就是this） 箭头函数中的this指向是定义时的指向（new factory()实例的指向）

idc机房托管云服务器 ES6入门 java开发入门笔记 ES6 es6-系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83536.html

ES6入门笔记（一）

摘要：用声明的常量无法在后面的代码中改值。表达式里还有一个很方便的就是表达式，举个例子运行结果为后声明的里以数组的形式存放了函数的剩余参数，是不是很方便。 ES6入门笔记（一）安装babel 由于浏览器对ES6的支持还不是很好，编写ES6代码前我们要安装一个babel工具将ES6代码编译成ES5代码，用如下命令安装babel： npm install -g babel-core ...

warkiz 2019-08-19 18:11 评论0 收藏0
ES6 Iterator笔记（摘抄至阮一峰的ECMAScript 6入门）

摘要：也就是说，遍历器对象本质上，就是一个指针对象。执行这个函数，就会返回一个遍历器。一个对象如果要有可被循环调用的接口，就必须在的属性上部署遍历器生成方法原型链上的对象具有该方法也可。后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。 ES6 Iterator笔记（摘抄至阮一峰的ECMAScript 6入门） Iterator的遍历过程创建一个指针对象，指向当前数据结构的起始位...

mayaohua 2019-08-20 18:19 评论0 收藏0
ES6入门笔记（二）

摘要：入门笔记二对字符串操作的扩展传统上，只有方法，可以用来确定一个字符串是否包含在另一个字符串中。返回布尔值，表示参数字符串是否在源字符串的头部。用于头部补全，用于尾部补全。模板字符串中嵌入变量，需要将变量名写在之中。 ES6入门笔记（二） ES6对字符串操作的扩展传统上，JavaScript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法...

godlong_X 2019-08-19 18:11 评论0 收藏0
React入门笔记（一）

摘要：环境配置新版的要求统一使用作为的编译工具，因此我们选择，新建文件，内容如下设置候选版本为和这里因为要用到，所以把在候选版本里加入对的支持组件里引入的组件这个概念里的组件就像，里的控件一样，能方便快捷的作为界面的一部分实现一定功能，我们可以环境配置新版的React要求统一使用babel作为JSX的编译工具，因此我们选择babel，新建.babelrc文件，内容如下 { pre...

OpenDigg 2019-08-19 18:15 评论0 收藏0
react入门学习笔记（一）

摘要：选择的主要原因大概是因为该框架出现较早，感觉上会相对成熟，日后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。多说无益，接下来开始的学习，我按照我学习中带着的问题来一一解答，完成我的入门笔记。主要是针对前端的组件化开发。这两天得空，特意来折腾了以下时下火热的前端框架react，至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论，也就不妄加评论了...

leon 2019-08-20 18:01 评论0 收藏0