ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

2023-08-02 16:25:06 162

本文实例讲述了ES6学习笔记之字符串、数组、对象、函数新增知识点。分享给大家供大家参考，具体如下：

1、模板字符串

反引号``内用于输入格式化的字符串文本，在``内可以将表达式用${}包含起来

letstr=`




格式化字符串



`;
console.log(str);

2、转化为数组

Array.form将伪数组、集合转化为数组

letallLi=document.querySelectorAll('li');
console.log(Array.isArray(allLi));//输出false,allLi不是个数组
letarr=Array.from(allLi);
console.log(Array.isArray(arr));//输出true，arr被转化为数组

Array.of将元素构建为数组

letarrayOf=Array.of('str',2,{});//创建由字符串、数字、对象构成的数组
letarr=Array.of(7);//数组包含一个元素7
letarr=Array(7);//数组包含7个空元素

3、类的封装

通过class来包装类

classPerson{
constructor(name,age){//Person类的构造函数
this.name=name;
this.age=age;
}

print(){//类函数输出
console.log("Mynameis"+this.name+",I'm"+this.age+"years.");
}
}
letp=newPerson('tony',15);
p.print();

4、对象的使用

在用变量作为对象的元素时，会将变量名作为键值，将变量值作为值

letname='tony';
letage=15;
letperson={
name,
age
}
console.log(person);

输出结果为：

Object{name:"tony",age:15}

Object.assign()方法实现对象合并，参数为：合并目标，合并源1，合并源2...

letobj1={'name':'tony'};
letobj2={'age':15};
letobj3={'sex':'男'};
letobj={};
Object.assign(obj,obj1,obj2,obj3);//将后面的对象并到第一个对象
console.log(obj);

输出为：

Object{name:"tony",age:15,sex:"男"}

5、延展操作符...

将整体字符串、对象等拆成单个元素

letstr="这是一个字符串";
letarr=[...str];
console.log(arr);

输出为：

6、函数Rest参数

当不确定传入的参数个数时，可以采用"...参数"的方式，然后遍历操作每个参数

functionsum(name,...num){
console.log(name);
letres=0;
for(letvalueofnum){//将后面未知个数的参数当作数组num遍历
res+=value;
}
returnres;
}
console.log(sum('tony',10,2,3));

7、箭头函数

箭头函数可以将函数function(参数){表达式}简化为：(参数...)=>{表达式...}，无需输入function，甚至省略(),{},return。

1、当只有一个参数时，可以写为参数=>表达式，例如使用map函数遍历一个数组，使每个元素乘2：

vararr=[1,4,9,16];
constmap1=arr.map(x=>x*2);//利用map()遍历数组，传入一个参数当作x，并返回x*2

map中的函数以x为参数遍历每个arr中的元素，*2之后自动返回，形成map1数组

2、当有多个参数时，需要给参数加括号：()=>表达式，例如遍历数组输出索引与值：

letarr=['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函数
letcheckLog=function(flag){
returnnewPromise(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程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。