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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
layer 关闭指定弹出层的例子
Sep 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
php 删除数组元素
2009/01/16 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
python实现学生管理系统开发
2020/07/24 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
linux面试题参考答案(4)
2013/01/28 面试题
运动会广播稿300字
2014/01/10 职场文书
促销活动策划方案
2014/01/12 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
档案工作个人总结
2015/03/03 职场文书