1、let、const、var

var是声明全局的变量,作用域是全局,const是声明全局的常量,不能修改,而let是块级变量只在当前声明的作用域中生效:

{
var a = 10;
let b = 20;
}
console.log(a); // 打印a的值
console.log(b); // 报错:ReferenceError: b is not defined

2、var的标量声明提前现象

// 直接打印a的值,文件中没有声明a
console.log(a);// 报错:Uncaught ReferenceError: a is not defined

因为代码从上往下执行,a并没有声明,所以报错,但var有一个声明提前的情况,看下面代码:

console.log(a); //打印undefine
var a = 10;

是不是认为应该会报错,其实不然,因为var有一个声明提前的现象,如果你在调用一个变量时,它在下文有声明时,他做了这样一个事情,相当在你调用前声明了变量名而没有赋值:

var a           //等效调用前加上该语句
console.log(a); //打印undefined
var a = 10;

注意,var在函数中声明的时局部标量,没var声明的全局变量

function ff(){
var a=1;
console.log(a); //1
}
ff();
console.log(a); //a is not defined function ff(){
a=1;
console.log(a); //1
}
ff();
console.log(a); //1

var 在函数内部声明时的变量提前:

// 情况1
var name = 'kingfan';
function foo(){
console.log(name) //打印kingfan;
} // 情况2
var name = 'kingfan';
function foo(){
console.log(name) //打印undefined;
var name = 'fan';
};
console.log(name) // 打印 kingfan,var name = 'fan'在函数中声明的时局部变量
// 注意正常情况下,console.log(name)找的时全局
//,但是在局部中又声明了name,这时调用时就不会去找全局的name
//,而是声明提前的name=undefined.

而let 声明的就是局部标量就不会出现声明提前的问题:

    var pname = 'kingfan';
function f() {
console.log(pname); //直接报错:Uncaught ReferenceError: pname is not defined
let pname = 'fan';
console.log(pname)
}
f();
console.log(pname);

var、let、const的区别

var a = 1;
var a =2;
a = 3;
// var 可以对变量重新定义和赋值 let b = 3;
b = 4;
let b = 5; //报错:Identifier 'b' has already been declared
// let声明的变量 只能重新赋值,不能重新定义 const c = 5;
c = 6; // 报错,不能修改
const c = 7 //报错不能重新定义

总结:var声明的变量是可以重新定义和赋值,let声明的只能重新赋值,const不能重新定义和赋值修改

3、字符串拼接

在es6中新增了模板字符串拼接:

var name='kingfan';
var age = 18;
var msg = `我是${name},今年${age}岁`;
console.log(msg) //打印 我是kingfan,今年18岁

4、数据解构

ES6允许按照一定的模式,从数组或对象中提取值,对变量进行赋值,这种方式被称为解构赋值。

// 解构数组
var list =[1,2,3,4];
var [a,b,c,d] = list;
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(d); //4 //结构对象
var obj = {
name:'kingfan',
age:18,
} // 利用key去接受
var {name,age}=obj;
console.log(name); //'kingfan'
console.log(age); //18 // 利用其它变量名接受
var {name:pname,age:page}=obj;
console.log(pname); //'kingfan'
console.log(page); //18

5、类的定义

ES5的构造对象的方式 使用构造函数来创造。构造函数唯一的不同是函数名首字母要大写。

<script>
class Animal{
//初始化函数,相当python中的init
constructor(){
this.type = 'animal'
};
say() {
console.log('我是动物')
};
}
// 实例化对象
var dog = new Animal();
// 调用对象属性
console.log(dog.type);
// 调用对象方法
dog.say();
</script>

类的继承,使用extens关键字继承父类:

    class Peopel extends Animal{
constructor(){
super() // 必须在子类的构造函数中执行父类super方法才能得到this调用对象
}
// 子类可以重构父类的方法
say(){
console.log('我是人')
}
}
// 实例化new方法
var p =new Peopel();
// 调用父类的方法
console.log(p.type);
// 重构后调用自己得say方法
p.say();

6、箭头函数

箭头函数有个特点:

  1. 如果参数只有一个,可以省略小括号
  2. 如果不写return,可以不写大括号
  3. 没有arguments变量
  4. 不改变this指向
  5. 其中箭头函数中this指向被固定化,不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。

