01 ECMAScript6

最新推荐文章于 2024-08-09 07:56:14 发布

鸿雁南去情难寄

最新推荐文章于 2024-08-09 07:56:14 发布

阅读量422

点赞数 1

分类专栏： ECMAScript标准文章标签： es6/es7

本文链接：https://blog.csdn.net/qq_42873753/article/details/105493591

版权

ECMAScript标准专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ECMAScript6

文章目录

ECMAScript6

注：

引用声明：此文章概念释义部分摘录自MDN文档和阮一峰ES6文档

一、数组方法

1.1 遍历数组元素-forEach

forEach() 方法对数组的每个元素执行一次给定的函数。

数组.forEach(function(接收元素的参数){});

let oldNumbers = [1,2,3,4,5];
oldNumbers.forEach(function(num){
    console.log(num);
});

1.2 映射数组元素-map

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

let 变量 = 数组.map(function(接收元素的参数){return 处理后的元素});

let oldNumbers = [1,2,3,4,5];
let newNumber = oldNumbers.map(function(i){
    return i * 2;
});

map :

map一个需要return，若不设置返回值则返回undefined
map返回的是一个新数组

1.3 筛选数组元素-filter

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

let 变量 = 数组.filter(function(接收元素的参数){return 筛选后的元素});

let products = [
    {name:"cucumber",type:"vegetable"},
	{name:"celery",type:"vegetable"},
    {name:"banana",type:"fruit"},
    {name:"oranger",type:"fruit"},
];

//筛选出type为fruit的元素，放入fruit数组
let fruits = porducts.filter(function(a){
    return a.type === "fruit";
});

1.4 查找数组元素-fine

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

let 变量 = 数组.find(function(接收元素的参数){return 符合的元素});

let words = [
  {wname:'a'},
  {wname:'b'},
  {wname:'c'},
  {wname:'c'}
];
// 查找对象数组中wname为'a'的对象，并返回给word
let word = words.find(function(w){
  return w.wname === 'c';
});

当查找完符合的第一结果后，不会继续往下查询

1.5 数组元素与函数-every

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

let 变量 = 数组.every(function(接收元素的参数){return Boolean})

let students = [
  {name:'Tom',fraction:78},
  {name:'Aiden',fraction:95},
  {name:'John',fraction:55},
];

let everyBool = students.every(function (fra){
  // 判断三名学生的成绩是否都大于等于60
  return fra.fraction >= 60
});
console.log(every); //false

一假即假，当数组元素里都符合条件时返回 true,否则返回 false

1.6 数组元素或函数-some

some() 方法测试数组中是不是至少有一个元素通过了被提供的函数测试。它返回一个布尔值。

let 变量 = 数组.some(function(接收元素的参数){return Boolean})

let students = [
  {name:'Tom',fraction:78},
  {name:'Aiden',fraction:95},
  {name:'John',fraction:55},
];

let someBool = students.every(function (fra){
  // 判断三名学生的成绩是否都大于等于60
  return fra.fraction >= 60
});
console.log(every); //true

一真即真，当数组元素里其中一个符合条件时返回 true,否则返回 false
当判断元素一个为真时，就不继续往下执行，跳出函数

1.7 数组元素累计器-reduce

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

let 变量 = 数组.reduce(function(累计器,当前数组元素){},累计器初始值);

let numbers = [10,20,30];

let sum = numbers.reduce(function (count,num){
  return count + num;
},10);// count 赋初值:10
console.log(sum);// 70

二、变量与常量声明符

2.1 变量声明符-let

let 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值

// let变量
let i = 20;
function() fn(){
    let i = 10;
}
 console.log(i);//20

//var变量
let var = 20;
function() fn(){
    var i = 10
}
console.log(i);//10

var : 函数级作用域
let : 块级作用域

2.2 常量声明符-const

const声明创建一个值的只读引用，常量是块级作用域。常量的值不能通过重新赋值来改变，并且不能重新声明。

const num = 50;
num = 5;//尝试重新赋值
//报错，TypeError: Attempt to assign to const or readonly variable

当常量声明的是一个数组时可以通过 push( )函数进行添加数据

三、模板字符串

“``”在字符串拼接时采用反单引号对字符的处理后，解决了采用+时的字符拼接的繁琐，可直接换行。
${}占位符用于引用变量的数据添加到模板字符串中。

