ES6新增语法

最新推荐文章于 2024-11-26 20:57:16 发布

杨桃贝贝

最新推荐文章于 2024-11-26 20:57:16 发布

阅读量588

点赞数 25

CC 4.0 BY-SA版权

文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/m0_63977330/article/details/139749112

1、ECMA

Ecma国际（Ecma International）是一家国际性会员制度的信息和电信标准组织。1994年之前，名为欧洲计算机制造商协会（European Computer Manufacturers Association）

2、ECMAScript

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准。（通俗点理解就是Javascript的第六个版本）

ES6的出现是为了弥补ES5的先天不足。

index.js

console.log(num);// undefined
var num = 100;
console.log(num);//100
var num = 99;
console.log(num);//99
var num = 98;
console.log(num);//97

for(var i = 0 ; i < 10 ; i ++) {  }
console.log(i);// 10

3、ES6

3.1 声明变量

采用 let 关键字

// ES6  
// let 关键字
// 1) 用 let 关键字声明的变量不能提前引用
// 2) 不允许重复声明变量
// 3) 可以产生块级作用域 { }  

// 声明变量
// console.log(index);// 报错
let index = 100;
console.log(index);
// let index = 99;// 报错

{
    // 块级作用域的变量是局部的，是私有的。
    let x = 10;
    console.log(x);// 10
}
// console.log(x);// 报错
{
    let x = 50;
    console.log(x);// 50
}


// 循环
// for(let i = 0 ; i < 10 ; i ++){
//     console.log("i:",i);
// }
// console.log(i);// 报错

// 总结：
// var  和 let  的区别:
// var会出现变量声明提升, let不能变量声明提升
// var可以重复声明,  let 不允许重复声明
// var没有块级作用域, let 有块级作用域

3.2 声明常量

采用 const 关键字

// 变量： 值是可以改变的
let a = 100;
a = 99;
a = 98;

// 常量：值是固定的 （基本类型的数据, 如果数据为引用类型，那么可以间接的修改）
// const b = 1;
// b = 2;// 报错
const arr = ['red','green','blue'];
// arr = ["红色","绿色","蓝色"];

// 通过索引值间接的修改
arr[0] = "红色";
arr[1] = "绿色";
arr[2] = "蓝色";
console.log(arr);

// 常量：
// const 关键字声明的常量不可以声明提升
// 不允许重复声明
// 也会产生块级作用域
// 它的值不可以直接修改



// 用在哪些地方?
// 比如： 记录标签，记录函数
const el = document.querySelector("#app");
const getNum = function(){
    return Math.floor(Math.random()* 100);
}

3.3 模板字符串

var  html = "<img src='"+变量+"'>"
var html = '<img src="'+变量+'">'
var html = `<img src="${变量}">`

3.4 解构赋值

数组解构赋值

对象结构赋值

// 1) 赋值 
// 定义a,b,c三个变量
// let a = "red";
// let b = "green";
// let c = "blue";



// 2) 数组解构赋值
let arr = ["red", "green", "blue"];
// 左右两个结构相同才能进行赋值
let [a, , c] = arr;
console.log(a, c);// red blue

// 3) 对象解构赋值
let obj = { x: 100, y: 500, r: 400 };

// 同样需要注意左右两侧的数据结构，使用的是对象中的key
let { x, y, r, w } = obj;
console.log(x, y, r, w);



// 遇到结构较复杂如何解剖赋值
let { result: [{ num: aa }, { num: bb }, { num: cc }] } = { result: [{ num: 100 }, { num: 200 }, { num: 300 }] }
console.log(aa);// 100
console.log(bb);// 200
console.log(cc);// 300


let { data:[i,j,k] } = { data: [111, 222, 333] };
console.log(i,j,k);// 111 222 333


// 数组： [0,1,2,3,4,....]
// 对象:  {key: value}
// let [] = [];
// let {} = {};
// 使用解构赋值这种方式记录数据的时候，需要注意左右两侧数据结构要相同，否则无法赋值。

