1、let 声明变量
（1）let关键字是用来声明变量的，声明的变量只在所处的块级作用域中有效
（2）let关键字生命的变量才具有块级作用域，var声明的变量不具备这个特点
if (true) {
let a = 10
var b = 20
console.log(a) // 10
}
console.log(a) // a is not defined
console.log(b) // 20
（3）使用let关键字声明变量可以防止循环变量变为全局变量
for (var i = 0; i < 10; i++) {}
console.log(i) // 10
for (let j = 0; j < 10; j++) {}
console.log(j) // j is not defined
（4）let声明的变量没有变量提升
console.log(a) // Cannot access 'a' before initialization
let a = 100
console.log(b) // undefined
var b = 200
（5）let声明变量会出现暂时性死区（一个块级作用域中，如果有代码声明一个变量，当前块级作用域只能使用该变量，如果在声明之前使用就会报错）
var num = 10
if (true) {
// {}内部的num和这个作用域进行绑定，
console.log(num) // Cannot access 'num' before initialization
let num = 20
}
2、const 声明常量
（1）具有块级作用域
（2）声明常量时必须要赋初始值
const PI;
console.log(PI) // Missing initializer in const declaration
（3）常量赋值后，值不能修改（不能修改值在内存中的存储地址）
const PI = 3.14
PI = 100 // Assignment to constant variable
const arr = [11, 22]
arr[0] = 100
arr[1] = 200
console.log(arr) // [100, 200]
arr = [100, 200] // Missing initializer in const declaration
（4）const声明变量时也可能会出现暂时性死区
3、let、const、var的区别
| var | let | const |
|---|---|---|
| 函数级作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 不存在变量提升 | 不存在变量提升 |
| 值可更改 | 值可更改 | 值不可更改 |
4、解构赋值
（1）数组的解构赋值
按照一一对应的关系从数组中提取值 然后将值赋值给变量
var arr = [1, 2, 3, 4]
var [num1, num2, num3, num4] = arr
console.log(num1) // 1
console.log(num2) // 2
console.log(num3) // 3
console.log(num4) // 4
无论要赋值的变量和数组中元素的数量是否相同，都按照顺序一一对应
var arr = [1, 2, 3] var [n1, n2] = arr console.log(n1) // 1 console.log(n2) // 2 var [num1, num2, num3, num4] = arr console.log(num1) // 1 console.log(num2) // 2 console.log(num3) // 3 console.log(num4) // undefined
（2）对象的解构赋值
使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = {name: 'ls', age: 30, sex: 'male'}
let { name, age, sex } = person
console.log(name) // ls
console.log(age) // 30
console.log(sex) // male
如果想给解构的值重新取变量名，解构的时候保存解构数据的变量可以以键值对的形式书写，逗号左边的变量用来匹配要解构的对象的键，右边则为新的变量名
let person = {name: 'ls', age: 30, sex: 'male'}
let {name: myName, age: myAge} = person
console.log(myName) // ls
console.log(myAge) // 30
let {name: myName, age: myAge, hobby: myHobby} = person
console.log(myName) // ls
console.log(myAge) // 30
console.log(myHobby) // undefined 解构时没有这个值，则为undefined
4、箭头函数
（1）箭头函数是用来简化函数定义语法的
var add = function(a) {
return a * 5
}
// 等价于
var add = (a) => {
return a * 5
}
（2）箭头函数如果只有一个形参时，箭头形参的括号可以省略
var add = a => { return a * 5 }
（3）箭头函数如果只有一条返回语句时，箭头函数函数体的{ }和return关键字都可以省略
var add = a => a * 5
（4）箭头函数没有自己的this，因此箭头函数内部的this就是箭头函数所在作用域块的this，箭头函数中的this指向也不能被call，apply，bind函数所修改
var age = 100;
// obj 是一个对象，它没有自己的作用域 所以箭头函数指向window
var obj = {
age: 20,
say: () => {
alert(this.age)
}
}
obj.say(); // 100
5、剩余参数: ...args——值为一个数组
（1）剩余参数用于箭头函数，在形参不确定数量时，箭头函数没有arguments，可以利用剩余参数获取到实参传过来的参数
const sum = (...args) => {
let total = 0;
args.forEach(item => total += item);
return total;
};
console.log(sum(10, 20)); // 30
console.log(sum(10, 20, 30)); // 60
（2）数组结构中使用
剩余参数可以在数组解构中使用，使用时一定是参数中的最后一个参数，如果它前面也有参数（变量）的话，会按顺序进行匹配，没有匹配到的剩余数据，会成为一个数组
let ary1 = ['张三', '李四', '王五'];
let [s1, ...s2] = ary1;
console.log(s1) // 张三
console.log(s2) // ['李四', '王五']
（3）对象结构中使用
剩余参数可以在对象解构中使用，使用时如果它前面有匹配到的键值对时，没有匹配到的剩余数据，会成为一个对象
let obj = {
name: 'zs',
age: 20,
sex: 'male',
fav: 'football'
}
var {
name: myname,
age: myage,
...msg
} = obj
console.log(myname); // zs
console.log(myage); // 20
console.log(msg); // {sex: 'male', fav: 'football'}
6、扩展运算符
将数组中的值进行扩展，结果为使用逗号分隔的数据序列
let ary = ["a", "b", "c"];
// ...ary的结果为："a", "b", "c"
console.log(...ary) // a b c 没有打印出逗号，是因为console.log()方法打印时会过滤掉逗号，以空格分格数据
console.log("a", "b", "c") // a b c
扩展运算符用于数组合并的两种方式
// 方法一
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
// ...ary1 1, 2, 3
// ...ary2 4, 5, 6
let ary3 = [...ary1, ...ary2];
console.log(ary3) // [1, 2, 3, 4, 5, 6]
// 方法二
let ary3 = [1, 2, 3];
let ary4 = [4, 5, 6];
ary3.push(...ary4);
console.log(ary3) // [1, 2, 3, 4, 5, 6]
7、数组的内置方法
（1）数组的内置方法Array.from()
Array.from(array, function)
- 此方法用于将伪数组转化成真正的数组，同时可以对数组的数据进行处理，返回结果为处理过后的数组
- array：要转化的伪数组
- function：数组处理函数，根据需要书写
var arrayLike = {
"0": "1",
"1": "2",
"length": 2
}
// 将伪数组中的每一项数据都乘以2，保存在新数组中
var ary = Array.from(arrayLike, item => item * 2)
console.log(ary) // [2, 4]
（2）数组的内置方法find()&findIndex()
arr.find(fn)
查找数组中符合条件的第一项元素，将那一项的数据返回
find内部会遍历数组，执行函数返回值为true的时候，结束遍历，返回数据
var arr = [{
id: 1,
name: 'zs'
}, {
id: 2,
name: 'ls'
}]
let target = arr.find(item => item.id == 2)
console.log(target); // {id: 2, name: 'ls'}
arr.findIndex(fn)
查找数组中符合条件的第一项元素，将那一项数据的索引返回
内部会遍历数组，执行函数返回值为true的时候，结束遍历，返回数据
（3）数组的内置方法includes()方法
arr.includes(str) 只能判断简单数据类型
查找数组中是否有某个字符串，如果有的话，返回true，没有则返回false
var arr = ['a', 'b', 'c', 'd']
let bool = arr.includes('a')
let bool1 = arr.includes('f')
console.log(bool, bool1) // true false
8、String的扩展方法
（1）String的扩展方法startsWith()/endsWith()
str.startsWith(字符串) 字符串是否以某个字符串开头，返回值为布尔值
str.endsWith(字符串) 字符串是否以某个字符串结尾，返回值为布尔值
let str = 'Hello World!'
let row1 = str.startsWith('Hello')
let row2 = str.endsWith('!')
let rs = str.endsWith('~')
console.log(row1, row2, rs); // true true false
（2）String的扩展方法repeat()
str.repeat(n) 将str重复n次
console.log('a'.repeat(3)) // aaa
9、Set数据结构
- “搜索历史”关键字的实现会使用到
Set本身是一个构造函数，用来生成Set数据结构，使用new Set()创建，如果有参数，参数必须为一个数组
size：Set实例.size可以获取到Set中元素的个数，类似于数组的长度
const s = new Set(['a', 'b', 'c'])
console.log(s) // Set(3){'a', 'b', c}
console.log(s.size) // 3
Set可以用于数组去重
const s = new Set(['a', 'b', 'c', 'a', 'b'])
console.log(s) // Set(3){'a', 'b', 'c'}
// console.log(Array.from(s)) // [a, b, c]
const arr = [...s]
console.log(arr) // ['a', 'b', 'c']
Set实例方法：
add(value) 向Set结构中添加值
delete(value) 删除元素，返回一个布尔值
has(value) 是否是Set对象中的成员，返回一个布尔值
clear() 清空Set，可用size查看是否删除成功
const s = new Set()
s.add('a').add('b').add('c')
console.log(s) // Set(3){'a', 'b', 'c'}
s.delete('b')
console.log(s) // Set(2){'a', 'c'}
const i = s.has('d')
console.log(i) // false
s.clear()
console.log(s.size) // 0
遍历Set数据结构，Set也有forEach方法
var s = new Set(['a', 'b', 'c', 'a'])
s.forEach(item => {
console.log(item) // 分别输出为：a,b,c
})
网友评论