一、var let const
var let 变量 const 常量
const必须赋值
const a; //会报错!!
const a = undefined;
作用域:
var 作用域:全局作用域 函数作用域
let 作用域:全局作用域 块级作用域 { for循环每次循环重新声明 出循环undefined }
const 作用域:块级作用域
重复声明:
var可以被重复声明
var a = 1;
var a = 10;
let const不能重复声明:
let在同一作用域不能重复声明 会报错
const 不能再重新赋值 但是对象中属性可以 (深冻结)
预解析:
var进行预解析
console.log(a);
var a = 1; //打印1
let const不进行预解析
Error:a is undefined;
二、匿名函数自执行
结构: ( function ( ) { } ) ( )
三、解构赋值
对象
let obj = {
a: 1,
b: 2
}
解构赋值
let {a:renameA, b} = obj; //重命名为renameA
相当于:
let a = obj.a;
let b = obj.b;
let {a, b, c} = obj; // c为undefined
let {b, a} = obj; //仍然a a对应
总结: 对象的解构赋值 要求变量名与属性名一致
数组
let arr = [ 'a', 'b', 'c' ];
let [ e, f ] = arr;
console.log(e, f); //打印 a b
总结: 顺序对应,与变量名无关
面试题:
let a = 1;
let b = 2;
怎样快速交换ab的值?
[a, b] = [b, a];
其他类型 没有太大实际意义:
字符串
let str = 'abc';
let [e, f] = str;
console.log(e, f); //打印a b
数字
let num = 123;
let [c, d] = num;
console.log(c, d); //打印错误: 对象不是一个迭代器
总结: 一般可迭代对象都有解构赋值写法
四、展开运算符
数组
1. 合并两个数组:
let arr = [1, 2, 3, 4];
let arr1 = [ 'a', 'b', ...arr, 'c', 'd']
2. 保存剩余参数:(代码延续上面的)
let [a, b, ...c] = arr; // c为 [ 3, 4 ]
对象
打印:
和数组一样
总结: 引用数据类型传递的是地址,修改值会影响到原来对象,
所以 这里使用解构赋值可以解决此问题
let obj2 = {...obj};
五、Set的使用 Map
Set是一个构造函数 (对象的实例化) 一般首字母大写的都是构造函数
用于构建对象(如:Array、Date 都会返回,构建出一个对象)
构造函数都需要new
let set = new Set();
1. 用于数组去重(返回一个对象)
let arr = [1, 1, 2, 3, 4, 4];
let s = new Set(arr); // s 返回 Set(4) {1, 2, 3, 4}
arr = [...s]; //返回 (4) [1, 2, 3, 4]
其他方法
s.size 数值的个数,长度length 返回个数
s.clear() 清空所有值 返回undefined
s.delete(4) 删除某具体元素 返回Boolean值
s.add(5) 添加某一元素,具备去重 返回Set本身
s.has('a') 查看是否存在a 返回Boolean值
Map add变成set
六、箭头函数
- 自带返回值: 形参=>返回值 形参为空或者多个时必须(),单个参数不用()
- 箭头函数没有不定参 argument,但可以用展开运算符[...arg]/a, b, ...arg 剩余rest参数
- 普通函数fn未被某个事件/对象的方法调用,只是自调用fn(),this指向windows
- 箭头函数本身没有this,调用时指向声明时所在作用域的this
七、模板字符串: ``
p.innerHtml = `<span>可以换行,可以调函数,可以用三目表达式</span>
<strong>插值表达式${ name() }</strong>
<p>{ age>18?"成年":age}</p> `
八、对象
参数默认值
(左)简洁表示法:属性、函数 (右)属性名表达式,可改变属性名
九、Babel是JavaScript的编译器
https://www.babeljs.cn/ 将新方法编译成兼容性强的