3.5 箭头函数

函数：是指可以实现特定功能的代码块

函数作用域: 局部执行环境

函数返回值: 函数执行后返回的结果，写在return 语句后的值

arguments对象: 在函数作用域使用，记录实参信息的对象（警告：箭头函数作用域没有arguments）

this: 指针变量（警告：箭头函数作用域没有this这个概念，箭头函数作用域的this往往上一级作用的this对象）

构造函数：构建对象的函数（警告：箭头函数不能作为构造函数使用，因为它的作用域没有this）

参数：形参(局部变量) 实参(值)

function add(x,y) {
  console.log(x)
  console.log(y)
  console.log(x + y) 
  return x + y;
}
add();
执行以上代码, 控制台输出:
undefined
undefined
NaN

<button class="btn btn-success m-3">点击按钮</button>

<script>
// 1. 代码块
// 1.1 *********
// const add = () => {
//     console.log('test')
// }
// add();
// 1.2 *********
// 有参数而且是一个参数的情况
// const add = x => {
//     console.log(x)
// }
// add(1000);
// 1.3 *********
// const add = (x,y) => {
//     console.log(x,y)
// }
// add(1000,9999);
// 1.4 *********
// 返回值
// const add = (x,y) => {
//    return x + y
// }
// let r = add(1000,9999);
// console.log(r);// 10999
// 1.5 *********
// 意思是返回x+y的结果
// const add = (x,y) => x + y; 
// let r2 = add(1,2);
// console.log(r2);// 3
// 1.6 *********
// 接收单一参数的函数
// 柯里化函数
// const add = function(x) {
//     return function(y){
//         return function(z){
//             return x + y + z;
//         }
//     }
// }
// let r3 = add(1)(2)(3);
// console.log(r3);// 6
// 1.7*********
// 箭头函数
// const add = x => y => z => x + y + z;
// let r4 = add(1)(2)(3);
// console.log(r4);// 6

// 可以让书写函数代码的风格要更加简约！！

// 2. 事件函数
const butt = document.querySelector(".btn-success");
// 注意this的使用
// butt.onclick = function(){
//     console.log(this);// 事件调用者，就是按钮标签
// }

// console.log(this);// window
// butt.onclick = () => {
//     console.log(this);// window
// }


// 3. 回调函数
// setTimeout(function(){},100)
// setTimeout(()=>{
//     document.body.className="bg-danger";
// },100)

// let arr = [111,222,333];
// // arr.forEach(function(item,index){})
// arr.forEach((item,index)=>{
//     console.log(item,index);
// })



// arguments会报错
// const foo = (a,b) => {
//     console.log(arguments);
// }
// foo(1,2)


// arguments不会报错
// const foo = function(a,b) {
//     console.log(arguments);
// }
// foo(1,2)


// 构造函数
const Person = function(name){
    this.name = name;
}
const p1 = new Person("小明");
console.log(p1);// Person {name: '小明'}


// Uncaught TypeError: Animal is not a constructor
// 报错
// const Animal = (name)=> {
//     this.name = name;
// }
// new Animal("小狮子")

// 注意： 
// 1. 箭头函数作用域没有this的概念
// 2. 箭头函数作用域没有arguments对象
// 3. 箭头函数不能作为构造函数使用，也不能作为原型对象的函数

3.6 数组API / 字符串API/ 对象

数组API

// 数组
// let arr = [0,1,2,3,4,5]

// 遇到数组就要想到循环、索引值、length属性

let students = ["张三","李四","赵五","陈六"]

// 1） 循环
// students.forEach(function(item,index,arr){
//     console.log(item,index,arr)
// })

// 2) 过滤
let stu2 =  students.filter(function(item,index){
// 保留除了姓李的学生名字
if(!item.includes("李")){
    return item;
}

// 保留除了姓李、陈的学生名字
// if(/[^李陈]{2}$/.test(item)){
//     return item;
// }
})
// console.log(stu2);// ['张三', '赵五', '陈六']

