es6特性(1)

测试es6特性(1)

目录

• 1.let声明变量
  • (1)声明格式
  • (2)不允许重复声明
  • (3)块级作用域
  • (4)不存在变量提升
  • (5)不影响作用域链
• 2.const声明常量
  • (1)声明格式
  • (2)声明常量一定要赋初始值
  • (3)常量的值不能修改
  • (4)块级作用域
  • (5)允许对于数组和对象的元素修改
• 3.变量的解构赋值
  • (1)数组的解构
  • (2)对象的解构
• 4.对象的简化写法
• 5.箭头函数
  • (1)声明格式
  • (2)this是静态的
  • (3)不能作为构造实例化对象
  • (4)不能使用arguments变量
  • (5)箭头函数的简写
• 6.函数参数默认值设置
  • (1)形参初始值
  • (2)与结构赋值结合使用
• 7.rest参数
  • (1)es5获取函数的实参
  • (2)es6 rest参数
• 8.扩展运算符
  • (1)数组的扩展运算符
• 9.symbol类型
  • (1)symbol声明方法
  • (2)symbol不能运算
• 10.symbol的应用
  • (1)为对象添加独一无二的方法名
  • (2)symbol作为方法名
• 11.迭代器
  • (1)迭代器(iterator)
  • (2)迭代器的原理
• 12.生成器
  • (1)生成器函数的声明格式
  • (2)生成器函数的参数
  • (3)生成器函数的实例

es6特性(1)

1.let(对比var)//声明变量

(1)声明格式

let a = 1;
let b,c,d;
let e = 2,f='iloveyou',g = [];

(2）不允许重复声明(var允许)

let star="she";
let star="he";

(3)块级作用域(var为全局)

{
    let gitl="swy"
}
console.log(gitl); 

(4)不存在变量提升 (var存在)

console.log(song);
let song='bjhyn'

(5)不影响作用域链

{
    let school="erzhong";
    function test() {
        console.log(school);
    }
    test();
}

正常输出

2.const声明常量

(1)声明格式

const school = "erzhong";
console.log(school);

(2)声明常量一定要赋初始值

const A;

(3)常量的值不能修改

const SCHOOL = "erzhong";
SCHOOL = "erzhong2";

(4)块级作用域

{
    const PLAYER='UZI'
}
console.log(PLAYER);

(5)对于数组和对象的元素修改，不算做对常量的修改，不会报错

const TEAM=['UZI','MLXG','XIAOBAO','XIAOHU','XIAOBAI'];
TEAM.push('XIAOBAI2');

3.变量的解构赋值

(1)数组的解构

const TEAM=['UZI','MLXG','XIAOBAO','XIAOHU','XIAOBAI'];
let [f1,f2,f3,f4,f5] = TEAM;
console.log(f1,f2,f3,f4,f5);

(2)对象的解构

const zhao={
    name:'zhao',
    age:18,
    school:'erzhong',
    xiaopin:function() {
        console.log('我可以唱歌');
    }
}
const {name,age,school,xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(school);
xiaopin()

4.对象的简化写法

let name = 'zhao';
let change=function() {
    console.log('我们可以改变你！！');
}    

const school = {
    name, // 等价与name:name,
    change // 等价与change:change   
}

5.箭头函数

(1)声明格式

let fn=(a,b) => {
    return a + b;
}
// 等效于 let fn=function(a,b) {
    // return a + b;
// }
// 调用函数
let result = fn(1, 2);
console.log(result);

(2)this是静态的，this始终指向函数声明时所在作用域下的this的值

function getName() {
    console.log(this.name);
}
let getName2=() => {
    console.log(this.name);
}
window.name='sry';
const school = {
    name:'erzhong',
}
//直接调用
getName();
getName2();

//call方法调用
getName.call(school);
getName2.call(school);

(3)不能作为构造实例化对象

let Person=(name, age) => {
    this.name=name;
    this.age=age;
}
let me = new Person('sry', 18);
console.log(me);

(4)不能使用arguments变量

let fn = (a, b) => {
    console.log(arguments[0]);
}
fn(1, 2);

(5)箭头函数的简写

1.省略小括号，当形参有且只有一个的时候

2.省略花括号，当代码体只有一条语句的时候，此时return必须省略，此时语句的执行结果就是函数的返回值

let add = n => {
    return n + n;
}
console.log(add(10));

let pow= n => n * n;

console.log(pow(10));

6.函数参数默认值设置

(1)形参初始值。潜规则：具有默认值的参数，一般位置靠后

function add(a, b, c=10) {
    return a + b +c;
}
let result = add(1, 2);
console.log(result);

(2)与结构赋值结合使用

function connect({ host='127.0.0.1', username, password, port }) {
    console.log(host);
    console.log(username);
    console.log(password);
    console.log(port);
}
connect({
    host: 'localhost',
    username: 'root',
    password:'123456',
    port:3306
});    

7.rest参数

(1)es5获取函数的实参

function date(){
    console.log(arguments);   
}
date(1, 2, 3, 4, 5);
// 输出为对象

(2)es6 rest参数

function date(...args){
    console.log(args);   
}
date(1, 2, 3, 4, 5);
// 输出为数组

//rest参数必须要放到参数最后
function fn(a,b,...args) {
    console.log(a);
    console.log(b);
    console.log(args);
}
fn(1, 2, 3, 4, 5, 6, 7);

8.扩展运算符

(1)数组的扩展运算符

//[...]扩展运算符能将[数组]转换为逗号分隔的[参数序列]
const tfboys = ['王俊凯', '王源', '易烊千玺'];// =>'王俊凯', '王源', '易烊千玺'
function chunwan(){
    console.log(arguments);
}
chunwan(...tfboys);

9.symbol类型

(1)symbol声明方法

let s = Symbol();
console.log(s,typeof s2);
let s2 = Symbol('sry');
let s3 = Symbol('sry');
console.log(s2);
console.log(s2 === s3); // false,sry只是一个标志，内在编码不同
// Symbol.for()方法可以创建一个全局唯一的Symbol
// 如果Symbol.for()方法的参数是一个已经存在的Symbol，则返回这个Symbol，否则
let s4 = Symbol.for('he');
let s5 = Symbol.for('he');
console.log(s4);
console.log(s4 === s5); // true

(2)symbol不能运算

let s = Symbol('sry');
let result=s+100;
let result2=s+"100";

10.symbol的应用

(1)为对象添加独一无二的方法名

//为game添加两个方法,up,down
let game = {
    name: 'cs6',
    up: function() {
        console.log('启动');
    },
    down: function() {
        console.log('关闭');
    }
}
//不确定game对象是否有up方法
let method = {
    up:Symbol(),
    down:Symbol()
};
game[method.up] = function() {
    console.log('我可以改变形状');
}
game[method.down] = function() {
    console.log('我可以改变颜色');
}
console.log(game);

(2)symbol作为方法名

let youxi={
    name:'狼人杀',
    // Symbol('up'):function() {  symbol是一个动态值，不能直接作为方法名称
    //     console.log('启动游戏');
    // },
    [Symbol('say')]:function() {
        console.log('我可以发言');
    },
    [Symbol('zibao')]:function() {
        console.log('我可以自爆');
    }
}
console.log(youxi);

11.迭代器

(1)迭代器(iterator)是一种接口

为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

使用新的遍历命令for...of循环遍历数据结构时，实际上就是调用该数据结构的Iterator接口。

const xiyou=['孙悟空','猪八戒','沙和尚','唐僧'];
//使用for...of循环遍历数组的键值
for(let v of xiyou) {
    console.log(v);
}
//使用for...in循环遍历数组的键名
for(let i in xiyou) {
    console.log(i);
}

(2)迭代器的原理

a) 创建一个指针对象，指向当前数据结构的起始位置

b) 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员

