JS基础（8） 一些方法

<script id="内置对象介绍">

//JS中提供多个内置对象 String/Math/Array/Date……

//Array对象

//1、检查一个对象是否是数组    使用场景  函数参数要求是数组的情况下

//Array.isArray()  或者  instanceof

//instanceof

var arr = ['张三','李四'];

console.log(arr instanceof Array);

console.log(arr instanceof Boolean);

//但是 instanceof 也存在问题

console.log(arr instanceof Object);//true

//一般用  Array.isArray();

console.log(Array.isArray(arr));

console.log(Array.isArray('arr'));

//toString()/valueOf()

//toString() 将数组转换成字符串，逗号分隔每一项

var arr = ['张三','李四','王五'];

console.log(arr.toString());

//valueOf()  返回数组对象本身  面向对象的继承时

console.log(arr.valueOf());

console.log(arr.valueOf() === arr);//true</script>

<!-- concat() 方法用于连接两个或多个数组。  可以用于后面的数据请求-->

<script id ="concat()">

var arr = new Array(3);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

var arr2 = new Array(3);

arr2[0] = "James";

arr2[1] = "Adrew";

arr2[2] = "Martin";

document.write(arr.concat(arr2));//George,John,Thomas,James,Adrew,Martin</script>   

<!-- join() 方法用于把数组中的所有元素放入一个字符串。 -->

<script id="join()">

var arr = new Array(3);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

document.write('<br>');

document.write(arr.join('----'));//用分隔符分隔,默认由逗号分隔

document.write('<br>'); //George----John----Thomas</script>

<!-- pop() 方法用于删除并返回数组的最后一个元素。 -->

<script id="pop()">

var arr = new Array(3)

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

document.write(arr);

document.write("<br>");

document.write(arr.pop());

document.write("<br>");

document.write(arr);

//George,John,Thomas

//Thomas

//George,John</script>

<!-- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 -->

<script id="push()">

var arr = new Array(3);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

document.write(arr + "<br>");

document.write(arr.push("James") + "<br>");

document.write(arr);

//George,John,Thomas

//4

//George,John,Thomas,James</script>

<!-- reverse() 方法用于颠倒数组中元素的顺序。 -->

<script id="reverse()">

var arr = new Array(3);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

document.write(arr + "<br>");

document.write(arr.reverse());

//George,John,Thomas

//Thomas,John,George</script>

<!-- shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 -->

<script id="shift()" >

var arr = new Array(3);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

document.write(arr + "<br>");

document.write(arr.shift() + "<br>");

document.write(arr);

//George,John,Thomas

//George

//John,Thomas</script>

<!-- slice() 方法可从已有的数组中返回选定的元素。 未规定范围的话选定的到数组结尾的，返回一个新的数组，包含从start到end（不包括该元素）-->

<script id="slice()">

var arr = new Array(6);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

arr[3] = "James";

arr[4] = "Adrew";

arr[5] = "Martin";

document.write(arr + "<br>");

document.write(arr.slice(2,4) + "<br>");

document.write(arr);

//George,John,Thomas,James,Adrew,Martin

//Thomas,James

//George,John,Thomas,James,Adrew,Martin</script>

<!-- splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 -->

<script id="splice()">

var arr = new Array(6);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

arr[3] = "James";

arr[4] = "Adrew";

arr[5] = "Martin";

document.write(arr + "<br>");

arr.splice(2,0,"William");

document.write(arr + "<br>");

//George,John,Thomas,James,Adrew,Martin

//George,John,William,Thomas,James,Adrew,Martin

var arr = new Array(6);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

arr[3] = "James";

arr[4] = "Adrew";

arr[5] = "Martin";

document.write(arr + "<br>");

arr.splice(2,1,"William");

document.write(arr);

//George,John,Thomas,James,Adrew,Martin

//George,John,William,James,Adrew,Martin

var arr = new Array(6);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

arr[3] = "James";

arr[4] = "Adrew";

arr[5] = "Martin";

document.write(arr + "<br>");

