let关键字的基本上使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- es6新增了一个关键字let用来声明变量的 -->
<script>
// let a = 10;
// console.log(a)
console.log()//undefined
// var 变量的提升
// b = 10;
// var b;
// let没有变量提升
// 如果将来写项目,你感觉你的代码有可能报错,你写的代码对项目影响比较大那你就try catch
try {
// 把你感觉有可能报错的代码扔到try里面
console.log(c)
let c = 123
} catch (e) {
// catch捕获错误的
console.log(e)
}
var b =10
//
var d = 10;
var d = 30;
console.log(d)
// 再同一作用域下let的变量名不能重复
// let t = 55;
// let t = 66;
// console.log(t)
// es6之前学了哪些作用域
// 全局作用域和局部作用域
// 函数体内外
// function a (){
// var b
// }
// es6新增了块级作用域
// {}就是一个块级作用域
if(123){
var str = '我是var'
// let声明的变量没有变量提升只在当前作用域生效
let num = 123
if(999){
console.log(str)
console.log(num)
}
}
if(888){
let num = 55
console.log(str)
// console.log(num) //ReferenceError: num is not defined
}
console.log('str最外层的作用域',str)
console.log('num最外层的作用域',num)//ReferenceError: num is not defined
// let新特性
// 1.let声明的变量没有变量提升
// 2.let声明的变量不能重复声明(同一作用域下)
// 3.let声明的变量存在块级作用域
</script>
</body>
</html>
const关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// cosnt关键字是用来声明常量的
// 常量就是不变的量
// 声明常量的时候一般需要大写
// 基本数据类型
// nubmber string boolean underfined null
// 引用数据类型(复杂数据类型)
// object
// 声明常量的时候必须进行赋值操作
// 基本数据的常量一旦赋值不逊于再去修改
const FLAG = true;
// FLAG = false
console.log(FLAG)
// 引用数据类型的常量
const OBJ = {
name:"小明"
}
OBJ.name = 'san'
console.log(OBJ)
// 同一作用域下不能同名
// const A =1
// const A =2
//const也具有块级作用域
{
const A =1
}
console.log(A)
</script>
</body>
</html>
解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 解构
// 解构有两部分组成
// 解构的源 =的右边部分
// 解构的目标 =的左边部分
{
let [a,b,c] = [1,2,3];
console.log(a,b,c); // 1 2 3
}
{
let [a,[b,c]] = [1,[2,3]];
console.log(a,b,c); // 1 2 3
}
// 忽略某个
{
let [a,,c] = [1,2,3];
console.log(a,c); //1 3
}
// 剩余运算符
// 把多个东西揉到一个变量里面
{
let [a,...t] = [1,2,3,4,5,6,7]
console.log(a,t); // 1 [2, 3, 4, 5, 6, 7]
}
// 结构赋值的时候能不能设置默认值呢
{
let [a=1,b=2] = [,3];
console.log(a,b); //1 3
}
</script>
</body>
</html>
对象的解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
{
let obj = {
name:'san',
age:20
}
// 对象的解构 按需解构
// let {name:name,age:age} = obj;
let {name,age} = obj;
console.log(name)
console.log('age',age)
let {alert} = window;
console.log(alert)
let {name:yourName} = obj;
console.log(yourName)
// 扩展运算符
let obj2 = {
sex:'男',
...obj,
}
console.log(obj2)
}
{
// 对象的简写
// key:value
// 对象的简写就是 key value一致时可以简写
let name = '小明'
let age = 20
let obj = {
name,
age,
// singIng:function(){
// }
singIng(){
}
}
console.log(obj)
}
</script>
</body>
</html>
symbol数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let arr = new Array()
// symbol 是一个基本数据类型 不能new
// symbol 代表独一无二的值
let str1 = Symbol('123')
let str2 = Symbol('123')
console.log('str1', str1) // Symbol(123)
console.log(str1 == str2) // false
</script>
</body>
</html>
Map对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 普通对象 是无序键值对的集合
let obj = {
name:'san',
age:20
}
console.log(obj)
// map对象
// 有序的键值对集合 key=>value
let map = new Map()
map.set('name','stan')
console.log(map)
// map对象的key可以是任意值
map.set(obj,'我是特殊key的值')
console.log(map)
// 遍历map对象
map.forEach(function(item,index){
console.log(item)//value
console.log(index)//key
})
// es6 for in 遍历对象
for(let key in obj){
console.log(key)//对象的key
}
let arr = ['a','b','c']
for(let key in arr){
console.log('arr的key',key)//索引下标
}
// es6又新增了一个循环for of
for(let key of arr){
console.log('for of循环数组的key',key)//数组中的值
}
// for of不能循环普通对象
// for(let key of obj){
// console.log('for of循环对象的key',key)
// }
// 循环遍历map对象一般用for of
for (let [a,b] of map){
console.log(a)
console.log(b)
}
</script>
</body>
</html>
set实现数组的去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 数组去重
// es6新增了一种数据结构是set 里面的值具有唯一性没有重复的值
// Set本身是构造函数,用来生成Set数据结构
let set1 = new Set([1,2,3,4,5,5,5]);
set1.add(5)
console.log(set1); Set(5) {1, 2, 3, 4, 5}
// 转换成正常的数组
// 扩展运算符
let arr = [...set1]
let arr2 = Array.from(set1)
console.log(arr2); // [1, 2, 3, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]
</script>
</body>
</html>
proxy代理的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 你现在可以对对象进行读写操作
let obj = {
name:'小明',
age:"20"
}
// 为什么要学习代理 Proxy() 数据的私有化处理 就可以用到代理
// target 目标对象 handler处理函数
// Proxy(target, handler)
let handler = {
get:function(target,key){
console.log('get读取数据')
console.log(target)
console.log(key)
},
set:function(target,key,value){
console.log('set设置数据')
console.log(target)
console.log(key)
console.log(value)
}
}
let proxy = new Proxy(obj,handler)
// console.log(proxy)
console.log('proxy',proxy.name)//读数据走get
proxy.age = '99'//写数据走set
</script>
</body>
</html>
字符串的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 字符串的方法
let str = 'hello world';
console.log(str.includes('hel'))
console.log(str.startsWith('h'))
let aa = 'aa'
// 重复
console.log(aa.repeat(4))
// 头部添加
console.log(aa.padStart(6,'p'))
// 指数的运算
// 幂运算
console.log(2 ** 3)
</script>
</body>
</html>
对象的新方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
name:'小明',
age:20
}
let obj1 = {
name:'小明',
age:20
}
console.log(obj==obj1) // false
console.log(Object.is(obj,obj1)) // false
</script>
</body>
</html>
数组的新方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Array.of()
// Array.of()将参数中所有值作为元素形成数组。
console.log(Array.of(1, 2, 3))
// Array.from()将类数组对象或可迭代对象转化为数组
function fun(){
// arguments 是所有参数的一个集合
console.log('arguments',Array.from(arguments))
}
fun('a','b','c')
// find() //返回符合条件的第一个元素
// findIndex() //返回符合条件的第一个元素的索引
// 找到符合条件的元素之后后面的就不遍历了
let arr =['lol','12345','dnf','csgo','cs','cf']
let index = arr.findIndex(function(item,index){
// console.log(item)
// console.log(index)
return item.length>4
})
console.log(index)
// 抚平数组--数组扁平化 ---多维变一维
let arr2 = [1,[2,3,[4,5]]]
console.log(arr2.flat())
console.log(arr2.flat(888))
</script>
</body>
</html>