目录
变量声明(var,let,const)
参数默认值
箭头函数
解构赋值
扩展运算符(...)
- 变量声明
var关键字
以前使用 var关键字声明变量
-> 有作用域的提升
-> 没有块作用域的概念
-> 使用var可以重复的声明变量
-> 使用var声明变量时,可省去关键字
ES6新增命令(let,const)
let关键字: 声明变量, 先声明,再使用(否则报错), 有块级作用域, 不允许重复声明变量
const关键字: 声明一个只读的常量(声明后值不可修改), 必须初始化,有块级作用域
暂时性死区: 在代码块内,使用let命令声明变量之前,该变量都是不可用的
注意:
-> 区块中使用let/const,区块形成封闭作用域, 先声明再使用,否则报错
-> ES6允许块级作用域的任意嵌套
-> 外层作用域无法读取内层作用域变量
-> 内层作用域可以定义外层作用域的同名变量
-> 块级作用域的出现,实际上使得广泛应用的立即执行函数表达式(IIFE)不再必要了(可以不在使用闭包,立即执行函数)
javascript">javascript"> {
var a = 10
var a = 100
}
console.log(a) //100
{
let num = 20
num = 200
console.log(num)
}
// console.log(num)
// 遍历数组
let arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++) {
setTimeout(function () {
console.log(i) //由于var声明的变量没有块作用域,故会打印3个3, 可使用闭包解决
},1000)
}
// 闭包解决
for (var i = 0; i < arr.length; i++) {
(function (a) {
setTimeout(function () {
console.log(a)
},1000)
})(i) //闭包
}
// let声明
for (let i = 0; i < arr.length; i++) {
setTimeout(function () {
console.log(i) // 0 1 2
},1000)
}
var tmp1 = 1
function fun(){
// var tmp; 局部变量提升,覆盖外层全局变量
var tmp2 = 2
console.log(tmp1); //undefined
if(true){
var tmp1 = 'hello'
// tmp = 'hello'
}
}
fun()
// console.log(tmp2); //无法访问内部作用域的变量
// const关键字: 声明一个只读的常量(声明后值不可修改),必须初始化
const p = 3
// p = 1 修改会报错 Assignment to constant variable.赋值给常数变量
console.log(p);
// ES5中定义常量
Object.defineProperty(window,'PI',{
value: 3.14
})
console.log(PI);- 参数默认值
javascript">javascript"> // ES5设置默认值 if或者||
function sum1(a,b,c){
c = c || 10
return a + b + c
}
console.log(sum1(1,2)); // 13
// ES6中设置默认值 设置默认值的形参需写在最后 s数组,对象均可
function sum2(a, b = 11, c = []){
return a + b + c
}
console.log(sum2(1,2)); // 3- 箭头函数
()=>{ }
箭头函数中的this, 指向函数定义时this的指向(通常函数定义时指向的是window)
箭头函数没有arguments
javascript">javascript"> // 箭头函数 可理解为函数表达式的缩写
// 函数表达式: 变量 = 匿名函数
let fun1 = function () {
console.log('111')
}
// 箭头函数 也可设置默认值
let getMax = (a, b) => {
return Math.max(a, b)
}
console.log(getMax(12, 13)) // 13
// 当只有一个参数时, 可省略箭头函数的()
// 当只有一条语句时, 可省略箭头函数的{}, return可不写, 结果自动返回
// let getAbs = (a)=>{
// return Math.abs(a)
// }
let getAbs = (a) => Math.abs(a)
// 箭头函数和普通函数中this指向问题区别
let a = 1000 //无变量提升, 不会挂着window对象上
var obj = {
a: 100,
getA1: function () {
// 普通函数中的this,指向函数调用者
console.log(this) //{a: 100, getA1: ƒ, getA2: ƒ}
return this.a
},
getA2: () => {
// 箭头函数中的this, 指向函数定义时this的指向(通常函数定义时指向的是window)
console.log(this) // Window{ }
return this.a
},
getA3: function (n1, n2) {
console.log('3--arguments-->', arguments)
return this.a
},
getA4: (n1, n2) => {
console.log('4--arguments-->', arguments)
},
}
console.log(obj.getA1()) // 100
console.log(obj.getA2()) // undefined
// console.log(obj.getA2()); // 1000 若var a = 1000
// 箭头函数没有arguments
console.log(obj.getA3(1, 2)) //3--arguments--> Arguments(2)
console.log(obj.getA4(3, 4)) //arguments is not defined- 解构赋值
javascript">javascript"> // 针对数组和对象进行解构赋值
// 数组的解构
var arr = ['香蕉', '西瓜', '梨', '苹果']
// ES5中
// const apple = arr[3]
// const pear = arr[2]
// const banana = arr[0]
// ES6中使用解构改写 不赋值的元素,,
const [banana, , pear, apple] = arr
console.log(apple, pear, banana) //苹果 梨 香蕉
// 把数组中的第一个元素放在变量ba2中,其余放在一个新数组fruits中
const [ba2, ...fruits] = arr
console.log(ba2, fruits) //香蕉 (3) ['西瓜', '梨', '苹果']
// 对象中的解构赋值
const obj = { a: 10, b: 20, c: 30 }
// ES5中获取
console.log(obj.a); // 10
console.log(obj['b']); // 20
// 使用ES6解构赋值改写
const { a, b } = obj
console.log(a,b); //10 20
const { a: num1} = obj
console.log(num1); //10
const { z: num2} = obj
console.log(num2); //undefined
const { x = 50 } = obj
console.log(x); //50
console.log(obj); //{a: 10, b: 20, c: 30}
- 扩展运算符...
javascript">javascript">// 扩展运算符 ...
// 1. 拷贝数组
// ES5中复制数组元素 (拷贝)
const arr2 = []
// 方式1: 遍历
for(let i = 0; i < arr.length; i++){
arr2.push(arr[i])
}
// 方式2: assign()
Object.assign(arr2,arr)
console.log(arr2);
const n1 = [1,2,[3,[4,5]]]
const n2 = []
// 浅拷贝 深拷贝是全展开[1,2,3,4,5]
Object.assign(n2,n1)
console.log(n2); //[1, 2, Array(2)]
// ES6使用扩展运算符改写拷贝数组 浅拷贝
const n3 = [...n1]
console.log(n3); //[1, 2, Array(2)]
// 2. 拼接数组
const a1 = [1,2]
const a2 = [1,2]
const a3 = [1,2]
// 数组的方式 concat
const bigArr1 = a1.concat(a2,a3)
console.log(bigArr1); // [1, 2, 1, 2, 1, 2]
const bigArr2 = [...a1,...a2,...a3]
console.log(bigArr2); // [1, 2, 1, 2, 1, 2]
// 3. 解构和赋值连用
// 把数组中的第一个元素放在变量b3中, 将剩余元素存入一个新数组fruits
var arr11 = ['香蕉', '西瓜', '梨', '苹果']
const [b3, ...fs] = arr11
console.log(b3,fs); //香蕉 (3) ['西瓜', '梨', '苹果']
// 4. 作为函数的参数
const f1 = (...params) =>{
console.log(params);
// 进行求和
let sum = 0
params.forEach(item => sum += item)
return sum
}
const sum1 = f1(10,12,13)
console.log(sum1); //35
// 对象中扩展运算符的使用
const obj11 = {a:10,b:20}
// 对象的拷贝
const obj22 = {...obj}
console.log(obj22); //{a: 10, b: 20, c: 30}
const obj33 = { c: 10, a:30, d: 222,...obj11,}
console.log(obj33); // {c: 10, a: 10, d: 222, b: 20}PreviousNotes:
https://blog.csdn.net/qq_54379580/article/details/126464151?spm=1001.2014.3001.5501
![基础算法[四]之图的那些事儿](https://img-blog.csdnimg.cn/485dba8af63d4f1da3bc430c88497283.png)
