1. 作用域
1.1 全局作用域
- 没有使用var定义的变量是作为window的属性使用的，不是真正意义上的全局变量，只是因为window是全局属性，window上的属性，可以不加window.访问。
var abc = 1234;
// 全局变量（delete abc => false）
abcd = 1234;
// abcd是作为window的一个属性，delete abcd 返回 true，此处window.abcd也可以
// 函数内部未用var定义，也挂在window上
function test () {
ab = 45;
}
test();
1.2 函数作用域（局部作用域）
1.3 块状作用域
function test() {
var a = 3;
if(a === 3){
var b = 4
}else{
console.log(1)
};
console.log(b)
}
test(); // 4
function test2() {
var a = 3;
if(a === 3){
let b = 4
}else{
console.log(1)
};
console.log(b)
}
test2();
// b is not defined at test2
- {} 并未形成壁垒，作用域还是可以向上找 a+b+c还是向上找，信息无法隔离
- var会变量提升
var c = 10010;
function test() {
var a = 3; // let不会变量提升，有块
function test2 () {
var b = 4;
return a+b+c;
}
return test2(); // 闭包和作用域链
}
console.log(test())
1.4 动态作用域(this)
2. let 和 const
3. 数组
遍历 转换 生成 查找
es5中数组方法
- for循环支持break和continue
- forEach不支持break和continue，不受控
- every是否向下执行，取决于return的值（return true和 return false）
- for in 是遍历对象的，数组作为特殊的对象，for in遍历有瑕疵
let arr = [1, 2, 3, 4]
arr.a = 8; //这就是for in的瑕疵 索引不是数字
for (let index in arr){
console.log(index, arr[index])
}
// 0 1 1 2 2 3 3 4 a 8
// index的类型是字符串（注意===的使用）
- Array.prototype.from() 伪数组转换成数组
// 伪数组的两个特征，索引存储以及length属性
// { 0: 'a', 1: 'b', length: 2 }
// Array.from(arrayLike, mapFn, thisArg)
// 初始化一个长度为5，都为1的数组
let array = Array.from({length: 5}, function(){return 1})
- Array.of() 创建一个新数组
- Array.fill() 数组填充
- find(),findIndex() 查找元素
// ES5的filter找不找到都会返回一个数组，需要判断长度，会查找所有
let find = array.filter(function(item){
return item === 6
})
console.log(find) // [] item === 6 [3] item === 3
// find 只验证存在，返回满足值的第一个或undefined
4. Class
4.1 怎么声明一个类
- 共有的，需要继承的，写在原型链中，避免不必要的实例化，实例对象会很冗余
- 继承的东西写在原型中，不作为私有部分
let Animal = function (type) {
this.type = type
}
Animal.prototype.eat = function () {
console.log('animal eat')
}
let dog = new Animal('dog')
dog.dogeat = function () {
console.log('dog eat')
}
// dog.constructor即为function
dog.constructor.prototype.eat = function (){
console.log('error')
}
dog.eat()
- ES6的class中，构造函数constructor中写属性，构造函数外写方法
class Animal {
constructor (type) {
this.type = type
}
walk () {
console.log(`I am walking`)
}
}
console.log(typeof Animal); //function
// Animal.prototype 对象上有两个方法
// 一个是构造函数（constructor）、一个是自定义的方法（walk）
console.log(dog.hasOwnProperty('type')); //true
4.2 Setters & Getters
- set和get定义的也是属性，不是方法，set中接收设置，通过get返回值，设置中间变量
4.3 静态方法
- 区分对象实例的方法和类的静态方法
- 静态方法：从对象实例上访问这个方法是没有的，通过这个类访问这个方法是存在的
-
- 静态方法拿不到实例对象的信息
// ES5中
let Animal = function (type) {
this.type = type
}
Animal.prototype.eat = function () { // 实例方法
Animal.walk()
//调用静态方法，用类来引用，不是this.walk()
console.log('animal eat')
}
Animal.walk = function () { // 静态方法
console.log('walk')
}
// ES6中
class Animal {
constructor (type) {
this.type = type
}
walk () {
Animal.eat()
console.log(`I am walking`)
}
static eat () {
console.log(`I am eating`)
}
}
4.4 继承类
// ES5中
// 定义父类
let Animal = function (type) {
this.type = type
}
// 定义方法
Animal.prototype.walk = function () {
console.log(`I am walking`)
}
// 定义静态方法
Animal.eat = function (food) {
console.log(`I am eating`)
}
// 定义子类
let Dog = function () {
// 初始化父类的构造函数，this指向dog实例
Animal.call(this, 'dog')
// Dog自己的方法
this.run = function () {
console.log('I can run')
}
}
// 继承原型链 对象都是引用类型 复制指针 共享一块内存
Dog.prototype = Animal.prototype
// ES6中
class Animal {
constructor (type) {
this.type = type
}
walk () {
console.log(`I am walking`)
}
static eat () {
console.log(`I am eating`)
}
}
class Dog extends Animal {
constructor () {
super('dog') // super()是用来执行父类的构造函数的，继承时用
this.age = 2
}
run () {
console.log('I can run')
}
}
5. 函数
5.1 函数参数的默认值
- ES6 中不能再使用 arguments ，ES5中arguments是伪数组
5.2 不确定参数(...nums)
- nums是数组
- ES5中arguments是伪数组，不能直接遍历
Array.prototype.forEach.call() //改变指针
Array.from(arguments).forEach(function(item){})
5.3 箭头函数
- webpack构建时，对代码执行了eval
6. Object
let x = 1; let y = 2; let z = 3;
let obj = {
'x': x,
y,
[z+y]: 6
}
// {5: 6, x: 1, y: 2}
6.1 Set
- 不重复数据，初始化接收可遍历对象
6.2 Map
- 初始化的可遍历对象为字典，key的类型是任意的
6.3 Object.assign()
- 浅复制
