devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ES6 相关特性_es6相关特性 js

作者：我家自动化 | 2024-02-22 19:04:11

赞

踩

es6相关特性 js

前端技术栈类比

javaScript es6, 7,8…框架 JQuery, Vue, React工具 webstrom, vscode项目构建 webpack, gulp依赖管理 npm
java jdk8.9.10,11…框架 Spring, SpringMVC工具 idea, eclipse项目构建 maven, gradle依赖管理 maven

ES6

简介：ECMAScript 6.0 简称ES6，是在 2015 年 6 月正式发布的 JavaScript 语言标准。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。从 ES6 开始采用年号来做版本。即 ECMAScript 2015就是ECMAScript 6，每年一个新版本。

  1. ECMAScript 是什么
    ECMAScript 是浏览器脚本语言的规范，而我们熟知的 js 语言则是规范的具体实现。
  2. ES6 新特性

    1. let vs var

      let 声明的变量有严格的作用域，而 var 声明的变量往往会越域
{
	var a = 1;
	let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

let 对同一变量只能声明一次，而 var 对同一变量可以声明多次
var m = 1
var m = 2
let n = 3
// let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared

let 不存在变量提升，而 var 会变量提升
console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let y = 20;

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21

    2. const 声明常量

      // 1. 声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.

      • 1
      • 2
      • 3
      • 4

    3. 解构表达式

      • 数组解构
        let arr = [1,2,3];
//以前我们想获取其中的值，只能通过角标。ES6 可以这样：
const [x,y,z] = arr;// x，y，z 将与arr 中的每个位置对应来取值
// 然后打印
console.log(x,y,z);

        • 1
        • 2
        • 3
        • 4
        • 5
      • 对象解构
        const person = {
	name: "jack",
	age: 21,
	language: ['java', 'js', 'css']
}
// 解构表达式获取值，将person 里面每一个属性和左边对应赋值
const { name, age, language } = person;
// 等价于下面
// const name = person.name;
// const age = person.age;
// const language = person.language;
// 可以分别打印
console.log(name);
console.log(age);
console.log(language);
//扩展：如果想要将name 的值赋值给其他变量，可以如下,nn 是新的变量名
const { name: nn, age, language } = person;
console.log(nn);
console.log(age);
console.log(language);

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20

    4. 字符串扩展

      1. 部分新的API
        ES6 为字符串扩展了几个新的 API：

        1. includes()：返回布尔值，表示是否找到了参数字符串。
        2. startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
        3. endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
        let str = "hello.vue";
console.log(str.startsWith("hello"));//true
console.log(str.endsWith(".vue"));//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"));//true

        • 1
        • 2
        • 3
        • 4
        • 5

      2. 字符串模板
        模板字符串相当于加强版的字符串，用反引号`，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

        // 1、多行字符串
let ss = `
		<div>
		<span>hello world<span>
		</div>
		`
console.log(ss)
// 2、字符串插入变量和表达式。变量名写在${} 中，${} 中可以放入JavaScript 表达式。
let name = "张三";
let age = 18;
let info = `我是${name}，今年${age}了`;
console.log(info)
// 3、字符串中调用函数
function fun() {
	return "这是一个函数"
}
let sss = `O(∩_∩)O 哈哈~，${fun()}`;
console.log(sss); // O(∩_∩)O 哈哈~，这是一个函数

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18

    5. 函数优化

      1. 函数参数默认值

        //在ES6 以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
	// 判断b 是否为空，为空就给默认值1
	b = b || 1;
	return a + b;
}
// 传一个参数
console.log(add(10));
// 现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a , b = 1) {
	return a + b;
}
// 传一个参数
console.log(add2(10));

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14

      2. 不定参数，用来表示不确定的参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数

        function fun(...values) {
	console.log(values.length)
}
fun(1, 2) //2
fun(1, 2, 3, 4) //4

        • 1
        • 2
        • 3
        • 4
        • 5

      3. 箭头函数，ES6中的函数的简写方式

        1. 一个参数时：
          //以前声明一个方法
// var print = function (obj) {
// console.log(obj);
// }
// 可以简写为：
var print = obj => console.log(obj);
// 测试调用
print(100);

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
        2. 多个参数时
          // 两个参数的情况：
var sum = function (a, b) {
	return a + b;
}
// 简写为：
//当只有一行语句，并且需要返回结果时，可以省略{} , 结果会自动返回。
var sum2 = (a, b) => a + b;
//测试调用
console.log(sum2(10, 10));//20
// 代码不止一行，可以用`{}`括起来
var sum3 = (a, b) => {
	c = a + b;
	return c;
};
//测试调用
console.log(sum3(10, 20));//30

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16

      4. 箭头函数结合解构表达式

        // 需求，声明一个对象，hello 方法需要对象的个别属性
// 以前的方式：
const person = {
	name: "jack",
	age: 21,
	language: ['java', 'js', 'css']
}
function hello(person) {
	console.log("hello," + person.name)
}
// 现在的方式
var hello2 = ({ name }) => { console.log("hello," + name) };
// 测试
hello2(person);			

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14

    6. 对象优化

      1. 新增的API
        ES6 给 Object 扩展了许多新的方法，如：
        1. keys(obj)：获取对象的所有 key 形成的数组
        2. values(obj)：获取对象的所有 value 形成的数组
        3. entries(obj)：获取对象的所有 key 和 value 形成的二维数组。格式：[[k1, v1], [k2, v2],...]
        4. assign(dest, …src)：将多个 src 对象的值拷贝到 dest 中。第一层为深拷贝，第二层为浅拷贝。
        const person = {
	name: "jack",
	age: 21,
	language: ['java', 'js', 'css']
}
console.log(Object.keys(person)); //["name", "age", "language"]
console.log(Object.values(person)); //["jack", 21, Array(3)]
console.log(Object.entries(person)); //[Array(2), Array(2), Array(2)]
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
//Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。
Object.assign(target, source1, source2);
console.log(target)//{a: 1, b: 2, c: 3}

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
      2. 声明对象简写
        const age = 23
const name = "张三"
// 传统
const person1 = { age: age, name: name }
console.log(person1)
// ES6：属性名和属性值变量名一样，可以省略
const person2 = { age, name }
console.log(person2) //{age: 23, name: "张三"}

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
      3. 对象的函数属性简写
        let person = {
	name: "jack",
	// 以前：
	eat: function (food) {
	console.log(this.name + "在吃" + food);
	},
	// 箭头函数版：这里拿不到this
	eat2: food => console.log(person.name + "在吃" + food),
	// 简写版：
	eat3(food) {
	console.log(this.name + "在吃" + food);
	}
}
person.eat("apple");

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
      4. 对象拓展运算符
        拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象
        // 1、拷贝对象（深拷贝）
let person1 = { name: "Amy", age: 15 }
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age = { age: 15 }
let name = { name: "Amy" }
let person2 = { ...age, ...name } //如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值
console.log(person2) //{age: 15, name: "Amy"}

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9

    7. map 和 reduce
      数组中新增了 map 和 reduce 方法

      1. map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组中返回。
        let arr = ['1', '20', '-5', '3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)

        • 1
        • 2
        • 3
        • 4
      2. reduce()
        语法：arr.reduce(callback, [initialValue])
        reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接收四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
        callback （执行数组中每个值的函数，包含四个参数）
        1. previousValue （上依次调用回到函数的返回值，或者是提供的初始值[initialValue])
        2. currentValue （数组中当前被处理的元素）
        3. index （当前元素在数组中的索引）
        4. array（调用 reduce 的数组）
          initalValue 作为第一次调用 callback 的第一个参数。
        const arr = [1,20,-5,3];
//没有初始值：
console.log(arr.reduce((a,b)=>a+b));//19
console.log(arr.reduce((a,b)=>a*b));//-300
//指定初始值：
console.log(arr.reduce((a,b)=>a+b,1));//20
console.log(arr.reduce((a,b)=>a*b,0));//-0

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7

    8. Promise
      Promise 引入，解决了 ajax 请求层层嵌套的问题。ajax 的层层嵌套调用，容器造成代码混乱，可读性和可维护性都会变差。
      案例：用户登录，展示该用户的科目成绩。

      1. 查询用户，查询成功说明可以登录
      2. 查询用户成功，查询科目
      3. 查询科目成功，获取成绩

      此时，后台应该提供三个接口：一个查询用户的接口、一个提供科目的接口、一个提供成绩的接口。为了方便测试，提供三份 json 数据，模拟后台接口：

      user.json：

      {
	"id": 1,
	"name": "zhangsan",
	"password": "123456"
}

      • 1
      • 2
      • 3
      • 4
      • 5

      user_score_1.json：

      {
	"id": 10,
	"name": "chinese"
}

      • 1
      • 2
      • 3
      • 4

      corse_score_10.json：

      {
	"id": 100,
	"score": 90
}

      • 1
      • 2
      • 3
      • 4

      使用 ajax 请求数据的方式：

      $.ajax({
	url: "mock/user.json",
	success(data) {
		console.log("查询用户：", data);
		$.ajax({
			url: `mock/user_corse_${data.id}.json`,
			success(data) {
				console.log("查询到课程：", data);
				$.ajax({
					url: `mock/corse_score_${data.id}.json`,
					success(data) {
						console.log("查询到分数：", data);
					},
					error(error) {
						console.log("出现异常了：" + error);
					}
				});
			},
			error(error) {
				console.log("出现异常了：" + error);
			}
		});
	},
	error(error) {
		console.log("出现异常了：" + error);
	}
});

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27

      代码可读性差，引入Promise 可以解决这个问题。

      1. Promise 语法
        const promise = new Promise(function (resolve, reject) {
	// 执行异步操作
	if (/* 异步操作成功*/) {
		resolve(value);// 调用resolve，代表Promise 将返回成功的结果
	} else {
		reject(error);// 调用reject，代表Promise 会返回失败结果
	}
});

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        箭头函数写法：
        const promise = new Promise((resolve, reject) =>{
	// 执行异步操作
	if (/* 异步操作成功*/) {
		resolve(value);// 调用resolve，代表Promise 将返回成功的结果
	} else {
		reject(error);// 调用reject，代表Promise 会返回失败结果
	}
});

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
      2. 处理异步结果
        如果我们想要等待异步执行完成，做一些事情，可以通过 promise 的 then 方法来实现。如果想要处理 promise 异步执行失败的事件，还可以跟上 catch :
        promise.then(function (value) {
	// 异步执行成功后的回调
}).catch(function (error) {
	// 异步执行失败后的回调
})

        • 1
        • 2
        • 3
        • 4
        • 5
      3. 用 Promise 改造以前的调用方式
        new Promise((resolve, reject) => {
	$.ajax({
		url: "mock/user.json",
		success(data) {
			console.log("查询用户：", data);
			resolve(data.id);
		},
		error(error) {
			console.log("出现异常了：" + error);
		}
	});
}).then((userId) => {
	return new Promise((resolve, reject) => {
		$.ajax({
			url: `mock/user_corse_${userId}.json`,
			success(data) {
				console.log("查询到课程：", data);
				resolve(data.id);
			},
			error(error) {
				console.log("出现异常了：" + error);
			}
		});
	});
}).then((corseId) => {
	console.log(corseId);
	$.ajax({
		url: `mock/corse_score_${corseId}.json`,
		success(data) {
			console.log("查询到分数：", data);
		},
		error(error) {
			console.log("出现异常了：" + error);
		}
	});
});

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
        • 24
        • 25
        • 26
        • 27
        • 28
        • 29
        • 30
        • 31
        • 32
        • 33
        • 34
        • 35
        • 36
      4. 优化处理
        将异步调用的代码抽取出来，封装成函数。实现代码优化
        let get = function (url, data) { // 实际开发中会单独放到common.js 中
	return new Promise((resolve, reject) => {
	$.ajax({
		url: url,
		type: "GET",
		data: data,
		success(result) {
			resolve(result);
		},
		error(error) {
			reject(error);
		}
	});
})

// 使用封装的get 方法，实现查询分数
get("mock/user.json").then((result) => {
	console.log("查询用户：", result);
	return get(`mock/user_corse_${result.id}.json`);
}).then((result) => {
	console.log("查询到课程：", result);
	return get(`mock/corse_score_${result.id}.json`)
}).then((result) => {
	console.log("查询到分数：", result);
}).catch(() => {
	console.log("出现异常了：" + error);
});

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
        • 24
        • 25
        • 26
        • 27

    9. 模块化
      模块化就是把代码进行拆分，方便重复利用。类似 java 中的包。js中相应的概念就是模块。主要借助 export 和 import 两个指令实现。

      1. export

        const util = {
	sum(a,b){
		return a + b;
	}
}
export {util};
// 简写
export const util = {
	sum(a,b) {
		return a + b;
	}
}

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12

        export 不仅可以导出对象，一切 JS 变量都可以导出。比如：基本类型变量、函数、数组、对象。当要导出多个值时，还可以简写：

        var name = "Mack"
var age = 21
export {name, age}

        • 1
        • 2
        • 3

        导出时候，省略名称

        export default {
	sum(a, b) {
		return a + b;
	}
}

        • 1
        • 2
        • 3
        • 4
        • 5

      2. import
        使用 export 命令定义了模块的对外接口后，其他 JS 文件就可以通过 import 命令加载这个模块。

        // 例如我要使用上面导出的util：
// 导入util
import util from 'hello.js'
// 调用util 中的属性
util.sum(1,2)
// 批量导入
import {name, age} from 'user.js'

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/131142
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号