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);//120
// 数组求最大值
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);//298
// 求阶乘(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);//64

(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);//2221

(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);//1

(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 东西

export const a = 12;

export{

　　a as aaa,

　　a as bbb

}

>如何使用?

import

import ‘./modules/1.js‘;

import {aaa as a,bbb as b} from ‘xxx‘

使用模块：

<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);//125
</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);//27
});
</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>

到此先写到这，第三部分抽时间会补上。

原文地址：https://www.cnblogs.com/abc-x/p/10744897.html

时间： 2024-10-19 13:16:11

javascript的ES6学习总结(第二部分)的相关文章

javascript的ES6学习总结(第一部分)

ES6(ESNext学习总结——第一部分) ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ECMA每年6月份,发布一个版本 2016年6月       ES6.1       ES7       ES20162017年6月       ES6.2       ES8       ES20172018年6月       ES...         ES9       ES2018 1.let.const用法 let 相当于之前的

javascript的ES6学习总结(第三部分)

1.ES6中的面向对象的类 1.1.定义类 在ES5中,我们写一个类,通常是这么写的 function Person(name,age){ this.name = name; this.age = age; } /** * es5中的模拟面向对象的类的方法 写法1 Person.prototype.showName = function(){ return "名字为:"+this.name; } Person.prototype.showAge = function(){ return

JavaScript高级程序设计学习笔记第二章

1.向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素 2.HTML 4.01中定义了<script>元素的六个属性(方便记忆,可将6个属性分为3组) 第一组: async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效.(使用<script>不属于外部脚本) defer:可选.表示脚本可以立即下载,但是延迟到文档完全被解析和显示之后再执行.只对外部脚本文件有效. 第

JavaScript高级程序设计学习笔记第二十章--JSON

1.JSON:JavaScript Object Notation, JavaScript 对象表示法. 2.最重要的是要理解它是一种数据格式,不是一种编程语言.虽然具有相同的语法形式,但 JSON 并不从属于 JavaScript.而且,并不是只有 JavaScript 才使用 JSON,毕竟 JSON 只是一种数据格式.很多编程语言都有针对 JSON 的解析器和序列化器. 3.语法: JSON 的语法可以表示以下三种类型的值: 简单值:使用与 JavaScript 相同的语法,可以在 JSO

ES6学习笔记第二章

let 和 const命令 1 let命令 用法: ES6新增let命令,用于声明变量,用法类似var,只是let声明的变量是块级作用域内有效 例: { let a = 10; var b = 1; } a // a is not defined b // 1 根据返回值可以看出,let声明变量时的作用域只在其代码块内 for 循环的计数器就很适合使用let来声明变量. var a = []; for (var i = 0; i<10; i++){ a[i] = function(){ cons

javascript 学习总结第二天

  javascript 学习总结第二天 函数和对象 对象 声明方式 newObject() {} 构造函数 元素的操作 . [] this 对象的遍历 for in with简便操作 函数 函数的声明方式 functiondemo(){} var demo= function(){} var demo= new Function('x','y','alert(x+y)'); 函数的调用 在代码中直接调用 事件触发 赋值给一个变量 注意事项 优先级 在js中定义变量的时候不能跟函数名冲突否则会覆

治愈 JavaScript 疲态的学习计划

显然,这篇文章触及了大家的神经:我一而再地在 Hacker News 看到它位居榜首.这也是 Reddit 网站里 javaScript 分类下最为热门的帖子,截至目前,在 Medium 上已有超过一万的喜欢数,很可能比我所有的文章加起来的喜欢数都多.但谁说了算呢? 尽管这并不意外,我很早之前就知道 JavaScript 生态系统会是混乱的.事实上,我进行这个< State Of JavaScript >调查的特殊原因就是要找出哪些库是实实在在受欢迎的,并且从喧闹声中整理出分类. 但是今天,我

ES6学习笔记（1）——模块化

最近学习ReactJS经常遇见ES6语法,为了尽快弄懂ReactJS,因此想方设法绕过ES6,但是随着学习的深入,需要查阅的资料越来越多,发现大部分与之相关的框架和学习资料都是采用ES6写的,终究发现这是一个绕不过去的坎啊.ES6是JavaScript新一代的标准规范,其主要变化为:变量的解构赋值.箭头函数.Generator函数.Promise对象.类与继承.模块化这几个大方面,我学习时为了能看懂ES6写的代码,就先从这几个大的方面开始下手了,细节部分随着应用的需要再去查阅资料,学习参考资料为

es6学习笔记初步总结

es6学习笔记初步总结 1. let.const 和 block 作用域 在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: let 关键词声明的变量不具备变量提升(hoisting)特性 let 和 const 声明只在最靠近的一个块中(花括号内)有效 当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING const 在声明时必须被赋值 否则报语法错误SyntaxError