js基础笔记

js基本数据类型

Number, String, Boolean, Null, Undefined。Number, String, Boolean 都有对应的对象进行封装。
Number对象基本用法

/*[Number: 255]
255 object
2.220446049250313e-16
9007199254740991
1.7976931348623157e+308
5e-324
NaN
-Infinity
Infinity
false
true
true
true
22.334
332
2.550e+2
255.0000
255
ff
object
number*/
var num = new Number(255);
console.log(num);
console.log(num+" "+(typeof num));
console.log(Number.EPSILON);
console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
console.log(Number.NaN);
console.log(Number.NEGATIVE_INFINITY);
console.log(Number.POSITIVE_INFINITY);
console.log(Number.isNaN("2"));
console.log(Number.isFinite(222222222222222222));
console.log(Number.isInteger(321));
console.log(Number.isSafeInteger(555));
console.log(Number.parseFloat("22.334"));
console.log(Number.parseInt("332.942"));
console.log(num.toExponential(3));//有效位数
console.log(num.toFixed(4));//小数位数
console.log(num.toPrecision(3));//有效位数
console.log(num.toString(16));//基
console.log(typeof num);
console.log(typeof num.valueOf());//原始值

String对象基本用法

/*H
72
Hello World   !!!
-1
9
-1
[ 'Hello World',
  index: 0,
  input: 'Hello World   ',
  groups: undefined ]
AELLEE World   
5
llo W
[ 'He', '', 'o Wor' ]
llo 
ll
hello world   
HELLO WORLD   
Hello World
Hello World
Hello World
World*/
var str = new String("Hello World   ");
console.log(str.charAt(0));
console.log(str.charCodeAt(0));
console.log(str.concat("!!!"));
console.log(str.indexOf('x'));
console.log(str.lastIndexOf('l'));
console.log(str.localeCompare("Jello World"));
console.log(str.match(/w+sw+/i));
console.log(str.replace(/w*ELw*/i, "AELLEE"));
console.log(str.search(/s+/));
console.log(str.slice(2,7));
console.log(str.split('l',3));
console.log(str.substr(2,4));
console.log(str.substring(2,4));
console.log(str.toLowerCase());
console.log(str.toUpperCase());
console.log(str.trim());
console.log(str.trimRight());
console.log(str.valueOf());
console.log(str.slice(-8,-3));//length-8, length-3

Boolean对象基本用法

/*[Boolean: true]
object boolean
[Boolean: true]*/
var bool = new Boolean(true);
console.log(bool);
console.log(typeof bool+" "+typeof bool.valueOf());
//生成false传入值包括：0, -0, NaN, null, undefined, "", false
//生成true传入值包括："aaa", {}, Infinity, any object...
console.log(new Boolean(new Boolean(false)));

js其他对象

Array

 1 var stus = ["Tom", "Jaki", "Lucy", "Ami"];
 2 console.log(typeof stus);
 3 var array = new Array("Tom", "Jaki", "Lucy", "Ami");
 4 console.log(typeof array);
 5 console.log(array[2]);
 6 console.log(Array.isArray(array)+" "+array.length);
 7 array.length = 3;
 8 console.log(array);//溢出元素将丢失
 9 //stack A
