JsReview

js常用方法：

  1. toUpperCase：转大写

  2. toLowerCase:  转小写

  3. indexOf: 字符串出现的位置    .indexOf('')== -1  

  4. substring: 截取字符串  。substring(1,2) 截取1-2   substring(3) 截取3-结束

  5. slice： 截取数组元素，返回新数组

  6. push: 数组末尾插入元素

  7. pop: 删除最后一个元素

  8. unshift: 数组头部插入元素

  9. shift: 数组头部删除元素

 10. sort： 对数组进行默认排序

 11.reverse: 反转数组元素

 12.splice: 从指定的索引开始删除若干元素，然后再从该位置添加若干元素  .split(2,1,'a')  从索引2位置删除1个元素，再添加‘a’

 13.concat: 数组拼接

 14.join: 通过指定字符连接数组元素

 15.hasOwnProperty :  判断对象是否有某一属性  aa.hasOwnProperty('name') 

js对象： 

 var AA = {
       name: 'lyf',
       'aa-bb': 'lyf'   //特殊属性申明加‘’，获取属性也需 AA['aa-bb']
}
 //判断是否拥有某一属性：'name' in AA, 返回true/false
 //由于所有对象最终都会在原型链上指向object，所以 'toString' in AA = true
 //安全做法： AA.hasOwnProperty('name'), 返回true/false

1、typeof: 获取对象的类型，返回字符串

2、Date: 

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳


var d = new Date(2015, 5, 19, 20, 15, 30, 123); //创建一个指定日期和时间的Date对象
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)

3、RegExp

字符： \d: 数字     \w: 数字字母   \s: 空格   .: 任意字符   

长度： *: 任意个  +: 至少一个     ?: 有或没有（0个或1个）    {n}: n个字符     {n,m}: n-m个字符

匹配：/^ [0-9a-zA-Z\_]+$/ :     至少由一个数字、字母或者下划线组成的字符串

方法：

'a,b, c  d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']

分组：

var re = /^(\d{3})-(\d{3,8})$/;
re.exec('010-12345'); // ['010-12345', '010', '12345']
re.exec('010 12345'); // null

4、Json

序列化：  JSON.stringify()  转换成json格式

筛选对象键值： JSON.stringify(man,['name','age'],' ')    返回指定对象的对应属性

传入函数处理：JSON.stringify(man,functionName,' ')   对象的每个键值对都会被函数先处理

toJSON():  精确控制序列化

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age，并且改变了key：
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

JSON.parse()： 将json字符串变成一个js对象

解析属性函数：

var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
});
console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}

输出： JSON.stringify(info, null, '  ')  输出有格式的json字符串

5、obj.__proto__： 继承   aaa.__proto__ = man    (aaa继承man属性)   --将一个对象原型指向另一个对象

     Object.create()： 可以传入一个原型对象实现继承不需obj.__proto__去改变对象原型

// 原型对象:
var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

function createStudent(name) {
    // 基于Student原型创建一个新对象:
    var s = Object.create(Student);
    // 初始化新对象:
    s.name = name;
    return s;
}

var aa= createStudent('小明');
aa.run(); // 小明 is running...
aa.__proto__ === Student; // true

6、原型链： 用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。

arr ----> Array.prototype ----> Object.prototype ----> null

                   函数也是一个对象，原型链：

foo ----> Function.prototype ----> Object.prototype ----> null

7、new： 对象 = new function(参数) ，使用new不需再return 

8、class定义：避免代码分散，类的定义更简单。

                        方便继承。原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，可直接通过extends来实现

js函数：

 1、arguments：  获得调用者传入的所有参数  常用于判断传入参数的个数

 2、rest： 获取全部参数  

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

 3、apply:  Function.apply(obj,args)方法能接收两个参数   obj：这个对象将代替Function类里this对象
                  args：这个是数组，它将作为参数传给Function（args-->arguments）     

 function Person(name,age)  
    {  
        this.name=name;  
        this.age=age;  
    }  
    
 function Student(name,age,grade)  
    {  
        Person.apply(this,arguments);    //this指向Person中的属性赋值，arguments即将Student参数传给Person方法处理     
        this.grade=grade;  
    }

            apply方法具有可以将数组转化为字符串的功效。

 4、 call: 与apply相似，参数列表如果为字符，可直接使用call

 5、 map :  数组通过调用map方法，得到新的处理后的数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

6.、reduce：可以将计算记果与后值做累计计算

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

7、 split: 可以将字符转换为数组   ‘12345’.split('')  = ['1','2','3','4','5']     

 可再将数组元素转换为int类型：

  let arr = ['1','3','4','5']
  arr = arr.map(x=> {
     return parseInt(x)
  }

8、filter: 可以过滤元素，根据返回值true或false 决定保留元素

      作为回调函数，filter有如下属性：

arr.filter(function (element, index, self) {})
/**element: 表示数组元素  index: 数组元素位置  self: 数组本身-arr **/

     filter 去重：

r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;   //根据判断数组元素的位置是否相等实现去重，后续相同元素位置不符被除去
});

9、 trim:  用来除去字符串的头尾空格

10、sort: 字母区分大小写，且默认把所有元素转换为String 再排序

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {return 1; }   //1为true    
    if (x > y) {return -1;}  //-1为false    
    return 0; });           // [20, 10, 2, 1]

11、every: 可以判断数组的所有元素是否满足测试条件 

                 arr.every(function (s) {return s.length > 0;})   //返回true或false

12、find: 可用于查找返回符合条件的第一个元素，没有返回undefined

13、findIndex: 查找返回符合条件的第一个元素索引，没有返回-1

14、forEach: 遍历

15、闭包...

16、generator...

DOM对象: 

  1、window: innerWidth、innerHeight   （浏览器内部宽高）

                     outerWidth、outerHeight   （浏览器整个窗口宽高）

 2、navigator： 

• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的User-Agent字符串

 3、screen：

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24

 4、location：  location.href获取URL

//www.example.com:8080/path/index.html?a=1&b=2#TOP

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

   location.reload();     重新加载
   location.assign('/');  加载新页面

 5、document：DOM树的根节点

   （1）getElementById、getElementsByName（css选择器getElementsByClassName）、getElementsByTagName（td类似）、createElement（创建子节点）、childElement、parentElement

   （2）querySelector（）、querySelectorAll（）

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

  （3） document.cookie : 读取到当前页面的Cookie 

  cookie: ******(Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。)

  *** 服务器设置cookie时需用httpOnly确保用户信息不被会被引入的js影藏恶意代码窃取

 6、history： history.back()、history.forward()不应使用。

 7、DOM操作： 更新、遍历、添加、删除

    innerText: 不返回隐藏元素文本

    textContent: 返回所有文本

    .style.fontSize:  获取DOM元素样式（驼峰）

 8、appendChild： 插入新的节点

      insertBefore： 插入节点之前

      children： 获取子节点，可用于迭代获取子节点元素进行操作

      removeChild: 删除节点。需先获取其父节点再调用removeChild删除

9、for x in []: 循环数组时获取的是数组下标

     for x in {}:  循环对象时获取的是对象key

     for x of []: 循环数组时获取的是数组值

     for x of {}: 循环对象时循环的是对象key值， 相当于 for x of Object.key({})