JS ES6补充

补充点：1、let const 　　2、字符串模板　　3、箭头函数　　4、对象的单体模式　　5、面向对象

一、定义变量

A、var

特点：

1、定义全局变量

2、可以重复定义

3、变量名提升

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>声明变量</title>

</head>

<body>

    <script>

        {

            var a =66;

            console.log('in'+ a);

        }

        // 在块级作用域的变量，可以在全局中使用

        // 1.var 定义的是全局变量

        console.log('out'+ a);

        // 2.var可以重新定义变量

        var a = 88;

        console.log('new'+a);

        // 3.变量名提升

        // 过程 var b -> 提升， 打印 b, b没有赋值，结果：undefined

        console.log(b);     //undefined

        var b = 10;

    </script>

</body>

</html>

B、let

特点：

1、块级变量

2、在同一作用域中，不可以重新定义

3、不支持变量名提升

{

    let b = 5;

    console.log('b1', b)

}

// 1.let 声明块级变量

// console.log('b2', b);    // b is not defined

let b = 10;

console.log('b3', b)

// 2.let 不能重新声明变量

// let b = 20;

// console.log('b4', b)    // Identifier 'b' has already been declared

// 3. let不支持变量提升

console.log(c);     // Cannot access 'c' before initialization

let c = 2;

C、const

特点：

1、定义常量

2、在同一作用域中，不能重复定义

3、不支持变量提升

const a = 10;

// 1.const 定义的是常量，常量不能被修改

// a = 20;

// console.log(a)  // Assignment to constant variable.

// 2. 不能重复声明

// const a = 20;

// console.log(a)  // Identifier 'a' has already been declared

// 3. const 定义变量，不支持变量提升

console.log(b);

const b = 30;   // Cannot access 'b' before initialization

二、字符串模板

1、反引号(table键，上面的键)

2、格式：${变量名}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>字符串模板</title>

</head>

<body>

    <script>

    var name = 'tom';

    var age = 24;

    // 注意：

    // 1. 反引号

    // 2.${变量名}

    var info = `${name},今年${age}岁!!!`;

    console.log(info)    

    </script>

</body>

</html>

三、箭头函数

A、简介

格式：

f = function(a, b){} ---> f = (a, b)=>{}

注意：

1、形参为一个数时，括号可以省略不写

2、{}中只要return 时，{}也可以省略不写

B、箭头函数的坑

1、this

传统函数的this，指向调用的对象

箭头函数的this，指向声明对象的对象

// 字面量方式创建对象

var person = {

    name: 'tom',

    age: 24,

    inf0: function(){

        // 1. 普通函数 this 指向 调用 对象 既 person

        console.log(this);   // {name: "tom", age: 24, inf0: ƒ}

    }

};

person.inf0();

// 字面量方式创建对象

var person2 = {

    name: 'alex',

    age: 43,

    info: ()=>{

        // 1.箭头函数 this 指向 声明 对象 及 windows

        console.log(this);  // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

    }

};

person2.info();

2、arguments

    // 2.箭头函数不能使用 arguments

    var foo = function(){

        console.log(arguments);  // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

    }

    foo(1, 2, 3);

    var bar = ()=>{

        console.log(arguments);     // Uncaught ReferenceError: arguments is not defined

    }

    bar(3, 2, 1);

四、对象的单体模式

目的：解决箭头函数的this坑

// 字面量方式创建对象

var person = {

    name: 'tom',

    age: 34,

    // 格式对比：

    // info: ()=>{}

    // info(){}

    info(){

        console.log(this.name);     // tom

    }

}

person.info();

五、面向对象

1、ES5

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script>

    // 构造函数的方法创建对象，注意名字要大写

    function Person(name, age){

        self.name = name;

        self.age = age;

    }

    // 创建该对象的方法

    Person.prototype.showname = function(){

        console.log(self.name);

    }

　　 // 实例化对象

    var p1 = new Person('tom', 24);

    p1.showname();      // tom

    </script>

</body>

</html>

ES6

// 定义类

class Person{

    // 构造方法

    constructor(name, age){

        self.name = name;

        self.age = age;

    }

    // 自定义方法

    showname(){

        console.log(self.name);

    }

}