10 var myArray = new Array(1,2,3,4,5);
11 myArray.pop();//del last one
12 console.log(myArray);
13 myArray.push(8);//add at end
14 console.log(myArray);
15 //stack B
16 myArray.shift();//del first one
17 console.log(myArray);
18 myArray.unshift(9);//add at first
19 console.log(myArray);
20 myArray.reverse();
21 myArray.sort(function(a,b){
22     if(a>b)
23         return 1;
24     else if(a<b)
25         return -1;
26     else
27         return 0;
28 });
29 console.log(myArray);
30 myArray.splice(4,2,"aaa","bbb","ccc");
31 console.log(myArray);
32 myArray = myArray.concat(5,6,7);
33 console.log(myArray.join('-'));
34 console.log(myArray.slice(1,4));//from to [a,b)
35 console.log(myArray.toString());
36 console.log(myArray.indexOf("aaa"));
37 console.log(myArray.lastIndexOf(5));
38 //traverse array A
39 myArray.forEach(function(element, index, array){
40     console.log(element,index,array);
41 }, myArray);
42 console.log("----------------------------");
43 //traverse array B, 
44 //every means all true return true, otherwise false
45 //some means all false return false, otherwise true
46 var notHaveCCC = myArray.every(function(element, index, array){
47     //console.log(this);
48     console.log(element,index,array);
49     if(element == "ccc")
50         return false;
51     else
52         return true;
53 }, myArray);
54 console.log(notHaveCCC);
55 //traverse array C
56 //if pass the filter (return true), be added to new array
57 var newArray = myArray.filter(function(element, index, array){
58     //console.log(this);
59     console.log(element,index,array);
60     if(element == "ccc")
61         return true;
62     else
63         return false;
64 }, myArray);
65 console.log(newArray);
66 //traverse array D
67 //map array to another one
68 newArray = myArray.map(function(element, index, array){
69     //console.log(this);
70     return "*"+element+"*";
71 }, myArray);
72 console.log(newArray);
73 //reduce function
74 newArray = myArray.reduce(function(acc, element, index){
75     //console.log(this);
76     return acc+" "+element;
77 }, "hello");
78 console.log(newArray);
79 newArray = myArray.reduceRight(function(acc, element, index){
80     //console.log(this);
81     return acc+" "+element;
82 }, "hello");
83 console.log(newArray);

View Code

Math

/*
    Math.E：常数e。  
    Math.LN2：2的自然对数。  
    Math.LN10：10的自然对数。  
    Math.LOG2E：以2为底的e的对数。  
    Math.LOG10E：以10为底的e的对数。  
    Math.PI：常数Pi。  
    Math.SQRT1_2：0.5的平方根。  
    Math.SQRT2：2的平方根。

    Math.abs()：返回参数的绝对值  
    Math.ceil()：向上取整，接受一个参数，返回大于该参数的最小整数。 
    Math.floor()：向下取整  
    Math.max(n,n1,...)：可接受多个参数，返回最大值  
    Math.min(n,n1,..)：可接受多个参数，返回最小值  
    Math.pow(n,e)：指数运算, 返回以第一个参数为底数、第二个参数为幂的指数值。 
    Math.sqrt()：返回参数值的平方根。如果参数是一个负值，则返回NaN。  
    Math.log()：返回以e为底的自然对数值。
    Math.exp()：返回e的指数，也就是常数e的参数次方。
    Math.round()：四舍五入  
    Math.random()：返回0到1之间的一个伪随机数，[0,1)。
*/

View Code

Date

var date = new Date();
console.log(date);
date = new Date(1483888888999);
console.log(date);
date = new Date("January 17, 2019 11:15:00");
console.log(date);
date = new Date(2019, 1, 15, 11, 15, 0, 0);
console.log(date);
console.log(Date.now());
console.log(Date.parse("January 17, 2019 11:15:00"));
console.log(date.getDate());//day in month
console.log(date.getDay());//day in week
console.log(date.getFullYear());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getMilliseconds());
console.log(date.getMonth());
console.log(date.getTime());
console.log(date.toDateString());
console.log(date.toJSON());
console.log(date.toString());
console.log(date.valueOf());

View Code

RegExp

