ES6语法（二）

最新推荐文章于 2022-09-29 14:25:18 发布

ly__struggle

最新推荐文章于 2022-09-29 14:25:18 发布

阅读量177

点赞数

分类专栏： ECMAScript 6.0 笔记文章标签： js es6

本文链接：https://blog.csdn.net/ly__smile/article/details/115412512

版权

笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

ECMAScript 6.0

2 篇文章 0 订阅

订阅专栏

一、箭头函数

es6允许使用（=>）声明函数，更加简单、灵活

箭头函数与普通函数的区别

只能定义匿名函数
箭头函数没有原型对象，不能使用原型对象、不能用作构造函数、不能使用new关键字

    let Car = (title,color)=>{
    this.title = title;
    this.color = color;
}
let c = new Car('Audi','black');//Car is not a constructor

箭头函数不能使用argument

let fn = ()=>{
   console.log(arguments);  // arguments is not defined
}
 fn(7,8,9,0);

特殊情况：
（1）.箭头函数只有一个参数时，可以省略小括号

let fn1 = num=>{
    console.log(num + 200);
}

fn1(200);//400

（2）.箭头函数只有一句话时，可以省略大括号

let fn2 = ()=>console.log('你好  中国山东');
 fn2();//你好  中国山东

（3）.箭头函数只有一句函数体，并且是返回值的时候，省略大括号的同时必须省略return

 let fn3 = name=>'你好' + name;
console.log(fn3('山东省济南市'));//你好山东省济南市

返回值是对象时需要在对象外面加上小括号

let fn = ()=>({name : 'Eric',age : 18,sex : '男'});
    console.log(fn());//{name: "Eric", age: 18, sex: "男"}

箭头函数没有自己的this，他的this是向上指向父级的this，如果父级没有继续向上指，直到指向window

let obj = {
            name: 'Mary',
            say: () => {
                return this; 
            },
            eat: function () {
                return {
                    study: () => {
                        return this;
                    }
                }
            }
        }
        console.log(obj.say());//Window 
        console.log(obj.eat().study());//{name: "Mary", say: ƒ, eat: ƒ}

二、扩展运算符（…）

扩展运算符主要是由…组成的

1、进行数据解构

解构数组
解构字符串
结构对象

// 解开数组
let arr = [66,88,99];
console.log(arr);//(3) [66, 88, 99]
console.log(...arr);//66    88    99

// 解开字符串
let str = "YES";
console.log(...str);//Y     E      S

// 对象不能直接解开
let obj = {name : 'Eric',age : 18};
// console.log(...obj);
// 但是对象可以使用拷贝的方式解开
let newObj = {
    ...obj
}
console.log(obj);//{name: "Eric", age: 18}
console.log(newObj);//{name: "Eric", age: 18}

进行浅拷贝

let arr = [66,88,99,[1,2,3]];
let newArr = [...arr];
console.log(arr); // [66, 88, 99, Array(3)]
console.log(newArr);//[66, 88, 99, Array(3)]
arr.push(33);
console.log(arr);// [66, 88, 99, Array(3), 33]
console.log(newArr);//[66, 88, 99, Array(3)]
//这里看似实现了深拷贝，但是数组是二维数组时，里面的数组还是浅拷贝
arr[3].push(44);
console.log(arr); //[66, 88, 99, Array(4), 33]
console.log(newArr);//[66, 88, 99, Array(4)]

三、参数运算符REST

es6引入rest参数（…变量名），用于获取函数多余参数，

let sum = (...item)=>{
    let result = 0;
    item.forEach(element => {
        result += element;
    });
    return result;
}

console.log(sum(1,2,3,4,5,6,7,8,9));//45
console.log(sum(1,2,3,4,9));//19

rest参数与arguments之间的区别

arguments不能再箭头函数中使用，但是rest可以
arguments不能在形参列表中有任何标识，rest必须在形参中接收实参
rest参数可以和普通参数一起进行传递，但rest参数必须放在最后

四、Symbol类型

symbol是es6中新增的一种基础数据类型，主要作用是保证数据的唯一性，（列如：保证对象键名不会因为重复被覆盖）即使同时定义的两个，传递两个相同的参数他们还是不会完全相等


let sym1 = Symbol();
let sym2 = Symbol();
console.log(sym1 == sym2);//false
console.log(sym1);//17 Symbol()
console.log(sym2);//18 Symbol()

let name = Symbol('姓名');
let user = Symbol('姓名');

console.log(name == user);// false
console.log(name);//24 Symbol(姓名)
console.log(user);//25 Symbol(姓名)

五、set和map集合

set集合

set集合是一个新的数据结构，和数组的结构类似。它没有顺序、没有下标、也没有键，并且在set中不可能出现两个相同的元素。
set是一个构造，使用的时候需要进行实例化，可以传递一个数组为参数，也可不传。
常用内置属性和方法：

size属性：查看set集合中元素的数量
add （）：添加一个set集合元素
delete （）：删除一个set集合元素
has （）：查看某个元素是否存在在集合中
clear ()：清空集合

// 创建一个数组
let arr = [1,7,3,0,1];
// 定义set集合
let set = new Set(arr);
let set_temp = new Set();

console.log(set_temp);//Set(0) {}
console.log(set);//Set(4) {1, 7, 3, 0}

// 使用set去重数组
 let newArr = [...set];
 console.log(newArr);//Set(4) {1, 7, 3, 0}


// set中的内置方法
// add方法  添加一个元素
set.add('Eric');
set.add('Eric');
console.log(set);//Set(5) {1, 7, 3, 0, "Eric"}

// size属性  查看set中元素的数量
console.log(set.size);//5

// delete方法  删除一个元素
console.log(set.delete(0));//true
console.log(set);//Set(4) {1, 7, 3, "Eric"}