let addText = 'Welcome to ES6';
let strHTML = `
	<h1>Hello ES6!</h1>
	<p>ECMAScript6 language</p>
	<p>${addText}</p>
`;

四、箭头函数

箭头函数表达式的语法比函数表达式更简洁，箭头函数表达式适用于需要匿名函数的地方。它不能用作构造函数。，并且没有自己的this、super、new.target、arguments。

4.1 箭头函数的作用

使函数更简短，缩减代码量
不绑定this，修正this的指向

4.2 箭头函数的语法

(参数1,参数2)=>{...}

当圆括号里参数只有一个时，()可省: variable => {...};
当圆括号里没有参数时，()需保留: () => {...};
当花括号里当且仅当只有return时，{}与return可省: () => value

let numbers = [1,2,3];
let newNumber = numbers.map(num => num*2);
console.log(newNumber);

4.3 箭头函数的this指向

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

此案例引自 MDN网站内容

function Person(){
  this.age = 0;

  setInterval(() => {
      /** 
       *this正确地指向 p 实例
       *若非箭头函数下，setInterVal函数内的this并不知道该指向谁，
       *那此时this就是undefined
       */
    this.age++; 
  }, 1000);
}

var p = new Person();

五、增强对象字面量

对象字面量是对一个对象进行初始化可以通过new Object()或Object.create()方法，也可以通过对象字面量标记(初始化标记)进行初始化对象，由花括号/大括号({})包含的一个由零个或者多个对象属性名和其相关联值组成的一个逗号分隔的列表构成。

增强对象字面量是对属性键值对简写，即属性值等于属性名。还可以对对象函数简写，将function进行省略。

//对属性的简写
function fn(m,n) {
    return {m,n};
}
//上片代码等同于
function fn(m,n) {
    return {m:m,n:n};
}

fn(4,5); //{m:4,n:5}

//对象方法的简写
var o = {
  method() {
    return "Hello!";
  }
};

// 等同于

var o = {
  method: function() {
    return "Hello!";
  }
};

六、函数参数默认值

当调用的函数时，没有给定对应的参数，这时就采用已经设置好的默认参数值为参数进行函数的调用。

//给参数methods设置一个默认参数
function makeAjaxRequest(url,method = 'GET'){
    return method;
}
makeAjaxRequest('www.baidu.com');// 'GET'

七、展开运算符

展开运算符是将一个数组转为用逗号分隔的参数序列

// 数组传参
function addNumbers(...numbers){
    return numbers.reduce((sum,num)=>{
        return sum + num; 
    },0)
}
addNumbers(1,2,3,4,5);

// 合并数组
let a = [1,2,3];
let b = [4,5,6];
let c = [...a,...b]; // c = [1,2,3,4,5,6]

八、解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)。

8.1 对象的解构

//通常的对象解构
let person = {
    name: 'Tom',
    age: 18
};
// 解构对象
let {name,age} = person;
console.log(name,age);//Tom 18

// 函数参数里的对象解构
let date = {
    year: '2020',
    month: '3',
    day: '20'
}

// 在函数参数里解构
function today({year,month,day}){
    // 返回一个模板字符串
    return `今天是${year}年${month}月${day}日`;
}
console.log(today(date));

8.2 数组的解构

let names = ['张三','李四','王五'];

const [name1,name2,name3] = names;// [ ]获取内容
const {length} = names;// { }获取长度

console.log(name1);// 张三
console.log(length);// 3

let names = ['张三','李四','王五'];

// 数组解构结合扩展运算法
const [name,...more] = names;
console.log(name);// 张三
console.log(more);// 李四 王五

[ ]里要多少个变量名，数组就赋值多少个

8.3 对象数组的解构

const person = [
    {name:'张三',age:'20'},
    {name:'李四',age:'18'},
    {name:'王五',age:'26'}
];

const [{name,age}] = person;//解构下标为0对象的name,age
console.log(name,age);// 张三 20

// 数组转化为对象
let points = [
    [1,2],
    [4,8],
    [9,3]
];

const objectValues = points.map(([x,y])=>{
    return {x,y};
});
console.log(objectValues);

九、Map数据结构

Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。

9.1 Map属性和方法

size:获取value的数量
set():设置value值
get():获取value值
has():判断某值是否存在该Map数据结构中，返回布尔值
delete():删除某个键，返回布尔值
clear():清除所有成员，无返回值