// 3) 映射（一一对应）
let stu3 = students.map(function(item,index){
if(item == "张三"){
    return {
        name: "zhangsan",
        fullName: "张三"
    }
}
if(item == "李四"){
    return {
        name: "lisi",
        fullName: "李四"
    }
}
if(item == "赵五"){
    return {
        name: "zhaowu",
        fullName: "赵五"
    }
}
if(item == "陈六"){
    return {
        name: "chenliu",
        fullName: "陈六"
    }
}
})
console.log(stu3);//  [{…}, {…}, {…}, {…}]

// 4) 针对数学运算
let arr = [1,2,3,4];
// 累计
let value = arr.reduce(function(prev,next){
return prev + next;
})
console.log(value);// 10


// 数组构造函数的原型对象，可以找到数组相关的API
console.log(Array.prototype)

字符串API

// 字符串（带有引号的就是字符串）
let str = "https://www.abc.com/static/images/1.jpg";
console.log(str.startsWith("https"));// true
console.log(str.startsWith("file"));// false
console.log(str.endsWith(".jpg"));// true
console.log(str.endsWith(".png"));// false
console.log(str.includes("static"));// true
console.log(str.includes(".com"));// true
console.log(str.includes(".net"));// false


// 假设： 面试的过程中，让你模仿startsWith封装一个myStartsWith方法。
String.prototype.myStartsWith = function(text){
    // this 方法的调用者
    // console.log("1.0",text);// "http://"
    // console.log(this);// String {'https://www.abc.com/static/images/1.jpg'}
    let len = text.length;
    let value = this.slice(0,len);
    // console.log("2.0",value);// "https://"
    if(text === value) {
        return true;
    }
    else {
        return false;
    }
}
console.log(str.myStartsWith("http://"));// false
console.log(str.myStartsWith("https://"));// true

对象

// 对象
// {key: value}  
// 以键值对形式存取数据的集合，叫做对象
// let obj = {x: 100,y: 200}
// console.log(obj);

// let a = 100;
// let b = 200;
// let point = {a: a ,b: b};
// 对象语法糖（代码的简写）
// let point = {a ,b};

// 删除对象 a 属性
// delete point.a;
// console.log(point);// {b: 200}

// 判断对象是否存在指定属性
// console.log(point.hasOwnProperty('b'));// true
// console.log(point.hasOwnProperty('xxxx'));// false

// 构造函数的原型
// console.log(Array.prototype);// 数组的原型
// console.log(Object.prototype);// 对象的原型


// Set 和 Map 对象
// *******  Set 管理数组 操作数组相关的功能 ******* 
let arrColor = ['red','red','red','green','blue','blue','blue','yellow','pink']
console.log(arrColor)
// 数组去重
// 1) 利用对象键值对的唯一性
// 2) 双重循环做判断
// 3) 数组api indexOf 
// 4) Set 这个es6方法可以去重
let setObj = new Set(arrColor);
console.log(setObj);// 使用这个对象管理数据
// add()
// clear()
// delete()
// size

// Set 集合中的数据是唯一的
let newArrColor = [...setObj];
console.log(newArrColor);//['red', 'green', 'blue', 'yellow', 'pink']

//******* Map 管理键值对 操作对象相关的功能 ******* 
let mapObj = new Map()

// 添加数据
mapObj.set("width","100px");
mapObj.set("color","red");

// 获取数据
let w = mapObj.get("width");
console.log(w);// 100px

// 删除color属性
mapObj.delete("color");

// 布尔值
let isShow = true;
// 任何数据类型都可以作为map的键
mapObj.set(isShow, 1000);
let num = mapObj.get(isShow);
console.log(num);//1000
console.log(mapObj);//Map(2) {'width' => '100px', true => 1000}
// 采用map对象管理键值对,方便添加数据,获取数据,删除数据
// 而且这种集合的键可以任意数据类型

