ECMAScript 6 入门
ECMAScript 6 基本语法
js世界
这个作者很懒,什么都没留下…
展开
-
es6(基础二) 变量的解构赋值
前言: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构一、数组的解构赋值 1.格式:let [a,b,c] = [1,2,3] es6之前的赋值{ var arr = [1,2,3]; var a,b,c; a = arr[0]; b = arr[b]; c = arr[c];} es6的赋值{ ...原创 2018-06-20 11:58:10 · 223 阅读 · 0 评论 -
es6(基础四) 字符串方法
/*方法 1.includes():返回布尔值,表示是否找到了参数字符串。 2.startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。 3.endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。 4.repeat():返回一个新字符串,表示将原字符串重复n次 5.padStart()用于头部补全 6.padEnd()用于尾部补全 */1.includes()、s...原创 2018-06-20 14:47:19 · 209 阅读 · 0 评论 -
es6(基础三) 字符串的扩展
一、Unicode 注意: 1.超出FFFF范围:吉 2.解决超出不能正确识别的字符:{}{ let str = '\u00ff'; console.info(str);//ÿ}{ let str = '\uD842\uDFB7'; console.info(str)//原创 2018-06-20 14:21:59 · 256 阅读 · 0 评论 -
es6(基础五) 模板字符串与标签模板
一、模板字符串 格式:`` 加入内容:`${变量名称...}` 传统的输出模板如下{ var ul = document.getElementById("#uls"); var str = ''; var a = '这是一个a'; var p = '这是一个p'; str+='<li style="background:red">';...原创 2018-06-20 15:01:23 · 2404 阅读 · 0 评论 -
es6(基础六) 正则的扩展
一、正则构造函数在 ES5 中,RegExp构造函数的参数有两种情况。第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag)。var regex = new RegExp('xyz', 'i');// 等价于var regex = /xyz/i;第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝。var regex = new RegExp(/xyz/...原创 2018-06-20 18:11:17 · 184 阅读 · 0 评论 -
es6(基础七) 数值的扩展
一、传统parseInt() parseFloat() 都是定义在全局对象下(window) es6下改成在 Number下 Number.parseInt() Number.parseFloat(){ let num = "3px"; console.info(Number.parseInt(num));//3}二、Number对象新增方法 Number.isFinite()...原创 2018-06-20 18:21:37 · 191 阅读 · 0 评论 -
es6(基础八) 函数的扩展
一、函数参数的默认值 function fn(obj=xx) 传统的默认值{ function fn(obj){ var obj = obj || {}; obj.username = '张三'; return obj.username; } console.info(fn());//张三} es6的默认值{ function fn(obj={"userna...原创 2018-06-20 19:52:43 · 186 阅读 · 0 评论 -
es6(基础九) 数组的扩展
一、运算符(...)将一个数组转为用逗号分隔的参数序列{ let fn = (...arg)=>{ console.info(arg.length);//5 console.info(arg);//(5) [1, 2, 3, 4, 5] console.info(arg[0]);//1 } fn(1,2,3,4,5)}{ console.info(...[2,3,4]...原创 2018-06-21 14:32:03 · 237 阅读 · 0 评论 -
es6(基础十) 对象的扩展
一、属性的简洁表示法:在对象之中,直接写变量{ let a = "zhangsan"; let obj = { a } console.info(obj.a);//zhangsan}二、属性名表达式 使用字面量方式定义对象(使用大括号),在 ES5 中只能使用(标识符)定义属性var obj = { foo:true, abc:123} ...原创 2018-06-21 15:23:38 · 313 阅读 · 0 评论 -
es6(基础十一) 面向对象与继承
一、class的基本语法 格式: class 名称{ constructor(){ } 方法名称1(){ } 方法名称2(){ } } new 名称()es6之前的面向对象{ function Fn(){ this.name = "张三"; } Fn.prototype.run = function(){ console.info("ru...原创 2018-06-22 15:50:33 · 147 阅读 · 0 评论 -
es6(基础十二) Symbol
一、作用与概述作用:解决命名冲突概述: 1.一种新的原始数据类型Symbol 2.表示独一无二的值传统命名冲突时,会覆盖前一个{ let obj = { abc:12, abc:23 } console.info(obj.abc)//23 命名冲突时,会覆盖前一个}es6采用Symbol解决命名冲突//解决命名冲突{ let o = Symbol('abc'); let ob...原创 2018-06-22 16:13:06 · 204 阅读 · 0 评论 -
es6(基础十三) Set与WeakSet
一、概念 1.新的数据结构,类似于数组 2.值都是唯一的let set1 = new Set();console.info(set1);//Set(0) {}let set2 = new Set([1,2,3,4,5,4,3]);//去重console.info(set2);//Set(5) {1, 2, 3, 4, 5}let set3 = new Set([1,2,3,...原创 2018-06-22 16:37:08 · 298 阅读 · 0 评论 -
es6(基础十四) Map与WeakMap
一、Map 1.map的作用: key可以是任意的内容 2.使用 长度:size 删除:delete clear 增:set 查:get 传统的对象的key只能是字符串作为键名let obj = { "a":123 //[1,2,3]:123//会报错,只能是字符串作为键名}console.log(obj) 而用Map,key可以是任意的类型let map1 = ...原创 2018-06-22 16:56:42 · 485 阅读 · 0 评论 -
es6(基础十五) Proxy(代理)
一、理解 源对象 代理(拦截) 操作 //打个比方 批发衣服:相当于供应商 代理商(张先生) 用户(买)二、使用(拦截) get():拦截对象属性的读取 set():拦截对象属性的设置 deleteProperty():拦截删除对象key操作//源对象let obj = { names:"衣服", times:"2017年1月1日", str...原创 2018-06-22 19:41:53 · 173 阅读 · 0 评论 -
es6(基础十六) Reflect
一、设计目的 1.以后方法只部署在Reflect对象身上 2.修改某些Object方法的返回结果 3.统一标准 之前有啥:delete obj[key] key in obj等 统一改成 Reflect.has() Reflect.deleteProperty(obj,name) 4.方便//读取let obj = { names :...原创 2018-06-22 19:46:47 · 159 阅读 · 0 评论 -
es6(基础十七) Promise
一、作用:解决异步编程的一种方案,让异步编程写法感觉像是同步二、用法new Promise(function(resolve,reject){ resolve() }).then(function(){//成功. },function(){//失败 }).then(function(){//成功 },function(){//失败 }) es6之前的回调函数{...原创 2018-06-22 20:01:52 · 159 阅读 · 0 评论 -
es6(基础十八) Iterator与for...of循环
一、for...of 格式: for(let k of xx) 获取的是选项值、for...in获取的索引{ let arr = ['a','b','c']; for(let key of arr){ console.info(key);// a b c }}{ let arr = ['a','b','c']; for(let key in arr){ console.in...原创 2018-06-22 20:14:48 · 260 阅读 · 0 评论 -
es6(基础十九) Generator
1.函数2.异步编程解决方案 格式: let fn = function* (){ yield }一、基本用法{ let fn = function* (){ yield 'a'; yield 'b'; yield 'c'; } let fnG = new fn(); console.info(fnG.next());//{value: "a",...原创 2018-06-22 20:27:21 · 164 阅读 · 0 评论 -
es6(基础二十) Module(模块)
一、基本使用// 导出export let A = 123;export function test() { console.log('test')}export class Hello{ test(){ console.log('hello test') }}// 导入模块import {A,test,Hello} from '/comm...原创 2018-06-22 20:32:29 · 183 阅读 · 0 评论 -
es6(基础二十二) 总结
1.变量 var 重复声明、函数级 let 不能重复声明、块级、变量 const 不能重复声明、块级、常量2.箭头函数 a.方便 i.如果只有一个参数,()可以省 ii.如果只有一个return,{}也可以省 b.修正this this相对正常点3.参数扩展(...) 收集 扩展 默认参数 function show(a, b=5){ ...原创 2018-06-23 15:33:06 · 182 阅读 · 0 评论 -
es6(基础二十一) async与await
一、async await与generator yield类似,区别之处: 1.不依赖于外部的runner了——统一、性能 2.可以用箭头函数 let readData=async ()=>{ let data1=await $.ajax({url: 'data/1.txt', dataType: 'json'}); let data2=await ...原创 2018-06-23 15:47:00 · 209 阅读 · 0 评论