ES6详细总结(2)

目录

        特点

        实例

模块化

        先决条件

        导出

        导入

Set集合

        作用

        方法

WeakSet

        特点

Map图

        特点

        方法

WeakMap

        特点

Promise

        定义

        实例

        其他

        封装        

可迭代对象

        定义

        方法

        封装


        特点

                用class声明,本质是function
                constructor 构造
                extends 继承
                new  实例化
                类名建议大写开头

        实例

                

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 创建一个类
			class Animal{
				constructor(name) {
				    this.name = name;
				}
				yiel(){
					console.log("我开始咆哮!");
				}
			} 
			//实例化类    实例化对象
			// var an = new Animal("野兽")数
			
			class Cat extends Animal{
				constructor(name,color) {
				    super(name);
					this.color = color;
				}
				skill(){
					console.log(`我的名字是${this.name},我是${this.color}的`);
					console.log("我的任务就是卖萌");
				}
			}
			
			var c1 = new Cat("小黄","黄色");
			var c2 = new Cat("小黑","白色");
			
			// 面向对象的特点: 继承  封装  多态  接口
		</script>
	</body>
</html>

模块化

        先决条件

                script的类型要是  module  

                文件打开必须是http协议,不能是D:   C:   file协议

<script type="module">

        导出

                

var name = "程序猿";
// 1.导出name
// export{name}


function fun(){
	console.log("我叫"+name+",我是一只螃蟹","我的钳没了");
}
// 2.导出函数
// export{fun}

// 3.合并导出
export{name,fun}

// 导出默认
class Cat {
	constructor(name) {
	    this.name=name;
	}
}
// 一个文件里面只能导出一个默认
export default Cat;

        导入

        

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="module">
			// 3.合并导入
			// import{name,fun}from './js/utils.js';
			
			// import Cat,{name,fun}from './js/utils.js';
		
			// 1.导入
			// import{name}from './js/utils.js';
			// alert(name);
			
			// 2.导入函数
			// import{fun}from './js/utils.js';
			// fun()
			
			// 导入默认
			// 名字可以跟js里的不一样,此界面内相同即可
			// import Cat from './js/utils.js'
			// var c1 = new Cat("小不点")
			// console.log(c1)
			
			// 导入所有内容,起一个别名叫utils  从url
			import * as utils from './js/utils.js';
			console.log(utils.name);
			utils.fun();
			var c = new utils.default("小白");
			console.log(c)
		</script>
	</body>
</html>

Set集合

        作用

                   内容不重复,类似数组但不是数组可以使用  ...  结构为数组

        方法

                    add 添加
                    delete 删除
                    clear 清空
                    has 检查是否有
                    size 长度

WeakSet

        特点

                内容不重复 内容必须是引用对象

new WeakSet([,,,])

Map图

        特点

                键可以是任意类型

                类似数组

        方法

                    set 设置
                    get 获取
                    has 检测
                    size 长度
                    delete 删除
                    clear 清空

WeakMap

        特点

                key都是弱引用

Promise

        定义

                执行异步任务,避免回调地狱

        实例

                

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//承诺一件事
			//五秒后执行
			两个参数 resolve条件成立执行...  reject条件不成立执行...
			var p = new Promise((resolve,reject)=>{
				setTimeout(()=>{
					var n = Math.random();
					if(n>0.5){
						resolve("明天请你吃饭");
					}else{
						reject("说的明天呀");
					}
				},3000)
			})
			
			// 全写
			// p.then(function(res){
			// 	console.log(res);
			// })
			
			// .catch(function(err){
			// 	console.log(err);
			// })
			
			
			// 简写
			//成立对应 then
			p.then(res=>{
				console.log(res);
			})
			
			//失败对应 catch
			.catch(err=>{
				console.log(err);
			})
		</script>
	</body>
</html>

        其他

Promise.all([,,,])
.then()
等待异步列表中全部resolve执行


Promise.race([...])
.then()
异步列表中最resolve的值

        封装        

function say(msg,time){
     return new Promise((resolve,reject)=>{
       .....
       resolve(msg)
    })
}


say("msg",500)
.then(res=>{
   console.log(res)
  return say("abc",123)
})
.then(res=>console.log(res))

可迭代对象

        定义

                可以被for of 遍历

                    string  字符串
                    array   数组
                    Set     集合
                    Map     图

        方法

                    key()键集合
                    values()值集合    
                    enteries()键和值的集合

        封装

                

