1.定义变量
let
a).块作用域 , 不同于var的函数作用域
b).不可以重复定义同一个变量名
注:
{} + let 组合使用,
可以替代以前的封闭空间 : (function(){})();
const
a).常量赋值 :需要立即初始化 且 初始化后不可以修改。
b).和let一样 , 不可重复声明同一变量。
2.字符串 拼接
let str = `my english ${x} ` ;
3.解构赋值
let [a,b,c] = [10,20,30]; // 和顺序有关
let [a,[b,c],d] = [1,[2,3],4] ;
let {a,b,c} = {b:12 , a:6 , c:4}; // 和顺序无关
let {a = 1, b = 2} = {}; // 赋了默认值
4.复制数组
let arr1 = [1,2,3];
let arr2 = Array.from(arr1); //方式一
let arr3 = [...arr1] ; //方式二
补:‘...’的其他小技巧
function method_1(...args){
arguements.push(99);// 报错,没有push方法
args.push(99); //这样就是个数组 可以push
}
5. for-of 循环
a).可以循环数组 ,不可以循环json
b).是用于循环map的
for( let [k,v] of xx_map){
console.log(k,v);
}
6.Map
map.keys() ;
map.entries();
map.values();
map.get();
map.delete();
7.箭头函数 =>
写法 :let show = () => {}
注意 :
箭头函数中的this指向window
不能使用arguments 实例
8.面向 对象语法
选项卡例子 继承方式实现 自动切换 // todo
9.函数给默认值
function move(a = 1 , b){}
10.模块化
导出模块
const a = 12 ;
export default a ;
引用模块
先引入bebel.js/traceur.js等编译器
再引入bootstrap.js(和css中的bootstrap无关)
<!-- 并且 type 必须为 module -->
<script type = 'module' >
import modA from './xxx.js' ;
</script>
多模块导出 及引入
导出
const a = 5 ;
const b = 12 ;
export default {a,b};
引入并使用
import xxx from './xx.js' ;
console.log(xxx.a + xxx.b);
11. Promise
用来传递异步操作的数据(消息)
pending(等待,处理中) --> Resolve (完成,fullFilled)
--> Reject (拒绝,失败)
var p1 = new Promise(function(resolve,reject){
if(成功了){
resolve('成功数据');
}else{
reject('失败原因');
}
});
后续 : p1.then(成功func(resolve),失败func(reject));
例如:
p1.then(function(val){
alert(`成功了${val}`);
return `${val}恩恩` ;
},function(val){
alert(`失败了${val}`);
return `${val}呜呜` ;
});
如果p1走到了 if语句 , 那么结果就是 : 成功了成功数据
反之,走到else , 那么结果就是 : 失败了失败原因
也就是说 new Promise() 中的函数 只是用来 自定义成功失败逻辑的
而真实的对 成功/失败的数据的 处理 是放在后续的then中操作的。
注意then中的函数如果有返回值,这个值会返回到下一个then的对应参数中。
catch的用法:
p1.then(function(val){
alert(val);
throw '强行抛出';
}).catch(function(ex){
alert(ex);
});
Promise.all()用法:
var p2 = Promise.resolve(3);
var p3 = Promise.reject();
//all()中所有的promise对象都成功了,才会走成功函数
// 由于p3是失败了的 Promise对象, 所以,会走失败的分支;和true/false无关
Promise.all([false,p2,p3]).then(function(){
alert('成功了');
},function(val){
alert('失败了');
});
Promise.race() --挑最快的用
var p4 = new Promise(function(){
setTimeout(resolve,500,'one');
});
var p5 = new Promise(function(){
setTimeout(resolve,100,'two');
});
Promise.race([p4,p5]).then(function(val){
console.log(val); //display 'two'
});
Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(array);
12.Generator --生成器
是一个函数 , function紧接着加个*
可以遍历,所以就是个迭代器
语法:
function* show(){
yield 'Hello';
yield 'World';
yield 'ES6';
}
var res = show();
console.log(res.next());//{value:Hello , done:false}
console.log(res.next());
console.log(res.next());
注意:yield本身没有返回值
next()可以带参数,给上一个yield了
for-of可以循环generator函数:
function* fn(){
yield 1 ; yield 2 ;yield 3 ;
return 6;
}
for(var r of fn()){
r.next();
}
generator在json对象中写法:
var json = {
* show(){
yield 'xx' ;
}
};
- 前端学习笔记 --ES6新特性
前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- 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 ...
- ES6新特性:Proxy代理器
ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- 轻松学会ES6新特性之生成器
生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
随机推荐
- 一个Win32程序的进化------转载
一个Win32程序的进化 转载 weixin_34273046 发布于2017-11-15 10:53:00 阅读数 10 收藏 展开 一.为什么要学Win32 要回答这个问题,我们就要先搞清 ...
- java中常用的数据结构--Collection接口及其子类
java中有几种常用的数据结构,主要分为Collection和map两个主要接口(接口只提供方法,并不提供实现),而程序中最终使用的数据结构是继承自这些接口的数据结构类. 一.集合和数组的区别 二.C ...
- SSH Secure Shell 编码设置-----支持中文
参考:https://www.cnblogs.com/hupf/p/6920323.html #vi /etc/sysconfig/i18n 将内容改为 LANG="zh_CN.GB1803 ...
- 1_02_MSSQL课程_T_SQL语句_手动创建数据库和表
1. 基本的DML SQL脚本 ->简单的查询: Select 列名 From 表明 where 条件表达式 ->插入数据: Insert Into 表名(列名1,列名2,列名3..... ...
- python学习第二课——while循环
#while循环基础语句 while 1==1: print('OK') #死循环 #如何阻止死循环 count=0 while count<10: print('第'+(str)(count) ...
- HBase查询速度慢原因排查
问题:通过HBase访问服务在HBase中查询 ASSET_NORMAL 表速度很慢 如下,查询一条数据需要2.970s时间: 如下,统计总条数需要14.675s时间: HBase访问服务部署了3个节 ...
- 构建javascript array包
//像一个数组添加数组. copyArray = function(inSrcArray,inDestArray){ var i; for(i=0;i<inSrcArray.length;i++ ...
- struts2--action请求与Action类
1.action:代表一个sturts2的请求: 2.Action类:能够处理Struts2请求的类: --属性名必须遵守与JavaBean属性名相同的命名规则: --属性的类型可以使任意类型.从字符 ...
- 「AMPPZ2014」The Prices
传送门 Luogu团队题链接 解题思路 看到 \(m\) 这么小,马上想到状压 \(\text{DP}\). 设 \(dp[i][j]\) 表示在前 \(i\) 家商店中已买商品的状态为 \(j\) ...
- NoSQL技术
NoSQL技术使用场景: 在我们日常的开发中,无不都是使用数据库来进行数据的存储,由于一般的系统任务中通常不会存在高并发的情况,所以这样看起来并没有什么问题,可是一旦涉及大数据量的需求,比如一些商品抢 ...