ES6的学习记录

提示：根据视频学习的一些记录

一、day1的学习内容

1.let关键字

1).变量不能重复声明

//1.变量不能重复声明
    // let star = '杨幂';
    // let star = '小狐狸'

2).块儿级作用域

//2.块儿级作用域
    //if else while for
    // {
    //     let body = '魏大勋';
    // }
    // console.log(body);
    //会报错Uncaught ReferenceError: body is not defined at 01.let关键字.html:65

3).不存在变量提升

// console.log(song);
    // let song = '爱的供养';
    //会报错Uncaught ReferenceError: Cannot access 'song' before initialization at 01.let关键字.html:69

4).不影响作用域链

//4.不影响作用域链
    {
        let school= '尚硅谷';
        function fn(){
            console.log(school);
        }
        fn();
    }
    //会打印出尚硅谷

2.const关键字

1).一定要赋初始值

//1.一定要赋初始值
const a;

2).一般常量使用大写（潜规则）

// 2.一般常量使用大写（潜规则）
const a = 100;

3).常量的值不能修改

const SCHOOL = '西南石油大学';
// 3.常量的值不能修改
SCHOOL = '西南交通大学';
//会报错Uncaught TypeError: Assignment to constant variable. at 02.const关键字.html:64

4).块儿级作用域

{
	const PLAYER = 'xiaochen';
}
console.log(PLAYER);
//会报错Uncaught ReferenceError: PLAYER is not defined at 02.const关键字.html:70

5).对于数组和对象元素的修改

// 5.对于数组和对象元素的修改，不算做对常量的修改，不会报错
const TEAM = ['China','American'];
TEAM.push('Canada');
//是不会报错的

3.变量的解构赋值

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

1).数组的解构

const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao,liu,zhao,song] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);

2).对象的解构

const zhao = {
        name: '赵本山',
        age: '未知',
        xiaopin: function(){
            console.log("我可以演小品");
        }
    }
    // let {name,age,xiaopin} = zhao;
    // console.log(name);
    // console.log(age);
    // console.log(xiaopin);
    // xiaopin();

    let {xiaopin} = zhao;
    xiaopin();

4.模板字符串

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

1).内容可以直接出现换行符

let str = `<ul>
                <li>沈腾</li>
                <li>马丽</li>
                <li>常远</li>
                <li>艾伦</li>
            </ul>`

2).变量的拼接

let lovest = '马丽';
let out = `${lovest}是我心中最好的喜剧演员`;
console.log(out);
//打印结果：马丽是我心中最好的喜剧演员

5.对象的简化写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法,这样的书写会更加简洁

<script>
    let name = 'xiaochen';
    let change = function(){
        console.log('你是最棒的！');
    }

    // const people = {
    //     name : name,
    //     change:change,
    //     speak:function(){
    //         console.log('是的，我是最棒的！');
    //     }
    // }
    //等价于
    const school = {
        name,
        change,
        speak(){
            console.log('是的，我们是最棒的！');
        }
    }

    console.log(school);
</script>

控制台运行结果：

6.箭头函数

ES6允许使用箭头（=>）来定义函数

1).声明函数的两个方式

let fn = function(){

    }
    let fn1 = (a,b) => {
        return a + b;
    }
    调用函数
    let result = fn1(1,2);
    console.log(result);   //控制台结果为3

2).this是静态的

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

function getName(){
    console.log(this.name);
}
let getName2 = () => {
    console.log(this.name);
}

window.name = '小陈';
const school = {
    name:'陈陈'
}

//直接调用
getName();   //打印结果：小陈
getName2();   //打印结果：小陈

// call 方法调用
getName.call(school);    //打印结果：陈陈
getName2.call(school);    //打印结果：小陈

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

let peerson = (name,age) => {
    this.name = name;
    this.age = age;
}
let me = new person('小陈',19);
console.log(me);
//打印结果：Uncaught ReferenceError: person is not defined at 06.箭头函数.html:89

4).不能使用 arguments 变量

let fn= () => {
       console.log(arguments);
   }
   fn(1,3,2);
   //打印结果：Uncaught ReferenceError: arguments is not defined at fn (06.箭头函数.html:95) at 06.箭头函数.html:97

5).箭头函数的简写

// 1).省略小括号，当形参有且只有一个的时候
 let add  = (n) => {
     return n + n;
 }
 //等价于
 let add  = n => {
     return n + n;
 }
 console.log(add(8));   //打印结果16

 //2).省略花括号，当代码体只有一条语句的时候，此时 return 语句必须省略，而且语句的执行结果就是函数的返回值
 let pow = (n) => {
     return n * n;
 }
 //等价于
 let pow = n => n * n;
 console.log(pow(6));   //打印结果36

7.参数默认值

1).形参初始值

//1.形参初始值    具有默认值的参数，一般位置要靠后(潜规则)
    function add(a,b,c) {
        return a + b + c;
    }
    console.log(add(1,2));   //打印结果 NaN
    console.log(add(1,2,3));   //打印结果 6

    function add(a,c = 10,b) {
        return a + b + c;
    }
    console.log(add(1,2));   //打印结果 NaN

2).与解构赋值结合

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



    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
    })



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

8.rest参数

1).ES5获取实参的方式

	function data (){
        console.log(arguments);   //不是数组，是一个对象
    }
    data('小红','小明','小玲');

2).rest参数

	function data(...args){
        console.log(args);
    }
    data('小橙','小黄','小蓝');   //返回的是数组，就可以使用 filter some every map等

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

9.spread扩展运算符

扩展运算符能将 数组 转换为逗号分隔的 参数序列

1).扩展运算符的使用

//声明一个数组
const tfboys = ['易烊千玺','王源','王俊凯'];
// => '易烊千玺','王源','王俊凯'

//声明一个函数
function chunwan(){
    console.log(arguments);
}
chunwan(tfboys);   //0: (3) ["易烊千玺", "王源", "王俊凯"]
chunwan(...tfboys);  //Arguments(3) ["易烊千玺", "王源", "王俊凯", callee: ƒ, Symbol(Symbol.iterator): ƒ] 0: "易烊千玺" 1: "王源" 2: "王俊凯"

2).扩展运算符的应用

数组的合并
数组的克隆
将伪数组转为真正的数组

<script>
    //1.数组的合并
    const kuaizi = ['王太利','肖央'];
    const fenghuang = ['曾毅','玲花'];
    // const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
    //等价于
    const zuixuanxiaopingguo = [...kuaizi,...fenghuang];
    console.log(zuixuanxiaopingguo);  //["王太利", "肖央", "曾毅", "玲花"]

    //2.数组的克隆
    const sanzhihua = ['8','5','7'];
    const sanyecao = [...sanzhihua];
    console.log(sanyecao);  //["8", "5", "7"]

    //3.将伪数组转为真正的数组
    const divs = document.querySelectorAll('div');
    const divarr = [...divs];
    console.log(divarr);  //[]
</script>

10.Symbol数据类型