一、let 与 const
定义变量
var 变量名称 = 赋值 作用域问题:全局作用域 局部作用域
let 与 const 编程语言中{}块级作用域
if(true){
var x=20
}
console.log(x) /20
使用var 与 let const 的区别
1、新增块级作用域 每一个 {} 就是一个独特的块级作用域 通过let或者const定义变量 在其内部生效
2、var定义变量 存在变量的默认提升 let 和const定义的变量 不存在 变量的提升
3、var定义变量可以重复定义 ,let和const不允许重复
4、var 定义变量 会被挂载到window上 ,let const不会
//单独产生一个块级区域
if(true){
let x=20
}
console.log(x) //20
var lis=document.getElementsByTagName("li")
for(let n=0;n<lis.length;n++){ //使用let
lis[n].onclick=function(){ //每个N单独产生块区域 点击哪个块 输出哪个N
console.log(n)
}
}
//说明 let与const 声明不提前
console.log(x) //输出undefined 说明变提前了,单数值没有提前才未找到
var x=20
console.log(x) //直接报错 提示变量在声明前使用
let x=20
//var 定义的可以重复定义 let 与 const 不能重复定义
var x=20
console.log(x) //20
----------------------------
var x=30
console.log(x) //30 表示var定义的变量可以重复赋值 即更改
---------------------------
let x=20
console.log(x)
let x=30
console.log(x) //重复定义X的值 直接报错
var a=20
if(true){
console.log(a) //报错在未定义前使用
// let定义变量 在一个块级作用域中,形成一个暂时性死区 在定义完成以前任何地方都不能是用哪个该变量
let a=30
}
//var 定义的被挂载在windows上 const无法更改,定义常量
var a=20
console.log(window.a) // var 定义的挂在windows
let x=20
console.log(window.x) //Windows 未挂载
//const 定义常量 永远不改变的值
const x=20
x=30
console.log(x) //直接报错 无法更改
二、字符串模板
字符串模板 : ` ` ${变量}
反引号是内容 ${ 添加变量}
<script>
//字符串模板 拼接字符串的
let x="hello world"
let str="你好"
console.log("我的口号是"+x+"加油"+str+"加油")
// 字符串模板 : `` ${变量}
console.log(`我的口号是${x}加油${str}加油加油`)
</script>
三、数据的解构
解构:将复杂的结构,简化成 简单结构
复杂结构 :对象或者数组 前方结构的变量 必须和 复杂结构属性同名
let obj={
name:'王一',
age:21,
height:180
}
//获取类容
console.log(obj.name)
console.log(obj.age)
console.log(obj.height)
//解构 可直接输出Key值
let [name,age] = obj
console.log(name)
console.log(age)
//交换变量
let a = 30
let b = 20 ;
[a,b] = [b,a] //首先let定义 解构后 改变a,b 值
四、对象的简写
对象的简化写法 ,如果属性名 等于变量 可以省略=后面的内容 省略function
let name="王一"
let age=21
let obj={
name:name,
age:age,
eat:function(){
console.log()
}
}
let obj={
name, //省略相同属性
age,
eat(){ //省略function
}
}
五、箭头函数
function 定义函数
1、传统定义函数中,this指向性永远不明确,随着环境随之发生变化
2、 箭头函数中 this的指向性用于指向被定义的环境 专一
3、function具有默认的提升功能 ,箭头函数没有
4、function 可以作为构造函数使用 箭头函数不行
5、function 中 arguments参数集合 箭头函数中没有
箭头函数的写法
1、如果函数中只有一个函数,则在函数中可以省去小括号
2、如果函数中只有一行语句且只有一句return语句,则可以省去{} 以及return
function Student(){
this.name : '王一'
this.age :22
}
var s1 = new Student()
console.log(this) //window
let obj={
name:"王一",
}
obj.show() //不具有提升功能 直接报错
let show=()=>{
console.log(this) //指向window
}
show()
function sum(a,b){
arguments
console.log(arguments) //实际传入参数的合集
let sum=0
for(let n=0;n<arguments.length;n++){
sum+=n
}
return sum
}
sum(1,2,4,5,6,1,123)
console.log(sum()) //0
console.log(sum(1,2,4,5,6,1,123)) //21 0 - 6 的和
let pow=(n)=>{
return n*n
}
let pow= n=> n*n
console.log(pow(n)) //n的平方