ES6学习记录——let/const/解构赋值/模板字符串/简化对象写法/箭头函数/rest/spread

ES6学习记录

let变量

块级作用域

{
var girl='Mary'
}
console.log(girl)可以显示成功
{
let girl='Mary'
}块级作用域 只能在块中生效
如果在if else while for中用let也属于块级作用域
console.log(girl)不能显示

不存在变量提升

console.log(song);
var song = 'nnn';
不会报错
console.log(song);
let song = 'nnn';

不影响作用域链

{
let school = 'abx';
function fn(){
console.log(school);
}
fn();
}

const声明常量

• 一定要赋初始值
• 常量使用大写且不能更改
• 也是块级作用域
• 对数组和对象的元素修改 不算对常量的修改 不会报错

const TEAM = ['mary','Bob'];
TEAN.push('make')

变量的解构赋值

 	//数组的解构
        const F4 = ['mary','liu','tom'];
        let [m,l,t] =F4;
        console.log(m);
        console.log(l);
        console.log(t);
    //对象的解构
     const zhao = {
            name:'mary',
            age:'18',
            xiaopin: function() {
                console.log("演小品");
            }
        };
        let {name,age,xiaopin} = zhao;
        console.log(name);
        console.log(age);
        console.log(xiaopin);

模板字符串

反引号
1.内容中可以直接出现换行符

2.可以进行变量拼接

		let lovest = 'mary';
        let out = `${lovest}是巴拉巴拉`;
        console.log(out);

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

let name = 'marg';
        let change = function() {
            console.log('balaaa');
        }
        const school = {
            name:name,//直接写name
            change:change//直接写change
            improve：function(){
            console.log("再来");
            }
            //可以简写为
            improve() {
            console.log(..)
            }
        }
        console.log(school);

箭头函数

ES6允许使用箭头定义函数

1.普通声明一个函数
let fn = function() {
}
箭头函数声明和调用函数
let fn = (a,b) => {
return a+b;
}
调用函数
let result = fn(1,2);
console.log(result);
2.不能作为构造实例化对象
let Person = (name,age)=>{
this.name = name;
this.age = age;
}
let me = new Person('xiao',30);
console.log(me);错误的
3.不能使用arguments变量（获取函数在调用的时候的所有实参）
let fn = ()=>{
console.log(argument);
}
fn(1,2,3);错误的
4.箭头函数的简写
4.1 省略小括号 当形参有且只有一个的时候
let add = n =>{
return n+n;
}
console.log(add(9));
4.2 省略花括号 当代码体只有一条语句的时候
let pow = (n) => {
return n*n;
}
console.log(pow(9));
可以写为：
let pow = n => n*n;
省略花括号 省略return
console.log(pow(9));

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

参数默认值

ES6允许给函数参数赋初始值

1.形参初始值 具有默认值的参数 一般位置放到后面
		function add(a,b,c=10){
            return a+b+c;
        }
        let result = add(1,2);
        如果c没有参数就用10 如果add中给c了参数 就用给定的参数

2.与解构赋值结合
 		function connent(options) {
            let host = options.host;
            let username = options.username;
        }
        connent({
            host:'localhost',
            username:'root',
            password:'root',
            port:3306
        })
        function可以写为
        function connent({host="127.0.0.1",username,password,port}) {
            console.log(host)           
        }

rest参数

用arguments
		function data(){
            console.log(arguments);
        }
        data('a','b','c')
       输出的是一个对象
用rest
 		function data(...args){
            console.log(args);
        }
        data('a','b','c')
       输出的是一个数组

rest参数必须要放到参数的最后

spread扩展运算符

能将数组转换为逗号分割的参数序列

		const menu = ['a','b','c'];
        function bottom() {
            console.log(arguments);
        }
        bottom(menu);

用argument输出结果

		const menu = ['a','b','c'];
        function bottom() {
            console.log(arguments);
        }
        bottom(...menu);

用spread输出结果

扩展运算符的应用

1.数组的合并
用concat写法
		const arr1 = ['a','b'];
        const arr2 = ['c','d'];
        const newarr = arr1.concat(arr2);
        console.log(newarr);
用扩展运算符
		const newarr = arr1.concat(arr2);

2.数组的克隆（浅克隆）
 		const san = ['e','g','m'];
        const san1 = [...san];
        console.log(san1);

3.将伪数组转为真正的数组

```c
		const divs = document.querySelectorAll('div');
        console.log(divs);

类型是个对象

		const divs = document.querySelectorAll('div');
        const divArr = [...divs];
        console.log(divArr);

类型是个数组