// 实例化对象

var p2 = new Person('tom', 24);

// 调用方法

p2.showname();  // tom

注意：ES6面向对象的语法比ES5面向对象的语法更像面向对象

JS ES6补充的更多相关文章

js es6 map 与原生对象区别
区别 object和Map存储的都是键值对组合.但是: object的键的类型是字符串: map的键的类型是可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...
js 对象补充
js 对象普通对象与对象简写 js 没有字典类型,只有对象类型,对象可以完全替代字典来使用 js 中对象的属性名,都采用字符串类型,所以就可以省略字符串的引号标识对象中属性值为函数时,称之为方法, ...
js ES6 多行字符串连接字符串
1. 以前,js多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: 旧版写法 alert("你好,\n 我叫\n Olive" ...
js ES6 Set和Map数据结构详解
这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下本 ...
JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)
1. 程序异常 ① try-catch语法测试异常 try-catch语法代码如下: try { 异常代码; try中可以承重异常代码, console.log(“try”) 出现异 ...
2019.7月-前端面试总结（H5+C3+JS+ES6+Vue+浏览器）
第二次面试 HTML HTML5中的新标签,举例一下 canvas绘画,本地离线存储localStorage,sessionStorage,video和audio元素,语义化元素,表单类型(date, ...
js原型补充
js定义函数: <script> function A() {} let a1 = new A(); let a2 = new A(); // 为A类添加原型 => 类似于类属性 A ...
JS&ES6学习笔记（持续更新）
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升暂时性死区不允许重复声明块级作用域级作用域 ...
js/es6 元素拖动
元素事件:鼠标按下事件/鼠标移动事件/鼠标松开事件元素样式:让元素脱离文档流,采用绝对定位的方式. 一.鼠标按下事件当鼠标在元素上面按下时,保存元素的初始偏移量和鼠标按下时的坐标,然后在状态变量里 ...

随机推荐

ReentrantReadWriteLock 可重入的读写锁
可重入:就是同一个线程可以重复加锁,可以对同一个锁加多次,每次释放的时候会释放一次锁,直到该线程加锁次数为0,这个线程才释放锁. 读写锁: 也就是读锁可以共享,多个线程可以同时拥有读锁,但是写锁却只能 ...
Visual Studio Team Services使用教程【5】：Readers tfs组成员添加
2017.4.23之后建议朋友看下面的帖子 TFS2017 & VSTS 实战(繁体中文视频) Visual Studio Team Services(VSTS)与敏捷开发ALM实战关键报告( ...
Apache的DBUtils框架学习(转）
一.commons-dbutils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化 ...
HDU 1969 Pie [二分]
1.题意:一项分圆饼的任务,一堆圆饼共有N个,半径不同,厚度一样,要分给F+1个人.要求每个人分的一样多,圆饼允许切但是不允许拼接,也就是每个人拿到的最多是一个完整饼,或者一个被切掉一部分的饼,要求你 ...
第三阶段：3.Web端产品设计：4.产品设计-交互设计
交互设计主要做框架层以及结构层.包括交互关系,信息结构,界面布局,导航设计,信息内容. 导航关系非常重要. 这是框架层. 这是结构层. 要素就是信息内容.
Mysql（超级详细）
Mysql(超级详细) (黑小子-余) 一.Mysql介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理 ...
Java内存模型之有序性问题
本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门前言之前的文章中讲到,JMM是内存模型规范在Java语 ...
java后台防止sql注入的方法
1.采用预编译语句集,它内置了处理SQL注入的能力,只要使用它的setString方法传值即可: String sql= "select * from users where usernam ...
TCP/IP||动态选路
1.动态选路动态选路协议用于路由器之间的通信,当相邻路由器之间进行通信,已告知对方每个路由器当前所连接的网络,就产生了动态选路,在Internet之间采用了许多不同的选路协议,Internet是以一 ...
搭建高可用的flink JobManager HA
JobManager协调每个flink应用的部署,它负责执行定时任务和资源管理. 每一个Flink集群都有一个jobManager, 如果jobManager出现问题之后,将不能提交新的任务和运行新任 ...

JS ES6补充

JS ES6补充的更多相关文章

随机推荐

热门专题