极乐门资源网

ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
网络编程 2024/11/17 佚名
2 0
极乐门资源网 Design By www.ioogu.com

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

标签：
ES6,字符串,数组,对象,函数,新增知识点
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

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

暂无ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com