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 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
angular分页指令操作
Jan 09 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
js实现div色块拖动录制
Jan 16 Javascript
JavaScript中的类型检查
Feb 03 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python抓取网页中的图片示例
2014/02/28 Python
wxpython布局的实现方法
2019/11/01 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
四议两公开实施方案
2014/03/28 职场文书
作风整顿剖析材料
2014/09/30 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS