es6知识总结

学习地址:http://web.jobbole.com/86441/
http://www.cnblogs.com/Wayou/p/es6_new_features.html
视频地址:http://study.163.com/course/courseLearn.htm?courseId=1003938030#/learn/video?lessonId=1048001010&courseId=1003938030
http://study.163.com/course/courseMain.htm?courseId=1003606097

在网页上使用
用法一:<script src=‘traceur.js‘></script>
<script src=‘bootstrap.js‘></script>
<script type=‘module‘></script>
用法二:在线编译(用于测试)
http://babeljs.cn/repl/
用法三:直接在Node里使用
直接用 需要添加‘use strict‘
node --harmony_destructuring xxx.js

1.声明变量(let/const)
var:函数作用域

let:块级作用域 以{}代码块作为作用域范围 只能在代码块里面使用
不存在变量提升: 先声明后使用,否则报错
暂时性死区:总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
不允许重复声明:不允许在相同作用域内,重复声明同一个变量,不能在函数内部重新声明参数
其实就是匿名函数立即调用相当于(function(i){})(i)

const:声明一个只读的常量。一旦声明,常量的值就不能改变,必须立即初始化
如果尝试修改变量或者没有立即给变量赋值
但是对象内部的键值对可以改变

2.template string 模版字符串
反单引号``结合${xxxxx}

3.函数扩展
函数参数的默认值
传统的:b=b||8
es6:function(a,b=8){}

箭头函数(相当于匿名函数,并且简化了函数的定义)
//只有一个返回值
var 函数名=(接收参数)=>返回值; 例如:var show=(a,b=7)=>a+b;
//有多行代码
var 函数名=(接收参数)=>{
xxxxxxx
return 返回值
};
例如:var show=(a,b=7)=>{
console.log(‘我是其它的内容‘);
return a+b
}
arguments不能使用

箭头函数中的this(始终指向箭头函数定义时的this 最近的一个函数 如果没有最近的函数就指向window)

箭头函数的缩写
对象单体模式:var name=‘李可馨‘;
var obj={
name,
showname(){}
}

4.对象扩展
对象的简写
属性:键值相同的话可以只写键名 a:a写成a
方法:把:function去掉;例如:b:function(){} 写成 b(){}

Object.keys(对象):获取对象的所有键名
添加在对象的构造函数上

Object.assign(合并的对象,被合并的对象):合并对象
原始合并之前的对象也保留着

Object.defineProperty(对象,要添加的属性,{
value:‘属性的值‘,
writable:true/false,默认false(属性值能不能重写,false的话为只读),
configurable:总开关,默认false,就不能再设置他的value writable configurable,
enumerable:是否能在for in 循环遍历出来或者在Object.keys()出列举出来,默认为false(读取不到),
get:访问器,
set:访问器(用了访问器前面的东西都不生效)
例如:Object.defineProperty(data,‘b‘,{
set(newValue){
console.log(newValue)
},
get(){
return 5
}
})
}):双向数据绑定

5.类 Class(传统的是面向对象的构造函数)
传统构造函数:this.xxx=xxx;
es6构造函数: constructor:属性 方法:直接写外面
例如:constructor(name=默认值,sex){
this.name=name;
this.sex=sex
}
showName(){
alert(this.name)
}
传统继承:call(对象,参数1,参数2)或者apply(对象,[参数1,参数2]/arguments)
子类.prototype=new 父类()

es6继承:extends + super(继承的属性1,属性2)

静态方法:static(不能被实例继承,直接通过类来调用)

6.解构赋值(传统赋值用=)
数组解构:
数组:let [a,b,c]=[1,2,3]
嵌套数组解构:let [a,[b,c],d]=[1,[2,3],4](可用空位填充)
默认值:let [a,[b,c],d=5]=[1,[2,3],4](若有值,可替代默认值)

对象解构:(跟顺序无关)
let obj={
name:‘李可馨‘,
sex:‘女‘
}
//给变量重新起名
let {name:uname,sex:usex}=obj;
//如果键值对相同
let {name:name,sex:sex}=obj;可写为let {name,sex}=obj或者({name,sex}=obj)可以重复定义赋值;
例如: var obj={a:1,b:2}
let a=0;
console.log(a)//0
({a,b}=obj)
console.log(a)//1

//结构对象中的数组
例如: var obj={
arr:[
‘go‘,
{
a:1
}
]
}
let {arr:[greet,{a}]}=obj;
//对象中自带的方法
let {floor,pow}=Math;
console.log(floor(1.9))

字符串解构:
let [a,b,c]=‘李可馨‘
//获取字符串的长度(字符串原生的属性)
let {length}=‘yo.‘ console.log(length)//3

