js基础学习2

JavaScript基础学习2

变量，属性，函数，方法的区别
1.变量和属性相同的，都是存储数据
2.变量 单声明并赋值 使用时直接写变量名 单独存在
3.属性 在对象里面不用声明 使用时必须是 对象.属性

  var num=10;
  var obj={
  age=10,
  fn:function(){
  }//方法
  }
  console.log(obj.age);
  function fn(){
  }//函数

4.函数 单独声明 并且调用函数 函数名（）单独存在
5.方法在对象里面 在调用的是 对象.方法（）

创建对象3种方式
1.自变量创建对象

var obj={
uname:'panda',
sex:'男',
age:'18',
}
consolse.log(obj.uname);

在对象字面量中，使用逗号来分隔不同的属性

2.new Object

var obj= new Object();//创建一个空对象；
obj.name='panda'；//加入对象中；

3.使用函数创建对象

function 构造函数名(){
    this.属性=值;
    this.方法=function(){
    }
}
new 构造的函数名();

//构造函数
function str(yourname,sex,age){
 this.name=yourname;
 this.sex=sex；
 this.age=age;
 this sing=function(sang){
 console.log(sang);
 }
 }
var jay=new str("panda",'男',12);//调用函数返回的是一个对象
jay.sing('b');
//利用构建函数创建对象的过程也成为对象的实例化

构造函数不需要return可以返回结果
构造函数名字首字母大写
new执行过程
1.在内存中创建一个新对象
2.让this指向这个新对象
3执行构造函数里面的代码，给新对象添加属性
4返回新对象
遍历对象
for in

for(变量 in 对象)
 <script>
        var obj=new Object();
        obj.name="panda";
        obj.sex='男';
        obj.habbit='击剑';
        obj.fn=function() {
            console.log();
        }
        for(k in obj){
             console.log(k);//k 变量输出得到是属性名
             console.log(obj[k]);//obj 得到的是属性值
        }
    </script>

查询MDN文档

随机数

 function getRandom(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
        }
        console.log(getRandom(1,10));

猜文字游戏

     var random=getRandom(1,10);
    while(true){
        var num = prompt('你来猜？输入1~10之间的一个数字');
        if (num > random){
            alert('你猜大了');
        }else if(num < random){
            alert('你猜小了');
        }else{
            alert('恭喜你猜对了');
            break;
        }
    }
    </script>

Date类型

 var date=new Date();
    console.log(date);

无参数则返回则返回系统当前的时间
参数常用的写法
数字型

var date=new Date(2021,3,22);
    console.log(date);

字符型

