当前位置：网站首页>es6 学习记录
es6 学习记录
2022-08-04 05:26:00 【Drizzlejj】
es6 箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var fn1 = function(){console.log('我是 fn1 函数')}
fn1()
var fn2 = () => {console.log('我是 fn2 函数')}
fn2()
/*
箭头函数的特殊之处
1.箭头函数某些时候可以省略（）
=>当你的形参只有一个的时候，可以不写（）
*/
var fn3 = () => {console.log('我没有形参')}
fn3()
var fn4 = a => {console.log('我只有一个形参：', a)}
fn4(100)
/*
2.箭头函数某些时候可以省略{}
=>当你的代码只有一句话的时候，可以不写{}
=>并且会自动把这一句话的结果当做函数的返回值
*/
var fn5 = a => console.log('我只有一个形参：',a)
fn5(200)
var fn6 = (a, b) => a + b
console.log(fn6(10, 20))
/*
4.箭头函数内没有this
=>箭头函数内的this就是外部作用域的this
*/
var obj = {
fn7: function(){console.log(this)},// this 因为 fn7 函数被 obj调用，所以 this 是obj
fn8:() => {console.log(this)} // 因为是箭头函数，内部没有this，就是外部作用域的this
}
obj.fn7()
obj.fn8()
</script>
</body>
</html>es6 解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 解构数组
// 创建一个数组
var arr = ['hello', 'world']
// 开始解构
let [a, b] = arr
console.log(a)
// 解构对象
// 创建一个对象
var obj = {name:'jack',age:18}
// 开始解构,解构对象使用 {}
// 表示定义一个叫做 name 的变量，获取的是 obj 内一个name 成员的值
var {name,age} = obj
console.log(name)
// 起一个别名,相当于定义一个变量，从obj内获取叫做 age 的值
var {age:a1} = obj // var a = obj.age
console.log(a1)
</script>
</body>
</html>es6 模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var d = new Date().getDay()
var str = `我是
这是什么
今天是本周第 ${d} 天了`
console.log(str)
</script>
</body>
</html>es6 展开运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
展开运算符：展开数组的 [] 或展开对象的 {}
*/
var arr = [100,200,300,400]
console.log(...arr)
// 复制对象,需要注意书写顺序问题，顺序不一样，结果不一样。再有相同成员的时候。
var obj = {name: 'jack', age:18, gender:'female'}
var obj2 ={high:175, ...obj}
console.log(obj2)
/*合并数组*/
var arr1 = [10,20]
var arr2 = [30,40,50]
var arr3 = [60,70]
var arr4 = [80,90]
var arr5 = [...arr1, ...arr2, ...arr3, ...arr4]
console.log(arr5)
/*给函数传递参数*/
var max = Math.max(...arr5)
console.log(max)
</script>
</body>
</html>es6 类语法
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var Person = function(name, age){
this.name = name
this.age = age
}
// 原型上添加的方法是为了给实例使用
Person.prototype.sayHi = function(){console.log('hello world')}
// 书写静态属性和方法
Person.a = 100
Person.go = function(){console.log('跑起来飞快')}
var p1 = new Person('jack', 12)
console.log(p1)
p1.sayHi()
console.log(Person.go())
// 类的书写 必须和 new 关键字连用，不然会报错
// 先按照 ES5 的构造函数体书写
class People {
constructor (name, age){
this.name = name
this.age = age
}
// 直接书写原型上的方法
sayH(){console.log('hi world')}
// 书写静态属性和方法
static a = 100
static go = function(){console.log('running fast')}
}
var p2 = new People('bob', 13)
console.log(p2)
p2.sayH()
People.go()
console.log(People.a)
</script>
</body>
</html>es6 语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
ES6以前我们定义变量使用var关键字
ES6新增了两个定义变量的关键字
let => 定义变量
const => 定义常量（特殊的变量）
区别：
var会进行预解析
let/const不会进行预解析
var可以声明两个重名的变量
let/const不能定义重名变量
var没有块级作用域
let/const有块级作用域
-->
<script>
/*
var会进行预解析
let/const不会进行预解析
*/
console.log(num) // undefined
var num = 100
console.log(num) // 100
// console.log(num2) // 定义之前使用 let声明的变量会报错
let num2 = 200
console.log(num2)
// console.log(num3) // 定义之前使用 const声明的变量会报错
const num3 = 300
console.log(num3)
// 2. 重复变量名
var n1 = 100
var n1 = 200
console.log(n1)
// let n2 = 100
// let n2 = 200
// console.log(n2) 会报错
//3. 块级作用域
// 任何一个可以执行代码段的{}都会限制该变量的使用范围
if (true){
var num = 100
console.log(num)
}
console.log(num)
if (true){
// 因为这个 num 使用 let 关键字定义的
// 所以只能在这个if 的{}内使用
let num = 100
console.log(num4)
}
console.log(num4)
</script>
<!--
let与const的区别
let可以定义变量的时候不进行赋值
let num
console.log(num)
num = 100
console.log(num)
const在定义的时候必须赋值
const num
console.log(num) // 会报错
num = 100
console.log(num)
let定义的变量可以被修改
let num = 100
console.log(num) // 100
num = 200
console.log(num) // 200
const定义的常量一经赋值不能被修改
const num = 100
console.log(num) // 100
num = 200
console.log(num) // 会报错
-->
</body>
</html>边栏推荐
猜你喜欢
Swoole学习（二）
The cost of automated testing is high and the effect is poor, so what is the significance of automated testing?
JS原型链
MySQL数据库（基础）
如何将 DevSecOps 引入企业？
Swoole学习（一）
![Embedded system driver primary [3] - _IO model in character device driver foundation](/img/c7/21fc0651964a6a435e8ec5743b7662.png)
Embedded system driver primary [3] - _IO model in character device driver foundation
Sublime Text 3 2021.8.3 个人配置
擎朗智能全国研发创新中心落地光谷：去年曾获2亿美元融资
OpenSSF 安全计划：SBOM 将驱动软件供应链安全
随机推荐
Can‘t connect to MySQL server on ‘localhost3306‘ (10061) 简洁明了的解决方法
4.3 Annotation-based declarative transactions and XML-based declarative transactions
力扣：63. 不同路径 II
显式调用类的构造函数(而不是用赋值构造)，实现一个new操作
C1认证之web基础知识及习题——我的学习笔记
warning C4251: “std::vector＆lt;_Ty＆gt;”需要有 dll 接口由 class“Test”的客户端使用错误
(Kettle) pdi-ce-8.2 连接MySQL8.x数据库时驱动问题之终极探讨及解决方法分析
MediaCodec支持的类型
8、自定义映射resultMap
MySQL database (basic)
力扣：70. 爬楼梯
php将多维数据保存进json文件
npm安装依赖报错npm ERR! code ENOTFOUNDnpm ERR! syscall getaddrinfonpm ERR! errno ENOTFOUND
3面头条，花7天整理了面试题和学习笔记，已正式入职半个月
canal实现mysql数据同步
Programming hodgepodge (3)
即时通讯网 即时通讯音视频开发
Linux环境下redis的下载、安装和启动（建议收藏）
4.2 声明式事务概念
4.1 声明式事务之JdbcTemplate