JavaScript中各种引用类型的常用操作方法小结


Posted in Javascript onMay 05, 2016

Object类型

Array类型
重排序方法: compare
升序:

function compare(value1, value2){
  if (value1<value2){
    return -1;
  }
  if (value1>value2){
    return 1;
  } else{
    return 0;
  }
}
var values = [0,1,5,10,15];
values.sort(compare);
console.log(values); // [0,1,5,10,15]

降序:

function compare(value1, value2){
  if (value1<value2){
    return 1;
  }
  if (value1>value2){
    return -1;
  } else{
    return 0;
  }
}

slice:
slice(start, end); slice()方法返回从参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起死和结束位置之间的项,但不包括结束位置的项。

var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

console.log(colors2); // green, blue, yellow, purple
console.log(colors3); // green, blue, yellow

splice:
splice()有删除,插入,替换的功能

删除:
需要两个参数,要删除的第一项的位置和要删除的项数。

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);
console.log(colors); // greeen, blue
console.log(removed); // red

插入:
需要三个参数:起始位置、0(要删除的项数)和要插入的项

var colors = ["red", "green", "blue"];
var removed = colors.splice(1,0,"yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "green", "blue"]
console.log(removed); // 返回空

替换:
需要三个参数:起始位置、要删除的项数和要插入的任意数量的项。

var colors = ["red", "green", "blue"];
var removed = colors.splice(1,1,"yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "blue"]
console.log(removed); // ["green"]

Date类型
RegExp类型

var pattern1 = /[bc]/i;
var pattern2 = new RegExp("[bc]at", "i");

pattern1和pattern2是两个完全等价的正则表达式。要注意的是,传递给RegExp构造函数的两个参数都是字符串(不能把正则表达式字面量传递给RegExp构造函数)。由于RegExp构造函数的模式参数是字符串,所以在某些情况下要对字符串进行双重转义。

var pattern1 = /[bc]/i;
var pattern2 = new RegExp("\\[bc\\]at", "i");

RegExp实例方法
exec

exec接收一个参数,即要应用模式的字符串,然后返回包含第一个匹配信息的数组。

var text = "cat, bat, sat, fat";
var pattern1 = /.at/;

var matches = pattern1.exec(text);
console.log(matches); // ["cat"]

match
match是字符串执行匹配正则表达式规则的方法,他的参数是正则表达

var text = "cat, bat, sat, fat";
var pattern1 = /.at/;

var matches2 = text.match(pattern1);
console.log(matches2); // ["cat"]

test
test()接收一个字符串参数

var text = "000-00-0000";
var pattern = /\d{3}-\d{2}-\d{4}/;

if (pattern.test(text)){
  console.log("The pattern was matched"); // The pattern was matched
}

Function类型
函数内部属性
把arguments转为数组

(function() {
  var slice = Array.prototype.slice,
    aArguments = slice.apply(arguments);

    console.log(aArguments);
})(10, 20, 30);
arguments.callee

该属性是一个指针,指向拥有这个arguments对象的函数。当函数在严格模式下运行时,访问arguments.callee会导致错误。

函数属性和方法
length
length属性表示函数希望接收的命名参数的个数。

function sayName(name){
  alert(name);
}

function sum(num1,num2){
  return num1 + num2;
}

function sayHi(){
  alert("hi");
}

console.log(sayName.length); //1
console.log(sum.length); //2
console.log(sayHi.length); //0

prototype

call, apply

function sum(num1, num2){
  return num1 + num2;
}

function callSum1(num1,num2){
  return sum.apply(this,arguments);
}

function callSum2(num1, num2){
  return sum.apply(this, [num1, num2]); 
}

console.log(callSum1(10,10)); // 20
console.log(callSum2(10,10)); //20
window.color = "red";
var o = {color:"blue"};

function sayColor(){
  console.log(this.color);
}

sayColor(); // red

sayColor.call(this); // red
sayColor.call(window); // red
sayColor.call(o); // blue

基本包装类型

var value = "25";
var number = Number(value);
console.log(typeof number);
console.log(number instanceof Number);// false

var obj = new Number(value);
console.log(typeof obj);
console.log(obj instanceof Number);// true

Boolean类型

var falseObject = new Boolean(false);
var result = falseObject && true; // true 

//布尔表达式中的所有对象都会被转换为true, 因此falseObject对象在布尔表达式中代表的是true

console.log(result); // true

var falseValue = false;
result = falseValue && true;
console.log(result); //false

console.log(typeof falseObject); //object
console.log(typeof falseValue); // Boolean
console.log(falseObject instanceof Boolean); //true
console.log(falseValue instanceof Boolean); // false

Number类型

var numberObject = new Number(10);
var numberValue = 10;
console.log(typeof numberObject); // Object
console.log(typoef numberValue); // number
console.log(numberObject instanceof Number); // true
console.log(numberValue instanceof Number); // false

String类型
字符方法
charAt() charCodeAt()

charAt()方法以单字符字符串的形式返回给定位置的那个字符串。

charCodeAt()返回的是字符编码。

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

字符串操作方法
concat()

concat()用于将一或多个字符串拼接起来。

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

slice(start, end)
end 表示字符串到哪里结束。
如果传入的是负数,slice()方法会将传入的负值与字符串长度相加。

var str="Hello happy world!";
console.log(str.slice(6)); // happy world!
console.log(str.slice(6,11));// happy
console.log(str.slice(-3)); // ld!
console.log(str.slice(3, -4)); //lo happy wo

substring(start, end)
如果传入的是负数, substring()会把所有字符参数都转换为0

var str="Hello happy world!";
console.log(str.substring(6)); // happy world!
console.log(str.substring(6,11));// happy
console.log(str.substring(-3)); // Hello happy world!
console.log(str.substring(3, -4)); //Hel

substr(start, length)
如果传入的是负数,substr()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0

var str="Hello world!";
console.log(str.substr(3)); //lo world!
console.log(str.substr(3, 7)); //lo worl
console.log(str.substr(-3)); // ld!
console.log(str.substr(3, -3)); // 空字符串

字符串位置方法

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

字符串的模式匹配方法
match()

var text = "cat, bat, sat, fat";
var pattern = /.at/;

var matches = text.match(pattern);
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()

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

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

Global对象
URI编码方法
Global对象的encodeURI()和encodeURIComponent()方法可以对URI(Uniform Resources Identifiers,通用资源标识符)进行编码,以便发送给浏览器。

var url = "http://www.baidu.com/";
console.log(encodeURI(url));
console.log(encodeURIComponent(url));
encodeURI()和encodeURIComponent()方法对象的两个方法分别是decodeURI()和decodeURIComponent()

Math对象
random()方法

Math.random()方法返回介于0和1之间一个随机数,不包含0和1。对于某些站点来说,这个方法非常实用,因为可以利用它来随机显示一些名言和新闻事件。套用下面的公式,就可以利用Math.random()从某个整数范围内随机选择一个值。

值=Math.floor(Math.random()*可能值的总数+第一个可能的值)

例如:如果想选择一个1到10之间的数值,可以像下面这边编写代码:

var num = Math.floor(Math.random()*10+1);
function selectFrom(lowerValue,upperValue){
  var choice = upperValue - lowerValue + 1;
  return Math.floor(Math.random()*choice+lowerValue);
}
var num = selectFrom(2,10);
console.log(num);
var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"];
var color = colors[selectFrom(0, colors.length-1)];
console.log(color);
Javascript 相关文章推荐
Javascript模板技术
Apr 27 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
Sea.JS知识总结
May 05 #Javascript
在Node.js中使用Javascript Generators详解
May 05 #Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 #Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 #Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 #Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 #Javascript
深入理解js promise chain
May 05 #Javascript
You might like
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python编程之多态用法实例详解
2015/05/19 Python
python实现文件快照加密保护的方法
2015/06/30 Python
Python部署web开发程序的几种方法
2017/05/05 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
分析python请求数据
2018/08/19 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
零基础小白多久能学会python
2020/06/22 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
一道Delphi上机题
2012/06/04 面试题
银行实习生的自我评价
2013/12/09 职场文书
计算机实训报告总结
2014/11/05 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书