可以查看下面两段代码输出的区别:

var person = {
name: 'Q1mi',
age:18,
func:function(){
console.log(this);
}
}
person.func() // person对象 //****************************************
var person = {
name: 'Q1mi',
age:18,
func:()=>{
console.log(this);
}
}
person.func() // window对象

7.JS文件之间的导入

在es6中增加了像python类似的import语法来导入其他js文件来使用。例如现在有2个文件,file1、file2

// file1
let name='kingfan';
let age = 18;
// 要确保其他文件导入使用,需要确定你要导出哪些数据给别人使用
export {name,age} //***************************************
// file2
// 指定从file1要导入的数据
import {name,age} from 'file1'

目前很多浏览器不兼容此写法,会报错。

前端es6基础语法的更多相关文章

  1. 从零开始学 Web 之 ES6(五)ES6基础语法三

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 从零开始学 Web 之 ES6(四)ES6基础语法二

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 从零开始学 Web 之 ES6(六)ES6基础语法四

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. ES6基础语法

    1. 什么是ECMAScript ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association ...

  5. web前端----jQuery基础语法

    一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...

  6. (三)ES6基础语法。。。freecodecamp笔记

    ECMAScript6 ECMAScript 是 JavaScript 的标准化版本,它旨在统一语言的规范和功能.所有主流的浏览器或者 Javascript 的运行环境都支持这个规范,因此 ECMAS ...

  7. es6 基础语法

    var c= 1 <!--都不能预解析-->let a = 1//const不能修改变量const b = 1 箭头函数 =>var c = function fun(a, b) { ...

  8. Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  9. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

随机推荐

  1. linux进程管理总结

    目录 一.进程相关的概念 二.关闭会话时子进程进程被杀死 三.nohup的原理 四.setsid原理 五.daemon &和守护进程的区别 六.服务进程为什么要fork两次 七.systemd ...

  2. vue 2.0多页面开发

    1.为项目添加多个入口 找到\build\webpack.base.conf.js文件: module.exports = { //..., //vue的多页面开发:应用程序可以存在多个入口 entr ...

  3. asp.net core C#设计一个实用的线程池

    菜菜呀,我最近研究技术呢,发现线上一个任务程序线程数有点多呀 CEO,CTO,CFO于一身的CXO x总,你学编程呢? 菜菜 作为公司总负责人,我以后还要管理技术部门呢,怎么能不会技术呢 CEO,CT ...

  4. Makes And The Product CodeForces - 817B (思维+构造)

    B. Makes And The Product time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  5. Windows之文件夹中打开PowerShell

    Windows之文件夹中打开PowerShell 为了解决Windows中在某个路径下使用PowerShell,而不是使用传统的cd命令切换过去,具体做法如下: 方法一 打开文件夹 在文件夹的内容区按 ...

  6. Java面试题详解一:面向对象三大特性

    一,多态:1.面向对象四大基本特性:抽象,封装,继承,多态抽象,封装,继承是多态的基础.多态是抽象,封装,继承的表现.2.什么是多态不同类的对象对同一消息作出不同的响应叫做多态3.多态的作用简单来说: ...

  7. Swagger UI 用法

    Swagger - 简书https://www.jianshu.com/p/4115f2b53983 Swagger简介 - Ghost Stories - CSDN博客https://blog.cs ...

  8. # 【Python3练习题 008】判断101-200之间有多少个素数,并输出所有素数。

    lst = []for i in range(100): #建立 101-200 的列表 lst.append(101+i) for i in range(101, 201): #除数为 101-20 ...

  9. C#复习笔记(4)--C#3:革新写代码的方式(查询表达式和LINQ to object(下))

    查询表达式和LINQ to object(下) 接下来我们要研究的大部分都会涉及到透明标识符 let子句和透明标识符 let子句不过是引入了一个新的范围变量.他的值是基于其他范围变量的.let 标识符 ...

  10. Chrome 浏览器的简单设置 无痕模式 暗黑模式 自定义用户目录

    1. Chrome73 新增加了暗黑模式 可以通过修改快捷方式的方式来默认开启方法如下 1.1 关闭浏览器 2.2 鼠标焦点定位到任务栏 Chrome 图标处, 并且按住shift 按键 执行右键操作 ...