3.7 Promise

是一种处理异步编程的方案

// Promise 是异步编程的解决方案。语法上既可以叫做对象也可以叫做函数
// 怎么写

// 1） 常见的写法
let isShow = true;
// 创建了一个promise对象
let p1 = new Promise(function(resolve,reject){
    if(isShow) {
        resolve("成功");
    }
    else {
        reject("失败");
    }
})

p1.then(
    function(content){
        console.log("1.0",content);
    },
    // function(error){
    //     console.log("错误:",error);
    // }
)
.catch(
    function(error){
        console.log("错误:",error);
    }
)
.finally(
    function(){
        console.log("最后执行。。。。")
    }
)
// 采用then方法代替以往的嵌套回调函数的写法。



// 定义3个promise
let pro1 = new Promise(function(resolve,reject){
    setTimeout(() => {
        resolve("1000")
    }, 1000);
})
let pro2 = new Promise(function(resolve,reject){
    setTimeout(() => {
        resolve("500")
    }, 500);
})
let pro3 = new Promise(function(resolve,reject){
    setTimeout(() => {
        resolve("300")
    }, 300);
})

// 2）执行效率较高的任务
// 判断哪个任务执行的效率最高，用时最短，就执行那个任务
Promise.race([pro1,pro2,pro3])
.then(
    function(data){
        console.log(data);
    }
)

// 3） 执行所有任务
// 同时执行三个任务 就是使用all方法
Promise.all([pro1,pro2,pro3])
.then(
    function(arr){
        console.log(arr);
    }
)

async 和 await

是一种处理异步和同步的方案（通常需要配合Promise对象使用）

// 编写async函数
// 调用async修饰的函数，可以直接返回promise对象
async function getData() {
    console.log("1.0 首先做什么");

    // 等待延迟函数执行，才执行后续的代码
    await new Promise(function(resolve,reject){
        setTimeout(()=>{
            console.log("2.0 在这里住一晚~~")
            resolve();
        },1000)
    })

    // await 后要写 promise函数的语法才有等待的作用
    // await setTimeout(()=>{
    //     console.log("2.0 最后执行");
    // },1000)

    console.log("3.0 然后做什么")
}

// app 就是promise对象
const app = getData();
// console.log(app);

// app 就可以调用then方法
app.then(
    function () {
        console.log("4.0 然后做什么")
    }
)

3.8 Axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。

它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。

在服务端它使用原生 node.js http 模块(既可以在服务端使用),

而在客户端 (浏览端) 则使用 XMLHttpRequests(也可以在客户端使用)。

使用步骤：

1）下载axios文件

https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

2）引入到项目中

3）调用axios相关的API

// axios
const getCollegeData = (data = {}) => {
    // 调用axios对象下get方法返回promise对象
    // 返回promise对象
    // return axios.get(接口地址, 参数对象)
    return axios.get(api.collage_url, { params: data })
}

3.9 fetch

全局 fetch() 方法用于发起获取资源的请求，它会返回一个会在请求响应后兑现的 promise。

该 promise 会兑现一个表示请求响应的 Response 对象。

// 封装获取学校列表的接口
// 基于promise封装网络请求API
const getCollegeData = (data = {}) => {
    // 调用新增的fetch方法 （也是基于promise）
    // return fetch(接口地址).then(响应对象 => 响应对象.json() )
    return fetch(api.collage_url).then(response => response.json());
}

3.10 class (面向对象)

在面向对象这种思想下编写代码，写法有很多种

3.10.1 直接定义对象

3.10.2 调用函数返回对象(工厂模式)

3.10.3 构造函数

3.10.4 构造函数+原型

3.10.5 class (类)

弄清楚什么是抽象的，什么是具体的?

抽象：设计模型例如：动物类

具体：实例例如：动画片中的tom猫

