es6基础知识总结-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

es6基础知识总结

一、let 与const
let：

创新互联公司成立于2013年，先为宁安等服务建站，宁安等地企业，进行企业商务咨询服务。为宁安企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

所声明的变量只在当前的代码块中有效
使用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、使用场景

分享名称：es6基础知识总结
当前链接：http://lswzjz.com/article/picgij.html

新闻中心

其他资讯