// has方法  查看元素是否在集合中
console.log(set.has(0));//false
console.log(set.has('Eric'));//true

// clear方法  清空集合
set.clear();
console.log(set);//Set(0) {}

map集合

map集合也是一个无序不重复的集合，他的数据结构类似对象，内部是由键值对组成的（键不重复，值可以重复）。
map也是一个构造，使用时需要实例化，可以传参（参数是一个二维数组，第一个是键，第二个是值）也可不传。
常用属性和方法：

size属性：查看map集合中元素的数量
set （）：添加一个set集合元素
get （）：获取集合中的某个元素
delete （）：删除一个map集合元素
has （）：查看某个元素是否存在在集合中
clear （）：清空集合

    let arr = [
    ['name','Eric'],
    ['name','Mary'],
    ['age',13],
    ['sex','女'],
    ['jg','四川成都'],
    ['address','四川成都']
];

// 实例化一个集合
let map = new Map(arr);
let mapTemp = new Map();

console.log(mapTemp); //Map(0) {}
console.log(map); //Map(5) {"name" => "Mary", "age" => 13, "sex" => "女", "jg" => "四川成都", "address" => "四川成都"}


// map内置的方法
// set方法  添加元素
map.set('school','四川大学'); //
console.log(map); //Map(6) {"name" => "Mary", "age" => 13, "sex" => "女", "jg" => "四川成都", "address" => "四川成都", …}

// get方法  获取元素
console.log(map.get('name')); //Mary
console.log(map.get('age')); //13
console.log(map.get('sex')); //女

// size属性  查看数量
console.log(map.size); //6

// has方法  查看是否存在
console.log(map.has('name')); //true
console.log(map.has('user')); //false

// delete方法  删除一个元素
console.log(map.delete('jg')); //true
console.log(map); // {"name" => "Mary", "age" => 13, "sex" => "女", "address" => "四川成都", "school" => "四川大学"}

// clear方法  清空集合
map.clear();
console.log(map); //Map(0) {}

六、iterator

es6新增的一种可迭代数据类型的迭代工具，主要作用是迭代数据结构，为不同的数据结构提供统一的访问机制，使得数据结构成员能够按照某种次序排序，但是不能迭代对象

原理：

创建一个指针，指向数据结构的起始位置，第一次调用next（）指针自动指向数据结构的第一个成员，接下来不断调用next（）指针一直向后移动直到指向最后一个成员。
每次调用next（）的时候返回的值为{value：‘数据，’ done：false/ true}(到最后没有数据了才会返回true)

使用：Symbol.iterator方法进行迭代

// 迭代数组
let arr = [66,88];
let arrIter = arr[Symbol.iterator]();
console.log(arrIter.next());//{value: 66, done: false}
console.log(arrIter.next());//{value: 88, done: false}
console.log(arrIter.next());//{value: undefined, done: true}


// 迭代字符串
let str = 'YES';
let strIter = str[Symbol.iterator]();
console.log(strIter.next());//{value: "Y", done: false}
console.log(strIter.next());// {value: "E", done: false}
console.log(strIter.next());//{value: "S", done: false}
console.log(strIter.next());//{value: undefined, done: true}


// 迭代set集合
let set = new Set(arr);
let setIter = set[Symbol.iterator]();
console.log(setIter.next());//{value: 66, done: false}
console.log(setIter.next());//{value: 88, done: false}
console.log(setIter.next());//{value: undefined, done: true}


// 迭代Map
let map = new Map([['name','Eric'],['age',18]]);
let mapIter = map[Symbol.iterator]();
console.log(mapIter.next());//{value: Array(2), done: false}
console.log(mapIter.next());//{value: Array(2), done: false}
console.log(mapIter.next());//{value: undefined, done: true}


// 不能迭代对象
let obj = {name : 'Eric',age : 18};
let objIter = obj[Symbol.iterator]();//obj[Symbol.iterator] is not a function

想要迭代对象需要用Object.keys()和Object.values()方法取出对象中的键和值，再分别迭代两个数组

语法糖

for of 是iterator的语法糖使用for…of语句可以迭代所有的iterator可迭代数据类型，类似于for…in

// 迭代数组
let arr = [66,88,99,66,88];
for (let item of arr){
    console.log(item);
}
// 迭代字符串
let str = 'YES';
for (let item of str){
    console.log(item);
}
// 迭代set集合
let set = new Set(arr);
for (let item of set){
    console.log(item);
}
// 迭代Map
let map = new Map([['name','Eric'],['age',18]]);
for (let item of map){
    console.log(item);
}

forEach for…in和for…of之间的区别是什么

forEach是数组中的一个方法，只能遍历数组
for…in可遍历数组、对象他是唯一一个可以遍历对象的for流程语句
for…of是iterator的语法糖可以迭代iterator中所有的可迭代数据类型

七、generator

ES6提供的解决异步编程的方案之一，它是一个状态机可控制函数执行过程。（可暂停函数(惰性求值), 内部yield可暂停，外部调用next方法可启动每次返回的是yield后的表达式结果）

使用

定义generator需要在function后面加上* 调用函数不会打印任何函数数据，而是会返回一个指针对象。调用指针对象中的next方法，来执行generator函数中的内容，返回结果和iteraator相似

// generator
function* gener(){
    yield '第一次';
    yield '第二次';
    yield '第三次';
    return 'gameover';
}
//我们要控制函数的执行过程  暂停函数
let go = gener();
console.log(go.next());//{value: "第一次", done: false}
console.log(go.next());//{value: "第二次", done: false}
console.log(go.next());//{value: "第三次", done: false}
console.log(go.next());//{value: "gameover", done: true}
console.log(go.next());//{value: undefined, done: true}