var date=new Date('2021-3-22 8:8:8');/* (2021/3/22 写法也可以)
    console.log(date);

日期格式化

getTime() 返回表示日期的毫秒数；与valueOf()方法返回的值相同
setTime(毫秒) 以毫秒数设置日期，会改变整个日期
getFullYear() 取得4位数的年份（如2007而非仅07）
getUTCFullYear() 返回UTC日期的4位数年份
setFullYear(年) 设置日期的年份。传入的年份值必须是4位数字（如2007而非仅07）
setUTCFullYear(年) 设置UTC日期的年份。传入的年份值必须是4位数字（如2007而非仅07）
getMonth() 返回日期中的月份，其中0表示一月，11表示十二月
getUTCMonth() 返回UTC日期中的月份，其中0表示一月，11表示十二月
setMonth(月) 设置日期的月份。传入的月份值必须大于0，超过11则增加年份
setUTCMonth(月) 设置UTC日期的月份。传入的月份值必须大于0，超过11则增加年份
getDate() 返回日期月份中的天数（1到31）
getUTCDate() 返回UTC日期月份中的天数（1到31）
setDate(日) 设置日期月份中的天数。如果传入的值超过了该月中应有的天数，则增加月份
setUTCDate(日) 设置UTC日期月份中的天数。如果传入的值超过了该月中应有的天数，则增加月份
getDay() 返回日期中星期的星期几（其中0表示星期日，6表示星期六）
getUTCDay() 返回UTC日期中星期的星期几（其中0表示星期日，6表示星期六）
getHours() 返回日期中的小时数（0到23）
getUTCHours() 返回UTC日期中的小时数（0到23）
setHours(时) 设置日期中的小时数。传入的值超过了23则增加月份中的天数
setUTCHours(时) 设置UTC日期中的小时数。传入的值超过了23则增加月份中的天数
getMinutes() 返回日期中的分钟数（0到59）
getUTCMinutes() 返回UTC日期中的分钟数（0到59）
setMinutes(分) 设置日期中的分钟数。传入的值超过59则增加小时数
setUTCMinutes(分) 设置UTC日期中的分钟数。传入的值超过59则增加小时数
getSeconds() 返回日期中的秒数（0到59）
getUTCSeconds() 返回UTC日期中的秒数（0到59）
setSeconds(秒) 设置日期中的秒数。传入的值超过了59会增加分钟数
setUTCSeconds(秒) 设置UTC日期中的秒数。传入的值超过了59会增加分钟数
getMilliseconds() 返回日期中的毫秒数
getUTCMilliseconds() 返回UTC日期中的毫秒数
setMilliseconds(毫秒) 设置日期中的毫秒数

Array 类型

• 创建数组两种方式：

1.var colors = new Array();
在使用 Array 构造函数时也可以省略 new 操作符

2.创建数组的第二种基本方式是使用数组字面量表示法。数组字面量由一对包含数组项的方括号表示，多个数组项之间以逗号隔开

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
var names = []; // 创建一个空数组alert(colors.length); //3
alert(colors.length); //3

• 数组长度

这个例子中的数组 colors 一开始有 3 个值。将其 length 属性设置为 2 会移除最后一项（位置为
2 的那一项），结果再访问 colors[2]就会显示 undefined 了。如果将其 length 属性设置为大于数组
项数的值，则新增的每一项都会取得 undefined 值，如下所示：

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
colors.length = 4; 
alert(colors[3]); //undefined
colors[colors.length] = "black"; //（在位置 3）添加一种颜色

• 检测是否为数组

1.
var arr=[];
console.log(arr instanceof Array);//true
2.
console.log(Array isArray(arr));//true

• 数字转换为字符串

1.toString()将数组转化为字符串
var arr=['1','2','3'];
console.log(arr.toString());//1,2,3;
2.join(分隔符可以自己设置)
var arr1=['green','blue','red'];
console.log(arr1.join());//green,blue,red;
console.log(arr1.join('-'));//green-blue-red;

• 栈方法
  1.push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。而
  2.pop()方法则从数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项

var colors = new Array(); // 创建一个数组
var count = colors.push("red", "green"); // 推入两项
alert(count);
var item = colors.pop(); // 取得最后一项
alert(item); //"black" 
alert(colors.length); //2



var colors = ["red", "blue"]; 
colors.push("brown"); // 添加另一项
colors[3] = "black"; // 添加一项
alert(colors.length); // 4 
var item = colors.pop(); // 取得最后一项
alert(item); //"black"

• 队列方法
  shift()，它能够移除数组中的第一个项并返回该项，同时将数组长度减 1。结合使用 shift()和 push()方法，可以像使用队列一样使用数组

var colors = new Array(); //创建一个数组
var count = colors.push("red", "green"); //推入两项
alert(count); //2 
count = colors.push("black"); //推入另一项
alert(count); //3 
var item = colors.shift(); //取得第一项
alert(item); //"red" 
alert(colors.length); //2

• 反向队列
  unshift()与 shift()的用途相反：
  它能在数组前端添加任意个项并返回新数组的长度。因此，同时使用 unshift()和 pop()方法，可以
  从相反的方向来模拟队列，即在数组的前端添加项，从数组末端移除项，

var colors = new Array(); //创建一个数组
var count = colors.unshift("red", "green"); //推入两项
alert(count); //2 
count = colors.unshift("black"); //推入另一项
alert(count); //3 
var item = colors.pop(); //取得最后一项
alert(item); //"green" 
alert(colors.length); //2

• 反向排列（reverse()和 sort()）
  reverse()方法会反转数组项的顺序

var values = [1, 2, 3, 4, 5]; 
values.reverse(); 
alert(values); //5,4,3,2,1

• 数组排序
  在默认情况下，sort()方法按升序排列数组项——即最小的值位于最前面，最大的值排在最后面（限于个位数可直接使用）。
  为了实现排序，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串，如下所示。

var values = [0, 1, 5, 10, 15]; 
values.sort(); 
alert(values); //0,1,10,15,5

数值 5 虽然小于 10，但在进行字符串比较时，"10"则位于"5"的前面，于是数组的顺序就被修改了

要完全实现sort排序可以加入函数

var arr=[1,4,12,7,66];
arr.sort(function(a,b)
{
 return a-b;//升序排列 1，4，7，12，66
 return b-a;//降序排列 66,12,7,4,1
});
console.log(arr);

• slice()
  它能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以
  接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，slice()方法返回从该
  参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项—
  —但不包括结束位置的项。注意，slice()方法不会影响原始数组。请看下面的例子。

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

可实现功能：
1.删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。
例如，splice(0,2)会删除数组中的前两项。
2.插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数）
和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如，
splice(2,0,“red”,“green”)会从当前数组的位置 2 开始插入字符串"red"和"green"
3。替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起
始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，
splice (2,1,“red”,“green”)会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串
“red"和"green”。

var colors = ["red", "green", "blue"]; 
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue 
alert(removed); // red，返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); // 从位置 1 开始插入两项
alert(colors); // green,yellow,orange,blue 
alert(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两项，删除一项
alert(colors); // green,red,purple,orange,blue 
alert(removed); // yellow，返回的数组中只包含一项

• 位置方法（返回数组索引）
  indexOf()和 lastIndexOf()：
  indexOf()方法从数组的开头（位置 0）开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。若不存在返回-1.
  如果有两个参数indexOf(‘要查找的字符’，[起始的位置])

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4)); //5

迭代方法

• every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。
• filter()：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
• forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。
• map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
• some()：对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。

在这些方法中，最相似的是 every()和 some()，它们都用于查询数组中的项是否满足某个条件。
对 every()来说，传入的函数必须对每一项都返回 true，这个方法才返回 true；否则，它就返回
false。而 some()方法则是只要传入的函数对数组中的某一项返回 true，就会返回 true。

var numbers = [1,2,3,4,5,4,3,2,1]; 
var everyResult = numbers.every(function(item, index, array){ 
 return (item > 2); 
}); 
alert(everyResult); //false 
var someResult = numbers.some(function(item, index, array){ 
 return (item > 2); 
}); 
alert(someResult); //true


var numbers = [1,2,3,4,5,4,3,2,1]; 
var filterResult = numbers.filter(function(item, index, array){ 
 return (item > 2); 
}); 
alert(filterResult); //[3,4,5,4,3]

归并方法
reduce()和 reduceRight()。这两个方法都会迭
代数组的所有项，然后构建一个最终返回的值。其中，reduce()方法从数组的第一项开始，逐个遍历
到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

var values = [1,2,3,4,5]; 
var sum = values.reduce(function(prev, cur, index, array){ 
 return prev + cur; 
}); 
alert(sum); //15

第一次执行回调函数，prev 是 1，cur 是 2。第二次，prev 是 3（1 加 2 的结果），cur 是 3（数组的第三项）。这个过程会持续到把数组中的每一项都访问一遍，最后返回结果。

RegExp 类型
ECMAScript 通过 RegExp 类型来支持正则表达式。使用下面类似 Perl 的语法，就可以创建一个正则表达式。
var expression = / pattern / flags ;

• g：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
• i：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
• m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项;

Function类型
1.声明了两个同名函数，则是后面的函数覆盖了前面的函数。

2.在函数内部，有两个特殊的对象：arguments 和 this。

• this引用的是函数据以执行的环境对象——或者也可以说是 this 值（当在网页的全局作用域中调用函数时，this 对象引用的就是 window）。

每个函数都包含两个属性：length 和 prototype。其中，length 属性表示函数希望接收的命名参数的个数，如下面的例子所示。

function sayName(name){ 
 alert(name); 
} 
function sum(num1, num2){ 
 return num1 + num2; 
} 
function sayHi(){ 
 alert("hi"); 
} 
alert(sayName.length); //1 
alert(sum.length); //2 
alert(sayHi.length); //0

调用函数
1.直接调用

//window对象的alert方法
windows.alert("测试代码")

2.call()方法调用
//调用格式
函数引用.call(调用者，参数1，参数2…)

    var each=function(array,fn)
        {
            for(var index in array)
            {
                //以window为调用者来调用fn函数
                //index，array[index]是传给fn函数的参数
                fn.call(null,index,array[index]);
            }
        }   
            each([4,20,3],function(index,ele)
            {
                document.write("第"+ index+"个元素是"+ele+"<br />");
           });
//输出
//第0个元素是4
//第1个元素是20
//第2个元素是3

基本包装类型
ECMAScript 还提供了 3 个特殊的引用类型：Boolean、Number 和
String。

//调用 Boolean构造函数并传入 true 或 false 值。
var booleanObject = new Boolean(true);
//调用 Number 构造函数时向其中传递相应的数值。下面是一个例子。
var numberObject = new Number(10);
//使用 String 构造函数来创建。
var stringObject = new String("hello world");

字符String

查找字符位置
1.indexOf()方法从字符串的开头（位置 0）开始向后查找，lastIndexOf()方法则从字符串的末尾开始向前查找。若不存在返回-1.

2.如果有两个参数indexOf(‘要查找的字符’，[起始的位置])

 var str="abkscsdj";
 var index= str.indexOf('d');
 console.log(index);//6

• charAt(index)根据位置返回字符

var str="andy";
console.log(charAt(3));//y

• charCodeAt(index)获取指定位置的字符的ASCII码
• str[index]获取指定位置的字符

遍历字符串字母出现的次数

    var str='acnsksacsa'
    var o={};
    for(var i=0;i<str.length;i++){
      var chars = str.charAt(i);
      if(o[chars])
            o[chars]++;
       else 
            o[chars]=1;
    }
        console.log(o);
        var max=0;
        var ch='';
        for(var k in o)//k是属性名 o[k]是属性值
            if(o[k]>max){
                max=o[k];
                ch=k;
            }
    console.log(max);
    console.log("最多次数的字母"+ch);

输出为

Object { a: 3, c: 2, n: 1, s: 3, k: 1 }
3
最多次数的字母a

替换字符
replace(‘被替换的字符’,‘替换为的字符’)同一字母只会替换第一次出现的

str='andyandy';
console.log(str.replace('a','b');//bndyandy

toUpperCase()转化大写
toLowerCase()转化小写