JS复习

1、JS数据类型

基本数据类型 (变量名和值都存储在栈内存中)
- Number
- String
- Boolean
- Undefined （表示一个标识被声明，但未赋值）
- Null （表示一个标识被赋值了，且该标识赋值为“空值”,从逻辑角度来看，null值表示空对象指针）
引用数据类型 (值存储在堆内存中,变量名和指向值在堆内存中的地址存储在栈内存)
- Object
- Array
Object.prototype.toString.call() 判断数据类型

2、判断对象是否为空

//js
function isEmpty(obj){
    var n ;
    for(n in obj){
        return false;
    }
    return true;
}
//jQ
$.isEmptyObject()  //为空返回true，反之返回false

3、复制一个对象的值

function cloneObj(obj){
    var newObj = new Object();
    for(var i in obj ){
        newObj[i] = obj[i];
    }

    return newObj;
}

4、数组方法

js方法	描述	用法
concat()	连接两个或多个数组	arrObj.concat(arrayX,…,arrayX)
join()	把数组中的所有元素放入一个字符串，不传参默认为逗号	arrObj.join(separator)
pop()	删除并返回数组的最后一个元素	arrObj.pop()
push()	向数组的末尾添加一个或更多元素，并返回新的长度	arrObj.push(newelement1,…,newelementX)
shift()	删除并返回数组的第一个元素	arrObj.shift()
unshift()	向数组的开头添加一个或更多元素，并返回新的长度	arrObj.unshift(newelement1,….,newelementX)
slice()	从某个已有的数组返回选定的元素组成的新数组,如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素(不会改变原始数组)	arrObj.slice(start,end)
splice()	从数组的index位置删除howmany个元素，如果有要添加的元素item，则会替换删除的元素并返回删除的元素；如果没有，直接返回删除的元素（会改变原始数组）	arrObj.splice(index,howmany,item1,…,itemX)
sort()	对数据进行排序，在function中编写排序规则，如果没有function，则按字符编码的顺序进行排序（会改变原始数组）	arrObj.sort(function)
reverse()	颠倒数组中元素的位置	arrObj.reverse()
forEach()	遍历数组并对每个元素都执行一次回调函数(return语句没用，且不能结束当前循环)	arrObj.forEach(function(currentValue, index, arr), thisValue)
map()	通过指定函数处理数组的每个元素，并返回处理后的数组(return语句可以改变当前循环元素的值，同样不能结束当前循环)	arrObj.forEach(function(currentValue, index, arr), thisValue)
every()	使用指定函数检测数组中的所有元素，全部通过返回true，否则返回false	arrObj.every(function)
filter()	检测数值元素，并返回符合条件所有元素的数组	arrObj.filter(function(currentValue,index,arr), thisValue)
find()	返回符合传入测试（函数）条件的第一个数组元素	arrObj .find(function(currentValue, index, arr),thisValue)
findIndex()	返回符合传入测试（函数）条件的数组元素索引	arrObj.findIndex(function(currentValue, index, arr), thisValue)
reduce()	将数组元素计算为一个值（从左到右）	arrObj.findIndex(function(currentValue, index, arr), thisValue)
reduceRight()	将数组元素计算为一个值（从右到左）	arrObj.reduce(function(total, currentValue, currentIndex, arr), initialValue)

5、字符串方法

方法	描述	用法
charAt()	返回在指定位置的字符	stringObject.charAt(index)
charCodeAt()	返回在指定的位置的字符的 Unicode 编码	stringObject.charCodeAt(index)
concat()	连接字符串	stringObject.concat(stringX,…,stringX)
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置	stringObject.indexOf(searchvalue,fromindex)
lastIndexOf()	从后向前搜索某个指定的字符串值在字符串中首次出现的位置	stringObject.lastIndexOf(searchvalue,fromindex)
match()	在字符串内检索指定的值，或找到一个或多个正则表达式的匹配.返回指定的值	stringObject.match(searchvalue/regexp)
replace()	用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串	stringObject.replace(regexp/substr,replacement)
search()	检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串,找到返回索引位置，没找到则返回-1	stringObject.search(regexp)
slice()	提取并返回字符串的某个部分start到end（不包括end，没有end时截取到末尾；下标如果为负数，则从尾部开始算）	stringObject.slice(start,end)
split()	把一个字符串分割成字符串数组	stringObject.split(separator,howmany)
substr()	在字符串中抽取从 start 下标开始的指定length的字符(省略length则截取到末尾)	stringObject.substr(start,length)
substring()	提取字符串中介于两个指定下标之间的字符（与slice和substr不同的是，不接受负的参数）	stringObject.substring(start,stop)

6、使用new时，js内部发生了什么

function Foo(){}
var obj = new Foo();