9.2 Map方法

key():返回键名的遍历器
value():返回键值的遍历器
entries():返回所有成员的遍历器
forEach():遍历Map的所有成员

const map = new Map();
// 设置key键
const key1 = 'AAA',// 字符串设为key
      key2 = {},// 对象设为key
      key3 = function(){}// 函数设为key

// 给对应的key值设置value
map.set(key1,'Hello');
map.set(key2,'ECMAScript');
map.set(key3,'6');

// 获取key的value值
console.log(
    map.get(key1),
    map.get(key2),
    map.get(key3));

// 获取map的value数量
console.log(map.size);

十、Set数据结构

ES6 提供了新的数据结构 Set。它类似于数组，可以存储任何数据类型，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构

10.1 Set属性和方法

size:返回Set实例的成员总数
constructor:构造函数，默认为Set函数
add():添加某个值，返回Set结构本身
has():判断某值是否存在该Set数据结构中，返回布尔值
delete():删除某个键，返回布尔值
clear():清除所有成员，无返回值

10.2 Set方法

key():返回键名的遍历器
value():返回键值的遍历器
entries():返回所有成员的遍历器
forEach():遍历Map的所有成员

// 创建Set数据结构并初始化
const set = new Set([1,2]);

// 添加给种类型数据
set.add(50);
set.add('Hello ES6');
set.add({name:'Henry'});
set.add(true);
set.add(50);// 重复一个50

console.log(set.size); // 6

十一、Class类

11.1 Class语法糖定义

class Car{
    // 构造函数
    constructor(options){
        this.title = options.title;
    }
    drive(){
        return '驾驶'
    }
}


const car = new Car({title:'奔驰'});

11.2 Class类的继承-Super

// 父类
class Car{
    // 构造函数
    constructor(options){
        this.title = options.title;
    }
    drive(){
        return '驾驶'
    }
}

// 子类继承父类属性和方法
class Toyota extends Car{
    constructor(options){
        super(options);// 调用父类的属性和方法
        this.color = options.color;
    }
}

const car = new Car({color:'blue',title:'Focus'});

十二、异步编程构造函数-Promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

12.1 Promise三种状态

unresolved:等待任务完成
resolved:任务完成并没有任何问题
rejected:任务完成，但出现问题

12.2 resolved与rejected状态的区别

let promise = new Promise((resolve,reject) => {
    resolve();
});

// '.then可被无限调用'
promise
    .then(() => console.log('程序'));
	.then(() => console.log('没有'));
    .then(() => console.log('问题'));

十三、Fetch Api

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

test.json

[
  {
    "id": "1",
    "name": "《数据库应用》"
  },
  {
    "id": "2",
    "name": "《Linux操作系统》"
  },
  {
    "id": "3",
    "name": "《JavaScript高级编程》"
  }
]

fetchTest.js

function getJson() {
  fetch('./src/test.json')
      .then(res => res.json())
      .then(data => {
        console.log(data);
        let showJson = '';
        data.forEach((post) => {
          showJson += `<li>${post.name}</li>`;
        });
        document.getElementById('show').innerHTML = showJson;
      })
      .catch(err => console.log(err));
}

13.1 封装FetchEasyHttp类


class Fetch{

  // get方法

  get(url){
    return new Promise((resolve,reject) => {
      fetch(url)
          .then(res => res.json())
          .then(data => data)
          .catch(err => err)
    });
  }

// post方法
  post(url,data){
    return new Promise((resolve,reject) => {
      fetch(url,{
        method:'POST',
        headers:{
          'Content-type':'application/json'
        },
        body:JSON.stringify(data)
      })
          .then(res => res.json())
          .then(data => data)
          .catch(err => err)
    });
  }
}

}


### 13.1 封装Fetch类

```javascript

class Fetch{

  // get方法

  get(url){
    return new Promise((resolve,reject) => {
      fetch(url)
          .then(res => res.json())
          .then(data => data)
          .catch(err => err)
    });
  }

// post方法
  post(url,data){
    return new Promise((resolve,reject) => {
      fetch(url,{
        method:'POST',
        headers:{
          'Content-type':'application/json'
        },
        body:JSON.stringify(data)
      })
          .then(res => res.json())
          .then(data => data)
          .catch(err => err)
    });
  }
}