es6 学习2 模板字符

es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点. 1.第一个用途,基本的字符串格式化.将表达式嵌入字符串中进行拼接.用${}来界定 //es5 var name = 'lux' console.log('hello' + name) //es6 const name = 'lux' console.log(`hello ${name}`) //hello lux 2.第二个用途,在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接.ES6反引号(``)直接搞定.…

es6学习笔记--模板字符串

这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常用引号(''或"")和加号(+)来拼接字符串,麻烦不说而且还容易出错,就拿个其中的代码例子说: menuUl+="<li><i class='"+menudata[i].icon+"'></i><p onclick=\…

ES6 学习 -- 字符串模板

ES5及以前,动态操作dom结构时,要多个字符串和变量拼接,如果不换行处理,则需要写很长的代码,不利于阅读理解,如果进行换行写入,则需要一堆的"+"号来连接文本与变量,写起来非常麻烦,如下: var html = "<div>" + my.name + "</div>"; 如果有很多个标签,那么需要很多次拼接,写起来很麻烦,并且结构复杂非常臃肿而在ES6中,通过模板字符串,可以简单快捷的拼接字符串与变量,还可以实现换行写…

JS&ES6学习笔记（持续更新）

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

ES6中的模板字符串和新XSS Payload

ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的调整,最常见的如避免括号,避免引号,避免关键字等,以绕开过滤函数的检查,从而成功将代码注入到网页中运行. 在传统的XSS Payload变形中,常用的无非有以下几种: 使用String.fromCharCode来避免关键字,如String.fromCharCode(97,108,101,114,11…

ES6学习目录

前面的话 ES6是JavaScript语言的下一代标准,已经在 2015 年 6 月正式发布.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言为什么要学习ES6呢?很多流行的JavaScript开源框架都使用ES6编写,如Vue.js.video.js.d3.js等等.不学习ES6,这些流行的框架将不容易上手:ES6可以大大提高开发效率,同时让语法更加规范化,一定程度上增强了代码安全:更重要的是,ES6是语言级别的升级,而并不是一个库或框架.既然迟…

javascript的ES6学习总结(第一部分)

ES6(ESNext学习总结——第一部分) ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ECMA每年6月份,发布一个版本 2016年6月 ES6.1 ES7 ES20162017年6月 ES6.2 ES8 ES20172018年6月 ES... ES9 ES2018 1.let.const用法 let 相当于之前的…

ES6学习笔记二：各种扩展

转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7242967.html 一:字符串扩展 1:字符串遍历器 for (let char of str) { // } 这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点. 2:确定一个字符串是否包含在另一个字符串中 includes():返回布尔值,表示是否找到了参数字符串. startsWith():返回布尔值,表示参数字符串是否在源字符串的头部. endsWith():…

Python学习---django模板语法180122

django模板语法[Template] 模版的组成: HTML代码+逻辑控制代码 <h1> {{ user_name }} </h1> 逻辑控制代码的组成: 1.变量: {{ 双大括号来引用变量} } 2.tag标签: {% 大括号和百分比的组合来表示使用tag %} 3.自定义filter和simple_tag 4. extend模板继承 django模板之Template和Context对象 render(request, "hhh.html", {…

ES6学习5 字符串的扩展

1.ES6 为字符串添加了遍历器接口,使得字符串可以被for...of循环遍历. for (let codePoint of 'foo') { console.log(codePoint) } // "f" // "o" // "o" 2.includes(), startsWith(), endsWith() includes():返回布尔值,表示是否找到了参数字符串. startsWith():返回布尔值,表示参数字符串是否在原字符串的头部.…

es6学习笔记-class之继承

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

es6学习笔记-class之一概念

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

javascript的ES6学习总结(第二部分)

1.数组循环介绍数组循环之前,先回顾一下ES5数组的循环 (1)数组遍历(代替普通的for):arr.forEach(callback(val,index,arr){todo}) //val是数组的当前项,index是数组的键名(下标),arr是整个数组 let arr = ['today','tomorrow','the day after tommrrow','three days from now']; arr.forEach(function(val,index,arr){ conso…

ES6学习笔记<五> Module的操作——import、export、as

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

ES6学习笔记<四> default、rest、Multi-line Strings

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); }…

ES6学习笔记<三> 生成器函数与yield

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

ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

接着上一篇的说. 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学习笔记<一> let const class extends super

学习参考地址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学习好网站，前端用的相关库，及知道的插件

图形可视化:d3js echarts https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise 学习MDN Promise 教程 https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch MDN Fetch 教程 https://www.tutorials…

es6 中的模板字符串

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification. http://es6.ruanyi…

ES6学习笔记(一)——let和const

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…

ES6学习之箭头函数

ES6学习笔记--箭头函数箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a=>a*a 是函数体这个函数就类似于: let fn = function (a) { return a++; } 上面的实例就是一个参数的情况,当然也可以没有参数,或者有多个参数没有参数 // 示例1 let fn = () => 2 + 3; // 相当于 let fn = function…

javascript的ES6学习总结(第三部分)

1.ES6中的面向对象的类 1.1.定义类在ES5中,我们写一个类,通常是这么写的 function Person(name,age){ this.name = name; this.age = age; } /** * es5中的模拟面向对象的类的方法写法1 Person.prototype.showName = function(){ return "名字为:"+this.name; } Person.prototype.showAge = function(){ return…

ES6中的模板字符串使用方法

传统的 JavaScript 语言,输出模板通常是这样写的. $('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' ); 上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题. $('#result').append(` Ther…

opengl学习-利用模板测试勾画物体轮廓中出现的一个问题

我在学习OpenGL模板测试勾画物体轮廓的时候,出现了这个问题: 这个出现的原因就是,改变摄像机的时候,每次绘制,上次绘制中模板缓冲区的数据没有清除的原因.也就是在while循环开始的时候,glClear(GL_STENCIL_BUFFER_BIT);没有起作用,原来我在while的末尾忘记了修改回来模板缓冲区为可写.glStencilMask(0xff);…

ES6学习笔记之块级作用域

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

ES6学习总结（五）

与其说是对象合并,还不如说是JavaScript中对象属性的复制和转移,将多个对象中的属性合并到一个对象中 12345678 var person = { name : 'John', age : 24},location = { address : 'Location', city : 'NewYork'} ; 如何可以做到将上述两个对象中的属性合并到同一个对象中,介绍ES6的一个新的方法,Object.assign,如下: 1 Object.assign(target, ...sources…