当 new Foo()执行时，首先创建一个空对象；然后继承于 Foo.prototype（原型对象）；接着，Foo()的构造函数会被执行，执行的时候，传入相应的传参，同时上下文(this)会被指定为这个新实例（new foo 等同于 new foo(), 只能用在不传递任何参数的情况）；最后，如果构造函数返回了一个“对象”，那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象，那么new出来的结果为第一步创建的对象。

7、this 关键字

无论是否在严格模式下，在全局执行上下文中（在任何函数体外部）this都指代全局对象

function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window

当以对象里的方法的方式调用函数时，它们的 this 是调用该函数的对象

var obj = {
    name: 'ZhangSan',
    f:function(){
    console.log(this.name)
    }
}
obj.f()  // ZhangSan
// 这里的 this 指向 obj

原型链中的 this，指向的是调用这个方法的对象
通过call()方法和apply()方法调用，this的值可以绑定到一个指定的对象上

// 一个对象可以作为call和apply的第一个参数，并且this会被绑定到这个对象。
var obj = {a: 'Custom'};

// 这个属性是在global对象定义的。
var a = 'Global';

function whatsThis(arg) {
  return this.a;  // this的值取决于函数的调用方式
}

whatsThis();          // 直接调用，      返回'Global'
whatsThis.call(obj);  // 通过call调用，  返回'Custom'
whatsThis.apply(obj); // 通过apply调用 ，返回'Custom'

箭头函数会继承外层函数调用的this绑定

////这个返回的函数是以箭头函数创建的，所以它的this被永久绑定到了它外层函数的this。
var obj = {bar: function() {
                    var x = (() => this);
                    return x;
                  }
          }
// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
// x所指向的匿名函数赋值给fn。
var fn = obj.bar();

// 直接调用fn而不设置this，通常(即不使用箭头函数的情况)默认为全局对象，若在严格模式则为undefined
console.log(fn() === obj); // true
// 但是注意，如果你只是引用obj的方法，而没有调用它(this是在函数调用过程中设置的)
var fn2 = obj.bar;
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
console.log(fn2()() == window); // true

当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象

function Person(name,age){
    this.name = name;
    this.age = age;
    // this指向正构造的新对象
}
// this 指向 person1
var person1 = new Person()

8、call 和 apply 的区别

共同作用：调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)，即改变函数体内部 this 的指向
两者区别：
- call()方法接受的是若干个参数的列表
- apply()方法接受的是一个包含多个参数的数组

function Person(name,age){
    this.name = name;
    this.age = age;
}
function Student(name,age){
    Person.call(this,name,age);
    this.job = 'student';
}

var arr1 = [1,2,3,4];
var arr2 = ['a','b','c','d']
Array.prototype.push.apply(arr1,arr2)
// arr1 = [1, 2, 3, 4, "a", "b", "c", "d"]
Array.prototype.push.call(arr1,arr2)
// arr1 = [1,2,3,4,['a','b','c','d']]

常见 call()用法：

 var arr = [1,34,5,676,521,3,45];
 Math.max.apply(Math,arr);
 Math.max.call(Math,1,34,5,676,521,3,45);
 //  676

9、原生DOM操作

方法	描述
element.appendChild(node)	向元素节点的子节点列表的末尾添加新的子节点
element.childNodes	返回包含被选节点的子节点的 NodeList
element.parentNode	返回某节点的父节点
element.previousSibling	返回某节点之前紧跟的节点（处于同一树层级）返回节点以节点对象返回
element.nextSibling	返回某个元素之后紧跟的节点（处于同一树层级中）返回节点以节点对象返回
element.firstChild	返回被选节点的第一个子节点
element.lastChild	返回文档的最后一个子节点。
element.cloneNode(Boolean)	复制并返回调用它的节点的副本。参数是 true，还将递归复制当前节点的所有子孙节点;否则，只复制当前节点。
element.nodeName	可依据节点的类型返回其名称
element.nodeType	如果节点是一个元素节点，返回 1;如果节点是属性节点,返回 2等等十二种
element.nodeValue	根据节点的类型设置或返回节点的值
element.insertBefore(newnode,existingnode)	在已有的子节点前插入一个新的子节点
element.removeChild(node)	从子节点列表中删除某个节点,失败，则返回 NULL
element.replaceChild(newnode,oldnode)	将某个子节点替换为另一个(新节点可以是文本中已存在的，或者是你新创建的)
element.className	设置或返回元素的 class 属性
element.innerHTML	设置或返回表格行的开始和结束标签之间的 HTML(可以自动解析HTML标签)
element.textContent	设置或者返回指定节点的文本内容;如果设置了 textContent 属性, 任何的子节点会被移除及被指定的字符串的文本节点替换
element.getAttribute(attributename)	返回指定元素的属性值
element.hasAttribute(attributename)	如果元素中存在指定的属性返回 true，否则返回false
element.removeAttribute(attributename)	从元素中删除指定的属性
element.setAttribute(attributename)	设置或者改变指定属性并指定值