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 元素拖动
元素事件:鼠标按下事件/鼠标移动事件/鼠标松开事件 元素样式:让元素脱离文档流,采用绝对定位的方式. 一.鼠标按下事件 当鼠标在元素上面按下时,保存元素的初始偏移量和鼠标按下时的坐标,然后在状态变量里 ...
随机推荐
- zeppelin开启多个
conf/zeppelin-env.sh 添加行: export ZEPPELIN_PID_DIR=/xx/zeppelin/run_2
- SpringMVC 非注解配置
web.xml配置: <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>o ...
- 2018-2-13-C＃-解析-sln-文件
title author date CreateTime categories C# 解析 sln 文件 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23 ...
- 负margin的原理及应用
在很多布局中我们经常能够见到类似于margin:-10px;的用法,我们对正值的用法早已熟悉的不能再熟悉了,可是这负值到底有何用呢?听我给你吹. 负margin——普通文档流 普通文档流元素(不浮动, ...
- TOJ5705动态序列操作（STL or treap）
传送门:动态序列操作 在一个动态变化的序列中,完成以下基本操作: (1)插入一个整数 (2)删除一个整数 (3)查找序列中最大的数 (4)查找序列中最小的数 (5)求x的前驱(前驱定义为不大于x的序列 ...
- dotnet 数组自动转基类数组提示 Co-variant array conversion 是什么问题
在 C# 的语法,可以提供自动将某个类的数组自动转这个类的基类数组的方法,但是这样的转换在 Resharper 会提示 Co-variant array conversion 这是什么问题? 在 C# ...
- 很多.net 程序员不知道又非常重要的 .net高级调试技巧.调试别人的dll方法内的变量
事情是这样的, 最近需要开发Orcale的数据库. 于是使用了EF 加上 Oracle.ManagedDataAccess.Client 这个Oracle.ManagedDataAccess 很好用, ...
- 网易Java高级开发课程随笔
java学习也有6个月之久,记录下课程相关知识点,目前我还没有掌握,so仅作技术点记录 鉴于在.NET上我封装了一套开发框架,虽去年按.NET封装的思路自己也弄了个java开发框架,还是感觉对java ...
- LDO
1.出现原因:便携式设备的发展,使得人们对电源的要求越来越高,而以前一直使用的三段稳压电源无法满足需求. 2.特点:内部的PNP管导通压降很小,自耗很低. 3.应用场合: (1)不同电压输出级别的应用 ...
- Oracle 11g R2 for Win10（64位）的安装注意点
一般我们在win10系统安装oracle11g或者10g及更低版本的oracle客户端时,都是无法安装,一般安装的时候会闪退.这是什么原因呢?其实很简单,win10出的时间比较晚,在oracle11g ...