arr.splice(2,3,"William");

document.write(arr);

//George,John,Thomas,James,Adrew,Martin

//George,John,William,Martin</script>

<!-- toSource() 方法表示对象的源代码。

该原始值由 Array 对象派生的所有对象继承。

toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。 -->

<!-- *只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法。 -->

<!-- <script id="=toSource">

function employee(name,job,born){

this.name=name;

this.job=job;

this.born=born;

}

var bill=new employee("Bill Gates","Engineer",1985);

document.write(bill.toSource());

//({name:"Bill Gates", job:"Engineer", born:1985}) </script> -->

<script id="toString()/valueOf">

//toString() 将数组转换成字符串，逗号分隔每一项

var arr = ['张三','李四','王五'];

console.log(arr.toString());

//valueOf()  返回数组对象本身  面向对象的继承时

console.log(arr.valueOf());

console.log(arr.valueOf() === arr);//true</script>

<!-- 把数组转换为本地字符串。 -->

<script id="toLocaleString()">

var arr = new Array(3);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

document.write(arr.toLocaleString());

//George, John, Thomas</script>

<!-- unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 -->

<script id="unshift()">

var arr = new Array();

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

document.write(arr + "<br>");

document.write(arr.unshift("William") + "<br>");

document.write(arr);

//George,John,Thomas

//4

//William,George,John,Thomas</script>

<!-- 索引    从前往后    从后往前 -->

<script id="indexOf()和lastIndexOf()">

var arr = [2,4,6,8,10,8,6,4,2];

console.log(arr);

console.log(arr.indexOf(4,3));//7  第一个参数表示要找的数  第二个参数表示从哪个位置开始找

console.log(arr.lastIndexOf(6,2));//2  第一个参数表示要找的数  第二个参数表示从哪个位置开始找

//用lastIndexOf()帮助获取文件后缀名</script>

<!-- 遍历数组 -->

<script id="forEach()">

var arr = ['morning' , 'afternoon' , 'night'];

arr.forEach(function(value,index,array){

console.log(value);

console.log(index);

console.log(array);

});

//forEach()方法需要一个函数作为参数  这个函数是我们创建但不由我们调用的，称为回调函数

//数组中有几个元素，函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以定义形参，来读取这些内容

//浏览器会在回调函数中传递三个参数

//第一个参数  当前正在遍历的元素  第二个参数 当前正在遍历的元素的索引 第三个 正在遍历的数组</script>

<!-- sort() 方法用于对数组的元素进行排序。 -->

<script id="sort()">

//sort()方法默认按照字符编码的顺序排序

//如果想按照其他标准排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字，比较函数应该具有两个函数参数 a和b 

var arr = new Array(6);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

arr[3] = "James";

arr[4] = "Adrew";

arr[5] = "Martin";

document.write(arr + "<br>");

document.write(arr.sort());

//George,John,Thomas,James,Adrew,Martin

//Adrew,George,James,John,Martin,Thomas

var arr = new Array(6);

arr[0] = "10";

arr[1] = "5";

arr[2] = "40";

arr[3] = "25";

arr[4] = "1000";

arr[5] = "1";

document.write(arr + "<br />");

document.write(arr.sort());

//10,5,40,25,1000,1

//1,10,1000,25,40,5

//请注意，上面的代码没有按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数：

function sortNumber(a,b){

return a - b;

}

//若a<b,在排序后的数组中a应该出现在b之前，则返回一个小于0的值

//若a=b，则返回0

//若a>b,则返回一个大于0的值

var arr = new Array(6);

arr[0] = "10";

arr[1] = "5";

arr[2] = "40";

arr[3] = "25";

arr[4] = "1000";

arr[5] = "1";

document.write(arr + "<br>");

document.write(arr.sort(sortNumber));//实际为冒泡法

document.write('<br>');

//10,5,40,25,1000,1

//1,5,10,25,40,1000

var arr1 = new Array(6);

arr1[0] = "George";

arr1[1] = "John";

arr1[2] = "Kobe";

arr1[3] = "James";