面向对象是一种编码思想，通俗理解就是采用对象添加属性、添加方法，去完成项目的功能。

封装性、继承性、多态性

ES5中，面向对象的写法是不统一的。

ES6中，可以统一使用class编写

声明类（抽象对象）

class Animal {

}

创建实例

new Animal()

添加成员

class Animal {
     constructor(n){
          this.name = n;
     }
     eatFood(){
         console.log(this.name+"在吃东西！")
     }
}

类继承

// 类  
    // 父类： 系统  System (版本信息,尺寸，显示版本)

    // 子类： 应用  App (名称，显示版本，显示名称)

    // 子类： 页面  Page(时间，显示版本，显示名称)


// 代码：
// 父类
class System {
    constructor(author){
        this.version = "v1.0.0";
        this.author = author;
    }
    showVersion(){
        console.log("当前系统版本:"+this.version);
    }
}

// 子类App继承父类System
// 利用 extends 继承父类的成员
class App extends  System {
    // 构造函数
    constructor(author){
        // 超类方法
        super(author);
        // 添加当前类的属性
        this.name = "QQ";
    }
    // 显示名称
    showName(){
        console.log("应用名称:"+this.name);
    }
}

// 子类Page继承App
class Page  extends App {
    constructor(author){
        super(author)
        this.time = "2024-03-22 18:00:00"
    }
}


// 创建System实例
const system = new  System("zhangsan");
console.log(system);//System {version: 'v1.0.0', author: 'zhangsan'}

// 创建App的实例
const app = new App("zhangsan");
// app.showVersion();// 当前系统版本:v1.0.0
// app.showName();//应用名称:QQ
console.log(app);// App {version: 'v1.0.0', author: 'zhangsan', name: 'QQ'}


// 创建Page的实例
const page = new Page("zhangsan");
// page.showVersion();
// page.showName();
console.log(page);// Page {version: 'v1.0.0', author: undefined, name: 'QQ', time: '2024-03-22 18:00:00'}

静态成员

// 静态成员不是给类实例使用的,而是直接给类使用
class Animal {
    // 静态属性
    static name = "狮子动物";
    // 静态方法
    static showName() {
        console.log("这是" + Animal.name);
    }
}

// 创建实例
const a1 = new Animal()
// console.log(a1);
// console.log(a1.name);

// 由类直接引用或使用的属性和方法，叫做静态成员
console.dir(Animal)
console.dir(Animal.name)
Animal.showName()

私有属性

// 私有属性这个说法是这样的
// 只能在当前类的内部使用的属性
class App {
    // 声明私有属性
    #color = "红色";
    showColor() {
        console.log("这是~~~" + this.#color);
    }
}
const app = new App();
console.log(app);
app.showColor();


// console.log(app.color);// undefined
// console.log(app.#color);// 报错
class Page extends App {
    constructor() {
        super();
    }
    getColor(){
        // console.log("我想得到颜色"+this.#color);// 报错
    }
}
const page = new Page();
// page.showColor();
// page.getColor();

3.11 模块化语法

模块化：把项目拆分成大大小小的组件，这些组件叫做模块。

书写方式：

3.11.1 按需导出导入

搜索模块

search.js

export  const  search1 = ()=>  {   }

export  const  search2 = ()=>  {   }

export  const  search3 = ()=>  {   }

项目中导入

import  { search1 , search2 } from "./modules/search.js"

3.11.2 全部导出导入

banner.js

export default {
    init (){  }
}

项目中导入

import  Banner  from "./modules/banner.js"

3.11.3 设置模块的别名

导出：

// 定义对象
const comp = {
    name: "我是组件"
}

// 导出时，设置对象的别名
// export { comp as 自定义名称 };
export { comp as aaa };

导入：

<script type="module">
    // 按需导入 ，使用自定义名称
    import { aaa } from './modules/demo.js';
    console.log(aaa);// {name: '我是组件'}
</script>