ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ES6的块级作用域 块级作用域与函数声明 const 基本用法 本质 顶层对象 解构赋值 数组的解构 基本用法 默认值 对象的解构 基本用法 默认值 注意点 字符串的解构 数值布尔值的解构 函数参数的解构 圆括号问题 不能使用圆括号的情况 可以使用圆括号的情况 用途 for.for in.for…

前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>,今天主要来分享关于如何用js面向对象的思维来实现tab栏的一些相关的功能. 要实现的功能分析 点击tab栏可以切换效果 点击+号,可以添加tab项和内容项 点击X号,可以删除当前的tab项和内容项 点击tab文字或者内容项文字,可以修改里面的字体内容 抽像对象: Tab对象 (增删改查功能)实现功能效果如下图…

import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起. 这有可能导致两个问题: 一方面js代码变得很臃肿,难以维护 另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug 在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种…

为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口(Interface),yield则是生成器函数中表示 返回 或 继续 执行的关键字. 弄清楚这两个概念后,先看一个例子: function* fun(val) { yield 1*val; yield 2*val; yield 3*val; yield 4*val; return 5*val; }…

学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也就是说,ES6就是ES2015. let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments 这些是ES6最常用的几个语法,基本上学会它们,我们…

变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; var c = 3; ES6允许写成下面这样: 1 var [a, b, c] = [1, 2, 3]; 这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值,如果解构不成功,变量的值就等于undefined,下面是一些使用嵌套数组进行解构的例子: 1 2 3…

#js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var name;` ------就是已定义未赋值或者未定义而使用**针对变量来说**,占据一个变量的位置而不使用. - boolean-------布尔类型 - string: `var name="zhangsan"; var englishname='tom';` -----字符串类型,单…

原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引.JS中的数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或其它数组. JS引擎一般会优化数组,按索引访问数组常常比访问一般对象属性明显迅速. 数组长度范围 from 0 to 4,294,967,295(2^23 - 1)…

前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生成实例对象的传统方法是通过构造函数来创建的. function Person (name,age){ this.name = name; this.age = age; } Person.prototype.say=function(){ // 不能使用箭头函数(我差点忘记),因为 箭头函数没有pr…

default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; val_2 = val_2 || 20; return console.log(val_1 + val_2); } add(); 而现在可以这么做 function add_1(val_1 = 5,val_2 = 10){ return console.log(val_1 + val_2); }…