arr1[4] = "Jee";

document.write('<br>');

document.write(arr.sort(sortNumber));//排序失败

document.write('<br>');

function sortNumber1(a,b){

return a.length - b.length;

}

document.write(arr1.sort(sortNumber1));

/**

* sort 内部的实现

* @param  {Object} array    [description]

* @param  {Function} fnCompare [description]

*/

function sort(array,fnCompare){

//控制循环次数

for (var i = 0; i < arr.length; i++) {

//标记一下是否完成排序

var sortFlag = true;

for (var j = 0; j < arr.length - i; j++) {

if(fnCompare(array[j],array[j+1])>0){

sortFlag = false;

var temp = array[j];

array[j] = array[j + 1];

array[j + 1] = temp;

}

}

//判断

if (sortFlag) {

break;

}

}

}

function sortNumber(a,b){

return a - b;

}

var arr2 = [10,20,32,31,23,5,0];

sort(arr2,sortNumber);

console.log(arr2); </script>

ES6新增

<script id="map()">

//映射（一一对应），[].map() 基本用法跟forEach方法类似  array.map(callback,[thisObject])

//但是callback需要return值（如果没有会返回undefined

var arr = [12,20,5,25,30];

var newArr = arr.map(function (value,index,array){

//return value * 2;

return value > 10 && value * 2;//会返回新数组  不符合直接返回false

});

console.log(newArr);</script>

<script id="filter()分割/过滤">

//作用：过滤筛选

//callback在这里担任的是过滤器的角色，当元素符合条件时，过滤器就会返回true，

//而filter则会返回所有符合过滤条件的元素

var arr = [1,2,3,4,5,6,7,8,9];

var newArr = arr.filter(function (value,index,array){

return value % 2 ===0  && value > 5;

})

console.log(newArr);</script>

<script id="every(且)">

//返回值  Boolean类型

var arr = [23,2,5,6];

var newArr = arr.every(function (value){

return value > 3;

});

console.log(newArr);</script>

<script id="some(或)">

//返回值  Boolean类型

var arr = [23,2,5,6];

var newArr = arr.some(function (value){

return value > 100;

});

console.log(newArr);//false</script>

<script id="Math">

/*Math

Math和Array不同，Array是构造函数  而Math对象不是构造函数

它具有数学常数和函数的属性和方法，都是以静态成员的方式提供

静态成员和实例成员的区别：

静态成员：直接使用对象来调用的

实例成员：构造函数中的成员就是实例成员  实例也称为对象*/

/*<!-- 方法 描述

acos(x) 返回数的反余弦值。

asin(x) 返回数的反正弦值。

atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。

atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）

exp(x) 返回 e 的指数。

log(x) 返回数的自然对数（底为e）。

round(x) 把数四舍五入为最接近的整数。

Math.PI 圆周率

random() 返回 0 ~ 1 之间的随机数。

Math.floor()/Math.ceil() 向下取整/向上取整

max(x,y)/min(x,y) 返回 x 和 y 中的最大值/最小值

sin(x)/cos(x) 返回数的正弦/余弦

Math.power()/Math.sqrt() 求指数次幂/求平方根

pow(x,y) 返回 x 的 y 次幂。

abs(x) 返回数的绝对值。

tan(x) 返回角的正切。

toSource() 返回该对象的源代码。

valueOf() 返回 Math 对象的原始值。 -->*/

/* console.log(Math.PI);  3.141592653589793

console.log(Math.ceil(Math.PI));    4

*/

//Math.random()    //0-1

//Math.random()*10     //0-10

//如果输出3-8,4-11的

//公式  Math.random() * (y - x) + x

//开发中基本用到underScore库

//补充静态成员和实例成员

/*var LKTool = {

height:300,

doIt = function(){

}

};

console.log(LKTool.height);//此中为静态成员

function Dog(name,sex){

this.name = name;

this.sex = sex;

}*/  //构造函数

/*var dog = new Dog('xiaobai','gong');

console.log(dog.name);*///此为实例成员

</script>

<script id="String对象">

