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 相关文章推荐
GreyBox技术总结(转)
Nov 23 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 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
php二分法在IP地址查询中的应用
2008/08/12 PHP
用php解析html的实现代码
2011/08/08 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JavaScript中的this机制
2016/01/30 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
解析Vue.js中的组件
2018/02/02 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
Python内置函数dir详解
2015/04/14 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Python socket实现简单聊天室
2018/04/01 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
浅析Python 多行匹配模式
2020/07/24 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
写好自荐信的几个要点
2013/12/26 职场文书
仓库管理计划书
2014/05/04 职场文书
党员个人公开承诺书
2014/08/29 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
婚宴致辞
2015/07/28 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书