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 元素拖动
元素事件:鼠标按下事件/鼠标移动事件/鼠标松开事件 元素样式:让元素脱离文档流,采用绝对定位的方式. 一.鼠标按下事件 当鼠标在元素上面按下时,保存元素的初始偏移量和鼠标按下时的坐标,然后在状态变量里 ...
随机推荐
- idea启用列模式的方式小结
(1)alt+鼠标左键----实现的是几个连续列要向上或者向下拉,能够同时操作多行数据. (2)Shift+alt+鼠标左键----可以实现点选跨行的列模式同时操作,而且不通行可以点选不通列,进行跨行 ...
- js中的函数重载
函数重载与js 什么是函数重载 重载函数是函数的一种特殊情况,为方便使用,C++允许在同一范围中声明几个功能类似的同名函数,但是这些同名函数的形式参数(指参数的个数.类型或者顺序)必须不同,也就是说用 ...
- 组合数学入门—TwelveFold Way
组合数学入门-TwelveFold Way 你需要解决\(12\)个组合计数问题. \(n\)个有标号/无标号的球分给\(m\)个有标号/无标号的盒子 盒子有三种限制: A.无限制 B.每个盒子至少有 ...
- Linux 内核 设备结构嵌入
设备结构包含设备模型核心需要的来模型化系统的信息. 大部分子系统, 但是, 跟踪关于 它们驻留的设备的额外信息. 结果, 对设备很少由空设备结构所代表; 相反, 这个结构, 如同 kobject 结构 ...
- 【50.40%】【BZOJ 4553】[Tjoi2016&Heoi2016]序列
Time Limit: 20 Sec Memory Limit: 128 MB Submit: 371 Solved: 187 [Submit][Status][Discuss] Descript ...
- webpack+babel+react+antd技术栈的基础配置
webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...
- Hibernate管理Session
Hibernate自身提供了三种管理Session对象的方法 Session对象的生命周期与本地线程绑定 Session对象的生命周期与JTA事务绑定 Hibernate委托程序管理Session对象 ...
- vue动态组件-根据数据展示特定组件
vue中有个内置组件component,利用它可以实现动态组件,在某些业务场景下可以替换路由 假设有以下三个组件: com1.com2.com3 有一个外层路/coms中代码如下 <templa ...
- 从头学pytorch(十二):模型保存和加载
模型读取和存储 总结下来,就是几个函数 torch.load()/torch.save() 通过python的pickle完成序列化与反序列化.完成内存<-->磁盘转换. Module.s ...
- java基础之----非空判断
大家好,第一次写博客,一直想写博客,用于自我总结,也用于帮助新同学成长. 平常我们开发的时候,用到很多非空判断,但是很多同学用到的地方不是很准确,这里,我把自己平时遇到的坑跟大家说说.我废话不多,只想 ...