0基础进大厂，第12天：ES6语法基础篇

let、const VS var

let声明的变量不存在声明提升，var存在
var在全局声明的变量，会成为window的属性，let不会
let 不允许重复声明，var可以
let 与 {} 会形成块级作用域，var不会

来看几份案例：

案例一：

ini 复制代码

// 声明提升
console.log(a);
var a = 10;

输出 undefined

案例二：

ini 复制代码

//用var声明的变量会添加到window对象中，用let声明的变量不会添加到window对象中
let age = 18;
var age1 = 19;
console.log(window.age1);
console.log(window.age);

案例三：

案例四：

报错：无法在变量声明之前访问该变量

ini 复制代码

//暂时性死区
let age = 18;
if (1) {
    console.log(age);
    let age = 19;
}

变量的解构、赋值

案例一：

如果在es6之前，我们想给多个变量声明赋值，大多数人会是这样做的：

ini 复制代码

let a = 1;
let b = 2;
let c = 3;

es6 新增解构，可以这样声明、赋值变量

ini 复制代码

let [a, b, c] = [1, 2, 3];

遵循结构一致

ini 复制代码

const arr = [1, [2, 3, [4], 5]]
const [a, [b, c, [d], e]] = arr;

案例二

变量b接收的是一个数组

css 复制代码

// const [a, ...b] = [1, 2, 3, 4, 5]
// console.log(a);
// console.log(b);

同理：

ini 复制代码

const [a, c, ...b] = [1, 2, 3, 4, 5]
console.log(a);
console.log(c);
console.log(b);

案例三： let {自定义的变量名：被接收对象里的属性名，...} = 被接收对象

css 复制代码

const obj = {
    name: 'zs',
    age: 18,
    like: {
        n: '打篮球'
    }
}
let { name:name, age:age, like: { n:n } } = obj;

如果自定义的变量名和属性名相同的话，有省略写法：

vbnet 复制代码

const sex = '男'
const obj = {
    name: 'zs',
    age: 18,
    like: {
        n: '打篮球'
    }
}
let { name, age, like: { n } } = obj;

案例四：

字符串的解构

arduino 复制代码

const [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e);

获取字符串的长度：

ini 复制代码

const str = 'hello';
let { length } = str;
console.log(length);

案例五：

函数参数的解构

这份代码看起来是有点多此一举了。

php 复制代码

function fn({ x: a, y: b }) {
    return a + b;
}
fn({ x: 1, y: 2 })

那么来看看这份代码：

scss 复制代码

function fn1(...args) {
    console.log(args);
}
fn1(1, 2, 3, 4, 5)

设置默认值。

如果不传入参数也会有一个初始值，为了项目某些判断条件的正常执行

php 复制代码

function fn(x = 1, y = 1) {
    return x + y;
}
fn(1, 2)

arguments代表函数的参数列表

scss 复制代码

function fn() {
    console.log(arguments);
}
fn(1, 2, 3, 4, 5)

变量的嵌入

es6以前写一个简单的"hello xxx"都是通过字符串拼接实现的

es6以后，是通过反引号里用${}内嵌变量实现的

javascript 复制代码

let myname = 'zs';
console.log("hello" + myname);
console.log(`hello ${myname}`);

let of

ini 复制代码

let myname = 'zs';
for (let x of myname) {
    console.log(x);
}

数组的拼接

ini 复制代码

const arr = [1, 2, 3, 4, 5, 6, 5, 1];
let newArr = ['a', 'b', 'c', 'd', 'e'];
newArr = arr.concat(newArr);
console.log(newArr);

输出结果：

.concat()方法相当于以下的解构的解法

ini 复制代码

const arr = [1, 2, 3, 4, 5, 6, 5, 1];
let newArr = ['a', 'b', 'c', 'd', 'e'];
arr.push(...newArr);
console.log(newArr);

数组的排序：

默认的sort（）方法并不能很好的实现排序效果，因为它是按照ASCII 码来确定的，所以需要按照以下的方法来排序。

从大到小

css 复制代码

const arr = [1, 2, 3, 4, 5, 6, 5, 1];
arr.sort((a, b) => {
    return b - a;
})
console.log(arr);

从小到大（换成b-a）

css 复制代码

const arr = [1, 2, 3, 4, 5, 6, 5, 1];
arr.sort((a, b) => {
    return b - a;
})
console.log(arr);