温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

es6基础知识总结

发布时间:2020-06-11 08:36:44 来源:网络 阅读:305 作者:xxxpjgl 栏目:web开发

一、let 与const
let:

  • 所声明的变量只在当前的代码块中有效
  • 使用let命令声明的变量在域解析的时候,不会被提升
  • let不允许在同一个作用域下声明已经存在的变量
  • for循环体现let父子作用域
    cosnt:拥有上面let的各项规则,同时拥有以下的规则
    声明必须赋值
    声明的常量储存简单的数据类型时不可改变其值,如果存储的是对象,那么引用不可以被改变;至于对象里面的数据如何变化,是没有关系的。
    二、模板字符串
    var obj = {
        name:'李明',
        age:34
    }
    //es5字符串拼接
    console.log('名字'+obj.name+'年龄'+obj.age);
    //`模板字符串 名字:${obj.name} 年龄:${obj.age}`
    console.log(`名字:${obj.name} 年龄:${obj.age}`);

    三、简化对象的书写

    var a=1;
    var b=2;
    var obj1={
        a,   //省略同名关键字   即 a:a,直接写成a
        b,
        setA(x){
                console.log('aaaa');  //省略function关键字
        }
    }
    console.log(obj1);

    四、箭头函数

//一般形式:
let fn1=(x,y)=>{
    console.log(this);
}
fn1();

//注意this指向的问题:箭头函数的this指向不是在调用时决定的,而是在定义的时候决定的
//即:this指向定义时环境所在的对象,而不是使用时环境所在的对象
//如果外部有函数,那么this指向外部函数的this
//如果外部没有函数,指向window
//箭头函数体内没有arguments对象,如果使用,使用rest参数代替

let obj={};
let fn1=(x,y)=>{
    console.log(this);  //window
    let fn3=()=>{
        console.log(this);   //window
        function f4() {
            console.log(this);    //obj
        }
        f4.call(obj);  //这里调用
    }
    fn3.call(obj);  //call不会改变箭头函数的this指向
}
fn1.call(obj);

//call会改变普通函数的this指向
function foo2() {
    let fn1=(x,y)=>{  //箭头函数,指向外部函数的this
        console.log(this);  //obj
    }
    fn1();
}
foo2.call(obj);  //call会改变this指向

五、扩展运算符
把一个对象或者数组打散成参数,即获取到对象或者数组里面的每一项
var arr = [1,2,3,4];
console.log( arr ); //(4) [1, 2, 3, 4]
console.log( ...arr ); //1 2 3 4

六、形参默认值

function foo(x=1,y=2){
        this.x=x;
        this.y=y
}
var f=new foo();  //没有实参,执行形参默认值
console.log(f);
var p=new foo(4,5);  //有实参,执行实参中的值
console.log(p);

七、set数据集合
set对象允许存储任何类型的唯一值,无论是原始值或者是对象引用
set:是一个集合,类似于数组,与数组的主要区别是没有重复的元素
主要的作用可以进行去重。NaN也不会重复添加
不存储value。由于key不能重复,所以,在Set中没有重复的key
重复元素在Set中自动被过滤
要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set:

var set = new Set();//空set
var set = new Set([1,2,3]);

重点:一个属性,四个方法
1、size属性:返回set数组的长度,类似于length
2、四个方法:add,delete,clear,has

let set =new Set([1,2,3,4,1]);
console.log(set.size); //4
//添加元素
set.add(7);  
console.log(set); // {1, 2, 3, 4, 7}
//删除数组中的某个元素
set.delete(3);
console.log(set); // {1, 2, 4, 7}
//检测数组中是否含有某个元素,返回值为布尔
console.log(set.has(2)); //true
//清空数组
set.clear();
console.log(set) //{}

var str = 'siiva';
new Set(str) //{'s','i','v','a'}

八、map数据集合:类似于对象,一组键值对的结构
Javascript对象Object只能使用字符串当做key值,这给它的使用带来了很大的限制,为了解决这个问题,ES6提供了map数据结构。它类似于对象。是键值对的集合,但是键的返回不限制于字符串,各种类型的值都可以作为键

