首页 >> js开发 >> jsES6学习笔记之字符串、数组、对象、函数新增知识点实例分析js大全
jsES6学习笔记之字符串、数组、对象、函数新增知识点实例分析js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了ES6学习笔记之字符串、数组、对象、函数新增知识点。分享给大家供大家参考,具体如下:1、模板字符串反引号`` 内用于输入格式化的字符串文本,在``内可以将表达式用${}包含起来
let str=`
`;
console.log(str);
let str=`
`;
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被转化为数组
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个空元素
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();
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);
let name='tony';
let age=15;
let person={
name,
age
}
console.log(person);
输出结果为:
Object { name: "tony", age: 15 }
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);
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: "男" }
Object { name: "tony", age: 15, sex: "男" }
5、延展操作符...将整体字符串、对象等拆成单个元素
let str="这是一个字符串";
let arr=[...str];
console.log(arr);
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));
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
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)
);
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
}))
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}`);
})
//定义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./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
let str=`
格式化字符串
`;
console.log(str);
let str=`
格式化字符串
`;
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被转化为数组
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个空元素
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();
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);
let name='tony';
let age=15;
let person={
name,
age
}
console.log(person);
输出结果为:
Object { name: "tony", age: 15 }
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);
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: "男" }
Object { name: "tony", age: 15, sex: "男" }
5、延展操作符...将整体字符串、对象等拆成单个元素
let str="这是一个字符串";
let arr=[...str];
console.log(arr);
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));
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
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)
);
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
}))
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}`);
})
//定义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./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
相关文章:
- js支付宝小程序实现省市区三级联动js大全
- js如何在postman中添加cookie信息步骤解析js大全
- jsvue单文件组件无法获取$refs的问题js大全
- js代码javascript实现前端成语点击验证优化
- js微信小程序swiper组件实现抖音翻页切换视频功能的实例代码js大全
- jskeep-Alive搭配vue-router实现缓存页面效果的示例代码js大全
- js微信小程序清空输入框信息与实现屏幕往上滚动的示例代码js大全
- jsVue循环遍历选项赋值到对应控件的实现方法js大全
- JavaScript从Node.js事件触发器到Vue自定义事件的深入讲解
- JavaScript如何配置vue.config.js 处理static文件夹下的静态文件