//. anyword; d 0-9; D ^[0-9]; w [A-Za-z0-9_]; W ^[A-Za-z0-9_]; s space
//xff 十六进制; uabcd Unicode abcd
var re = new RegExp('JS*','ig');//i ignore case, g global, m multilines
var str = "cfdjJS *(&YJSjs 888jS)";
var resultArr = re.exec(str);
console.log(str+"<br/>");
while(resultArr){
    console.log(resultArr[0]);
    console.log("next match starts at "+re.lastIndex+"<br/>");
    resultArr = re.exec(str);
}
console.log("================");
var reg = /:D*sd+sd+/;//等同于/[^0-9]*s[0=9]+s[0-9]+/,且^$可表示头尾
var reg2 = /whiw/;
var str1 = "this is a date: May 11 2019";
var resultString = str1.match(reg);
var replacedStr = str1.replace(reg2,"that");
console.log("Date"+resultString+"<br/>");
console.log(replacedStr+"<br/>");
//exchange words
var rgExp = /(w*)-*(w*)/;//w = [A-Za-z0-9_]
var str2 = "Java---script";
var resultString1 = str2.replace(rgExp,"$2-$1");
console.log(resultString1+"<br/>");

View Code

Object

/*Catalina
15
teaching...
relaxing...
Student1,name:linda,age:2
Stu1,Stu2,name:linda,age:2
student,name:linda,age:2
get function
Lucy
set function
get function
June*/
var teacher = {
    name:"Catalina",
    age:5,
    teaching:function(){
        console.log("teaching...");
    },
    relaxing:function(){
        console.log("relaxing...");
    },
    display:function(owner){
        console.log(owner+",name:"+this.name+",age:"+this.age);
    }
};
console.log(teacher.name);
teacher.age = 15;
console.log(teacher["age"]);
teacher.teaching();
teacher["relaxing"]();

var student = {
    name:"linda",
    age:2
}
teacher.display.apply(student,["Student1","Student2"]);//(object,[params])
teacher.display.call(student,["Stu1","Stu2"]);
var studentDisplay = teacher.display.bind(student,"student");
studentDisplay();

var stud = new Object();
stud.name = "Lucy";
stud.age = 20;
stud.learning = function(){
    console.log("learning...");
}
var myName = "Lucy";
Object.defineProperty(stud,"name",{
    configurable:true,
    enumerable:true,
    //these two settings cannot go with get and set
    //writable:true,
    //value:"July"
    get:function(){
        console.log("get function");
        return myName;
    },
    set:function(value){
        console.log("set function");
        myName = value;
    }
});
console.log(stud.name);
stud.name = "June";
console.log(stud.name);
Object.defineProperties(teacher,{
    "name":{
        value:"Nancy",
        writable:false
    },
    "age":{
        value:11,
        writable:false
    }
});

View Code

JS没有继承机制，但可以用多种方式模拟

//animate class with factory pattern
function TeacherFactory(name, age, subject) {
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.subject = subject;
    obj.teaching = function() {
        console.log("I am " + this.name + ", age " + this.age + ", teach " + this.subject);
    }
    return obj;
}
var Lucy = TeacherFactory("Lucy", "24", "swift");
Lucy.teaching();

//animate class with constructor
function TeacherConstructor(name, age, subject) {
    this.name = name;
    this.age = age;
    this.subject = subject;
    this.teaching = function() {
        console.log("I am " + this.name + ", age " + this.age + ", teach " + this.subject);
    }
}
var lucyy = new TeacherConstructor("Lucyy", "23", "swifttt");
lucyy.teaching();

//Object.create
var ATeacher = {
    name: "aHa",
    age: 20,
    subject: "swift",
    teaching: function() {
        console.log("I am " + this.name + ", age " + this.age + ", teach " + this.subject);
    }
}
var aHa = Object.create(ATeacher);
aHa.teaching();
//prototype
function People() {
    this.sayHi = function() {
        console.log("Hello,I am " + this.name + ", age " + this.age + ".");
    }
}

function Teacher(name, age, subject) {
    this.name = name;
    this.age = age;
    this.subject = subject;
}
Teacher.prototype = new People();
var jaki = new Teacher("jaki", 21, "swift");
jaki.sayHi();

View Code

以上为js基础笔记，温故而知新