前端学习笔记js篇（1）

1.JS对象

js对象包括 内置对象，宿主对象，本地对象。

内置对象：为已实例化的对象，如Golbal,Math

宿主对象：包括浏览器对象BOM（如window),文档对象模型DOM等

本地对象：未实例化的对象，如常用的Object,Array,Function,Array等

对象的声明方式

1. 对象创建

var obj = new Object()

2.直接创建 

var obj = {}

2.JS函数

函数的声明方式

1.直接创建

function study() {}

函数名可以不声明， 即匿名函数

function () {}

2.函数表达式

函数表达式中声明的函数不可被调用

var study = function study () {}
study()
//err

3.对象创建

var study = new Function('参数1'，'参数2','函数体'）

自执行函数

自执行函数可以在函数声明时自动执行

(function study(subject){})(subject)

3.for...in...和for...of...

for..in多用于对象的遍历

var obj = {
    width: 100,
    height: 200
}
for (var i in obj) {
    console.log(i+':'+obj[i])
}

for...of多用于数组的遍历

var arr = [1, 2, 3, 4, 5]
    for (var i of arr) {
        console.log(i+':'+arr[i -1])
    }

4.JS闭包

function a() {
    var i = 0
    function b() {
        console.log(++i)
    }
    return b
}
var c = a()
c()
// 1

首先函数c是无法访问函数a中的变量的，此时通过在函数a内构造一个内部函数b，b自然是可以读取a中的变量的，此时c便可以通过b来读取a中的变量，这便是闭包了。

如果之后再执行c(),此时会输出2,这是为什么呢？

这和js的垃圾回收机制有很大的关系，由于闭包c的存在，函数b依赖于a中的变量，使得函数a的i始终存在在内存。

5.浅拷贝和深拷贝

一般的数据类型如Number，String等的赋值为值传递，而当对象进行赋值时，仅仅是将目标对象的指针指向原对象，如：

var obj1 = {
    'width': 100,
    'height': 100
}
var obj2 = obj1
obj2.width = 200
console.log(obj1。width)
//200

为了使对象的赋值不污染原数据，便引出了深拷贝这一概念，常用的深拷贝方法是将对象转化为JSON数据再转化回来

var obj1 = {
    'width': 100,
    'height': 100,
    'others':{
        'border': 1,
        'margin': 10,
    }
}
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2.others.border = 2
console.log(obj1.others.border)
console.log(obj2.others.border)
//1
//2

数组的深拷贝方式：

1.slice

var arr = [1, 2, 3, 4, 5]
var arr2 = arr.slice(0)
arr2[4] = 6
console.log(arr)
console.log(arr2)

2.concat

var arr = [1, 2, 3, 4, 5]
var arr2 = arr.concat()
arr2[4] = 6
console.log(arr)
console.log(arr2)

3.ES6新增...

var arr = [1, 2, 3, 4, 5]
var [...arr2] = arr
arr2[4] = 6
console.log(arr)
console.log(arr2)