let关键字
1.let就是用来声明变量的
2.使用let关键字声明变量具有块级作用域
一个简单的理解:
我需要定义一个for循环
<script>
for(var i=0;i<2;i++){
}
console.log(i)//在这里for里面的i的值是可以被for块级的外部访问的也就是 console.log(i),打印结果为2
</script>
声明for时使用let关键字
<script>
for(leti=0;i<2;i++){
}
console.log(i)//这时候访问for中的i就会报错,使用let的好处:for一旦结束之后i的值就没必要存在了,这时候使用let达到块级作用域的效果,是不是更严谨了呢
</script>
let的关键字不存在变量提升
console.log(a)
let a=10;//报错,不会进行变量提升
let的关键字具有暂时性死区
let关键字定义的变量,只能在块级区域内绑定,不会受外部影响
var temp=100;//块级作用域外定义了全局变量
if(true){
console.log(temp)//打印temp变量时,console之前并没有定义temp变量(console之后才定义),所以会报错
let temp=20;//定义let变量
}
const关键字
作用:声明常量,常量就是值(内存地址不可以更改),不能变化的量
1、const同样具有块级作用域
看如下代码:
<script>
if(true){
const a=1000;//该a值只在第一个if块中有作用
console.log(a)
if(true){
var s=100;//var定义后有函数的提升,下面console.log(s)可以访问到
const a=10;//该a值只在第二个if块中有作用
console.log(a)
}
}
console.log(s)
console.log(a)//块级中没有找到a的值,报错
</script>
2、const声明常量是必须赋初始值
const a;
console.log(a)//报错。声明是为赋值
//报错:Uncaught SyntaxError: Missing initializer in const declaration
3、const定义的值不可以更改
const a=100;
a=10;//const声明后的值不可以更改
console.log(a)
报错: Star.html:29 Uncaught TypeError: Assignment to constant variable.
对于(复杂数据类型)数组:
它值可以改变,但是给它重新直接赋值会报错
<script>
const a=[1,2];
console.log(a[0])
a[0]=3;//可以改变a[0]的值,
console.log(a[0])//打印3
a=[1,5]//报错
console.log(a)
数组结构:
es6中数组结构允许我们按照意义对应的关系从数组中提取值,然后将值复制给变量
let [a,b,c,d,e]=[1,50,80,10]
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)//注意:如果等左边的e找不到右边的值对应,就会打印undefined
对象结构:
跟数组结构差不多,匹配不到值同样式undefined
let obj={name:'隔壁张三',age:18,price:20}
let {name,age,price,password}=obj;
console.log(name)
console.log(age)
console.log(price)
console.log(password)
对象结构属性别名:
就是给对象属性取名字,没啥好说的啦,语法上的不同
let obj={name:'隔壁张三',age:18,price:20}
let {name: uName,age:uAge,price :uPrice,password:uPassword}=obj;
console.log(uName)
console.log(uAge)
console.log(uPrice)
console.log(uPassword)//undefined
箭头函数:
箭头函数是用来简化函数定义语法的
const fun=()=>{
alert("?")
//如果函数中只有一句代码,可以把{}去掉
}
fun();
const fun=()=>alert("?")
fun();
传递参数
const fun=(result)=>alert("?"+result)
//如果形参个数只有一个那么(result)可以省略()const fun=result=>alert("?"+result)
fun("eeeeee");
箭头函数的this指向。箭头函数没有自己的this关键字,如果在箭头函数中使用this,this关键字将指定箭头函数定义位置的this
function fn(){
console.log(this);//
let fun= ()=>{
console.log(this)//箭头函数没有this,如果定义this那么指向它所在位置的this
}
fun();
}
let obj={name:'我是隔壁老王',age:18}
fn();//,两个this都将指向windown,打印windown对象
fn.call(obj)//改变this的指向,两个this都将指向obj,打印obj对象
经典面试题:
以下代码会输出什么?
var obj={
age:20,
fun:()=>{
alert(this.age)//undefined
}
}
obj.fun();
结论:对象是不能产生作用域的
剩余参数 ...
剩余参数就是接受函数传参数时的值,不管多少个都可以接收,本质上是一个数组
var sum= (...result)=>{//...result就是接受函数调用时传递过来的参数,不管传递多少个参数都会被接受
let total =0;
result.forEach((item)=>{//将函数接受到的值进行遍历, result.forEach()j即可遍历
total+=item;//将传递过来的所有值进行相加
})
return total;//返回结果集出去
}
var result= sum(20,50,30);//接受函数的返回值
console.log(result)//打印函数返回值
剩余参数结合结构数组使用
let students=[10,50,35,90,5,88,10]//定义一个数组
var [s ,...result]=students;//书中结构数组加上剩余参数配合使用
console.log(s)//打印结构数组的第一个值
result.forEach(item=>{console.log(item)})//除了第一个值外 ...result都可以把数组剩余的值全部接收完
扩展运算符:
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let arr=["A","B","C"]
console.log(...arr)//打印A B C
利用扩展运算符合并数组
let arr=["a","b","c"];
let array=["1","2","3"]
let arrays=[...arr,...array];//...arr的结果为 a b c ...array的结果为 1 2 3 ,在结合arrays数组,不就合并成新的数组了吗?
//合并数组的第二种方法:
arr.push(...array);//完美
console.log(arr)
console.log(arrays);//打印:["a","b","c","1","2","3"];
将伪数组转换为真正的数组
<ul class="ul">
<li>我要吃包子</li>
<li>我要吃馒头</li>
<li>我要吃饺子</li>
<li>我要吃闭包</li>
</ul>
<script>
var result =document.querySelector(".ul").querySelectorAll("li");
let arr=[...result]
console.log(arr)
</script>
Array.from()方法
该方法一样可以将一个伪数组转换成真正的数组
var arrayLike={
"0":"1",
"1":"2",
"length":2
}
var result=Array.from(arrayLike,item=>{
return item*=2;
})
console.log(result)
Arrays.find()相当于过滤方法
let arr=[
{id:2,name:'我是隔壁李四'},
{id:3,name:'我是隔壁张三'}
]
var result=arr.find(item=>item.id==2)//数组.find(),将arr[i].id!=2的值过滤掉,留下id=2的对象
console.log(result)
Arrays.findIndex()找出第一个符合条件数组成员的位置,如果没有找到则返回-1
let arr=[
{id:2,name:'我是隔壁李四'},
{id:3,name:'我是隔壁张三'}
]
var result=arr.findIndex(item=>item.id>0)//只返回数组的第一个符合条件的索引下标
console.log(result)
Array.includes()表示某个数组时是否包含给定的值,返回布尔值
let arr=[
"2","3"
]
var result=arr.includes("2")//只返回数组的第一个符合条件的索引下标
console.log(result)
模板字符串:~~
调用对象属性
let str=`我是模板字符串`;
let str1={name:'我也是模板字符串'};
let result=`${str1.name}`;//调用对象中的name属性
console.log(result)
调用方法
let fun=()=>{
return "我是匿名方法,我将被模板字符串解析调用";
}
console.log(`${fun()}`)
startWidtn()
判断字符串是否在原字符串导入头部,如果存在返回true
endWidth()
判断字符串是否在原字符串导入头部,如果存在返回true
// startWidtn()`判断字符串是否在原字符串导入头部,如果存在返回true
console.log("abc".startsWith("a"))//true
// `endWidth()`判断字符串是否在原字符串导入头部,如果存在返回true
console.log("abc".endsWith("a"))//false
repeat()
是将原字符串重复n次,返回一个新字符串
console.log( "ab".repeat(3))//打印ababab
set数据结构:
es6提供了新的数据结构Set。他类似于数组,但成员变量是唯一的,没有重复值
Set本身是一个构造函数,用来生成set数据结构
创建Set数组
const s=new Set();
初始化Set值:
const s=new Set([10,500,10]);
console.log(s)//打印10 50
Set
中的函数(过于简单就举例了)
add():
添加
delete()
修改
has("1")
:是否有1这个值,如果有返回true
clear()
清空Set集合的所有值
遍历Set 集合需要用
forEach(value=>{console.log(valie)})