ES6笔记3

Set

一个不重复数组 对数组去重

var arr = [1,1,2,3,,4,5,5,6,7];
		var s1 = new Set(arr);
		//arr = [...s1];
		arr = Array.from(s1);
		console.log(arr);//1,2,3,4,5,6,7

new set ([])

var s = new Set([1,3,1,3,5,7,9]);
console.log(s);

size 长度

var s = new Set([1,3,1,3,5,7,9]);
console.log("size:",s.size);

add() 添加

var s = new Set([1,3,1,3,5,7,9]);
s.add(12);
console.log(s);

delete()删除

var s = new Set([1,3,1,3,5,7,9]);
s.delete(1);
console.log(s);

clear()清空
for of()遍历

var s = new Set([1,3,1,3,5,7,9]);
for(let i of s){
	console.log(i);
}

has()检测是否有 特点,不重复

map

特点:有序 key可以是任意值 new Map([k,v],[]) size长度 set(k,v)设置
get(k)获取 has()检测是否有 clear()清空 for of(遍历)

var obj = {"b":100,"a":"qq","2":"best","1":"good"};
console.log(obj);
var map = new Map([["b",100],["a","qq"],[2,"best"],[1,"good"]])
console.log(map);

symbol

创建 var s1=Symbol(‘blue’) 符号是唯一 常用与对象的键

 obj={[s1]:'mumu'} 
 obj[s1]

迭代器

JavaScript可迭代对象 1string 字符串 2Array 数组 3Set集合 4Map 键值对
values()值集合 keys()键的集合 entries()键值的集合

apply

执行函数,对象冒充,参数数组

function add(x,y){
	console.log(this,x+y)
}
add.apply{{name:'mumu'},[3,7]}//{name:'mumu'} 10

call

执行函数,对象冒充,参数单个

function add(x,y){
	console.log(this,x+y)
}
add.apply({name:'mumu'},[3,7])//{name:'mumu'} 10

bind

执行函数,对象冒充,参数默认值

var nadd=add.bind({name:'muu'},5);
nadd(10);//{name:'muu'},15

Class类

定义 class Cat{constructor(){}}
初始化类 new Cat()
继承 class Cat extends Animal{}
方法 brak(){}
属性 this.name=18
访问控制 set Age(val){} get Age(){}
调用父类构造函数 super()
静态方法 static sayLog(){} Cat sayLog(){}
静态属性 static num=0 Cat num

// 类: 创造对象一个模板
// 实例:是被类创建的对象 ,一个类可以创建多个实例
// 狗类:名字,咬人,叫
// 猫类:名字,叫
// 动物:名字, 跑
class Animal{
	constructor(name) {
		this.name = name;
	}
	runing(){
		console.log("我会走会跑,主人你在哪里");
	}
}
class Dog extends Animal{
	constructor(name) {
	    super(name);//调用父类的构造函数
		// this类的实例
	}
	// 构造函数(new 类被调用)
	bark(){
		console.log("旺旺旺旺")
	}
}
var d1 = new Dog("大黄");
var d2 = new Dog("旺财");


class Cat extends Animal{
	constructor(name,age=2) {
	     super(name)
		 this.age = age;
		 // 每次构造函数被调用 num 加1 记录有多少个实例
		 Cat.num ++;
		 Cat.sayLog();
		 
	}
	static num = 0;
	//  静态属性 值 0
	static sayLog(){
		console.log(`当前总共有${Cat.num}个只猫`)
	}
	bark(){
		console.log("喵喵喵喵")
	}
	 
	set Age(val){
		if(val>0){
			this.age = val;
		}else{
			console.log("设置年龄不正常");
		}
	}
	get Age(){
		console.log("被GET到了")
		return this.age;
	}
}
var  c1 = new Cat("TOM");
var  c2 = new Cat("Kity",5);
// set get 当我们去设置或者 获取的对数据进行额外的操作,隐藏原本的数据直接操作

模块

特点

  • ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;。
  • 模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。
  • 每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。
  • 每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。

export 与 import
基本用法

  • 模块导入导出各种类型的变量,如字符串,数值,函数,类。

  • 导出的函数声明与类声明必须要有名称(export default 命令另外考虑)。

  • 不仅能导出声明还能导出引用(例如函数)。

  • export 命令可以出现在模块的任何位置,但必需处于模块顶层。

  • import 命令会提升到整个模块的头部,首先执行。

/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
 
/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!

建议使用大括号指定所要输出的一组变量写在文档尾部,明确导出的接口。
函数与类都需要有对应的名称,导出文档尾部也避免了无对应名称。

as 的用法
export 命令导出的接口名称,须和模块内部的变量有一一对应关系。
导入的变量名,须和导出的接口名称相同,即顺序可以不一致。

/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }
 
/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// Tom
使用 as 重新定义导出的接口名称,隐藏模块内部的变量
/*-----export [test1.js]-----*/
let myName = "Tom";
export { myName }
/*-----export [test2.js]-----*/
let myName = "Jerry";
export { myName }
/*-----import [xxx.js]-----*/
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);// Tom
console.log(name2);// Jerry

不同模块导出接口名称命名重复, 使用 as 重新定义变量名。

import 命令的特点
只读属性:不允许在加载模块的脚本里面,改写接口的引用指向,即可以改写 import 变量类型为对象的属性值,不能改写 import 变量类型为基本类型的值。

import {a} from "./xxx.js"
a = {}; // error
 
import {a} from "./xxx.js"
a.foo = "hello"; // a = { foo : 'hello' }

单例模式:多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import 。

import { a } "./xxx.js";
import { a } "./xxx.js";
// 相当于 import { a } "./xxx.js";
 
import { a } from "./xxx.js";
import { b } from "./xxx.js";
// 相当于 import { a, b } from "./xxx.js";

静态执行特性:import 是静态执行,所以不能使用表达式和变量。

import { "f" + "oo" } from "methods";
// error
let module = "methods";
import { foo } from module;
// error
if (true) {
  import { foo } from "method1";
} else {
  import { foo } from "method2";
}
// error

export default 命令
在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
export default 中的 default 是对应的导出接口变量。
通过 export 方式导出,在导入时要加{ },export default 则不需要。
export default 向外暴露的成员,可以使用任意变量来接收。

var a = "My name is Tom!";
export default a; // 仅有一个
export default var c = "error"; 
// error,default 已经是对应的导出变量,不能跟着变量声明语句
 
import b from "./xxx.js"; // 不需要加{}, 使用任意变量接收
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值