for(let v of arr){
	console.log(v)
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: ES6是ECMAScript 6的简称,也称为ES2015。在ES6中,我们可以使用新的语法来导出模块和命名变量。 1. 导出模块 在ES6中,我们可以使用关键字`export`将模块导出。导出的模块可以被其他模块引用。导出的方式有以下几种: - 默认导出 默认导出可以只导出一个值,使用`export default`关键字。被导出的值可以是任意类型,包括函数、类、对象等。例如: ``` // module.js export default function add(a, b) { return a + b; } // app.js import add from './module.js'; console.log(add(1, 2)); // 输出 3 ``` - 命名导出 命名导出可以导出多个值,使用`export`关键字。被导出的值必须使用名称来标识,例如: ``` // module.js export const name = 'Tom'; export const age = 18; // app.js import { name, age } from './module.js'; console.log(name, age); // 输出 Tom 18 ``` - 统一导出 统一导出可以将多个模块导出成一个模块,使用`export`关键字。例如: ``` // module1.js export function add(a, b) { return a + b; } // module2.js export function sub(a, b) { return a - b; } // module.js export * from './module1.js'; export * from './module2.js'; // app.js import { add, sub } from './module.js'; console.log(add(1, 2)); // 输出 3 console.log(sub(3, 2)); // 输出 1 ``` 2. 命名 在ES6中,我们可以使用`const`和`let`关键字来声明变量。变量的命名规则与其他语言相同,由字母、数字和下划线组成,但不能以数字开头。例如: ``` const name = 'Tom'; let age = 18; const PI = 3.1415; ``` 值得注意的是,ES6中还新增了`模板字符串`和`箭头函数`等语法,可以更方便地书写代码。例如: ``` const name = 'Tom'; const age = 18; console.log(`My name is ${name}, I'm ${age} years old.`); const add = (a, b) => a + b; console.log(add(1, 2)); // 输出 3 ``` 以上就是ES6的导出和命名的详细解释。 ### 回答2: ES6的导出和命名是指在ES6模块系统中,如何将代码从一个模块中导出并在另一个模块中使用。ES6的导出和命名语法提供了灵活和可重用的模块化功能。 ES6的导出可以使用两种方式:默认导出和命名导出。 默认导出(Default Exports)是指在一个模块中默认导出一个值。默认导出可以是任何类型的值,例如变量、函数、对象、类等。在导入时,可以选择使用任意名称来引用默认导出的值。 命名导出(Named Exports)是指在一个模块中导出多个值,并使用命名来引用这些值。命名导出必须使用“export”关键字定义,可以导出变量、函数、对象、类等。在导入时,必须使用相应的名称来引用导出的值。 例如,在一个模块中,可以使用默认导出一个函数: export default function add(a, b) { return a + b; } 在另一个模块中,可以使用任意名称来引用这个默认导出的函数: import customAdd from './mathFunctions'; console.log(customAdd(3, 4)); // 输出:7 在同一个模块中,也可以使用命名导出多个值: export function multiply(a, b) { return a * b; } export const PI = 3.14; 在另一个模块中,必须使用相应的名称来引用这些命名导出的值: import { multiply, PI } from './mathFunctions'; console.log(multiply(3, 4)); // 输出:12 console.log(PI); // 输出:3.14 通过ES6的导出和命名功能,可以轻松地将代码整理成可维护和可重用的模块,提高代码的可读性和可维护性。它也为开发者提供了更好的灵活性,可以根据需要选择默认导出或命名导出。 ### 回答3: ES6的模块化语法中,提供了两种导出方式:默认导出(export default)和命名导出(export)。 默认导出允许我们将一个模块中的默认值导出,一个模块只能有一个默认导出。当我们在导入该模块时,可以选择是否使用默认导出的值。默认导出在一个模块中是独立的,不需要使用花括号进行导入。在导出时,可以直接使用关键字"default"来标记。 例如,在一个名为moduleA的模块中,我们可以这样默认导出一个函数: export default function add(a, b) { return a + b; } 在另一个模块中,我们可以这样导入并使用默认导出的函数: import add from './moduleA'; // 直接导入默认值,不需要使用花括号 console.log(add(1, 2)); // 输出:3 命名导出是指将模块中的值,通过指定名称进行导出,可以导出多个变量、函数或常量。在导入时,需要使用相同的名称进行引用。 例如,在模块中我们可以这样命名导出多个变量: export const name = 'John'; export const age = 25; 在另一个模块中,我们可以这样导入并使用命名导出的变量: import { name, age } from './moduleB'; // 使用花括号导入指定名称的变量 console.log(name, age); // 输出:John 25 除了导出变量之外,还可以导出函数或常量等,都遵循相同的导出规则。 总结起来,ES6模块化语法中的导出方式包括默认导出和命名导出,适用于不同的需求。默认导出用于导出一个模块的默认值,并通过关键字"default"进行标记,而命名导出用于导出多个变量、函数或常量,并需要在导入时使用相同的名称进行引用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值