ES6知识点梳理2

函数的扩展

箭头函数

1. 只有一个参数 并且函数体只有一句话 那么参数可以省略() 返回值可以省略return

//原型
var fn(a){
	return "箭头函数"
}

//箭头函数
 var fn = a => "箭头函数"

2. 如果箭头函数没有参数 或者有多个参数，那么参数中的()就不能省略
3. 如果箭头函数的函数体有多条代码，就不能省略{},也不能省略return

var dm = () => {
	var author = "宫崎骏"
	return "《千与千寻》"
}

4. 如果函数体只有一句话，并且返回值是对象，那么这个返回值必须使用()包起来

var dm = (name, author) =>({
	name : name,
	author : author
})
console.log(dm("《千与千寻》", "宫崎骏"))

ES6里的this指向

1. 普通函数this，谁调用this就指向谁

function dm()= {
	console.log("宫崎骏");
	console.log(this);
}
f1();//this指向window

2. 对象里面的方法 它里面的this指向就是当前这个对象

var object= {
	dm:function(){
		console.log("《千与千寻》");
		console.log(this);
	}
	console.log("宫崎骏");
	console.log(this);
}
object.dm();//this指向object

3. 定时器里面的this 如果没有特殊的指向 那么 里面调用函数的this一定指向window

function dm()= {
	console.log("宫崎骏");
	console.log(this);
}
setTimeout(dm,1000);

4. 在ES6里面 箭头函数的this指向 是继承自父级执行上下文中的this

var x = 11;
var obj = {
    x: 22,
    say: ()=>{
        console.log(this.x);
    }
}
obj.say();  // 输出的值为11

5. 构造函数里面的this
   (1)把构造函数当普通函数调用 this指向window

function Dm(name,author){
	this.name = name,
	this.author = author
}

Dm("《千与千寻》","宫崎骏")

(2)作为构造函数 this指向new关键字创建的实例化对象

var a = new Dm("《哈儿的移动城堡》", "宫崎骏")

(3) 当作为构造函数时 返回值默认是new关键字创建的实例化对象 但是如果手动添加返回值 ，那么如果是基本数据类型就不会影响；如果是复杂数据类型 ，那么就会覆盖掉默认的返回值。

function Student(name, age) {
            this.name = name;
            this.age = age;
            console.log(this);

            return [12, 13, 15];
        }

        var stu = new Student("千寻", 16);
        console.log(stu.age);

总结：

1. 普通函数 ： this是在调用的时候确定，谁调用，this就指向谁
2. 箭头函数 ： this是在声明的时候就已经确定，而且不会改变，this是继承自父级执行上下文的this

Symbol

symbol是ES6新引入的一种基本数据类型 表示的是独一无二的值

特点

1. symbol函数 生成的数据 是独一无二的 即便参数不一样 那么表示的值也是不一样

console.log(Symbol("happy") ==== Symbol("happy")) //false
console.log(Symbol() ==== Symbol());

2. symbol没有字面量的写法

var arr= [12,32,43];
var obj = {};

3. 他是新增的一种数据类型 使用typeof返回值是symbol

console.log(typeof(symbol));

4. symbol不能使用new关键字来创建

var sy = new Symbol(); //Smbol is not a constructor
console.log(sy);

5. 一般我们在创建数据的时候 最好加一个参数便于区分

var sy1 = Symbol("name");
var sy2 = Symbol();
console.log(sy1);
console.log(sy2);

var dm = {
	a : "《龙猫》",
	b : "《悬崖上的金鱼姬》",
	[sy1]:"宫崎骏" //符号属性
}

共享符号

1. symbol里面的这个for方法，参数是一个字符串，如果有这个值，那么就讲这个值返回；如果没有，就创建一个数值(在全局作用域内添加)

let yellow = Symbol("Yellow");
let yellow1 = Symbol.for("Yellow");
yellow === yellow1;      // false
 
let yellow2 = Symbol.for("Yellow");
yellow1 === yellow2;     // true

2. Symbol.keyFor 这个方法返回 已经在全局作用域登记了的Symbol值的标记参数 如果没有登记 就返回undefined

let yellow1 = Symbol.for("Yellow");
Symbol.keyFor(yellow1);    // "Yellow"

set

set的构造方法

1. 增 add(数据) 添加一个数据到集合的末尾。如果这个数字原本就存在，那么就不进行任何操作

var s= new Set();
s.add(1);
s.add(3);
s.add(6);
s.add(3);  //集合里面已经有的数据  再添加  就是无效的添加
s.add(7);
s.add(8);

console.log(s); //1,3,6,7,8

set只用Object.is 来判断两个值是否相等，但是专门对-0和+0做了处理，在set里面默认他们相等

s.add(-0);
s.add(+0);
console.log(s);  //1,3,6,7,8,0    只加进去了一个零

s.add(NaN);
s.add(NaN);
console.log(s);  //1,3,6,7,8,0，NaN    只加进去了一个NaN

2. 查 has(数据) 判断set集合中是否存在查询的这个数据

console.log(s.has(1));//true
console.log(s.has(9));//false

3. 删 delete(数据) 对集合里面的数据进行匹配，匹配成功就删除

console.log(s.delete(10));//false  表示没有匹配到的数据  删除失败
console.log(s.delete(NaN));//true  表示匹配到的数据  删除成功

4. 清空 clear() 清空整个set集合，不需要传任何参数 clear方法是没有返回值的

console.log(clear());

5. size属性 是获取set集合里面所有的元素的个数，但是size是只读属性，不能重新赋值

var v= new Set();
v.add(1);
v.add(3);
v.add(6);

colsole.log(v.size);//3

set集合的遍历

1. for-of进行遍历 返回的item的每项的值
2. forEach方法
   forEach方法 是set集合的实例化方法，但是set集合没有下标，所以index和item否表示元素

//将set集合转换成数组
var s = new Set(["a", "b", "w", 12, 15]);
var arr= [];
s.forEach(function(item,index,s){     
           arr.push(item)   
})
console.log(arr)

数组新方法

1. filter方法
   返回值是一个新数组 是用来检查数组的元素是否符合某一条件 把符合条件元素过滤出来
   filter方法不会改变元素组

// 数组去重
var arr = [12, 15, 12, 46, 13, 16, 18, 16, 13];
var newarr = arr.filter(function(item,index,arr){
    return arr.indexOf(item) == index;
 })

console.log(newarr); //[12, 15,46,13,18]