JS基础---->javascript的基础(二)

  记载javascript的一些基础的知识。我们在春风秋雨中无话不说,又在春去秋来中失去了联系。

js中string类型

一、字符方法:charAt() 和 charCodeAt()

var stringValue = "hello world";
console.log(stringValue.charAt(1)); // 2
console.log(stringValue.charCodeAt(1)); // 101

二、字符串操作方法: concat()

var stringValue = "hello ";
var result = stringValue.concat("world", "!");
console.log(result); // hello world!

三、slice() 、substr() 和 substring()方法:

var stringValue = "hello world";
console.log(stringValue.slice(3, 7)); // lo w
console.log(stringValue.substring(3, 7)); // lo w
console.log(stringValue.substr(3, 7)); // lo worl

四、字符串位置方法: indexOf() 和 lastIndexOf()

var stringValue = "hello world";
console.log(stringValue.indexOf("o")); // 4
console.log(stringValue.lastIndexOf("o")); // 7

这两个方法都可以接收可选的第二个参数,表示从字符串中的哪个位置开始搜索

var stringValue = "hello world";
console.log(stringValue.indexOf("o", 6)); // 7
console.log(stringValue.lastIndexOf("o", 6)); // 4

五、  trim() 方法

var stringValue = " hello world ";
var trimmedStringValue = stringValue.trim();
console.log(trimmedStringValue); // hello world

六、字符串的模式匹配方法:match()、search()、replace()和 split()方法。

var text = "cat, bat, sat, fat";
var pattern = /.at/;
var matches = text.match(pattern); // 与 pattern.exec(text)相同
console.log(matches.index); // 0
console.log(matches[0]); // cat
console.log(pattern.lastIndex); // 0

 search方法只能从头开始搜索:

var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
console.log(pos); // 1

replace方法接受两个参数:第一个参数可以是一个 RegExp 对象或者一个字符串(这个字符串不会被转换成正则表达式),第二个参数可以是一个字符串或者一个函数:

var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");
console.log(result); // cond, bat, sat, fat
result = text.replace(/at/g, "ond");
console.log(result); // cond, bond, sond, fond

 split()方法基于指定的分隔符将一个字符串分割成多个子字符串,并将结果放在一个数组中。分隔符可以是字符串,也可以是一个 RegExp 对象:

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(","); // ["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2); // ["red", "blue"]

七、 localeCompare() 方法:

var stringValue = "yellow";
console.log(stringValue.localeCompare("brick")); // 1
console.log(stringValue.localeCompare("yellow")); // 0
console.log(stringValue.localeCompare("zoo")); // -1

js中的面向对象

一、数据属性包含一个数据值的位置。在这个位置可以读取和写入值

Configurable:表示能否通过delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性
Enumerable:表示能否通过for-in 循环返回属性
Writable:表示能否修改属性的值
Value:包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。这个特性的默认值为undefined

要修改属性默认的特性,必须使用 ECMAScript 5 的 Object.defineProperty() 方法。

var person = {};
Object.defineProperty(person, "name", {
    writable: false,
    value: "Nicholas"
});
console.log(person.name); // Nicholas
person.name = "Greg";
console.log(person.name); // Nicholas

二、访问器属性:

Configurable:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性
Enumerable:表示能否通过 for-in 循环返回属性
Get:在读取属性时调用的函数。默认值为 undefined 
Set:在写入属性时调用的函数。默认值为 undefined

访问器属性不能直接定义,必须使用 Object.defineProperty() 来定义:

var book = {
    name: "huhx"
};
Object.defineProperty(book, "name", {
    get: function() {
        console.log("get method.");
    },
    set: function() {
        console.log("set method.");
    }
});
book.name = "linux"; // set method.
book.name; // get method.

三、使用 ECMAScript 5 的 Object.getOwnPropertyDescriptor() 方法,可以取得给定属性的描述符。Object.definePro-perties() 方法可以通过描述符一次定义多个属性。

var love = {};
Object.defineProperties(love, {
    name: {
        value: "huhx"
    },
    year: {
        get: function() {
            console.log("get method.");
        }, 
        set: function() {
            console.log("set method.");
        }
    }
});
var descriptor = Object.getOwnPropertyDescriptor(love, "name");
console.log(descriptor.value); // huhx
console.log(descriptor.configurable); // false
console.log(typeof descriptor.get); // undefined

var yearDescriptor = Object.getOwnPropertyDescriptor(love, "year");
console.log(yearDescriptor.value); // undefined
console.log(yearDescriptor.configurable); // false
console.log(typeof yearDescriptor.get); // function

四、判断属性是否是原型的:

  • hasOwnProperty() 方法可以检测一个属性是存在于实例中,还是存在于原型中。这个方法只在给定属性存在于对象实例中时,才会返回true。
  • in操作符会在通 过对象能够访问给定属性时返回 true ,无论该属性存在于实例中还是原型中。
function People() {}
People.prototype.name = "huhx";
var people = new People();
people.age = 123;
console.log(people.hasOwnProperty("name")); // false
console.log(people.hasOwnProperty("age"));  // true
console.log("name" in people);              // ture

js创建对象的模式

一、工厂模式:

function createPerson(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        alert(this.name);
    };
    return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");

二、构造函数模式:

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
        alert(this.name);
    };
}
var person1 = new Person("Nicholas", 29, "Software Engineer");

三、原型模式:

function Person() {}
Person.prototype.name = "huhx";
Person.prototype.sayHello = function() {
    console.log(this.name);
}
var person1 = new Person(); var person2 = new Person(); console.log(person1.sayHello == person2.sayHello); // true

四、

Json对象的使用

js中关于json对象有两个重要的方法:

  • stringify()方法:把一个Javascript对象序列化为一个JSON字符串。
  • parse()方法:把字符串解析为原生的JavaScript对象。
var book = {
    name: "Thinking in Java",
    price: 100,
    author: "huhx"
}
var jsonText = JSON.stringify(book);
console.log(jsonText); // {"name":"Thinking in Java","price":100}
var stringText = JSON.parse(jsonText);
console.log(stringText); // Object {name: "Thinking in Java", price: 100}

var someInfo = JSON.stringify(book, ["name", "author"]);
console.log(someInfo); // {"name":"Thinking in Java","author":"huhx"}
var someStrInfo = JSON.parse(jsonText, function(key, value) {
    if (key == "name") {
        return "Java";
    } else {
        return value;
    }
});
console.log(someStrInfo); // Object {name: "Java", price: 100, author: "huhx"}

 在序列化对象时,所有函数及原型成员都会被有意忽略,不体现在结果中。此外,值为undefined的任何属性也都会被跳过。

var person = {
    age: undefined,
    name: "huhx"
}
console.log(JSON.stringify(person)); // {"name":"huhx"}

友情链接

原文地址:https://www.cnblogs.com/huhx/p/baseusejslean2.html