JS基础二

对象

创建

第一种 new Object()

    var  student = new Object();

    student.name = "123";
    student.say = function () {
      console.log(this.name);
    }

    student.say();

第二种创建一个函数去创建对象

    var createStu = function (name,age,address) {
      var student = new Object();
      student.name = name;
      student.age = age;
      student.address = address;
      student.say = function () {
        console.log(this.name + "说大家好我来自" + this.address);
      }
      return student;
    }

    var stu = createStu("张三",18,"北京");
    stu.say();
    var stu1 = createStu("小明",19,"香港");
    stu1.say();

第三种构造函数

    function Student(name,age,address) {
      //构造函数中this被代指成对象
      this.name = name;
      this.age = age;
      this.address = address;
      this.say = function () {
        console.log(this.name + "说大家好我来自" + this.address);
      }
    }

    var  stu = new  Student("张三",14,"北京");
    stu.say();

    var address = "address";
    stu["name"] = "李四";//修改属性可以通过[]访问
    stu[address] = "香港";
    stu.say();

this和new

this

this只出现在函数中
谁调用函数，this就指谁
new 创建的对象，this代指被创建的实例对象

new

开辟内存空间，存储新创建的实例对象
把this设置为当前实例对象
执行内部代码，设置实例对象属性和方法
返回新创建的实例对象

    function stu() {
      //这里没有返回值
      this.say = function () {
        console.log(this.say);//this就代指stu实例
      }
    }

    var aaa = new stu();
    console.log(aaa);//打印stu，证明new的确把对象返回了
    aaa.say();

对象的字面量

    var obj = new Object();
    console.log(obj);

    var student = {
      object:obj,
      name:"小明",
      age:19,address:"北京",
      say:function () {
      console.log(this.name + "说大家好我来自" + this.address);
    }};//对象字面量创建，类似字典形式，key可以带""也可以不带，不单单可以添加基本类型，也可以添加自定义类型，或者函数
    console.log(student.age) ;
    student.say();
    console.log(typeof student.object);

json

json和对象的区别在于json的key必须加""

    var  json = {
      "name":"张三",
      "age":12,
      "address":"香港"
    }

    //for in遍历json
    for (var  key in json){
      console.log(json[key]);
    }

数组

var arr = new Array();//通过创建对象的方式创建数组
var arr2 = new Array(3);//这里的三被识别成长度，里面值默认成undefined
var arr3 = new Array(1,2,3);
var arr4 = [1,2,3];//直接创建数组，字面量
var arr[0] = 123;//数组赋值
var arr[2] = 234;//数组创建出来之后如果没赋值都是undefined,而且可以不按照顺序赋值，所以arr[1]就是undefined。

遍历

var arr1 = [];
alert(arr1.length);//当数组创建出来的时候length可以访问，输出是0
//数组遍历
var arr = ["1","2","3","4","5"];
for (var i = 0; i < arr.length;i++){
  console.log(arr[i]);
}

//把1-100之间所有的奇数放到数组中
//数组长度本身开始是0，每添加进去一个值，数组长度自增，所以可以用length替代
var arr = [];
for (var i = 1;i <= 100;i++){
    if(i % 2){
        arr[arr.length] = i;
    }
 }
console.log(arr);

数组中常见的api

栈操作，有返回值

    console.log(arr.push(1));//再最后面添加，相当于add
    console.log(arr);
    console.log(arr.pop());//删除最后一个元素
    console.log(arr);

队列操作，有返回值

    console.log(arr.shift());//删除第一个元素
    console.log(arr);
    console.log(arr.unshift(1));//再最前面插入元素
    console.log(arr);

反转数组

    var arr = ["e","d","c","b","a"];
    console.log(arr.reverse());//反转数组,返回翻转的数组，原数组也变了
    console.log(arr);

排序：按照ASCII码表排列的，如果自定义排序方案，传入回调函数

    var arr1 = [1,3,5,7,9,2,4,6,8,10];
    console.log(arr.sort());//能排字符串
    console.log(arr1.sort());//只能通过第一位进行排列，1，10，2，3，4...
    console.log(arr1.sort(function (a,b) {
      return a - b;//升序排列
    }));//sort参数传回调函数，设定排序规则

拼接

    var arr1 = [1,2,3];
    var arr2 = [4,5];
    var arr3 = arr1.concat(arr2);
    console.log(arr1);
    console.log(arr2);
    console.log(arr3);//原数组都没变，生成拼接数组

截取

    console.log(arr3.slice(2));//一个参数从索引值第二个截取到最后
    console.log(arr3.slice(-2));//截取最后两个
    console.log(arr3.slice(2,4))//从索引第二个到第四个
    console.log(arr3.slice(4,2))//当前一个索引值大于后一个的时候，截取出来一个空数组

截取能操作原数组(替换)

console.log(arr3.splice(2));//一个参数从索引值截取到最后
console.log(arr3.splice(1,2));//两个参数，第一个索引值，第二个截取长度   
console.log(arr3.splice(1,2,"122","222","22222"));//三个参数，第一个索引，第二个截取的长度，第三个以后的再原数组被截取的地方插入这些元素
console.log(arr3);//[1,"122","222","22222",4,5];

