javascript - es6 复习

xleesecondfloorrr
52 阅读4分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

这几天想学一下react,今天把js的es6的知识重新复习一下，从明天开始学习react

变量的声明

var没有块级作用域，let有块级作用域

const和let类似，都有块级作用域，let定义变量，const定义常量

对于一些对象或函数也可以使用const定义，避免被意外修改

解构赋值

数组
let a,b;
let x = ['孙悟空','猪八戒'];
[a,b] = x;
console.log(a);
console.log(b);
  • 定义变量，同时赋值
let x = ['孙悟空','猪八戒']
const [a,b] = x;
  • 结构函数
function fn(){
    return ['孙悟空','猪八戒']
}
const [a,b] = fn();
console.log(a,b);

let array = ['s','z','t','s']
const [a,b,...c] = array;  //...剩余参数
console.log(a,b,c);

输出

s z [ 't', 's' ]
对象

对象的结构

const obj = {
    name : '孙悟空',
    age:10,
    gender:'男'
}
let a,b,c;
({name:a,age:b,gender:c}= obj);
console.log(a,b,c);

输出

孙悟空 10 男

const obj = {
    name1 : '孙悟空',
    age:10,
    gender:'男'
}
const {name1,gender,age} = obj;
console.log(name1,age,gender);
  • 交换数组中的元素
let a = 10;
let b = 20;
[a,b] = [b,a];
console.log(a,b);

展开

function fn(a,b,c){
    return a+b+c;
}
let arr = [1,2,3];
console.log(fn(...arr));

可以通过...展开

  • 将arr浅复制给arr2
let arr = [1,3,4]
let arr2 = [...arr,2,3]
console.log(arr2);
  • 对象展开
let obj = {
    name:'孙悟空',
    age:10,
}
let obj1 = {...obj,address:'hhh'}
console.log(obj1);

箭头函数

定义

最简单的箭头函数

const fn = a => 'hello'

没有参数或多个参数需要使用括号括起来

const fn = (a,b) => a+b

箭头后边的值就是函数的返回值，返回值必须是一个表达式(有返回值的语句),

如果返回值是对象，必须加括号

const fn = () =>({'name':'xxx'})

如果想在箭头函数写有逻辑的语句，则在箭头函数后面加一个代码块

const fn = (a,b) =>{
    if(a==1) return a;
    if(b == 2) return a+b;
}
特点
  1. 箭头函数中没有arguments，...args是剩余参数
function fn(...args){
    console.log(args)
}

2.箭头函数中没有自己的this，this是外层作用域的this

3.箭头函数中的this无法通过call(),apply(),bind()修改

4.箭头函数无法作为构造函数使用

模块化

export

export(导出)用了觉得一个模块中哪些内容可以被外部查看

  1. 默认导出

    一个模块中只能有一个默认导出

    const a = 1;
export default a;

  2. 命名导出

    export const b = 1;
export const c = 1;
import
  1. 默认导入

import(导入)用了将外部模块中的内容导入到当前模块中

在html内中需要将script标签的type属性修改

<script type="module">
        
    </script>

导入默认模块时，变量名可以自主指定，无需和模块中的变量名对应

在网页中导入时需要将路径写完整

  1. 命名导入

    将变量名加一个大括号

    import {a,b} from '../js/index.js'

类

  • 类是对象的模板
  • 类决定了一个对象中有哪些属性和方法
class Person{
    constructor(name,age){  //构造函数
        this.name = name;
        this.age = age;
    }
    run(){
        console.log("hhh");
    }
}
const p = new Person('孙悟空',12);
console.log(p)
p.run();
  • 类中所有代码都会在严格模式下执行，严格模式下，函数的this不是window，而是undefined

继承

  • 通过继承可以使类中拥有其它类的属性和方法
  • 使用extends继承，继承后相当于将该类的代码复制到当前的类中
  • 被继承的类称为父类，继承的类称为子类
  • 在子类中重写构造函数时，必须第一时间调用父类的构造函数
class Animal{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say = () =>{
        console.log("say");
    }
}
​
class Dog extends Animal{
    constructor(name,age) {
        super(name,age);
    }
    say = () =>{  //重新该方法
        console.log("dog hhhh");
    }
}
​
class Snake extends Animal{
    constructor(name,age,length) {
        super(name,age);
        this.length = length;
    }
    say = () =>{
        console.log("snake hhh");
    }
}

静态属性和方法

  • 直接通过类调用的属性和方法称为静态属性和方法
class MyClass{
    static fn = () =>{
        console.log("hhhh");
    }
}
MyClass.fn()

数组的方法

  • map(),

    • 根据已有数组返回一个新的数组，map需要一个回调函数作为参数，回调函数的返回值会称为新数组中的元素

      const arr = [1,2,4,5];
let res = arr.map((item)=>item*item)
console.log(res);

      输出

      [ 1, 4, 16, 25 ]
      • 回调函数有三个参数，第一个参数是当前元素，第二个参数是当前元素的下标，第三个参数是当前的数组

  • filter(),

    • 可以从一个数组中获得符合条件的元素

      const arr = [1,2,4,5];
let res = arr.filter(item => item%2===0)
console.log(res);

      输出

      [ 2, 4 ]

  • find(),

    • 可以从数组中返回符合条件的第一个元素

  • reduce()

    • 可以将数组中的所有元素合并成一个值

      const arr = [1,2,4,5];
let res = arr.reduce((prev,curr)=>prev+curr,0) //第一个参数是回调函数，第二个参数是初始值 
console.log(res);

      输出

      12
avatar
文章
阅读
粉丝