ES6基础总结(上)

ES6基础总结(上)

1. let关键字

let关键字是ES6中新增的用来取代var声明变量的关键字

1.2 let声明的变量只在所处于的块级作用域(一对大括号产生的作用域)有效

if(true){
    let a=10;
    var b=20;
}
console.log(a);//a is not defined
console.log(b);//20

1.3 还可以防止循环变量变成全局变量

for(let i=0;i<2;i++){

}
console.log(i);//i is not defined

注意:使用let关键字声明的变量具有块级作用域，使用var关键字不具有该特点

1.4 不存在变量提升,必须先声明在使用

console.log(a);//a is not defined
let a=20;

1.5 暂时性死区

在块级作用域内使用let关键字声明的变量，会被整体绑定到这个块级区域内，不再受外部代码影响

2. 变量的解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。

2.1 数组的解构

const F4=['zz','xx','cc'];
let [z,x,c]=F4;
console.log(z);
console.log(x);
console.log(c);

2.2 对象的解构

const zhao={
    name:'zz',
    age:22,
    xiaopin:function(){
        console.log("111");
    }
}
let {name,age,xiaopin}=zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();

3. 模板字符串

ES6引入新的声明字符串的方式 ``

3.1 声明

let str=`新的字符串`;
console.log(str,typeof str);

3.2 内容可以直接出现换行符

let str=`<ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        </ul>`;

3.3 变量拼接

let lovest='zz';
let out=`${lovest}11111`;
console.log(out);//zz11111

4. 简化对象的写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

let name='zz';
let change=function(){
    console.log('111');
}
const school={
    name,
    change,
    //在对象里面声明方法的原始方式
    // import:function(){
    //     console.log("222");
    // }
    //ES6写法
    import(){
        console.log("222");
    }
}
console.log(school);

5. 箭头函数

ES6允许我们使用 箭头 (=>) 定义函数

//声明函数的原始方式
// let fun=function(){
// }
//ES6箭头函数的写法
let fn=(a,b)=>{
    return a+b;
}
//调用
let result=fn(1,2);
console.log(result);//3

5.1 箭头函数的特性

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

function getName(){
    console.log(this.name);
}
let getName1=()=>{
    console.log(this.name);
}
//设置 window 对象的 name 属性
window.name='zz';
const school={
    name:'xx';
}
//调用
//因为函数在直接调用的情况下 this 指向window
getName();//zz
getName1();//zz

//call()方法调用 该方法对于原始的函数是可以改变 this 指向的
getName.call(school);//xx
getName1.call(school);//zz

总结：
因此，箭头函数的this指向永远都是在该函数所声明的作用域下，任何方法都不会改变，因为箭头函数的this是静态的。

5.1.2 不能作为构造函数去实例化对象

const Person=(name,age)=>{
    this.name=name;
    this.age=age;
}
let me=new Person('zz',22);
console.log(me);// Person is not a constructor

5.1.3 不能使用 arguments 变量

我们通常会在函数内部使用 arguments 来保存实参

let fn=()=>{
    console.log(arguments);
}
fn(1,2,3);//arguments is not defined

5.1.4 箭头函数的简写

• 1)省略小括号：当形参只有一个的时候

let add=n=>{
    return n+n;
}
let num=add(2);
console.log(num);//4

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

let pow=n=>n*n;
console.log(pow(3));

5.1.5 案例

• 1)点击div 2s 后改变颜色

<div id="ad"></div>
    <script>
        //1. 点击div 2s 后改变颜色
        let ad=document.querySelector('#ad');
        //原始的写法
        // ad.addEventListener('click',function () {
        //     let that=this;
        //     setTimeout(function () {
        //         that.style.background='pink';
        //     },2000)
        // })
        //引入箭头函数后的写法
        ad.addEventListener('click',function () {
            setTimeout( () => {
                this.style.background='pink';
            },2000)
        })
    </script>

• 2)从数组返回偶数的元素

<div id="ad"></div>
    <script>
        const arr=[2,3,4,5,6,7,8];
        //原始的写法
        // const result=arr.filter(function (item) {
        //     if(item % 2 === 0){
        //         return true;
        //     }else{
        //         return false;
        //     }
        // })
        //引入箭头函数后的写法
        const result=arr.filter(item=>item%2===0);
        console.log(result);
    </script>

箭头函数适用于与 this 无关的回调，定时器，数组的方法回调
箭头函数不适合与 this 有关的回调，事件回调，对象的方法

6. 函数参数的默认值设置

ES6允许给函数的参数赋予初始值，具体是指形参

6.1 形参的初始值，具有默认值的参数，一般位置靠后

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

