前端基础_ES6

wuyangnju 发布于2019-08-23 14:39 / 2249人阅读

摘要：声明三大关键字声明变量语法语法声明常量语法声明变量特性支持函数作用域支持预解析所谓变量提升支持重复声明同域同名变量函数作用域局部作用域预解析重复声明声明变量推荐特性支持块作用域不支持预解析不支持重复声明同域同名变量块作用域局部作用域不支持预

声明

三大关键字

声明变量：
 var （ES5语法） 
 let （ES6语法）

声明常量：
 const  (ES6语法)

var 声明变量

特性
1、支持 函数作用域
2、支持 JS预解析  （所谓变量提升）
3、支持 重复声明  （同域同名变量）

1、函数作用域（局部作用域）
function show(){
    var a = "34";
}
console.log(a);      //underfind

2、JS预解析
console.log(name);   //underfind
var name = "1234";

3、重复声明
var a = "123";
var a = "4565";

let 声明变量（推荐）

特性
1、支持 块作用域
2、不支持 JS预解析
3、不支持 重复声明  （同域同名变量）

1、块作用域（局部作用域）
if(true){
    var a = "34";
}
console.log(a);      //underfind

2、不支持JS预解析
必须声明后才能使用，否则报错

const 声明常量

从ES6开始引入常量概念
特性
1、let所有特性
2、声明时必须赋值，否则报错
3、定义常量后，再也不能更改值

1、声明时必须赋值，否则报错
const a;  //报错
const a = 11;   //正确

2、定义常量后，基本类型是不能改了，但如果是对象或数组，是可以改对象内或数组内的值
const a = ["22","bb"];
a[0] = "你好";  //["你好","bb"];

只声明，不赋值

var a;  //undefined 
let b;  //undefined

JS预解析

解构赋值

应用场景

对象 与 数组

ES5 做法

var obj = {
    name:"bbb",
    age:12
};
var name = obj.name;
var age = obj.age;

var arr = [123,"wtao"];
var a = arr[0];
var b = arr[1];

ES6 做法

let obj = {
    name:"bbb",
    age:12
};
let {name,age} = obj;
console.log(name);
console.log(age);

let arr = [123,"wtaddo"];
let [name,age] = arr;
console.log(name);
console.log(age);

函数

默认值

剩余值

箭头函数

模块化

注意事项

1、在一个项目里，多个不同模块导入（依赖）某个相同模块时，该模块只会加载并执行一次，
2、在同一个模块中，多次导入相同模块，只会加载并执行一次
3、在模块中，无论import（导入语句）写在哪个位置，执行时都会提前
4、模块有模块作用域

导入语法

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

导出语法

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

异步加载延迟执行

defer



在所有html DOM结构渲染完成和其他脚步执行完成再执行js代码

html导入js模块

1、导入普通js文件

type="application/javascript"
默认省略
默认同步加载

2、导入模块js文件

type="module"
默认异步加载（defer）

云服务器 GPU云服务器前端基础前端基础教程前端零基础零基础前端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100939.html

前端培训-初级阶段（13） - 类、模块、继承

摘要：前端培训初级阶段语法变量值类型运算符语句前端培训初级阶段内置对象函数基础内容知识我们会用到。模块定义加载模块继承中的继承依赖于原型链继承。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。该文为前...

luodongseu 2019-08-26 13:43 评论0 收藏0
再和“面向对象”谈恋爱 - 继承（五）

摘要：面向对象里最大的特点应该就属继承了。在第二篇文章里说过原型实例跟构造函数之间的继承，并且还讲了一道推算题。通过上一篇文章想必各位老铁已经熟悉了class了，这篇文章接着介绍继承。面向对象里最大的特点应该就属继承了。一个项目可能需要不断的迭代、完善、升级。那每一次的更新你是要重新写呢，还是在原有的基础上改吧改吧呢？当然，不是缺心眼的人肯定都会在原来的基础上改吧改吧，那这个改吧改吧就需要...

Airmusic 2019-08-23 10:45 评论0 收藏0
【JS基础】一文看懂前端模块化规范

摘要：参考资料前端模块化详解完整版入门近一万字的语法知识点补充彻底搞清楚中的和和详解前言前端的模块化之路经历了漫长的过程，想详细了解的小伙伴可以看浪里行舟大神写的前端模块化详解(完整版)，这里根据几位大佬们写的文章，将模块化规范部分做了汇总和整理，希望读完的小伙伴能有些收获，也希望觉得有用的小伙伴可以点个赞，笔芯。什么是模块将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)...

HelKyle 2019-08-23 17:09 评论0 收藏0
前端规范(ES6BEMOOCSSSMACSS)

摘要：前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。是定义了一种的命名规范，每个名称及其组成部分都是存在一定的含义。前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...

Object 2019-08-02 15:54 评论0 收藏0
前端规范(ES6BEMOOCSSSMACSS)

摘要：前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。是定义了一种的命名规范，每个名称及其组成部分都是存在一定的含义。前端规范在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...

willin 2019-08-30 13:02 评论0 收藏0