ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
本文实例讲述了ES6学习笔记之字符串、数组、对象、函数新增知识点。分享给大家供大家参考，具体如下：
1、模板字符串
反引号`` 内用于输入格式化的字符串文本，在``内可以将表达式用${}包含起来
let str=`
<!DOCTYPE html>
<html lang="en">
<body>
<div>
<p class="pClass">格式化字符串</p>
</div>
</body>
</html>
`;
console.log(str);
2、转化为数组
Array.form将伪数组、集合转化为数组
let allLi=document.querySelectorAll('li');
console.log(Array.isArray(allLi));//输出false,allLi不是个数组
let arr=Array.from(allLi);
console.log(Array.isArray(arr));//输出true，arr被转化为数组
Array.of将元素构建为数组
let arrayOf=Array.of('str',2,{}); //创建由字符串、数字、对象构成的数组
let arr=Array.of(7); //数组包含一个元素7
let arr=Array(7); //数组包含7个空元素
3、类的封装
通过class来包装类
class Person{
constructor(name,age){ //Person类的构造函数
this.name=name;
this.age=age;
}
print(){ //类函数输出
console.log("My name is "+this.name+",I'm "+this.age+" years.");
}
}
let p=new Person('tony',15);
p.print();
4、对象的使用
在用变量作为对象的元素时，会将变量名作为键值，将变量值作为值
let name='tony';
let age=15;
let person={
name,
age
}
console.log(person);
输出结果为：
Object { name: "tony", age: 15 }
Object.assign()方法实现对象合并，参数为：合并目标，合并源1，合并源2...
let obj1={'name':'tony'};
let obj2={'age':15};
let obj3={'sex':'男'};
let obj={};
Object.assign(obj,obj1,obj2,obj3); //将后面的对象并到第一个对象
console.log(obj);
输出为：
Object { name: "tony", age: 15, sex: "男" }
5、延展操作符...
将整体字符串、对象等拆成单个元素
let str="这是一个字符串"; let arr=[...str]; console.log(arr);
输出为：
6、函数Rest参数
当不确定传入的参数个数时，可以采用"...参数"的方式，然后遍历操作每个参数
function sum(name,...num) {
console.log(name);
let res=0;
for (let value of num){ //将后面未知个数的参数当作数组num遍历
res+=value;
}
return res;
}
console.log(sum('tony',10,2,3));
7、箭头函数
箭头函数可以将函数function (参数) {表达式}简化为：(参数...)=>{表达式...}，无需输入function，甚至省略(),{},return。
1、当只有一个参数时，可以写为参数 => 表达式，例如使用map函数遍历一个数组，使每个元素乘2：
var arr = [1, 4, 9, 16]; const map1 = arr.map(x => x * 2); //利用map()遍历数组，传入一个参数当作x，并返回x*2
map中的函数以x为参数遍历每个arr中的元素，*2之后自动返回，形成map1数组
2、当有多个参数时，需要给参数加括号：() =>表达式，例如遍历数组输出索引与值：
let arr=['data0','data1','data2']; arr.forEach((value,index)=> //通过forEach遍历数组，传入两个参数value与index console.log(index+':'+value) );
输出如下：
3、当有多行表达式时，要用{}将函数包含成一块：() =>{}，并且使用块语句时，函数不会自动返回值，需要使用return将值返回。
4、JavaScript的{}也可以表示一个对象，当使用箭头函数返回对象时，为了与函数体区别需要将对象用()包含起来：() =>({})，否则会报错，例如在react中使用setState方法，需要返回一个对象:
this.setState((prevState) =>({
flag: !prevState.flag
}))
8、Promise函数
在使用接口调用时，有时需要根据调用返回是否成功分别去调用不同的函数，ES6提供了Promise函数来解决这个问题。在调用成功时，执行.then方法，失败时执行.catch方法来分别处理不同情况，返回不同的数据。
例如定义一个检查登陆的Promise方法，当传入参数为true时登陆成功，回调函数为then，false失败，调用catch：
//定义promise函数
let checkLog=function (flag) {
return new Promise(function(resolve,reject){
if(flag){ //如果判定条件为真，执行resolve函数
resolve({ //其括号内的参数作为结果返回
status:1,
info:"登陆成功"
})
}else{ //判定为假执行reject函数
reject({
status:0,
info:"登陆失败"
}
)
}
})
};
//使用promise函数
checkLog(false).then(res=>{ //根据promise返回的不同值分别执行then或catch
console.log(`成功信息：${res.info}`);
}).catch(err=>{
console.log(`错误信息：${err.info}`);
})
当传入true：
当传入false：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
链表（Linked list）是一种常见的基础数据结构，是一种线性表，但是并不会按线性的顺序存储数据，而是在每一个节点里存到下一个节点的指针(Pointer) 。下面我们用 JavaScript 代码对链表的数据结构进行实现2017-08-08
微信小程序数据统计,现在有很多的统计方法和统计工具,下面这篇文章主要给大家介绍了关于小程序统计来源信息的方案与具体代码,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
今天小编就为大家分享一篇解决layui数据表格排序图标被超出的表头挤出去的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
下面的方法是个不错的思路，建议对于js感兴趣的朋友，推荐看2008-10-10
这篇文章主要为大家详细介绍了javascript实现缓动动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了JavaScript实现重置表单（reset）的方法,涉及javascript中reset()方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了微信小程序实现日期范围选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要介绍了webpack前端应用之基础打包实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要为大家详细介绍了微信小程序实现打卡签到页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要给大家介绍了关于微信小程序如何获取用户绑定手机号的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
最新评论