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);
相关推荐
伍哥的传说3 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
前端程序媛-Tian4 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao4 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0014 小时前
实现视频实时马赛克
linux·前端·javascript
爱分享的程序员5 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉5 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
草履虫建模5 小时前
RuoYi-Vue 项目 Docker 容器化部署 + DockerHub 上传全流程
java·前端·javascript·vue.js·spring boot·docker·dockerhub
阿丽塔~7 小时前
【vue3+vue-pdf-embed】实现PDF+图片预览
javascript·vue.js·pdf
zhuà!9 小时前
taro+react重新给userInfo赋值后,获取的用户信息还是老用户信息
javascript·react.js·taro
超浪的晨9 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发