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)));//反编译