接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = function(){ console.log("say Hi!"); } document.getElementById("click_2").onclick = () => { let a = 1; let b = 2; console.log(a + b);…

ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.log(i);//10 这里就出现了意料之外的结果,此种原因是变量提升造成过的 局部作用域示例 !(function () { console.log(b);//undefined var b = 2; })() 为什么会输出undefined,而不是报错? 此种也是变量提升造成的意料之外的结果,上面代码等…

Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Spread / Rest 操作符 6.二进制和八进制字面量 7.对象和数组解构 8.对象超类 9.for...of 和 for...in 10.ES6中的类 1.基本认识vue MVVM 模式 View 层 Model 层 ViewModel 层 Vue实例的options vue实例的生命周期 2.…

Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTML代码中引入两个js文件,并且类型需要设置为module import指令用于导入模块中的内容.比如main.is的代码 导出方法: var name = '小明'; var age = 18; var flag = true; function sum(num1, num2) { return n…

原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-View Model)框架,这是一种设计用户界面的设计模式,把一个复杂的UI分成三个部分:模型(Model),视图(View),视图模型(View Model).以下解释这三个模型的含义: 模型(Model):你的应用中存储的数据.这些数据与UI是独立的.我们常向服务器发请求,从而得到数据改变模型存储的数…

可直接访问有道云笔记分享链接查看es6所有学习笔记 http://note.youdao.com/noteshare?id=b24b739560e864d40ffaab4af790f885…

最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:http:///jquery.com                handlebars.js文件下载:http://handlebarsjs.com/ <span style="white-space:pre"> </span><script type=&qu…

参考文档: let 和 const 命令 - ECMAScript6入门  暂时性死区(temporal dead zone) 理解ES6中的TDZ(暂时性死区) ES6 中 let 暂时性死区详解 注:文中代码仅作示意,复制运行时需要适当调整 ES6 规定,如果代码区块中存在 let 和 const 命令声明的变量,这个区块对这些变量从一开始就形成了封闭作用域,直到声明语句完成,这些变量才能被访问(获取或设置),否则会报错ReferenceError.这在语法上称为“暂时性死区”(英tempo…

目录 面向过程编程P OP(Process oriented programming) 面向对象编程OOP(Object Oriented Programming) 总结 @ 面向过程编程P OP(Process oriented programming) 面向过程就是分析出解决问题的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了. 优点:性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程 缺点:没有面向对象易维护.易复用.易扩展. 面向…

继承 上一篇学习了class的概念,在es5时,对象的继承有好几种,原型链继承,借用构造函数继承,组合继承,原型式继承,寄生式继承以及寄生组合式继承,都是按照函数的形式去集成的,现在class也有它的继承方式,简化了操作. extends 关键字extends,直接通过这一个关键字就可以实现继承. class Person{} class Child extends Person{} 上面代码定义了一个Child类,该类通过extends关键字,继承了Person类的所有属性和方法,所以Chil…

常用 API 学习笔记 url 函数 url.parse: 解析 url 地址 url.resolve: 向 url 地址添加或替换字段 url.format: 生成 url 地址 querystring 函数 querystring.parse: 解析查询字符串 querystring.stringify: 生成查询字符串 querystring.escape: 转义字符串 querystring.unescape: 反转义字符串…

1.ES6学习之let.const (1).var.let.const 变(常)量声明 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 在ES6中let就诞生了,实际上它为javascript新增了块级作用域. let只在变量声明时 ,所在的代码块中有效. 由于这一特性,let很适合在for循环中使用. 如下图是一个demo: let声明变量的特点: a:不存在变量提升: console.log(m);//Uncaught ReferenceError: m is…

笔记参考来源:廖雪峰老师的javascript全栈教程 一.安装Node.js 目前Node.js的最新版本是6.2.x.首先,从Node.js官网下载对应平台的安装程序. 1.下载 选择对应的Liunx版本,右键点击 -- 复制链接地址 然后在你的安装文件夹下载,我的文件夹路径是/opt/soft/ cd /opt/soft/ wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz 2.解压 tar xvf node-v…

1.概念 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). Iterator 的作用有三个: 一是为各种数据结构,提供一个统一的.简便的访问接口: 二是使得数据结构的成员能够按某种次序排列: 三是 ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of消费. Iterator 的遍历过程: (1)创建一个指…

{ let arr=['hello','world']; let map=arr[Symbol.iterator](); //返回false时继续执行,true停止执行! console.log(map.next()); console.log(map.next()); console.log(map.next()); } { let obj={ start:[,,], end:[,,], [Symbol.iterator](){ let self=this; let index=; let a…

恰逢换工作之际,新公司的是以 ES6 + webpack + vue 为技术栈, 正好ES6是我下个学习目标, 因此买了阮老师的 ES6标准入门,也当是支持阮老师了. 笔记将会照着这本书的阅读展开而做一些笔记,为了对ES6理解更加深刻,做了个简单的gulp,让gulp对ES6进行编码,转为ES5,两边同时观察,让自己立即更加深刻!跟笔记有关的代码将全部放在github上. let 和 const 命令 let 由于 JS 没有块级作用域,导致声明的变量在 {}内外都能访问,对此我们都是采用 fu…

这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.includes(str1, n) 返回布尔值,表示是否找到了参数字符串 params: 第一个参数str1 必选, 要匹配的字符   第二个参数n 可选 表示开始搜索的索引位置 第n个开始搜索到结束 let str = 'hello world' let str1 = 'hello' console.…

1 前情摘要 前段时间时间进行项目开发,需求安排不是很合理,导致一直高强度的加班工作,这一个月不是常说的996,简直是936,还好熬过来了.在此期间不是刚学会了es6的promise,在项目有用到promise的就一直都在用promise,爽的不要不要的,哈哈,项目到了最终阶段,不是很忙了,就开始自己的学习之路,好啦,废话到此为止,开始- 2 含义 关于异步操作,在es6之前,一直都是 回调函数, 事件监听, 发布/订阅 promise对象 (摘自es6的Generator函数的异步应用),这四…

最近在阅读<探索es6>,就把自己认为重要的做一点笔记,方便日后学习. 1.获取更多的es6资源的办法 有两组 ES6 资源: “ ECMAScript 6 Tools ”,作者 Addy Osmani . “ ECMAScript 6 Learning! ”,作者 Eric Douglas . 2.非版本化升级 原则上,语言的一个新版本是一个清理的机会,可以清理过时的特性或者改变特性的工作方式.这意味着新的代码在语言的旧的实现中无法工作,老的代码在新的实现中无法工作.每段代码都和特定的语言版…

最近捣鼓着学习Js,发现replace()真的很有用,替换功能杠杠的棒. 接下来看看我遇到的问题: 有两个随机给出的字符串,字符串1'xxxxxx',字符串2'====T'(这两个用作示例,其他为随机),根据这两个字符串最后输出'ooooox'.后面会给出测试用例,大家就会明白. 刚开始遇到这个问题的时候我就想这就是合并两个字符串,顺带替换了字符串1. var n=drone.length; var l; l=lamps.replace(/^(x){n}/,'o'); 没错,这就是我开始的思路,…