javascript的ES6学习总结(第二部分)
1.数组循环
介绍数组循环之前,先回顾一下ES5数组的循环
(1)数组遍历(代替普通的for):arr.forEach(callback(val,index,arr){todo}) //val是数组的当前项,index是数组的键名(下标),arr是整个数组
let arr = ['today','tomorrow','the day after tommrrow','three days from now'];
arr.forEach(function(val,index,arr){
console.log(val,index,arr);//today 0 (4) ["today", "tomorrow", "the day after tommrrow", "three days from now"]...
});
(2)数组映射:arr.map(callback(item,index,arr){todo... 正常情况下,需要配合return,返回的是一个新数组,若没有return,相当于forEach,一般用于在有return的情况下}) //item是数组的当前项,index是数组的键名(下标),arr是整个数组
let arr = [
{title:'aaaa',read:100,hot:true},
{title:'bbbb',read:100,hot:true},
{title:'cccc',read:100,hot:true},
{title:'dddd',read:100,hot:true}
];
let newArr = arr.map((item,index,arr)=>{
// console.log(val,index,arr);
let json = {};
json.t = item.title;
json.r = item.read;
json.h = item.hot == true && '真棒!!!';
return json;
});
console.log(newArr);//(4) [Object, Object, Object, Object]
(3)数组过滤:arr.filter(callback(item,index,arr){todo... 正常情况下,需要配合return,返回值为true的元素,返回值为false的元素则被过滤掉}) //item是数组的当前项,index是数组的键名(下标),arr是整个数组
let arr = [
{title:'aaaa',read:100,hot:true},
{title:'bbbb',read:100,hot:false},
{title:'cccc',read:100,hot:true},
{title:'dddd',read:100,hot:false}
];
let newArr = arr.filter((item,index,arr)=>{
// return item.hot == true;
return item.hot;
});
console.log(newArr);//(2) [Object, Object]
(4)数组单项检测:arr.some(callback(item,index,arr){todo... 正常情况下,需要配合return,如果有一个值为true,则返回true,否则返回false}) //item是数组的当前项,index是数组的键名(下标),arr是整个数组
let arr = ['one','two','three','four'];
let b = arr.some((val,index,arr)=>val=='one');
console.log(b);//true
注:此方法可封装成一个检测数组中是否存在某一项的函数
let arr = ['apple','banana','orange'];
function findInArray(arr,item){
return arr.some((val,index,arr)=> val == item);
}
console.log(findInArray(arr,'orange'));//true
(5)数组多项检测:arr.every(callback(item,index,arr){todo... 正常情况下,需要配合return,如果所有的值都为true,则返回true,否则返回false}) //item是数组的当前项,index是数组的键名(下标),arr是整个数组
let arr = ['one','two','three','four',6,8,2];
let b = arr.every((val,index,arr)=>val);
console.log(b);//true
(6)数组简化:arr.reduce(callback(prev,cur,index,arr){todo... 正常情况下,需要配合return,返回计算后的结果},传递给函数的初始值(可选,默认为第一项的值)) //prev是数组的前一项(如果第一次循环,则prev默认为0),cur是数组的当前项,index是数组的键名(下标),arr是整个数组;
arr.reduceRight()用法和arr.reduce类似,只不过计算顺序是从右向左
//数组求和
let arr = [1,2,3,4,5];
let res = arr.reduce((prev,cur,index,arr)=>{
return prev+cur;
},0);
console.log(res);//15//数组求积
let arr = [1,2,3,4,5];
let res = arr.reduce((prev,cur,index,arr)=>{
return prev*cur;
},1);
console.log(res);//
// 数组求最大值
let arr = [1,2,3,298,4,5,199];
let res = arr.reduce((prev,cur,index,arr)=>{
return (cur>prev?cur:prev);
});
console.log(res);//
// 求阶乘(ES2017新增幂运算符**,例如Math.pow(2,3)可写成2**3。)
let arr = [2,2,3];
let res = arr.reduce((prev,cur,index,arr)=>{
return Math.pow(prev,cur);//也可以写成return prev**cur
});
console.log(res);//
(7)ES6新增for...of循环:
let arr = ['a','b','c','d'];
// 遍历值
for(let val of arr){
console.log(val);
}
// 遍历下标
for(let index of arr.keys()){
console.log(index);
}
// 遍历某一项
for(let item of arr.entries()){
console.log(item[0],item[1]);
}
// or
for(let [key,val] of arr.entries()){
console.log(key,val);
}
(8)ES6新增Array.from()方法:将类数组对象(只要有length属性就可以)转换为数组,也可以复制数组
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul> <script type="text/javascript">
window.onload= function(){
let aLi = document.querySelectorAll('ul li');
// let arrLi = Array.from(aLi);//ES6方法
// let arrLi = [...aLi];//ES6方法
let arrLi = [].slice.call(aLi);//ES5方法
arrLi.pop();
console.log(arrLi);
} </script>
function show(){
let args = Array.from(arguments);
// let args = [...arguments];//也可以用拓展运算符
args.push(6);
console.log(args);//[1, 2, 3, 4, 5, 6]
}
show(1,2,3,4,5);
let str = 'hello';
// let arr = str.split('');
// let arr = [...str];
let arr = Array.from(str);
console.log(arr);//["h", "e", "l", "l", "o"]
let json = {
0:'one',
1:'two',
2:'three',
length:3
}
let arr = Array.from(json);
console.log(arr);//["one", "two", "three"]
(9)ES6新增Array.of()方法:把一组值转成数组
let arr = Array.of('apple','banana','orange');
console.log(arr);//["apple", "banana", "orange"]
(10)ES6新增Array.find()查找元素方法:查找,找出第一个符合条件的数组成员,如果没有找到返回undefined
let arr = [1,2221,344,876,55,56,78];
let res = arr.find((val,index,arr)=>{
return val > 333;
});
console.log(res);//
(11)ES6新增Array.findIndex()查找元素索引方法:查找,找出第一个符合条件的数组成员的位置,如果没有找到返回-1
let arr = [1,2221,344,876,55,56,78];
let res = arr.findIndex((val,index,arr)=>{
return val > 333;
});
console.log(res);//
(12)ES6新增Array.fill()填充数组方法:Array.fill(要填充的内容,开始填充的位置,结束的位置)
let arr = new Array(10);
arr.fill('默认',1,3);
console.log(arr);//[undefined × 1, "默认", "默认", undefined × 7]
(13)ES7(ES2016)新增Array.includes()查找数组中是否存在某一项方法,如果有返回true,否则返回false
let arr = [1,2,3,4];
let b = arr.includes(2);
console.log(b);//true
2.对象简洁语法及对象新增
(1)对象简洁语法
let name = 'pilot';
let age = 18;
let json = {
name,//相当于name:name
age//相当于age:age
}
console.log(json);//Object {name: "pilot", age: 18}
let name = 'pilot';
let age = 18;
let json = {
name,//相当于name:name
age,//相当于age:age
showA(){//注意:不要替换为箭头函数
return this.name;
},
showB(){
return this.age;
}
}
console.log(json.showA(),json.showB());//pilot 18
(2)ES6对象新增Object.is()方法:比较两个值是否相等
console.log(NaN == NaN);//false
console.log(NaN != NaN);//true
console.log(NaN === NaN);//false
console.log(NaN !== NaN);//true
let b = Object.is(NaN,NaN);
console.log(b);//true
console.log(+0 == -0);//true
let b = Object.is(+0,-0);
console.log(b);//false
console.log(Object.is('aaa','aab'));//false
(3)ES6对象新增Object.assign()方法:用来合并对象,Object.assign(目标对象,source1,source2...),后面的值会覆盖前面的值
let json = {a:1};
let json2 = {b:2,a:2};
let json3 = {c:3};
let obj = Object.assign({},json,json2,json3);
console.log(obj);//{a: 2, b: 2, c: 3}
// 复制数组
let a = [1,2,3,4];
let b = Object.assign([],a);
console.log(b);//[1, 2, 3, 4]
(4)ES8(ES2017)新增Object.keys()、Object.entries()、Object.values()方法
let json = {
a:1,
b:2,
c:3
}
for(let key of Object.keys(json)){
console.log(key);//a,b,c
}
let {keys,values,entries} = Object;//解构
let json = {
a:1,
b:2,
c:3
}
for(let key of keys(json)){
console.log(key);//a,b,c
}
for(let value of values(json)){
console.log(value);//1,2,3
}
for(let item of entries(json)){
console.log(item);//["a", 1],["b", 2],["c", 3]
}
for(let [key,val] of entries(json)){
console.log(key,val);//a, 1,b, 2,c, 3
}
(5)ES9(ES2018)新增对象的”…“运算符
let {x,y,...z} = {x:1,y:2,a:3,b:4};//在Chrome最新版本测试
console.log(x,y,z);//1 2 {a: 3, b: 4}
let json = {a:3,b:4};
let json2 = {...json};//复制json对象(在Chrome最新版本测试)
delete json2.b;
console.log(json);//{a: 3, b: 4}
console.log(json2);//{a: 3}
3.Promise:解决异步回调问题
(1)Promise.resolve('aa'):将现有的东西,转成一个promis对象,resolve状态,成功状态;
Promise.reject('aa'):将现有的东西,转成一个promis对象,reject状态,失败状态;
Promise.all([p1,p2,p3]):把promise打包,扔到一个数组里面,打包完还是一个promise对象,必须确保所有的promise对象,都是resolve状态,都是成功状态;
Promise.race([p1,p2,p3]):把promise打包,扔到一个数组里面,打包完还是一个promise对象,只要有一个成功,就返回成功状态。
let p1 = Promise.resolve('aaa');
//等价于 let p1 = new Promise(resolve=>{resolve('aaa')});
p1.then(res=>{
console.log(res);//aaa
});
let p1 = Promise.reject('aaa');
//等价于 let p1 = new Promise((resolve,reject)=>{reject('aaa')});
p1.then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);//aaa
});
let p1 = Promise.resolve('aaa');
let p2 = Promise.resolve('bbb');
let p3 = Promise.resolve('ccc');
Promise.all([p1,p2,p3]).then(res=>{
// console.log(res);//["aaa", "bbb", "ccc"]
let [res1,res2,res3] = res;
console.log(res1,res2,res3);//aaa bbb ccc
});
let p1 = Promise.resolve('aaa');
let p2 = Promise.reject('bbb');
let p3 = Promise.reject('ccc');
Promise.race([p1,p2,p3]).then(res=>{
console.log(res);//aaa
});
new Promise(function(resolve,reject){
//resolve,成功调用
//reject,失败调用
})
let a = 103;
let promise = new Promise(function(resolve,reject){
if(a == 10){
resolve('成功');
}else{
reject('失败');
}
});
// promise.then(success,fail);
promise.then(res=>{
console.log(res);//成功
},err=>{
console.log(err);//失败
})
let a = 103;
let promise = new Promise(function(resolve,reject){
if(a == 10){
resolve('成功');
}else{
reject('失败');
}
});
// promise.then(success,fail);
// promise.then(res=>{
// console.log(res);//成功
// },err=>{
// console.log(err);//失败
// });
// promise.catch(err=>{//reject,发生错误,别名
// console.log(err);//失败
// }); // promise.then(success,fail);
promise.then(res=>{
console.log(res);//成功
}).catch(err=>{//reject,发生错误,别名
console.log(err);//失败
});
4.模块化
(1)在es6之前,是不支持模块化的,但是社区制定一套模块规范:
Commonjs 主要服务端 nodeJa require('http')
AMD requireJs,curlJs
CMD seaJs
ES6模块化出来后,统一服务端和客户端模块规范:
import {xx} from ddd;
(2)基本概念:
注:需要放服务器环境
>如何定义模块?
export 东西
>如何使用?
import
使用模块:
<script type="module">
</script>
import特点:
1.import可以是相对路径,也可以是绝对路径
import 'https://cdn.bootcss.com/jquery/2.2.2/jquery.js'
2.import模块只会导入一次,无论引入多少次
3.import './modules/1.js';如果这么用,相当于引入文件
4.有提升效果,import会自动提升到顶部,首先执行
5.导出去模块内容,如果里面有定时器更改,外面也会改动
* 6.import动态引入:
import(),类似于node里面的require,可以动态引入,默认import语法不能写到if之类的语法里
优点:
1.按需加载
2.可以写if中
3.路径也可以写动态
4.因为返回值是promise对象,所以可以用then方法
例子:
one.html
<script type="module">
import {a,b,c} from './modules/1.js';
console.log(a,b,c);//12 15 65
</script>
1.js
export const a = 12;
export const b = 15;
export let c = 65;
two.html
<script type="module">
import {aaa as a,bbb as b,ccc as c} from './modules/2.js';
console.log(a,b,c);//12 5 102
</script>
2.js
const a =12;
const b =5;
const c =102;
export {
a as aaa,//起别名
b as bbb,
c as ccc
}
three.html
<script type="module">
import * as modTwo from './modules/3.js';
console.log(modTwo.aaa);//
</script>
3.js
const a =125;
const b =25;
const c =1012;
export {
a as aaa,//起别名
b as bbb,
c as ccc
}
four.html
<script type="module">
import a,{cc,dd} from './modules/4.js';
console.log(a,cc,dd);//12 21 23
</script>
4.js
export default 12;
export const cc = 21;
export const dd = 23;
five.html
<script type="module">
//import有提升效果,import会自动提升到顶部,首先执行
console.log(a,cc,dd);//12 21 23
import a,{cc,dd} from './modules/5.js';
</script>
5.js
export default 12;
export const cc = 21;
export const dd = 23;
six.html
<script type="module">
//导出去模块内容,如果里面有定时器更改,外面也会改动
import {a,b} from './modules/6.js';
console.log(a);
setTimeout(() => {
console.log(a);
}, 3000);
</script>
6.js
let a = 6;
let b = 12;
setTimeout(()=>{
a = 12345;
},2000);
export {
a,
b
}
seven.html
<script type="module">
//动态加载模块,按需加载,可以写if中,路径可以是动态
import('./modules/7.js').then(res=>{
console.log(res.a+res.b);//
});
</script>
7.js
console.log('7模块加载了');
export const a = 12;
export const b = 22;
eight.html
<script type="module">
//动态加载模块结合Promise使用
Promise.all([
import('./modules/1.js'),
import('./modules/2.js')
]).then(([mod1,mod2])=>{
console.log(mod1);
console.log(mod2);
})
</script>
nine.html
<script type="module">
//动态加载模块结合async、await函数使用
async function main(){
/* 方法1 */
const mod1 = await import('./modules/1.js');
const mod2 = await import('./modules/2.js');
console.log(mod1,mod2);
/* 方法2 */
const [m1,m2] = await Promise.all([
import('./modules/1.js'),
import('./modules/2.js')
]);
console.log(m1,m2);
}
main();
</script>
附上其他俩个部分的地址:
javascript的ES6学习总结(第二部分)的更多相关文章
- javascript的ES6学习总结(第一部分)
ES6(ESNext学习总结——第一部分) ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ECMA每年6月份,发布一个版本 201 ...
- javascript的ES6学习总结(第三部分)
1.ES6中的面向对象的类 1.1.定义类 在ES5中,我们写一个类,通常是这么写的 function Person(name,age){ this.name = name; this.age = a ...
- JavaScript高级程序设计学习笔记第二十章--JSON
1.JSON:JavaScript Object Notation, JavaScript 对象表示法. 2.最重要的是要理解它是一种数据格式,不是一种编程语言.虽然具有相同的语法形式,但 JSON ...
- JavaScript高级程序设计学习笔记第二章
1.向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素 2.HTML 4.01中定义了<script>元素的六个属性(方便记忆,可将6个属 ...
- 治愈 JavaScript 疲态的学习计划【转载】
来源:伯乐在线 - Rose Wang 像其他人一样,最近我读了 Jose Aguinaga 的文章 <How it feels to learn JavaScript in 2016>. ...
- The Road to learn React书籍学习笔记(第二章)
The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...
- ES6学习笔记之变量的解构赋值
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- JavaScript 权威指南-学习笔记(一)
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...
随机推荐
- springboot集成mybatis源码分析-启动加载mybatis过程(二)
1.springboot项目最核心的就是自动加载配置,该功能则依赖的是一个注解@SpringBootApplication中的@EnableAutoConfiguration 2.EnableAuto ...
- 在Pythonfor循环中如何获取循环次数?
在Python的for循环里,循环遍历可以写成: for item in list: print item 它可以遍历列表中的所有元素,但是有什么方法可以知道到目前为止我循环了多少次? 想到的替代方案 ...
- ycmd for emacs 代码自动补全
YCMD FOR EMACS Table of Contents 1. 安装 1.1. 下载 1.2. 安装相关依赖 1.3. 更新submodules 1.4. 安装 2. 配置 1 安装 1. ...
- vs调试的时候,指定的参数已超出有效值的范围。参数名:sit ,先仔细看看错误和我的一样不一样
https://www.cnblogs.com/pei123/p/7694947.html 指定的参数已超出有效值的范围.参数名:sit ,先仔细看看错误和我的一样不一样 更新了1709就这样了,的确 ...
- 【Android】setXfermode属性
1.下面的Xfermode子类可以改变这种行为: AvoidXfermode 指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图). PixelXorXfermode 当覆盖 ...
- github使用的小坑 处理
1.本地版本 低于线上版本,并做了修改 ,线上版本也做了修改的情况下,提交内容,必须解决冲突 会出现 解决方法 冲突的几个文件 进行初始还原 在进行 更新 与线上同步,在将需要提交的/新增/修改的内容 ...
- eclipse怎么对项目重命名,eclipse怎么重命名类
eclipse怎么对项目重命名,eclipse怎么重命名类
- C# Winform控件 - Form
一.Form窗体样式 1.FormBorderStyle (1)None (2)FixedSingle (3)Fixed3D 个人感觉跟Fixedsingle区别不大 (4)FixedDialog 不 ...
- GMA Round 1 波动函数
传送门 波动函数 f(x)是一个定义在R上的偶函数,f(x)=f(2-x),当$x\in[-1,1]$时,f(x)=cos(x),则函数$g(x)=f(x)-|cos(\pi x)|$,求g(x)在[ ...
- word使用新技能
office2013版,菜单栏-审阅-修订-所有标记,可以显示编辑过程中的所有修改步骤,还可查看未修改的原始状态.前提是“修订”按钮 要点亮! 给文档添加索引,并自动生成索引列表 文件-选项-显示-隐 ...