几个ES6新特性
ES6是JavaScript语言的下一代标准,已经在2015年6月正式发布了,因为ES6的第一个版本是在2015年发布的,所以又称ECMAScript 2015(简称ES2015)。本文主要讲述的是ES6相对于ES5的几个实用新特性,如有其它见解,欢迎指正和交流。
在线babel转换地址:http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&code=
1. let关键字
(1)基本用法:let关键字用来声明变量,它的用法类似于var,都是用来声明变量。
(2)块级作用域:let声明的变量,只在let关键字所在的代码块内有效。
{
var a = 10;
let b = 10;
}
console.log(a); //
console.log(b); //error: b is not defined var c = 10;
{
var c = 20;
}
console.log(c); // var d = 10;
{
let d = 20;
}
console.log(d); // var i=0;
for(var i=0; i<10; i++) {
}
console.log(i); // var j=0;
for(let j=0; j<10; j++) {
}
console.log(j); //
(3)不存在变量提升:let声明的变量一定要在声明后使用,否则会报错
console.log(a); //undefined
console.log(b); //error: b is not defined var a = 10;
let b = 10;
2. const关键字
(1)基本用法:声明一个只读的常量。一旦声明,常量的值就不能改变。
console.log(a); //undefined
console.log(b); //error: b is not defined
var a = 10;
let b = 10;
(2)其他特性与var关键字一致
3. 字符串拼接方法
(1)基本用法:用反引号进行拼接
/*ES5中字符串处理方法*/
var name = "Jack";
var str1 = 'my name is ' + name;
console.log(str1); //my name is Jack /*ES6中字符串处理方法*/
var str2 = `my name is ${name}`;
console.log(str2); //my name is Jack
4. function函数
(1)基本用法:默认参数
/*ES5中函数默认参数处理方法*/
function fn1(height) {
var height = height || 100;
console.log(height);
}
fn1(); // /*ES6中直接在形参赋值进行设置默认参数*/
function fn2(height = 100) {
console.log(height);
}
fn2(); //
(2)箭头函数
/*ES5中定义一个函数变量*/
var fn1 = function(height) {
console.log(height);
}
fn1(100); // /*ES6中用箭头函数定义函数变量*/
var fn2 = (height) => {
console.log(height);
}
fn2(100); //
/*箭头函数特性:箭头函数的this指针保持和外层指针一致*/
var ele = document.getElementById('ele'); //获取某个元素,绑定点击事件
ele.onclick = function() {
setTimeout(function() {
console.log(this); //点击后,打印出window对象
}, 10)
}
ele.onclick = function() {
setTimeout(() ()=> {
console.log(this); //点击后,打印出ele元素对象
}, 10)
}
/*箭头函数特性:箭头函数的argumets对象和外层一致*/
function fn1(height) {
setTimeout(function() {
console.log(arguments);
}, 10)
}
function fn2(height) {
setTimeout(() => {
console.log(arguments);
}, 10)
}
fn1(100); //[]
fn2(100); //[100]
5. 变量的结构赋值
(1)基本用法
/*ES5初始化变量*/
var a = 10;
var b = 20; /*ES6解构赋初值*/
var [a, b] = [10, 20];
/*ES5获取对象的key值*/
var obj1 = {
username1: 'jack',
password1: 123
}
var username1 = obj1.username1;
var password1 = obj1.password1;
console.log(username1, password1); /*ES6通过解构拆包获取对象的key值*/
var obj2 = {
username2: 'jack',
password2: 123
}
var {username2, password2} = obj2;
console.log(username2, password2);
/*字符串的解构赋值*/
var [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); //h e l l o
/*数组的解构赋值*/
var [a, b, c] = ['hello', 'world'];
console.log(a, b, c); //hello world
6. …拓展操作符
(1)基本用法
//合并数组
var arry = ['a', 'b'];
var arry1 = arry.concat(['c']); //ES5数组拼接
var arry2 = [...arry, 'c']; //ES6...操作符拼接数组
console.log(arry1); //['a', 'b', 'c']
console.log(arry2); //['a', 'b', 'c'] //合并对象
var obj = {a: 1, b: 2};
var obj1 = {...obj, c: 3};
var obj2 = {...obj, a: 3};
console.log(obj1) ; // {a: 1, b: 2, c: 3}
console.log(obj2) ; // {a: 99, b: 2}
/*拆分字符串*/
console.log([...'hello']); // [ "h", "e", "l", "l", "o" ]
/*合并成数组*/
function mergeArr(...Arrys) {
console.log(arguments);
}
mergeArr('a', 'b', 'c'); //['a', 'b', 'c']; /*拆分数组*/
console.log(...['a', 'b', 'c']); //a b c
function fn1() {
var arry = Array.prototype.sort.call(arguments, function(a, b) {
return a - b;
})
console.log(arry);
}
fn1(3,1,5,3,8,6); //1 3 3 5 6 8 /*...操作符将类数组转换为数组*/
function fn2() {
var arry = [...arguments].sort(function(a, b) {
return a - b;
})
console.log(arry);
}
fn2(3,1,5,3,8,6); //1 3 3 5 6 8
7. 对象的一些实用方法
(1)Object.is():判断两个值是否相等,ES5比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。
console.log(+0 === -0) //true,错误结果
console.log(NaN === NaN) //false,错误结果
console.log(Object.is(+0, -0)) // false,正确结果
console.log(Object.is(NaN, NaN)) // true,正确结果
/*普通值的比较*/
console.log(Object.is('foo', 'foo')) //true
console.log(Object.is({}, {})) //false
(1)Object.assign():合并对象的方法,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
/*使用方法*/
var target = {a: 1, b: 1 };
var source = {c: 1};
console.log(Object.assign(target, source)); //{a: 1, b: 1, c: 1}
/*如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性*/
var target = {a: 1, b: 1 };
var source = {a: 20, c: 1};
console.log(Object.assign(target, source)); //{a: 20, b: 1, c: 1}
/*运用:克隆对象*/
function clone(origin) {
return Object.assign({}, origin);
}
var obj1 = {
a: 2
}
var obj2 = clone(obj1);
console.log(obj2); //{a: 2} /*注意:Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。*/
var obj1 = {a: {b: 1}, c: 1};
var obj2 = Object.assign({}, obj1);
obj2.a.b = 100;
obj2.c = 200;
console.log(obj1); //{a: {b: 100}, c: 1}
/*运用:合并对象*/
var merge = (...sources) => Object.assign({}, ...sources);
console.log(merge({a: 1}, {b: 2}, {a: 3, c :3})); //{a: 3, b: 2, c: 3}
8. promise对象
(1)定义:一种异步函数的解决方案,避免了异步函数层层嵌套,将原来异步函数转换 为便于理解和阅读的链式步骤关系
(2)三种状态:Pending(进行中)、Resoloved(已完成)、Rejected(已失败)。
(3)两种结果:Pending->Resoloved(成功); Pending->Rejected(失败)。
(4)then方法:第一个参数是成功时调用的函数,第二个参数是失败时调用的函数。
(5)通常形式。
var promise = new Promise((reslove, reject) => {
if(条件成立) {
/*Pending->Resoloved(成功*/
reslove();
}else {
/*Pending->Rejected(失败)*/
reject();
}
})
/*运用:隔1s打印‘hello’,隔2s打印‘world’*/ /*ES5实现方法*/
setTimeout(function(){
console.log('hello')
setTimeout(function(){
console.log('world')
}, 1000)
}, 1000) /*Promise实现方法*/
var wait1000 = (str) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(str);
}, 1000)
})
} wait1000('hello').then((data) => {
console.log(data);
return wait1000('world');
}, () => {
console.log('err');
}).then((data) => {
console.log(data);
})
几个ES6新特性的更多相关文章
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6新特性之模板字符串
ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串 http://www.infoq.c ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- ES6新特性:Proxy代理器
ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- 轻松学会ES6新特性之生成器
生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
随机推荐
- cocos2d-x3.3 以前版本 工程Xcode6编译时的问题
Undefined symbols for architecture i386: "_fwrite$UNIX2003", referenced from: _unixErrorHa ...
- JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...
- VS中如何快捷地给自己的代码添加创建信息注释
VS中如何快捷地给自己的代码添加创建信息注释 Intro 以下讨论的都是没有使用 GIT 来管理源代码的情况,如果使用 GIT 管理源代码可直接使用VS的Git扩展就不需要考虑以下问题. 什么是创建信 ...
- IOS开发基础知识--碎片11
1:AFNetwork判断网络状态 #import “AFNetworkActivityIndicatorManager.h" - (BOOL)application:(UIApplicat ...
- Android 四大组件之再论BroadCast
BroadCast 是android提供的跨进程通讯的有一利器. 1.异步执行onReceiver @Nullable public abstract Intent registerReceiver( ...
- [Java编程思想-学习笔记]第3章 操作符
3.1 更简单的打印语句 学习编程语言的通许遇到的第一个程序无非打印"Hello, world"了,然而在Java中要写成 System.out.println("He ...
- SE(homework3)_敏捷模型
今天老师上课主要和我们讲解了软件开发模型类型.既然是敏捷模型,那么什么是非敏捷模型呢?了解这里点,会更清楚什么是敏捷模想.我们所知道的非敏捷模型有瀑布模型,我们知道这是早期软件开发的经典模型,流程主要 ...
- 版本管理工具SVN
此文件根据慕课网 源生活老师的教学视频总结 视频地址 http://www.imooc.com/learn/109 一.SVN下载和安装配置 服务端下载地址 https://www.visualsvn ...
- Linux 客户端访问 NFS报Permission Denied错误
在Linux服务器上访问NFS共享目录时,报错:Permission denied. 如下截图所示: 因为这个NFS是系统管理员配置的,我又不了解具体情况,而系统管理员休假中,联系不上.那么我只能先多 ...
- Linux SSH登录慢案例分析
手头有台Linux服务器ssh登录时超级慢,需要几十秒.其它服务器均没有这个问题.平时登录操作都默默忍了.今天终于忍不住想搞清楚到底什么原因.搜索了一下发现了很多关于ssh登录慢的资料,于是自己也学着 ...