JavaScript知识点记录

 

记录方法及知识点，避免后期遗忘

null和undefined

null代表一个空值，undefined代表值未定义。

==和===

==会自动转换数据类型再比较。===不会自动转换数据类型，如果数据类型不一致，则返回false。

例如：false == 0 : true，false === 0：false

数组

var arry = new Array(1,2,3);

var array = [1,2,3];

对象

var model = {

　　name:"Chenxy",

　　age:20

}

Json

var model = {
"Name": "Chenxy",
"hooby": ["Eat", "Play", "Game"]
}

strict模式与全局变量

如果变量不用var申明，则视为全局变量。如存在多个同名的全局变量则会冲突。

为修复此问题，推出strict模式，如未声明则异常。启动方法为在js代码上加上 'use strict';

转义字符

\n 换行，\t 制表符，\\ 就是\

字符串方法

var ToUpper = strText.toUpperCase();
    console.log("全部变大写："+ToUpper);
    var ToLower = strText.toLowerCase();
    console.log("全部变小写："+ToLower);
    var IndexOf = strText.indexOf("jq");
    console.log("返回指定字符出现的位置，如果没有则-1："+IndexOf);
    var SubStr = strText.substring(0,3);
    console.log("返回指定区间字符串："+SubStr);

数组方法

var arr = [10,20,30,'40'];
    var IndexOf = arr.indexOf(20);
    console.log("返回指定的索引，如果没有则-1："+IndexOf);
    var Slice = arr.slice(2,3);
    console.log("截取部分元素，返回一个新的array，如果不写第二个则默认截取到最后："+Slice);
    
    arr.push(50,60); //向末尾添加若干元素
    arr.unshift(5,6); //向头部添加若干元素
    arr.pop();//删除最后一个元素
    arr.shift();//删除第一个元素
    
    arr.sort(); //排序
    arr.reverse(); //倒序
    
    arr.splice(2,3,80,90); //从索引2开始删除三个元素，然后添加两个元素
    
    var arr2 = ['A','B','C'];
    arr.concat(arr2); //合并两个数组
    arr.concat(1,2,[3,4]); //自动将数组拆开，并组合
    
    var join = arr.join('-'); 
    console.log("每个元素都用指定连接符连接："+join);

in操作符

查询对象中是否包含某一个属性。包含为true，反之为false。

例子：'name' in obj; 

Map和Set

一组键值对的结构，拥有极快的查找速度。键不可以重名，如果重名则会替换之前那个

var sMap = new Map(); //初始化空Map
    sMap.set("A",67); //添加一个
    sMap.set("B",70);
    sMap.has("A"); //判断是否存在
    sMap.get("A"); //获取对应值
    sMap.delete("A"); //删除key

Set没有重复的Key，重复元素会被自动过滤。剩下的和Map相同

arguments

调用者传入的所有参数。直接方法里面写即可

rest

多余的参数以数组的形式交给变量rest。例：function a(a,b,..rest){}

this

只获取被调用的对象。

apply

修复this指向对象。两个参数，第一个是需要绑定的this变量，第二个是参数。例子：getA.apply(xiaoming,[1,2,3]); //this指向小明，参数为123

call

跟apply相似，只不过是顺序输入。getA.call(xiaoming,1,2,3);

装饰器

利用apply，可以重写window内置方法。举例：

var oldParInt = window.parseInt;
    window.parseInt = function(){
        alert(1);
        return oldParInt.apply(null,arguments);
    }

Map

遍历于数组，可以让数组中每个元素都执行某个方法。例：

function pow(x)
    {
        return x*x;
    }
    var arr = [1,2,3,4,5,6];
    arr.map(pow);

reduce

函数必须接收两个值，遍历与数组，进行累加计算。例：

function pow(x,y)
    {
        return x*y;
    }
    var arr = [1,2,3,4,5,6];
    arr.reduce(pow);

 

filter

过滤某些元素，返回剩下的元素。例，删除偶数只留下奇数：

var arr = [1,2,3,4,5,6];
    var r = arr.filter(function(x){ return x % 2 != 0; }); console.log(r);

闭包私有变量

用javascript实现一个私有变量的效果，如下：

function ZiZeng(x) {
        var z = x || 0; return { add: function() { z += 1; return z; } } } var zi = ZiZeng(); console.log(zi.add(1));

generator

除了return以外，可以返回多次使用yield。例子：循环输出效果