var m = new Map();  //Map(0) {}  空map

let obj={a:1};
const map = new Map([
        ['name','java'],
        ['feel','今天天气贼好'],
        ['jieguo','适合看帅哥'],
        [obj,'是!']
]);
console.log(map);  
//{"name" => "java", "feel" => "今天天气贼好", "jieguo" => "适合看帅哥", {…} => "是!"}

由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Map与Object的区别

  • Map的size属性可以直接获取键值对个数
  • 两者都是对应的keys-value键值对,
  • 但是Object的keys只能是字符串或者 Symbols,
  • Map的key可以是任意值,比如数组、对象等

map方法:

  • size:返回键值对长度
  • set:设置键值对
  • get:获取对应的value值
  • delete:删除对应的键值对
  • clear:清空map
  • has:查看是否有对应的键值对,返回值为布尔

对应代码:

console.log(map.size);   //4    
map.set('shia','怎么了');   //设置键值对
console.log(map.get('shia')); //返回对应的value值
console.log(map.delete('shia'));
console.log(map.has('shia'));
console.log(map.has(obj));
map.clear()
console.log(map);

九、Symbol()方法
1、Symbol()相当于第七种数据类型,ES6中为了防止冲突,引入了Symbol()。
凡是用Symbol()引用的属性名都是独一无二的
总结:独一无二,防止冲突

let s1 = Symbol();
let s2 = Symbol();
console.log(s1); //Symbol()
console.log(s2); //Symbol()
console.log(s1===s2);  //false,验证独一无二

let s3 = Symbol('name');
let s4 = Symbol('name');
console.log(s1===s2);  //false,验证独一无二
//数据类型
console.log(typeof s)  //symbol

2、可以用来添加对象的属性值,但是是唯一的,验证独一无二
一般的对象添加的属性名对应的属性值只能是一个,重复添加会覆盖

let obj1={};
obj1.name='ni';
obj1.name='wo';
console.log(obj1);  //{name: "wo"}

利用Symbol()添加的会全部显示出来,因为每一个name属性都是独一无二的,解决了命名冲突的问题

let obj2={};
obj2[Symbol('name')]='ni';
obj2[Symbol('name')]='wo';
console.log(obj2);   //{Symbol(name): "ni", Symbol(name): "wo"}

3、不能使用new关键字,否则会报错。这是因为Symbol()是一个原始类型的值,不是对象不能添加任何属性

let snew = new Symbol();
console.log(snew);  //报错 Symbol is not a constructor

4、Symbol()可以将字符串作为参数,

  • 表示对实例对象的描述,主要作用可以针对不同变量进行区分
  • 注意:由于其参数的值是对其的描述,所以可能每次返回的值是不同的
    let a = Symbol('a');
    console.log(a.toString()); //Symbol(a)
    let b = Symbol('B');
    console.log(b);  //Symbol(B) 
    console.log(a===b); //false

    5、Symbol()不能与其他类型的值进行运算,但是可以返回一个Boolean值

    let c = Symbol();
    console.log(s+'nihao'); //Cannot convert a Symbol value to a string
    console.log(s+'2');  //Cannot convert a Symbol value to a string
    console.log(Boolean(c));  //true

    6、不能被for in循环遍历

    var obj3 = {};
    var str1 = Symbol('str1');
    var str2 = Symbol('str1');
    obj3[a] = '我是刘昊然的女朋友';
    obj3[b] = '我承认了';
    obj3.c  = '妈的,瞒不住了';
    obj3.d  = '我爱刘昊然';
    for( let key in obj3 ){
     console.log(key)         // c d
    }

    7、可以通过Object.getOwnPropertySymbols()方法,获取Symbol()属性名
    console.log(Object.getOwnPropertySymbols(obj3)); //[Symbol(a), Symbol(B)]
    8、使用场景

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI