ES6的基础知识(二)

GitChat 发布于2019-08-26 18:18 / 328人阅读

摘要：地址函数默认参数省略参数箭头函数单个参数可省略小括号直接返回可省略函数大括号箭头函数没有内部的就是上层代码块的指向上层代码块指向将类数组转成数组填充数组找到数组中第一个满足条件的元素找到数组中第一个满足条件的元素索引数组中是否存在满足条件的

demo地址

函数

默认参数

function Person(name = "xiaohong", age = 18) {
  this.name = name;
  this.age = age;
}
let person1 = new Person();

console.log(person1.name); // xiaohong

省略参数

function test(...arg) {
  let res = arg.reduce(function(sum, item) {
    return sum + item;
  });
  console.log(res); // 6
}

test(1, 2, 3);

箭头函数

let sum = (a, b) => {
  return a + b;
};
console.log(sum(1, 2)); // 3

// 单个参数可省略小括号,直接返回可省略函数大括号
let double = num => num * 2;
console.log(double(2)); // 4

// 箭头函数没有this,内部的this就是上层代码块的this
let obj = {
  name: "xiaohong",
  say: function() {
    // 指向上层代码块obj
    setTimeout(() => {
      console.log(this.name); // xiaohong
    });

    // 指向window
    setTimeout(function(){
      console.log(this.name); // undefined
    });
  }
};
obj.say();

let fn = () => {
  console.log(this); // window
};
fn();

Array.from()将类数组转成数组

function sum() {
  return Array.from(arguments).reduce((val, item) => {
    return val + item;
  });
}
console.log(sum(1, 2, 4)); // 7

fill填充数组

let arr = [, ,];
console.log(arr.fill(1)); // [1, 1]

find找到数组中第一个满足条件的元素

let arr = [1, 2, 3];
let item = arr.find(item => {
  return item > 1;
});
console.log(item); // 2

findIndex找到数组中第一个满足条件的元素索引

let arr = [1, 2, 3];
let index = arr.findIndex(item => {
  return item > 1;
});
console.log(index); // 1

some数组中是否存在满足条件的元素

let arr = [1, 2, 3];
let flag = arr.some(item => {
  return item >= 3;
});
console.log(flag); // true

every数组中是否所有元素都满足条件

let arr = [1, 2, 3];
let flag = arr.every(item => {
  return item >= 3;
});
console.log(flag); // false

对象

对象的属性和方法可简写

let name = "xiaohong";
let obj = {
  // 当key值和变量一致时可省略
  name, 
  // 方法可简写成这样
  sayName(){}
}

对象的继承

   let obj = {
     name:"xiaohong",
     sayName(){
       console.log(this.name)
     }
   };
   let newObj = {
     name:"xiaoli"
   };
   
   Object.setPrototypeOf(newObj, obj);
   newObj.sayName(); // xiaoli

class类

   // 声明类,只能通过new生成对象,不能直接使用
   class Parent {
     // 构造函数
     constructor(name) {
       // 实例私有属性
       this.name = name;
     }

     // 静态属性 不需要通过实例调用,类直接用
     static hello() {
       return "hello";
     }

     // 实例公共方法
     sayName() {
       return this.name;
     }
   }

   // extends继承
   class Child extends Parent {
     constructor(name) {
       // super 父级的构造函数
       super(name);
     }
   }

   let p = new Child("xiaoli");
   console.log(p.name); // xiaoli
   console.log(p.sayName()); // xiaoli

云服务器 GPU云服务器最小二乘法的简洁算法二位数的域名有多少个最小二乘的递归算法 ES6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110175.html

带你入门 JavaScript ES6 (二)

摘要：上一篇学习下一代语法一，我们学习了关于块作用域变量或常量声明和语法新的字符串拼接语法模版字面量数组元素或对象元素的解构赋值和对象字面量简写的相关知识。这便是扩展运算符的用途之一。本文同步带你入门 JavaScript ES6 (二)，转载请注明出处。上一篇学习下一代 JavaScript 语法: ES6 (一)，我们学习了关于块作用域变量或常量声明 let 和 const 语法、...

chanthuang 2019-08-21 18:26 评论0 收藏0
[ ES6 ] 快速掌握常用 ES6 （二）

摘要：本系列文章适合快速掌握入门语法，想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充，可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》本篇文章是对之前文章...

hidogs 2019-08-23 14:07 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
深入理解ES6笔记（二）字符串和正则表达

摘要：主要知识点新增的字符串处理方法模板字面量以及正则表达式上的改动深入理解笔记目录字符串字符串是大原始数据类型。如果在字符串的结束部分检测到指定文本，返回，否则返回。字符串内插入反撇号的方式。主要知识点：新增的字符串处理方法、模板字面量以及正则表达式上的改动showImg(https://segmentfault.com/img/bVbfWak?w=861&h=622); 《深入理解E...

TANKING 2019-08-26 12:11 评论0 收藏0
es6常用知识（二）

摘要：这个类继承自，很多功能就可以直接用了有两种传参方式，一种是字符串，另外一种是表达式，当传字符串之外的类型的时候，用表达式组件嵌套简写这个类继承自，很多功能就可以直接用了先用参数扩展，在把参数展开到里面去。七.2 面相对象的应用（react） react：1，组件化 -class2，jsxjsx==babel==browser.js Document ...

StonePanda 2019-08-26 11:52 评论0 收藏0