function* AddNum(max)
    {
        var qishi = 0; while (qishi < max){ yield qishi; qishi++; } return qishi; } for(var x of AddNum(5)) { console.log(x); }

注意：function* 

typeof 与 instanceof

typeof 返回对象类型，例：typeof 1; //'number'

instanceof 用于判断一个变量是否某个对象的实例，例："chenxy" instanceof String; //true

new object与object

var n = new Number(123); //实际上类型已经是object，所以类型尽量不要加new

var n = Number('123');  //转换为Number类型，类似于方法parseInt()

数字转换字符串

123.toString(); //异常，应写为 123..toString() 或 (123).toString()

正则表达式

\d 匹配数字，

\w 匹配字母或数字，

\s Tab或者空格

.   匹配任意字符，

* 任意个字符（包括0个），

+ 表示至少一个字符，

? 表示0或1个，

{n} 表示n个，

{n,m} 表示n-m个

[] 表示范围，比如：[0-9a-zA-Z\_] 可以匹配一个数字、字母或者下划线

A|B 匹配A或B，例如：[J|j]ava 可以匹配 Java 或 java

^表示行开头，例如：^\d

$表示行结束，例如：$\d

Javascript中，两种方法可以定义正则表达式

第一种：直接写，var a = /ABC\-001/;

第二种：实例化一个RegExp，var a = new RegExp('ABC\\-001');

判断是否匹配

var re = /^\d{3}$/;

re.test('000'); //true

切分字符串

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

分组

（）表示要提取的分组。匹配成功以后会返回一个Array，第一个是本身，后面是匹配成功的字符串。例如：

var re = /^(\d{3})-(\d{3,8})$/;

re.exec('010-123456'); //['010-123456','010','123456']

Json

Json一个六种数据类型。number、boolean、string、null、array、object。

定死了字符串必须是 UTF-8，必须用双引号

序列化

var xiaoming = {
        name:'晨星宇', age:22, skills:['Javascript','C#','Oracle'] }; console.log(JSON.stringify(xiaoming)); //{"name":"晨星宇","age":22,"skills":["Javascript","C#","Oracle"]} console.log(JSON.stringify(xiaoming,null,' ')); //格式化 console.log(JSON.stringify(xiaoming,['name','skills'])); //筛选键值，{"name":"晨星宇","skills":["Javascript","C#","Oracle"]}

还可以传入一个函数，这样每个键值都会被函数先处理

function convert(key, value) {
    if (typeof value === 'string') { return value.toUpperCase(); } return value; } JSON.stringify(xiaoming, convert, ' ');

还可以自定义一个toJson方法，直接返回序列化的数据

var xiaoming = {
        name:'晨星宇', age:22, skills:['Javascript','C#','Oracle'], toJSON:function(){ return { "Name":this.name, "Age":this.age }; } };

反序列化

console.log(JSON.parse('{"name":"晨星宇","age":22,"skills":["Javascript","C#","Oracle"]}'));

面向对象的JS

Js不去分类和实例的概念，都是通过原型（prototype）来实现面向对象编程的。举例：

比如说，我想买麦当劳，但是我们没有这个类。但现在有一个肯德基的类，如下：

    var KFC = {
        name:'kfc', money:200, eat:true };

除了名字不一样，剩下挺相似，就用这个。如下：

var KFC = {
        name:'kfc', money:200, eat:function(){ console.log("开吃"); } }; function Create(name) { var s = Object.create(KFC); s.name = name; return s; } var M = Create("McDonald"); M.eat();

M._proto_ = KFC   低版本IE不支持这种指向，尽量不要使用

原型链

上面Create这个函数，原型链为：Create ---> Function.prototype ---> Object.prototype ---> null

构造函数

function Hello(Name)
    {
        this.name = Name; this.hello = function (){ alert('Hello' + Name); } } var xiaoming = new Hello("XiaoMing"); xiaoming.hello();

注意，一定要加上new

继承

因为两个方法原型链相同，所以需要修复原型链的关系。才可实现继承，具体方法如下：

//修复原型链
    function inherits(Child,Parent)
    {
        var F = function(){} F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; } function Student(props) { this.name = props.name || 'Chenxy'; } Student.prototype.hello = function(){ alert('Hello,'+this.name+'!'); } function PrimaryStudent(props) { Student.call(this,props); this.grade = props.grade || 1; } //实现原型链  inherits(PrimaryStudent,Student); //调用方法 var pri = new PrimaryStudent("Chenxy"); pri.hello();