6.2默认值可以与解构赋值结合

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

7. rest参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

7.1 ES5获取实参的方式，获取到的是一个对象不是一个数组

function fun(){
    console.log(arguments);
}
fun(1,2,3);

7.2 ES6的 rest 参数

function data(...args) {
    console.log(args);
}
data('1','2','3');

res 参数必须放到参数的最后，如果有多个参数就必须放到参数的最后

function fn(a,...args,b) {
    console.log(a);
    console.log(b);
    console.log(args);
}
fn('1','2','3','4');

8. 扩展运算符

扩展运算符 … 该运算符能够将数组转换为逗号分割开的参数序列

const arr=['11','22','33','44'];
function fn(){
    console.log(arguments);
}
//在不加 ... 之前 直接打印 arr 得到的时arr数组 长度为1
fn(...arr);

虽然扩展运算符 … 和我们的res参数 … 一样，但是使用的方式不一样，res 是使用在函数的形参里面，并且是最后一个形参，而扩展运算符 … 则使用在我们函数调用的实参里面。

8.1 扩展运算符的应用

• 1)数组的合并

const arr=['11','22'];
const arr1=['33','44'];
//ES5的写法
// const add=arr.concat(arr1);
//扩展运算符写法
const add=[...arr,...arr1];
console.log(add);

• 2)数组的克隆

const arr2=['55','66'];
const arr3=[...arr2];
console.log(arr3);//'55','66'

• 3)将伪数组转换成真正的数组

<div></div>
<div></div>
<div></div>
<script>
    let div=document.querySelecter('div');
    //ES5正常打印
    //console.log(div);//__proto__:Object(伪数组)
    //利用扩展运算符
    let divs=[...div];
    console.log(divs);//__proto__:Array
</script>

9. Symbol的介绍与创建

ES6引入了一种新的数据类型Symbol，表示独一无二的值，他是JavaScript的第七中数据类型，是一种类似于字符串的数据类型。
Symbol特点：

• 1. Symbol的值是唯一的，用来解决命名冲突的问题
• 2. Symbol值不能与其他数据进行运算
• 3. Symbol定义的对象属性不能适用 for…in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名

//创建Symbol
let s=Symbol();
// console.log(s,typeof s);//Symbol() 'symbol'
let s1=Symbol('zz');
let s2=Symbol('zz');
console.log(s1=== s2);//false 虽然Symbol里面传入的值都一样 但是反返回的结果不一样，看似一样的值实际上就相当于一个是zz1一个是zz2
//Symbol.for 创建
//通过这样的方式创建我们可以通过括号内传入的字符串在确定唯一的Symbol值
let s3=Symbol.for('cc');//对象函数
let s4=Symbol.for('cc');//对象函数
console.log(s3===s4);//true

七种数据类型
Number
Null
String
Symbol
Object
Boolean
Undefined

9.1 Symbol创建对象属性

Symbol的作用就是表示独一无二的值，表示给对象添加属性和方法
向对象中添加方法 up down

let game={

};
//添加方式一
//声明一个对象
// let methods={
//     up:Symbol(),
//     down:Symbol()
// };
// game[methods.up]=function(){
//     console.log('111');
// }
// game[methods.down]=function(){
//     console.log('222');
// }
//添加方式二
let youxi={
    name:'333',
    //Symbol()是一个表达式 是一个动态的 不能直接Symbol():function(){} 因此我们需要在 Symbol()外边加一个中括号
    [Symbol('say')]:function(){
        console.log('444');
    },
    [Symbol('zibao')]:function(){
        console.log('555');
    }
};
console.log(youxi);

10. 迭代器

迭代器是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据解构只要部署iterator解构，就可以完成遍历操作
1) ES6创造了一种新的遍历命令 for…of 循环，iterator 接口主要提供 for…of 进行遍历
补充：
for in 语法里面 in 前面的变量在遍历后保存的是键名
for of 语法里面 of 前面的变量在遍历后保存的是键值
2) 原生具备 iterator 接口的数据(可用 for of 遍历)
a) Array
b) Arguments
c) Set
d) Map
e) String
f) TypedArray
g) NodeList
3) 工作原理
a) 创建一个指针对象，指向当前数据结构的起始位置

const arr=['11','22','33'];
const iterator=arr[Symbol.iterator]();
console.log(iterator);

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

const arr=['11','22','33'];
const iterator=arr[Symbol.iterator]();
console.log(iterator.next());

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

const arr=['11','22','33'];
const iterator=arr[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

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

**注意：**当需要自定义遍历数据时，要想到迭代器