函数参数的解构
传参数 function({a}){console.log(a)}
例如:
//对象(没顺序)
function show({a=默认值,b,c}){
console.log(a)
}
show({
//键名跟参数值能对上就行 不需要按着顺序
b:2,
a:1,
c:3
})
//数组(有顺序)
var arr=[1,2]
function show([a,b]){
console.log(a)
console.log(b)
}
show(arr)

7.babel(es6转化成es5 兼容浏览器)
在线编译:主要用于测试 http://babeljs.cn/repl/
安装:npm install --save-dev babel-cli或者npm install cnpm;cnpm install babel-cli --save-dev
设定转码规则:npm install --save-dev babel-preset-es2015
配置.babelrc文件{
‘presets‘:[‘es2015‘]
}
转化成es5:在package.json中配置 ‘scripts‘:{
‘bulid‘:bable index.js
}
打开终端:npm run bulid就转化成了es5
通过--out-file或者-o生成新的es5文件(‘bulid‘:bable index.js --out-file demo.js)

8.vue-cli脚手架
安装:npm install -g vue-cli
vue list可判断有么有安装成功
vue init webpack 项目名称

9.模块 import export
export不能导出值 会报错 export 1报错 var m=1;export m也会报错
正确的:export var m=1或者var m=1;export {m}
as:取别名 export {m as n} import {n}
export default function(){} import xxx(任意名)

10.字符串的新增方法
判断字符串中是否有某一个字符: str.includes(‘包含的字符‘);
判断字符串中是否以某一个字符开头:str.startWith(‘字符‘);
判断字符串中是否以某一个字符结束:str.endWith(‘字符‘);
把一个字符串重复多少次: str.repeat(‘重复次数‘);

11.新的数据类型(原始的undefined,null,boolean,string,number,object)Symbol
每创建一个值都是不同的 防止对象的属性被重写 防止下游更改上游的属性
let a=Symbol(‘this is symbol‘);//传描述对值无影响
可以临时的重写 不能更改全局的属性

12.proxy:代理 对照4的Object.defineProperty来学习
var user=new Proxy({原对象obj},{
get:function(obj,prop){
/*if(prop==‘fullname‘){
return obj.fname+‘ ‘+obj.lname
}*/
switch (prop){
case ‘fullname‘:
return obj.fname+‘ ‘+obj.lname
}
},
set:function(obj,prop){

}
})
user.fname=‘bob‘;
user.lname=‘wood‘;
console.log(user.fullname)

13.set 数据结构
每一个值都是唯一的 如果传入了相同的值 只取一个(数组去重)
var s=new set([1,2,3,4]);
s.size;//长度
s.add(5);//添加一个值
s.delete(3);//删除一个值
s.has(5);//是否拥有哪个值
s.clear();//清空所有的值

14.数组
复制数组:传统:for循环赋值
es6:var arr1=Array.form(arr)
var arr1=[...arr]//超引用

...:可以传参
function(...args){
console.log(args)//是一个数组 可以直接用push 若不用... arguements是一个类数组不能用数组的方法
}

for of循环 (值):遍历(迭代)整个对象 表现类似for in (索引)
可以循环数组不能循环json 真正目的是为了循环map对象
循环数组只循环值: for(var value of arr)不支持arr.values()
只循环索引: for(var value of arr.keys())
循环值跟索引: for(var value of arr.entries())

map对象:跟json相似 也是key-value的形式 为了和for of配合生成的
var map=new Map();
//设置
map.set(name,value);
//获取
map.get(name);
//删除
map.delete(name);
遍历map不能使用for in 无效 用for of循环出来格式为name,value键值都有
for(var [key,value] of map){console.log(key,value)}或者
for(var name of map){console.log(key,value)}本质是循环map.entries整体
//只循环key map.keys()
//只循坏value map.values()

15.promise
就是一个对象,用来传递异步操作的数据(消息)
状态:pending(等待/处理中) Resolve/fullFilled(成功、完成) Rejected(失败、拒绝)
var fn=new Promise(function(resolve,reject){
if(异步处理成功了){
resolve(成功数据)
}else{
reject(失败原因)
}
})

方法: then :接收数据 fn.then(function(value){成功(resolve)},function(value){失败(reject)}).then()返回的也是一个promise对象 链式调用;
catch: 捕获错误 fn.catch();跟throw结合使用
all: 将多个Promise对象组合包装成一个全新的promise对象 Promise.all([p,p1,true]).then() 如果所有的promise对象都正确才走成功 只要有一个错误就失败了;
race: 返回的也是一个对象 返回的最先能执行的promise结果 哪个最快就用哪个; Promise.race([p1,p2]).then();
reject: 生成错误的promise对象 Promise.reject();
resolve: 生成成功的promise对象
Promise.resolve(value);
Promise.resolve(promise);

