Day-16 ES5 ES6(下)

2022-06-15 22:04:44 阅读：175 来源： 互联网

标签：ES6 ES5 console log map key var Day name

ES5 ES6(下)

对象以及函数的简写

对象的简写（属性简写）

var name = "tom"
var obj = {
    //第一个name为key 第二个name 指向外面的name 为value
    //name:name
    //当value是一个变量 key和value的变量名为一致的时候 直接写key
    name
}

函数的简写（对象里面的函数的简写）

var obj = {
    /*
    eat:function(){
        console.log("hello")
    }
    */
    //简写 省略了function
    eat(){
        console.log("hello")
    }
}
obj.eat() //打印hello

Object.is 判断俩个对象是否是一个

Object.assign() 将后面的内容拷贝给第一个（浅拷贝）

//Object.is() 他是用来弥补我们==的不足 ==在对应的比较对象的时候 他不会比对象里面的东西 而是直接对象的栈地址的值
//Object.is() 
var array1 = new Array()
var array2 = new Array()
console.log(array1==array2); //false
console.log(array1 === array2); //false
//判断这个俩个内容是否一个对象 
console.log(Object.is(array1,array2));//false
//NAN == NAN
var number = NaN
console.log(number==NaN);//false
console.log(Object.is(number,NaN));//true
//Object.assign() 复制
var obj = {
    name:'李四',
    age:"18",
    users:{
        hello:"hello"
    }
}
var obj1 = {}
//将后面的内容拷贝给第一个
Object.assign(obj1,obj)
console.log(obj1.users.hello);
obj1.users.hello = "你好"
console.log(obj.users.hello);//浅拷贝 也就是我们拷贝的对象只拷贝了第一层的值 第二层我是拷贝的引用

set（集合伪数组）

//set的特性 元素不能重复 数组去重 可以传参 传递的参数为数组
var set = new Set()

方法

add 添加

delete 删除

clear 清除所有

forEach 遍历

has 判断是否存在

entries 返回对应键值对组成的set迭代器

keys 返回对应值对组成的set迭代器

values 返回对应键对组成的set迭代器

属性

size 返回对应的长度

数组去重

// 数组去重
var array = ['a','a','b','c','a','b','c']
var newSet = new Set(array)
//将set转为数组
console.log(Array.from(newSet));

map (集合伪数组)

构成是key value ，key是唯一的 value不是 Map是一个很大的对象他里面可以存储任意类型的值

//传参需要传递俩个参数 一个key 一个value
var map = new Map()

方法

set 设置对应的key-value

get 通过对应的key来获取value

delete 通过key来删除

clear 清空

forEach 遍历 value - key - map

has 判断是否存在对应的key

entries 返回键值对 map迭代器

keys 返回key map迭代器

values 返回value map迭代器

属性

size

WeakSet 只能存储对象的set

所有的迭代器都有的方法 next

var map = new Map()
//map的构成是由key-value来构成的 key是唯一的 可以是任意类型 value也可以是任意类型
//增删改查
//添加数据 修改 set对应的值 
map.set('name','jack')
map.set('name','tom')
map.set('name','lisa')
map.set('age','198')
map.set('sex','女')
//查数据 通过key来获取对应的值 get
console.log(map.get('name'));
//删除 delete 根据key来删除 清空clear
// map.delete('name')
// map.clear()
console.log(map.size);
console.log(map.has('name'));
map.forEach((v,key,map)=>{
    console.log(v,key);
})
//values entries keys 返回的是map的迭代器 所有的迭代器都有的方法 next下一个
console.log(map.keys());
// console.log(map.keys().next());
console.log(map.values());
console.log(map.entries());

Class 类（面向对象里面的内容）

//class 类名字 首字必须大写
class Person{
    //class里面的this指向new的对象实例
    // 构造器 构造方法的容器 new Object() //调用的就是构造方法
    //匿名的构造器 调用的时候类名的他的方法名
    //name age是属于构造方法的形参
    constructor(name,age){
        this.name = name  //this指向对象new的对象
        this.age = age // new的对象实例的age属性 = 构造函数里面传递的age值
    }
    eat(){
        console.log(this.name+"吃饭"); //指向对象实例
    }
}
//调用构造函数来new对象
var person = new Person('jack',18)
//调用对应的eat方法 eat来自于person这个类中
person.eat() //jack吃饭

constructor 构造器（在继承体系中子类可以拥有父类所有非私有属性）

在继承的关系中 如果需要在constructor 使用this那么必须先写super()  super()指向对应的父类构造

// extends 表示继承关系
class Student extends Person{
    //如果在继承关系中需要在构造器中使用this 必须先写super
    constructor(){
        super() //表示的是父元素的构造方法
        this.sex = '男'
        this.name = '张三'
    }
}
var student = new Student()
console.log(student.name);//自己没有的时候找父元素 自己有先找自己  name继承于person中
student.eat() //继承于person类中 tom吃饭
console.log(student.sex); //打印自己的sex属性

extends 表示继承关系

减少冗余代码提高代码的可阅读性及开发效率

es6新增的基础数据类型（值类型）

Number String boolean null undefined

新增 BigInt 大整型（解决数字有范围）

//大整型
var bigInt = BigInt("1234567891234567991234566799")
console.log(bigInt);

新增Symbol （唯一的值）

//symbol唯一的 独一无二的值
var n = Symbol()
var m = Symbol()
var j= Symbol('hello') //hello相当他的别名
//获取到对应的别名
console.log(j.description);
console.log(n)
//一般使用symbol来做区分 对象的key
var obj = {}
obj[n] = "hello"
obj[m] = "hi"
console.log(obj[n]);
console.log(obj[m]);

生成器

<script>
    // 生成器函数是一个异步的函数 里面标注了yield 暂停执行 为了区分普通函数他加了*
    //可以在对应的地方获取到对应的值
    function* autoGenerator(x){
    yield  x/2
    yield  x/3
    yield  x/4
}
function* generator(x){
    yield  x+1
    yield  x+2
    yield* autoGenerator(x)
    yield  x+4
}
var g = generator(1)
//next返回的是一个对象 里面有俩个参数 value表示执行的值 done 是否已经完成
//    console.log(g.next() )//走的第一步 2
//    console.log(g.next() )//走的第二步 3
//    console.log(g.next() )//走的第三步 4
//    console.log(g.next() )//走的第四步 5
// console.log(g.next()) //2
// console.log(g.next()) //3
// console.log(g.next()) //0.5
// console.log(g.next()) //0.33
// console.log(g.next()) //0.25
// console.log(g.next()) //5
while(!g.next().done){
    console.log(g.next()) //3
}
</script>

标签：ES6,ES5,console,log,map,key,var,Day,name
来源： https://www.cnblogs.com/jsnotes/p/16379991.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9