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


Posted in Javascript onJanuary 22, 2020

本文实例讲述了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);

输出为:

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

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)
);

输出如下:

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

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:ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析当传入false:ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
js实现简单进度条效果
Mar 25 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 #Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 #Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 #Javascript
JavaScript设计模型Iterator实例解析
Jan 22 #Javascript
Vue开发环境跨域访问问题
Jan 22 #Javascript
vue中英文切换实例代码
Jan 21 #Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 #Javascript
You might like
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
python基础教程之序列详解
2014/08/29 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
广州迈达威.net面试题目
2012/03/10 面试题
名人演讲稿范文
2013/12/28 职场文书
化学教学随笔感言
2014/02/19 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
购房委托书范本
2014/09/18 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
阿甘正传观后感
2015/06/01 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python