//概念  字符串所有的方法，都不会修改字符串本身（字符串是不可变的，操作完成则会返回一个新的字符串）

//性能问题  拼接大量字符串时，会有性能问题  一、服务器端渲染 二、模板引擎

// 1)获取字符串中字符的个数    str.length

// 2)字符方法

// charAt()  获取指定位置处的字符

/*var str = 'www.4399.com';

console.log(str.charAt(5));  3 */ 

//遍历

/*for (var i = 0; i < str.length; i++) {

console.log(str.charAt(i));

}*/

// charCodeAt()    获取指定位置处字符的ASCII码

// var str1 = 'abc.com';

//遍历

// for (var i = 0; i < str1.length; i++) {

/*console.log(str.charAt(i));

console.log(str1.charCodeAt(i));*/

//下标获取 也是可以的  HTML5 IE8+支持  和charAt()等效

// console.log(str1[i]); }

//字符串操作方法

//concat()  拼接字符串 等效于+  +更常用

//slice()  从start 开始 到end end取不到

//substring()  从start 开始 到end end取不到

//substr(开始位置，截取长度) 从start 开始,截取length个字符

var str = 'abc.com';

var newStr = str.substr(1,2);

console.log(newStr);//bc

//结合使用

console.log(str.substr(str.lastIndexOf('.')));//直接输出.com

console.log(str.substr(str.lastIndexOf('.'),2));//.c

//所以截取后缀可以采用以上方法

//位置方法  与数组相同  indexOf()和lastIndexOf()

//去除空白  trim()  不能只能去除字符串前后的空白

var str2 = '  w45f  ';

console.log(str2); //  w45f 

console.log(str2.trim());//w45f

var str3 = '  we  42 ';

console.log(str3.trim());//we  42 中间的去不掉  要靠正则去掉

//大小写转换  toUpperCase() 转大写  toLowerCase() 转小写

var str4 = 'ITLIKE';

console.log(str4.toLowerCase());

console.log(str4.toUpperCase());

//其他

//search() 和 split()

var str5 = 'like it';

var n = str5.search("ke");

console.log(n);//2

//案例  URL转换成对象  split()

var url = 'http://www.itlike.com/user?name=xl&pwd=lovexl&sex=女&age=22';

//目的 把问号后 键值对转换成字符串

function getUrlParams(url){

//找到起点

var index = url.indexOf('?') + 1;

var params = url.substr(index);

var paramsArr = params.split('&');

//console.log(paramsArr);

var obj = {};

paramsArr.forEach(function(value,index,array){

var tempArr = value.split('=');

//console.log(tempArr);

var key = tempArr[0];

obj[key] = tempArr[1];

//console.log(obj);

})

return obj;

}

var obj = getUrlParams(url);

console.log(obj);

console.log(obj.name);

console.log(obj.sex);

</script>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,743评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,296评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,285评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,485评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,581评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,821评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,960评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,719评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,186评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,329评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,936评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2赞 349

推荐阅读更多精彩内容

  • 浅谈javascript Array
    Array数组里面的方法： 参数：参数size是设置的数组元素的个数。返回的数组，length字段将被设为size...
    雅俗共赏_阅读 456评论 0赞 0
  • js总结（！！！）
    简述JavaScript起源起源于美国的Netscape公司，原名为LiveScript，后改为JavaScrip...
    3ab670b99521阅读 2,989评论 0赞 0
  • JavaScript数组的增删总结
    js中数组操作函数还是非常多的，今天忽然想到来总结一下，也算是温故而知新吧。不过不会针对每个办法都进行一下总结，只...
    IOSCoderYummy阅读 514评论 0赞 0
  • 2018-09-18 数组的aip的解释及应用
    string（）数组转化为字符串join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔conca...
    轩呓阅读 153评论 0赞 0
  • 路口
    加入简书整整一年，留下的印迹略显不足。断断续续，好在一直没有放弃，只是还在摸索更好的表达方式，我相信那句没看100...
    榆溪木月阅读 193评论 0赞 2