ES6语法（二）

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

ly__struggle

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

阅读量158

点赞数

分类专栏： 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}

ly__struggle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6语法（二）

一、箭头函数es6允许使用（=>）声明函数，更加简单、灵活箭头函数与普通函数的区别只能定义匿名函数箭头函数没有原型对象，不能使用原型对象、不能用作构造函数、不能使用new关键字 let Car = (title,color)=>{ this.title = title; this.color = color;}let c = new Car('Audi','black');//Car is not a constructor箭头函数不能使用argum
复制链接

扫一扫