一、let
1、let声明的只在let命令所在的代码块中有效
2、let适合在循环中使用，若在循环外读取let声明的值则会报错
3、let在每一次循环中每一轮都是重新声明的
4、let不像var存在变量提升
5、存在暂时性死区：在使用let声明之前，该变量是不可用的
二、const
1、const用于声明一个只读的常量，常量的值不能被改变
2、const只声明不赋值则会报错
3、const作用域和let相同，也存在暂时性死区
三、变量的解构赋值
//数组的解构赋值
const f4 = ['song','deng','xiao','chen']
let [s , d ,x , c] = f4;
console.log(s)
console.log(d)
console.log(x)
console.log(c)
//对象的解构赋值
const zhao = {
name:'赵本山',
age:70,
sex:'男',
xiaoping(){
console.log("wow")
}
}
const {name , age , sex ,xiaoping} = zhao;
xiaoping()四、模板字符串
1、模板字符串使用反引号``表示，模板字符串可以识别空格，也可以识别HTML标签
2、模板字符串写变量需要写在${}中
<script>
//换行符可以直接在里面用
var love =`
<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>常远</li>
<li>艾伦</li>
</ul>`;
//可以对字符串进行拼接
const ma = '肖战';
const like = '是我最喜欢的演员';
const pingjie = `${ma}${like}`
alert(pingjie)
</script>五、箭头函数
1、箭头函数没有自己的this，箭头函数的this的指向就是函数声明时所在作用域this的值，用call方法也不能改变
2、箭头函数不能作为构造函数，意思就是不能对箭头函数使用new命令，否则会抛出错误
3、箭头函数可以省略小括号，当形参只有一个时
4、箭头函数可以省略花括号，当语句只有一条时
5、箭头函数不能使用arguments变量来保存实参
<script>
//1、箭头函数的this指向是静态的，this的指向就是函数声明时所在作用域下的this的值，用call方法也不能改变
const person = function (){
console.log(this.name)
}
//声明时是在全局作用域下声明的，所以this的指向时window
const person2 = () =>{
console.log(this.name)
}
var school = {
name:'小陈'
}
window.name = '小邓'
person();//小邓
person2();//小邓
person.call(school);//小陈
person2.call(school);//小邓
//2、不能作为构造函数实例化对象
var Dog = function(age,name){
this.name = name;
this.age = age
}
var d1 = new Dog('来福',1)
var d2 = new Dog('来财',5)
console.log(d1,d2)
// var Dog1 = (age,name) =>{
// this.name = name;
// this.age = age
// }
// var d3 = new Dog1('旺财',1)
// var d4 = new Dog1('旺福',5)
// console.log(d3,d4)
// 可以省略小括号，当形参只有一个的时候
const p1 = n =>{
return n * n
}
var p = p1(4);
console.log(p);//16
//可以省略花括号，当语句只有一条时
const p2 = (a,b) => a*b
const c = p2(3,4);//12
console.log(c)
</script>箭头函数的小案例
style>
#app{
height: 100px;
width: 100px;
background-color: brown;
}
</style>
<body>
<div id="app" onclick="myfunction()"></div>
<script>
var ab = document.getElementById('app')
var myfunction = function(){
setTimeout(function(){
ab.style.background = 'yellow'
},2000)
}
</script>
六、函数的参数赋值
<script>
//函数参数赋值
//1、形参初始值
//可以在形参的位置直接写参数默认值 注：具有默认值的参数，一般位置要靠后
function myfunction(a, b, c =10){
return a+b+c
}
let res = myfunction(1,2)
console.log(res)
//2、与解构赋值相结合
//如果实参里面有值，就算形参这里赋值也还是显示实参那边的内容
function myfunction2({name,age,sex,adress = 'beijin'}){
console.log(name),
console.log(age),
console.log(sex),
console.log(adress)
}
myfunction2({
name:'deng',
age:18,
sex:'woman',
adress:'hunan'})
</script>七、rest参数：用于获取实参
1、es5中获取实参采用的是arguments
2、es6可以用rest获取实参，返回的是一个数组
3、rest参数必须要放在参数最后
<script>
//用arguments获取实参
function myfunction(){
console.log(arguments)
}
myfunction('ai','to','me')
//用rest参数获取实参
function myfunction(...demo){
console.log(demo)
}
myfunction('ni','wo','ta')
</script>八、扩展运算符
1、能将数组转换为用逗号分割的参数序列
2、扩展运算符和rest参数很像，区别就是rest在形参中使用，扩展运算符是在实参中使用的
<script>
//扩展运算符：能将数组转换为逗号分隔的参数序列
//与rest参数很像，但是rest参数是在形参上使用，扩展运算符是在实参中使用
var tf = ['ni','wo','ta'];
function myfunction(){
console.log(arguments)
}
myfunction(...tf)九、迭代器的使用
1、迭代器是一种接口，为不同的数据提供统一的访问机制
2、可以用于遍历自定义数组
3、迭代器的工作流程
a、创建一个指针对象，指向当前对象的起始元素
b、第一次调用next（）方法，指针自动指向数据结构的第一个成员
c、不断调用next（）方法，直到指向最后一个成员
d、每一次调用next（）都会返回一个包含value和done属性的对象
注意：若next调用次数多余数据结构的成员，则调用的对象的value值是undifined
十、promise对象
1、Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大
2、promise对象是一个构造函数
3、promise对象有两个参数 resolve：成功状态； reject：失败状态
<script>
var p = new Promise(function(resolve,reject){
setTimeout(() => {
// let data = '数据库的用户数据';
// resolve(data);
let err = '数据读取失败';
reject(err)
}, 2000);
})
p.then(function(value){
console.log(value)
},function(reason){
console.error(reason)
})
</script>4、promise中的then方法：用于返回执行成功的方法，可以写两个回调函数，一个函数接收的参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们都是可选的。
const p =new Promise((resolve,reject)=>{
setTimeout(() => {
// let err = '失败'
// reject(err)
let data = 'chenggong'
resolve(data)
}, 2000);
})
let result = p.then((value)=>{
console.log(value)
//返回非promise的值 返回结果就是原东西
// return 'iloveu'
//返回promise类型，返回的值就是promise返回的东西
return new Promise((resolve,reject)=>{
resolve("返回成功")
})
},(reason)=>{
console.log(reason)
})
console.log(result)5、promise中的catch方法：指定失败返回的值
var p = new Promise((resolve,reject)=>{
reject('失败了')
})
//1、用then指定失败
// p.then((value)=>{
// },(reason)=>{
// console.log(reason)
// })
//2、用cath指定失败返回的值
p.catch((reason)=>{
console.log(reason)
})6、promise实现了iterator接口，可以使用扩展运算符和for...of进行遍历
十一、set集合
1、set是es6提供的新的数据结构
2、set类似于数组，但set的成员的值都是唯一的（set可以自动去重）
3、set实现了iterator接口，可以使用扩展运算符和for...of进行遍历
4、set中的方法
size：返回集合的元素个数
add：增加一个新元素，返回当前集合
delete：删除元素，返回Boolean值
has：检测集合中是否包含某个元素，返回Boolean值
<script>
//创建一个set集合
let s = new Set();
let s2 = new Set(['你好','我好','他好','别人好'])
//add添加
// let ss = s2.add('大家好')
// console.log(ss)
//delete删除
// s2.delete('别人好')
// console.log(s2)
//clear清空
// s2.clear()
// console.log(s2)
//检测set中是否包含这个值，返回值为Boolean值，包含返回true，不包含返回false
var as= s2.has('你好')
console.log(as)
//set是一个对象
// console.log(typeof s)
</script>十二、map数据结构
1、map类似与对象，相当于对象的升级版，和对象一样也是键值对的集合，但map的键的范围不限于字符串，各种类型的值都可以作为map的键，
2、map实现了iterator接口，可以使用扩展运算符和for...of进行遍历
3、map的属性和方法、
size：返回map的元素个数
set：增加一个新元素，返回当前的map
get：返回键名对象的键值、
has：检测map中是否包含某个元素，返回Boolean值
clear：清空集合，返回undefined
<script>
//map其实算是一个升级版的对象，也是键值对组成，但是map的键的范围不限于字符串，各种类型的值都可以作为键
//实现了iterator接口，可以使用扩展运算符和for。。。of进行遍历
//创建一个map,类型是一个对象
let m = new Map();
// console.log(typeof m)
//往map中添加东西，有两个参数，第一个参数名，第二个参数是键值
m.set(function anme(){} , 'nihao')
m.set("name","value")
m.set("age",18)
console.log(m)
//返回map中元素个数
m.size
console.log(m.size)
//遍历元素
for (const v of m) {
console.log(v)
}
//删除元素
m.delete("age")
console.log(m)
//获取元素
let l = m.get("name")
console.log(l)
//清空元素
m.clear()
console.log(m)
</script>十三、class类
<script>
function phone(brand,price){
this.brand = brand;
this.price = price
}
//添加一个方法
phone.prototype.call = function(){
console.log("我可以执行")
}
let huawei =new phone('荣耀',1888)
huawei.call()
console.log(huawei)
//用class类
class nihao{
constructor(brand,price){
this.brand = brand;
this.price = price
}
call(){
console.log('你好')
}
}
let xiaomi = new nihao('小米',1999)
xiaomi.call();
console.log(xiaomi)
</script><script>
function iphone(brand,price){
this.brand = brand;
this.price = price;
}
//添加一个方法
iphone.prototype.call=function(){
console.log('我可以啥都干');
}
//弄一个子类构造函数
function myiphone(brand,price,color,size){
iphone.call(this,brand,price)
this.color = color;
this.size = size
}
//添加子类构造函数的方法
myiphone.prototype.playgame = function(){
console.log('我可以玩游戏')
}
myiphone.prototype.photo = function(){
console.log('我可以拍照')
}
//实例化
let xiaomi = new myiphone('小米',1888,'白色',5.5)
console.log(xiaomi)
</script> <script>
class iphone{
get price(){
console.log("数据被读取了")
}
set price(newvalue){
console.log('数据被修改了')
console.log(newvalue)
}
}
let i = new iphone();
i.price = 'mianfeisong'
console.log(i.price)
// console.log(i.price)
</script>十四、es6中的模块化
<script type="module">
//通用的导入方式
import * as m1 from './m1.js'
import * as m2 from './m2.js'
import * as m3 from './m3.js'
console.log(m1.name)
console.log(m2.name)
console.log(m3.default.name)
console.log(m3)
</script>//分别暴露
export let name = 'deng'
export function myfuntion(){
console.log('我叫小邓')
}//统一暴露
let name = '陈'
function myfuntion(){
console.log('我叫小陈')
}
export {name ,myfuntion};//默认暴露
export default{
name :'陈',
myfuntion(){
console.log('我叫小陈')
}
}
1601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