给元素查索引

    var arr = [1,2,3,4,1,2,3,4];
    console.log(arr.indexOf(1));//从前往后查到索引立即返回，返回0
    console.log(arr.lastIndexOf(1))//从后往前查索引立即返回，返回4

every

    var arr = [1,2,3,4,5,6,7,8,9];
    var bool = arr.every(function (item,index,array) {

      //还可以修改元素

      if (index === 2){
        array[index] = "二";
      }
      console.log(item);
      console.log(index);
      console.log(array);
      return true;
    });//every,返回值bool,参数是回调函数，对数组总的每一个元素执行回调函数，逐项遍历，如果每一项返回true那个every函数返回true，只要有一项不是true，停止遍历，返回false
    console.log(bool);

过滤

     var arr = [1,2,3,4,5,6,7,8,9];
    var newArray = arr.filter(function (item,index,array) {
      return item > 3 ? true : false;
    });//filter,返回的是一个数组，参数是回调函数，定义规则，返回的数组是回调函数返回true的项组成的数组
    console.log(newArray);

纯遍历

     var arr = [1,2,3,4,5,6,7,8,9];
    var aaa = "呵呵呵";
    arr.forEach(function (item,index,array) {
       aaa += item;
    });//forEach没有返回值，操作数组，
    console.log(aaa);

映射

     var arr = [1,2,3,4,5,6,7,8,9];
    var newArray = arr.map(function (item,index,array) {
      return item += "map";
    });//映射出新数组
    console.log(newArray);

some

     var arr = [1,2,3,4,5,6,7,8,9];
    var bool = arr.some(function (item,index,array) {
      if (index === 1){
        return true;
      }
      return false;
    });//只要一个元素返回的是ture，some返回ture
    console.log(bool);//返回true

清空

    //第一种
    var arr = [1,2,3,4,5,6];
    arr.splice(0);
    console.log(arr);

    //第二种length可写
    arr.length = 0;
    console.log(arr);

    //第三种
    arr = [];
    console.log(arr);

String

简单数据类型和对象数据类型


    //简单数据类型无法绑定属性和方法
    var aaa = "abc";
    aaa.asd = "123";
    console.log(aaa.asd);
    console.log(aaa.length);//当调用这个方法的时候，底层做了数据类型转换，把简单类型变成对象类型，再调用length属性
    console.log(aaa.indexOf("c"));//

    //对象类型
    var str = new String("abc");
    str.qwe = "1234";
    console.log(str.qwe);

给索引查字符

    var str1 = new String("abcd");
    console.log(str1.charAt(0));
    console.log(str1.charAt(1));
    console.log(str1.charAt(2));
    console.log(str1.charAt(3));
    console.log(str1.charCodeAt(0));//返回ASCII码值

给字符查索引

    var str2 = new String("abcdefg我是");
    console.log(str2.indexOf("bc",0));//从前往后查找第一个符合元素的位置,第二个参数是从哪个位置开始查，返回的如果是-1，代表没有查到
    console.log(str2.lastIndexOf("bc",0));//从后往前查，

拼接

    var str3 = "1234".concat("123");
    console.log(str3);

截取

     var str3 = "1234567";
    //slice
    var str4 = str3.slice(2,3);//从索引开始截取，到索引结束，一个参数就是一直截到最后
    console.log(str3.slice(-3));//从倒数第几个截到最后
    console.log(str3.slice(5,2));//前大后小，截的是空字符串
    console.log(str4);

    //substr
    var str5 = str3.substr(2,3);//从索引开始截取，第二个参数是长度
    console.log(str5);
    console.log(str3.substr(-3));//从倒数第几个截到最后

    //substring（跟slice差不多，但是更智能一些）
    var str6 = str3.substring(2,3);//从索引开始截取，到索引结束，一个参数就是一直截到最后
    console.log(str6);
    console.log(str3.substr(-3));//负值的话截取的是所有的字符串
    console.log(str3.slice(5,2));//前大后小，智能调换

大小写转换

    var str10 = "ABC";
    console.log(str10.toLowerCase());//转成小写
    console.log(str10.toLowerCase().toUpperCase());//转成大写

其他方法

    var str7 = "   1 2 3 4    ";
    console.log(str7.trim());//去除前后空格，中间空格去除不掉

    var str8 = "1234512345";
    console.log(str8.replace(/1/g,"234"));//把什么替换成什么,前面是正则

    var str9 = "123456789";
    console.log(str9.split(""));//把字符串变成数组，用参数切

URI

    //uri，数据传递的时候经常需要编码后再进行传递
    var url = "https://www.baidu.com?username='aaa'&password='123456'";
    console.log(encodeURIComponent(url));//编译
    console.log(decodeURIComponent(encodeURIComponent(url)));//反编译

最后编辑于：2017.12.07 07:09:37

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

JS基础二

对象

数组

遍历

数组中常见的api

String

推荐阅读更多精彩内容