结合ajax使用:
let p=new Promise(function(resolve,reject){
ajax(‘1.txt‘,funcition(str){
resolve(str)
},function(err){
reject(err)
})
})
p.then(function(str){},function(err){})

16.Generrator 生成器
是一个函数(状态机) 状态可以遍历
function* show(){
yield xxx
}
函数前面有*号 函数内部用的是yield语句

返回值有next()方法 返回{value:yield后面的值,done:布尔值(是否遍历完毕)} next也可以带参数 参数就是给上一个yield赋值

yield语句本身没有返回值,或者每次返回undefined

for of也可以循环Generrator函数 只能循环yiled语句 不能循环return语句

Generrator如果放在对象中 var obj={*show(){yield}}

时间: 2024-08-03 05:28:51

es6知识总结的相关文章

ES6知识整理(5)--对象的扩展

个人开这个公众号的初心是为了积累知识,因此并没有做什么推广,再说自己也不知道怎么推广,推广之后又能干些什么.已经将近10天没发文章了,虽然每天都加班,但也不会一点时间都没有,有时还是会懒癌发作不想学习.可能是因为还没找的动力源吧,还在寻找中……希望能找到动力,并坚持地积累下去. (文章会同步到博客园,技术类文章还是该让搜索引擎察觉比较好) 属性.方法简介表示法 属性简写: 传统返回法 es6返回法 结果是一样的. 方法简写: 传统写法 es6写法 结果也一样. 属性赋值器与取值器 赋值器sett

ES6 知识摘要

let和const命令 1.let命令 let 只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 for (let i = 0; i < arr.length; i++) {} console.log(i); //ReferenceError: i is not defined var a = []; for (var i = 0; i < 10; i++) {

ES6知识整理(8)--Promise对象

(关于promise,以前并不知道是什么,没这个概念.现在来学习总结下) promise含义 es6的异步编程解决方案.需要new新对象操作api. promise对象特点 有3中状态:pending(进行中).fulfilled(已完成).rejected(已失效),异步操作才有的状态. 2种状态的改变结果,称为:已定型(resolve): 即可将异步操作变为同步操作,避免层层嵌套回调函数. promise缺点: 对象创建后会立即执行,中途不可中断. 不设置回调时,将抛出异常,不影响外部执行.

Vue的三个点es6知识,扩展运算符

Vue中的三个点在不同情境下的意思 操作数组 //里面放自己定义的方法 methods: { /** * 把数组中的元素孤立起来 */ iClick() { let iArray = ['1', '2', '3']; console.log(...iArray); // 打印结果 1 2 3 }, /** * 在数组中添加元素 */ iClick3() { let iArray = ['1', '2', '3']; console.log(['0', ...iArray, '4']); // 打

ES6知识整理(6)--Symbol函数

(文章会同步到博客园,技术类文章还是该让搜索引擎察觉比较好) symbol是js的第7种数据类型: 7种分别是:undefined.null.boolean(布尔).string(字符串).number(数值).object(对象).symbol. Symbol函数 独一无二的值 Symbol函数返回一个独一无二的值,用typeof来获取数据的类型(symbol). 该函数不能new,且不是对象,不能添加属性,类似于字符串,但不能使用字符串的很多属性与方法(也非字符串)(不能与其他类型运算) 需

es6属性基础教学,30分钟包会

ES6基础智商划重点在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值得高兴的是,如果你熟悉ES5,学习ES6并不需要花费太多的时间就可以掌握,因为常用的基础语法并不多,花少量的时间,就可以开始我们的ES6之旅了. 这篇文章不会详细的告诉你ES6的每一个细节知识,只会根据我自己的开发经验,将我在实际开发中常常用到的知识点分享给大家,给大家学习ES6一个方向的指引.这是因

subline3 如何设置es6高亮

步骤: 1.操作Ctrl+Shift+P , 然后在弹出的框内输入Package Control: in,2.选择Package Control: install package,3.等待再次弹出输入框,输入框弹出后,输入Babel,找到Babel syntax..,并回车安装,安装完后并不会高亮,需要设置4.Sublime3才有的插件,支持ES6.JSX语法高亮.5.菜单->View->Syntax->Open all with current extension as...->

包建强的培训课程(13):iOS与ReactNative

@import url(/css/cuteeditor.css); v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} Normal 0 false 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·‘“〈<「

包建强的培训课程(15):React入门与提高

v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} Normal 0 false 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·‘“〈<「『[[[〝﹙﹛﹝$(.[{£¥ !%),.:;>?]}¢¨°·ˇˉ