let

不能重复声明

// var
var a = 123;
var a = 345

// let
let a = 123;
let a = 345;

块级作用域

// var
{
    var a = 123;
}
console.log(a)

// let
{
    let a = 123
}
console.log(a)

不存在变量提升

// var undefined
console.log(a);
var a = 123;

// let 报错
console.log(a);
let a = 123;

不影响作用域链

{
    let a = 123;
    function fn() {
        console.log(a);
    }
    fn();
}

const

  • 一定要赋初始值
  • 一般常量使用大写（潜规则）
  • 常量的值不能修改
  • 块级作用域
  • 对于数组和对象的修改，不算做对常量的修改，不会报错
const TEAM = ['Uzi','Mlxg','Ming','Letme'];
TEAM.push('Meiko');

变量的解构赋值

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

//对象的解构
const zhao = {
    name: '赵本山',
    age: '不详',
    xiaopin: function() {
        console.log("我可以演小品");
    }
};

let {name, age, xiaopin} = zhao;
console.log(zhao);
console.log(age);
console.log(xiaopin);
// xiaopin();
zhao.xiaopin();

模板字符串

  • 引入新的声明字符串方式：反引号

声明

let str = `我也是一个字符串`
console.log(str, typeof str);

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

let str = `<ul>
                <li>
					沈腾
				</li>
           </ul>`;

变量拼接

let lovest = '魏翔';
let out = `${lovest}是我心目中最搞笑的演员`
console.log(out);

对象的简化写法

let name = '';
let change = function() {
    console.log('');
}
const school = {
    name,
    change,
    /*
    improve1: function() {
        
    }
    */
    improve2() {
        
    }
}

箭头函数

  • 适合与this无关的回调（比如定时器，数组的方法回调）
  • 不适合与this有关的回调（DOM元素的事件回调，对象的方法）

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

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

window.name = '尚硅谷'
const school = {
    name: "ATGUIGU"
}

// 直接调用
// getName();  尚硅谷
// getName2();  尚硅谷

// call方法调用
// getName.call(school);  ATGUIGU
// getName2.call(school);  尚硅谷

不能作为构造实例化对象

// 反例
let Person = (name, age) => {
    this.name = name;
    this.age = age;
}

let me = new Person('xiao',30);
console.log(me);

不能使用arguments变量

// 反例
let fn = () => {
    console.log(arguments);
}
fn(1,2,3);

箭头函数的简写

省略小括号（当形参有且只有一个的时候）

/*
let add = (n) => {
    return n + n;
}
*/
let add = n => {
    return n + n;
}

console.log(add(9));

省略花括号，当代码体只有一条语句的时候

/*
let pow = (n) => {
	return n * n;
}
*/
let pow = n => n*n;
console.log(pow(9));

函数参数的默认值

形参初始值，一般位置靠后（潜规则）

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

与解构赋值结合

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

rest参数

// es5的获取实参方式：arguments  得到对象
function date1() {
   console.log(arguments); 
}
date1(1,2,3);

// es6的rest参数  得到数组，可以使用数组的方法：filter some every map
function date2(...args) {
    console.log(args);
}
date2(1,2,3);

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

扩展运算符

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

用法

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

// 声明一个函数
function chunwan() {
    console.log(arguments);
}

chunwan(tfboys);  // 得到一个参数，数组
chunwan(...tfboys);  // 得到三个参数
// 等同于chunwan('易烊千玺','王源','王俊凯')

可以复制对象，不能展开对象

let person = {name: 'tom', age: 18};
let person2 = {...person};

person.name = 'jerry';
console.log(person.name);  //jerry
console.log(person2.name);  //tom

适用场景

数组的合并

const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];

// const zuixuanxiaopingguo = kuazi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];

数组的克隆（有引用类型是浅拷贝）

const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];

将伪数组转化为真正的数组

const divs = document.querySelectorAll('div');  //Obj
const divArr = [...divs];  //arguments也可以转，但是有rest，不需要

最简单面试题

有一个数组，所有值都是number类型的，计算和。

function sum(...numbers) {
    return numbers.reduce((preValue,currentValue)=>{
        return preValue + currentValue;
    });
}
console.log(sum(1,2,3,4));

Q.E.D.

我还有很多想要完成的梦想。