ES6特性整理
ESMAScript6.0
ES6 兼容
IE10+ 、Chrome、Firefox
要想兼容IE10以下的有两种方法:
用 babel 工具 borwer.js ,在 script 标签里添加 type="text/babel" 属性
变量let和const
let :用于定义变量,不能重复声明
const :用于定义常量,不能重复声明
箭头函数
箭头函数有效更改 this 的指向。
show((item) => {
return alert(item); //
});
show(13);
如果只有一个参数,可以省掉
( )
show(item =>{
return alert(item); //
});
show(13);如果只有一个 return ,可以省掉
{ }
和 returnshow = item => alert(item); //
show(13);
函数-参数
收集参数: ...args
Rest Parameter 必须是最后一位
let arr = [1,2,3];
function show(a,b,...args){
alert(args); // 35,57,18,45
}
show(13,14,35,57,18,45);
function show2(a,b,c){
alert(a); //
alert(b); //
alert(c); //
}
show2(...arr);
展开数组: ...args
展开后的效果,跟直接把数组的类容写在哪儿一样
let arr = [1,2,3];
let arr2 = [4,5,6];
function show(...args){
fu(...args);
}
function fu(a,b,...args){
console.log(a,b); // 1 2
console.log(a,b,...args); // 1 2 3 4 5 6
}
show(...arr,...arr2);
默认参数: (a,b,c=10)
当我们传递 c=1000 时 c=10 将会被替换。
如果没有给
c
设置参数,那么它的值默认为10。
function show(a,b,c=10){
console.log(a,b,c);
}
show(10,100,1000); // 10 100 1000
// show(10,100); // 10 100 10
解构赋值
左右两边结构相同
声明和赋值不能分开(必须在一句话里完成)
let [a,b,c] = [1,2,3];
console.log(a,b,c); // 1 2 3
let {a,b,c} = { a:1, c:3, b:2 };
console.log(a,b,c); // 1 2 3
let [{ a,b },[n1,n2,n3],num,str] = [{ a:1, b:6 },[12,24,32],58,'结构赋值']
console.log(a,b,n1,n2,n3,num,str); // 1 6 12 24 32 58 "结构赋值"
也可以根据右边的参数的类型进行返回相应的参数
let [json,arr,num,str] = [{ a:1, b:6 },[12,24,32],58,'结构赋值']
console.log(json,arr,num,str); // { a: 1, b: 6 } [12, 24, 32] 58 "结构赋值"
数组
map:映射(一个对一个)
let arr = [3,43,12];
arr.map(function (item){
alert(item); // 3 43 12
})
设置返回值:
let arr = [3,43,12];
let result = arr.map(function (item){
return item * 2
})
alert(result); // 6 86 24
简写(箭头函数):
let arr = [3,43,12];
let result = arr.map( item => item*2 )
alert(result); // 6 86 24
实列:
let score = [19,85,25,90];
const result = score.map(item => item >= 60 ? '及格' : '不及格');
console.log(score); // [19, 85, 25, 90]
console.log(result); // ["不及格", "及格", "不及格", "及格"]
reduce:汇总(一堆出来一个)
计算:
/**
* @param tmp (上一轮的结果)
* @param item (arr里的数依次传递给item)
* @param index (次数)
*/
let arr = [12,155,64,74]
let result = arr.reduce(function (tmp,item,index){
return tmp + item;
})
alert(result); // 305
let arr = [12,155,64,74]
let result = arr.reduce(function (tmp,item,index){
if(index != arr.length-1){ // 不是最后一次
return tmp + item;
}else{ // 最后一次
return (tmp + item)/arr.length;
}
})
alert(result); // 76.25
filter:过滤器
保留能被3整除的数
let arr = [12,54,35,75,11,24];
const result = arr.filter(function (item){
if(item % 3 == 0){
return true;
}else{
return false;
}
})
alert(result); // 12,54,75,24
简写:
let arr = [12,54,35,75,11,24];
const result = arr.filter(function (item){
return item % 3 == 0;
})
alert(result); // 12,54,75,24
实列:
let arr = [
{ item: '手机', price: 5600},
{ item: '电脑', price: 14000},
{ item: '电视', price: 7600},
{ item: '显示屏', price: 3600}
]
const result = arr.filter(json => json.price >= 6000);
console.log(result); // [{ item: '电脑', price: 14000} { item: '电视', price: 7600}]
forEach:循环(迭代)
对数组里的数循环
let arr = [12,54,35];
arr.forEach( (item,index) =>{
alert(index + '---' + item); // 0---12 1---54 2---35
})
字符串
startsWith和endsWith方法
startsWith
let str = 'https://www.baidu.com';
if(str.startsWith('http://')){
alert('普通网址');
}else if(str.startsWith('https://')){
alert('加密网址');
}else if(str.startsWith('git://')){
alert('git网址');
}else if(str.startsWith('svn://')){
alert('svn网址');
}else {
alert('其它');
}
endsWith
let str = '1.txt';
if(str.endsWith('.txt')){
alert('文本文件');
}else if(str.endsWith('.jpg')){
alert('JPG图牌');
}else {
alert('其它');
}
字符串模板
${ name } 直接把变量名放进字符串里面,可以折行。
字符串连接 :
let a = 15;
let str = `a,${a},b,c`;
alert(str); // a,15,b,c
字符串连接实列:
let title = '标题';
let content = '内容';
let str = <div>
<h1>${title}</h1>
<p>${content}</p>
</div>;
alert(str);
面向对象
1. class 关键字、 constructor 构造器和类分开了
2.可以在 class 里直接加方法
class User{
constructor(name,pass){
this.name = name;
this.pass = pass
}
showName(){
alert(this.name); // Snaek
}
showPass(){
alert(this.pass); //
}
}
const ul = new User('Snaek','123456');
ul.showName();
ul.showPass();
继承:
class VipUser extends User{
constructor(name,pass,level){
super(name,pass);
this.level = level;
}
showLevel(){
alert(this.level);
}
}
const vl = new VipUser('Snaek','123456',12);
vl.showName(); // Snaek
vl.showPass(); //
vl.showLevel(); //
JSON对象/简写
JSON
JSON.stringify(); let str = { a: 12, b: 54 };
let json = JSON.stringify(str);
console.log(json); // {"a":12,"b":54}
JSON.parse(); let str = '{ "a":12, "b":32, "c":"abc" }';
let json = JSON.parse(str);
console.log(json); // {a: 12, b: 32, c: "abc"}
简写
名字和值( key 和 value )一样可以简写
let [a,b] = [12,5];
let json = { a, b, c: 55 };
console.log(json); // {a: 12, b: 5, c: 55}方法在 json 里可以把
: function
去掉let json = {
a: 12,
/* show: function(){ */
show(){
alert(this.a); //
},
};
json.show();
Promise
异步:操作之间没有关系,可以同时进行多个操作。
同步:同时只能做一件事。
Promise.all
Promise : 用来消除异步操作,用同步一样方式,来写异步代码。
const p1 = Promise(function (resolve,reject){
$.ajax({
url: 'arr.txt',
dataType: 'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
const p2 = Promise(function (resolve,reject){
$.ajax({
url: 'json.txt',
dataType: 'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
Promise.all([
p1,p2
]).then(function (arr){
let [res1,res2] = arr;
alert('成功',res1);
console.log('成功',res2);
},function (err){
alert('失败',err;
});简写
function createPromise(url){
return new Promise(function (resolve,reject){
$.ajax({
url,
dataType: 'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
}
Promise.all([
createPromise('arr.txt'),
createPromise('json.txt')
]).then(function (arr){
let [res1,res2] = arr;
alert('成功',res1);
console.log('成功',res2);
},function (err){
alert('失败',err;
});在更高的 JQuery 版本中, ajax 自带 Promise 封装 ,我们可以简写成
Promise.all([
$.ajax({url:'arr.txt',dataType:'json'});
$.ajax({url:'json.txt',dataType:'json'});
]).then(function (arr){
let [res1,res2] = arr;
alert('成功',res1);
console.log('成功',res2);
},function (err){
alert('失败',err;
});
Promise.race
race 竞速,在多个请求中,那条请求地址先拿到数据,就先用那一条。
Promise.race([
$.ajax({url:'http://a1.baidu.com/data'});
$.ajax({url:'http://a3.baidu.com/data'});
$.ajax({url:'http://a4.baidu.com/data'});
$.ajax({url:'http://a2.baidu.com/data'});
]);
Generator
*号
generator 是一个函数,它可以让函数在执行的过程中停止(走走停停)。
generator 是将一个函数拆分成多个小函数,通过 next() 来自动执行它里面的小函数,从而实现停止(走走停停)。
generator 跟普通函数不一样,它会返回一个 generator 对象。
用法: 用
*
号代替 generator ,需要引入 runner 。
function * show(){
alert('a');
yield;
alert('b');
}
const genObje= show();
console.log(genObje);
genObje.next(); // a
// genObje.next(); // b
yield
yield 传参
在 next 传递参数,只会在 yield 后面起作用, yield 前面是接收不到 next 所传递的值.
在第一个 next 里传值是没有效果的。
function * show(){
alert('a');
yield;
alert('b');
}
const genObje= show();
console.log(genObje);
genObje.next(); // a
// genObje.next(); // b
yield 返回
yield 可以在中间拿到中间结果,并对中间所拿到的结果进行一些操作
function * show(){
let data1 = yield 13;
console.log(data1);
let data2 = yield 21;
console.log(data2);
return 32;
}
let genObje = show();
let res1 = genObje.next();
console.log(res1); // {value: 13, done: false}
let res2 = genObje.next();
console.log(res2); // {value: 21, done: false}
let res3 = genObje.next();
console.log(res3); // {value: 32, done: true}
async/await
async function readData(){
let data1 = await $.ajax({ url:'data/1txt', dataType:'json' });
let data1 = await $.ajax({ url:'data/2txt', dataType:'json' });
let data1 = await $.ajax({ url:'data/3txt', dataType:'json' });
console.log(data1,data2,data3);
}
readData();
ES6特性整理的更多相关文章
- 最常用的ES6特性(转)
最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...
- 最常用的ES6特性
遇到了要写出es6新特性的题目,所以查阅了资料来总结一下,点击查看原文. 进入正题,最常用的ES6特性有:let, const, class, extends, super, arrow functi ...
- ES6特性
一.ES6特性: let, const, class, extends, super, arrow functions, template string, destructuring, default ...
- 第四节:教你如何快速让浏览器兼容ES6特性
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...
- 解决浏览器兼容ES6特性
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
- ES6知识整理(4)--数组的扩展
最近工作比较忙,基本每天都会加班到很晚.处理一些客户端兼容问题以及提升用户体验的优化.也将近一周没更文了,现在继续es6的学习总结. 上篇回顾 ES6知识整理(三)--函数的扩展 扩展运算符 形式是3 ...
- 现在就可以使用的5个 ES6 特性
小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...
- 解决让浏览器兼容ES6特性
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
- Swift 3到5.1新特性整理
本文转载自:https://hicc.me/whats-new-in-swift-3-to-5-1/,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有. Hipo 2.0 重写从 Swif ...
随机推荐
- SwaggerUI看烦了,IGeekFan.AspNetCore.Knife4jUI 帮你换个新皮肤
背景 好像是上周四,看到微信群有人说java有轮子swagger-bootstrap-ui,而c#,就是找不到. 于是我一看,就说大话:"这个只是一套UI,他这个有开源地址么" 被 ...
- ALGEBRA-2 有限维向量空间
关键词:张成.线性无关.基.维度 linear span: V中任意一组向量的span都是V的子空间(对加法和数乘封闭) linear independent 线性无关 https://www.zy ...
- JavaScript基础-01
1. Javascript是一门动态的.弱类型的.解释型的脚本语言 动态:数据类型在运行时决定 弱类型:变量数据的类型不是确定的,可以随意的进行改变: 解释型:相对编译型来说,编译型计算机在执行之前需 ...
- ESLint 使用简介
C 语言诞生之初,程序员编写的代码风格各异,在移植时会出现一些因为不严谨的代码段导致无法被编译器执行的问题.于是在 1979 年,一款叫 lint[1] 的程序被开发出来,能够通过扫描源代码检测潜在的 ...
- vue.extend和vue.component的区别
vue.extend 使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个"子类"(构造器).参数是一个包含组件选项的对象. const Sub = function Vu ...
- xpath和css选择器对比
基本语法对比 都可以在html中提取内容,但xpath可以提取xml的内容.
- 基础知识、DOS命令
一.信息安全 1.信息源认证 https 访问控制 ACL :不能有非法软件驻留 :不能含有未授权的操作等 2.2017-OWASP-TOP5 注入 :失效的身份认证和回话配置 :跨 ...
- 使用log4j将数据流入flume
最近做了一个log抽取的项目,采用log4j+flume实现,在此分享记录一下. 准备 什么是flume? flume是一个提供高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统. flume ...
- 浅谈AQS原理
一.AQS介绍 AQS,即AbstractQueuedSynchronizer, 抽象队列同步器,它是Java多线程模块用来构建锁和其他同步组件的基础框架.来看下同步组件对AQS的使用: AQS是一个 ...
- 玩转Spring——Spring AOP
什么是AOP?AOP(Aspect Oriented Programming )被称为面向切面编程AOP利用一种称为"横切"的技术,剖解开封装的对象内部,并将那些影响了多个类的公共 ...