c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员

d) 每调用 next 方法返回一个包含 value 和 done 属性的对象

const xiyou=['孙悟空','猪八戒','沙和尚','唐僧'];
let iterator = xiyou[Symbol.iterator]();
console.log(iterator); 
console.log(iterator.next());
console.log(iterator.next());    
console.log(iterator.next()); 
console.log(iterator.next()); 

12.生成器

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

(1)生成器函数的声明格式

function * gen (){
    console.log('开始执行生成器函数');
    yield '孙悟空';
    yield '猪八戒';
    yield '沙和尚';
    yield '唐僧';
}
let iterator = gen();
iterator.next()//首个元素为方法，直接调用
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

function * gen (){
    console.log('111');
    yield ;//yield相当于暂停函数执行
    console.log('222');
    yield ;
    console.log('333');
    yield ;
    console.log('444');
    yield ;
    console.log('555');
}
let iterator = gen();
iterator.next()
iterator.next()
iterator.next()
iterator.next()
iterator.next()

(2)生成器函数的参数

function * gen (arg){
    console.log(arg);
    let  one=yield 1;
    console.log(one);
    let two=yield 2;
    console.log(two);
    let three= yield 3;
    console.log(three);
}
let iterator = gen('sry');
console.log(iterator.next());//next方法可以传入实参
console.log(iterator.next('sry2'));//此参数将作为第二个yield的返回值
console.log(iterator.next('sry3'));
console.log(iterator.next('sry4'));

(3)生成器函数的实例

//需求：1s后控制台输出111   2s后输出222   3s后输出333
// setTimeout(() => {
//     console.log('111');
//     setTimeout(() => {
//         console.log('222');
//         setTimeout(() => {
//             console.log('333');
//         }, 3000);  
//     }, 2000);  
// }, 1000);        
        
function one() {
    setTimeout(() => {
        console.log('111');
        iterator.next();//直接放在第一个函数后面自动往后调用
    }, 1000);
}
function two() {
    setTimeout(() => {
        console.log('222');
        iterator.next();
    }, 2000);
}
function three() {
    setTimeout(() => {
        console.log('333');
    }, 3000);
}
function *gen() {
    yield one();
    yield two();
    yield three();
}
//使用生成器函数来控制异步执行
let iterator = gen();
iterator.next();