js常用

ゞ浴缸里的玫瑰 2022-05-29 01:26 203阅读 0赞

**创建变量**：

var p=3.14;

**数据类型：**

string,number,boolean,arry,obj,null,undefined;

**对象：**

** **  javascript中的所有事物都是对象：字符串，数组，日期等等。

在javascript中，对象是拥有属性和方法的数据；

**函数：**

函数是由事件驱动的或者当它被调用是执行的可重复使用的代码块。

split：

功能：使用一个指定的分隔符把一个字符串分割存储到数组

示例：str="jpg|png|jpeg||gif" arr=str.split("|");

join:

使用您选择的分隔符将一个数组合并为一个字符串；

示例：var delimitedString=myArray.join(delimiter);”  
                var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”);  
                var portableList=myList.join(”|”);  
                //结果是jpg|bmp|gif|ico|png

concat:

功能：将两个数组连接在一起；

例子：arr1=\[1,2,3,4\]  
　　    arr2=\[5,6,7,8\]  
　　    alert(arr1.concat(arr2)) //结果为\[1,2,3,4,5,6,7,8\]

函数:charAt()

功能：返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

例子:var str='a,g,i,d,o,v,w,d,k,p'  
alert(str.charAt(2)) //结果为g

函数:charCodeAt()

功能：charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

例子：var str='a,g,i,d,o,v,w,d,k,p'  
alert(str.charCodeAt(2)) //结果为103。即g的Unicode编码为103

函数:slice()

功能：arrayObject.slice(start,end)

start:必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回一个新的数组，包含从start到end（不包括该元素）的arrayobject中的元素。

例子：var str='ahji3o3s4e6p8a0sdewqdasj'  
　　alert(str.slice(2,5)) //结果ji3

函数:substring()

定义和用法 substring 方法用于提取字符串中介于两个指定下标之间的字符。

语法 stringObject.substring(start,stop)

start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。

stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回 一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。 说明 substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。 如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。 如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。 如果 start 或 end 为负数，那么它将被替换为 0。

例子:var str='ahji3o3s4e6p8a0sdewqdasj'  
alert(str.substring(2,6)) //结果为ji3o3

函数:substr

定义和用法 substr 方法用于返回一个从指定位置开始的指定长度的子字符串。

语法 stringObject.substr(start \[, length \])

参数 start 必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。

length 可选。在返回的子字符串中应包括的字符个数。 说明 如果 length 为 0 或负数，将返回一个空字符串。 如果没有指定该参数，则子字符串将延续到stringObject的最后。

<!DOCTYPE html>

<html>

<head>

function myFunction()

alert("Hello World!");

</script>

</head>

<body>

</body>

</html>

**运算符：**

**假设y=5;**

**比较运算符：**

给定 x=5：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 运算符 </td> 
 <td style="vertical-align:baseline;"> 描述 </td> 
 <td style="vertical-align:baseline;"> 例子 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> == </td> 
 <td style="vertical-align:top;"> 等于 </td> 
 <td style="vertical-align:top;"> x==8 为 false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> === </td> 
 <td style="vertical-align:top;"> 全等（值和类型） </td> 
 <td style="vertical-align:top;"> x===5 为 true；x==="5" 为 false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> != </td> 
 <td style="vertical-align:top;"> 不等于 </td> 
 <td style="vertical-align:top;"> x!=8 为 true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> &gt; </td> 
 <td style="vertical-align:top;"> 大于 </td> 
 <td style="vertical-align:top;"> x&gt;8 为 false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> &lt; </td> 
 <td style="vertical-align:top;"> 小于 </td> 
 <td style="vertical-align:top;"> x&lt;8 为 true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> &gt;= </td> 
 <td style="vertical-align:top;"> 大于或等于 </td> 
 <td style="vertical-align:top;"> x&gt;=8 为 false </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> &lt;= </td> 
 <td style="vertical-align:top;"> 小于或等于 </td> 
 <td style="vertical-align:top;"> x&lt;=8 为 true </td> 
 </tr> 
 </tbody> 
</table>

**条件判断if/else/switch:**

if (条件)

当条件为 true 时执行的代码

else

当条件不为 true 时执行的代码

switch(n)

case 1:

执行代码块 1

break;

case 2:

执行代码块 2

break;

default:

n 与 case 1 和 case 2 不同时执行的代码

**循环：**

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

document.write(cars\[i\] + " ");

while (i<5)

x=x + "The number is " + i + " ";

i++;

跳过：

for (i=0;i<=10;i++)

if (i==3) continue;

x=x + "The number is " + i + " ";

**数组：**

[创建数组][Link 1]

创建数组，为其赋值，然后输出这些值。(var arr=\[1,2,3,4\]  —var arr=new Array(4))

[For...In 声明][For...In]

使用 for...in 声明来循环输出数组中的元素。

[合并两个数组 - concat()][- concat]

如何使用 concat() 方法来合并两个数组。

[用数组的元素组成字符串 - join()][- join]

如何使用 join() 方法将数组的所有元素组成一个字符串。

[文字数组 - sort()][- sort]

如何使用 sort() 方法从字面上对数组进行排序。

[数字数组 - sort()][- sort 1]

如何使用 sort() 方法从数值上对数组进行排序。

var mycars=new Array()

mycars\[0\]="Saab"

mycars\[1\]="Volvo"

mycars\[2\]="BMW”

**正则**表达式直接上网搜；

**事件委托（事件代理）**

**<div id="box">**

**        <input type="button" id="add" value="添加" />**

**        <input type="button" id="remove" value="删除" />**

**        <input type="button" id="move" value="移动" />**

**        <input type="button" id="select" value="选择" />**

**    </div>**

**一般写法：**

**window.onload = function()\{**

**            var Add = document.getElementById("add");**

**            var Remove = document.getElementById("remove");**

**            var Move = document.getElementById("move");**

**            var Select = document.getElementById("select");**

**            **

**            Add.onclick = function()\{**

**                alert('添加');**

**            \};**

**            Remove.onclick = function()\{**

**                alert('删除');**

**            \};**

**            Move.onclick = function()\{**

**                alert('移动');**

**            \};**

**            Select.onclick = function()\{**

**                alert('选择');**

**            \}**

**            **

**        \}**

**事件委托写法：**

**window.onload = function()\{**

**            var oBox = document.getElementById("box");**

**            oBox.onclick = function (ev) \{**

**                var ev = ev || window.event;**

**                var target = ev.target || ev.srcElement;**

**                if(target.nodeName.toLocaleLowerCase() == 'input')\{**

**                    switch(target.id)\{**

**                        case 'add' :**

**                            alert('添加');**

**                            break;**

**                        case 'remove' :**

**                            alert('删除');**

**                            break;**

**                        case 'move' :**

**                            alert('移动');**

**                            break;**

**                        case 'select' :**

**                            alert('选择');**

**                            break;**

**                    \}**

**                \}**

**            \}**

**            **

**        \}**

**闭包：**

**闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样**

**示例：function a()\{**

**  var n = 0;**

**  function inc() \{**

**    n++;**

**    console.log(n);**

**  \}**

**  inc(); **

**\}**

**a(); //控制台输出1，再输出2**

**function createFunctions()\{**

**  var result = new Array();**

**  for (var i=0; i < 10; i++)\{**

**    result\[i\] = function()\{**

**      return i;**

**    \};**

**  \}**

**  return result;**

**\}**

**var funcs = createFunctions();**

**for (var i=0; i < funcs.length; i++)\{**

**  console.log(funcs\[i\]());**

**\}**

**为什么只垃圾回收了 result，但却不收了 i 呢？ 因为 i 还在被 function 引用着啊。好比一个餐厅，盘子总是有限的，所以服务员会去巡台回收空盘子，但还装着菜的盘子他怎么敢收？ 当然，你自己手动倒掉了盘子里面的菜（=null），那盘子就会被收走了，这就是所谓的内存回收机制**

**递归****：**

**function fun()**

**\{**

**    // 自己调用自己，称为递归调用**

**    fun();**

**    console.log("m2");**

**\}**

**fun();**

**获取当前呗选中的radio的值：**

var val = $('.models input\[name="money"\]:checked ').val();

js对象是属性的集合

方法(Function) 数组（Array）对象（Object）都是对象

对象都是由函数产生的，只是我们平时看到的这种写法

var obj = \{"a":"aaa","b":"bbb"\}

这种其实是一种语法糖，其实等价于 var obj = new Object()；obj.a="aaa".obj.b="bbb";

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

js中有三种继承方式

1.js原型（prototype）实现继承

2.构造函数实现继承

3.call , apply实现继承

call与aplly的异同：

//1,第一个参数this都一样,指当前对象

//2,第二个参数不一样：call的是一个个的参数列表；apply的是一个数组（arguments也可以）

二、call和apply的用法（详细介绍）

js中call和apply都可以实现继承，唯一的一点参数不同，func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,\[var1,var2,var3\])。

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

另外，Function.apply()在提升程序性能方面有着突出的作用：

我们先从Math.max()函数说起，Math.max后面可以接任意个参数，最后返回所有参数中的最大值。

**数组操作方法：**

**push**：在数组的最后添加一个元素

var arr=[1,2,3,4,5]
    arr.push(6)
    console.log(arr)//[1,2,3,4,5,6]
    arr.push("one")//添加字符串需要加引号
    console.log(arr)//[1,2,3,4,5,6,"one"]

**pop**：把数组的最后一位取出，并返回取出的内容；原数组会发生改变

var arr=[1,2,3,4]
    console.log(arr.pop())//4这里如果需要用返回值就用变量接住
    console.log(arr)//[1,2,3]

**shift**：把数组的第一位取出来，返回取出内容；原数组发生改变

var arr=[1,2,3,4]
    arr.shift()//1
    console.log(arr)//[2,3,4]

**unshift**：在数组的最前面添加元素

var arr=[1,2,3,4]
    arr.unshift(9)
    console.log(arr)//[9,1,2,3,4]

**join**：数组元素使用参数作为连接符，链接成字符串类型，不会修改原数组

var arr=[1,2,3,4]
    console.log(arr.join(-))//1-2-3-4
    console.log(arr)//[1,2,3,4]

**splice**：对数组进行截取和添加的操作；三个参数(开始索引，删除元素的位移，插入元素【可以多写】)

1删除

var arr=[1,2,3,4]
    var arr2=arr.splice(1,1)//从第一的小标开始删除一个元素
    console.log(arr)//[1,3,4]
    console.log(arr2)//[2]

2添加

var arr=[1,2,3,4]
    var arr2=arr.splice(1,0,30,32)//从下标1开始删除0个，新增2个元素
    console.log(arr)//[1,2,,3,30,32,4]
    console.log(arr2)[]

**slice**：取出元素区间，原数组不改变

var arr=[1,2,3,4]
    var arr2=arr.slice(2,3)//从下标为2开始截取，到3结束，不包括3，也就是截取一位
    console.log(arr)//[1,2,3,4]
    console.log(arr2)//[3]

**reverse**：数组顺序颠倒

var arr=[1,2,3,4]
    arr.reverse();
    console.log(arr)[4,3,2,1]

**concat**：数组拼接,不改变原数组

var a=[1,2,3,4,5]
    var b=[6,7,8,9]
    var c = a.concat(b)
    console.log(a)[1,2,3,4,5]
    console.log(b)[6,7,8,9]
    console.log(c)[1,2,3,4,5,6,7,8,9]

也因为不会改变任何一个原数组，因此可以用concat来进行数组的深拷贝

var arr=[1,2,3,4]
    var arr2=arr.concat([])
    console.log(arr)//[1,2,3,4]
    console.log(arr2)//[1,2,3,4]
    arr === arr2 //false

**sort**：数组排序

var arr=[1,5,3,4]
    arr.sort()
    console.log(arr)//[1,3,4,5]

但是有一些情况下不可直接sort：

var arr=[7,8,9,10,11]
    arr.sort()
    console.log(arr) //[10, 11, 7, 8, 9]

因为按照字母表排序的话，7比10大，所以需要compare内置函数

var arr=[8,7,20,10,3]
    arr.sort(function(a,b){return a-b})
    console.log(arr)//[3,7,8,10,20]

也可以排序对象的属性：

var arrObj = [
        {name:"liuyan",bust:88},
        {name:"fanbingbing",bust:85},
        {name:"yangmi",bust:81},
        {name:"hanxue",bust:78},
        {name:"jiangshuying",bust:75}
    ]
    var arr2 = arrObj.sort(function(val,val1){
        return val.bust> val1.bust
    })
    console.log(arr2)//[{name: "jiangshuying", bust: 75},{name: "hanxue", bust: 78},
    {name: "yangmi", bust: 81},{name: "fanbingbing", bust: 85},{name: "liuyan", bust: 88}]

**ES5数组扩展：**

**indexOf、lastIndexof**：查找数组内指定元素的位置，找到就返回元素的索引，没找到则返回-1，lastindexof从后面开始找，但是返回的下标还是正序的，没找到也返回-1

var arr = [1,2,"Pantyhose",3,4,5,"i","like"]
    console.log(arr.indexOf(5))//5
    console.log(arr.indexOf("Pantyhose"))//2
    console.log(arr.indexOf("stockings"))//-1
    console.log(arr.lastIndexof(1))//0

**forEach**：遍历数组，参数为一个回调函数，回调函数有三个参数(val,index,arr)当前值，索引，整个数组

var arr= [1,2,3,4,5]
    arr.forEach(function(val,index,array){
        array[index]=val*val
    })
    console.log(arr)//[1,4,9,16,25]

**map**：遍历数组，返回一个新数组，原数组不改变

var arr=[1,2,3,4,5]
    var arr2=arr.map(function(val){
        return val+1
    })
    console.log(arr)[1, 2, 3, 4, 5]
    console.log(arr2) [2, 3, 4, 5, 6]

**every，some：**逻辑判定，回调函数返回布尔值

**every**：所有回调函数都返回true才返回true，some：只要有一个返回true就返回true

var arr=[1,2,3,4]
    arr.every(function(val){
        return val>0
    })//true
    
    var array=[1,2,-1,4]
    arr.some(function(val){
        return val>0
    })true

**filter**：返回数组的一个子集，回调函数用于逻辑判断是否返回，返回true则把当前元素加入到返回数组中，false则不加。新数组只包含返回true的值，原数组不变。

var arr=[1,2,3,4,-2,-5,9]
    var arr2=arr.filter(function(val){
        return val>0
    })
    console.log(arr)//[1,2,3,4,-2,-5,9]
    console.log(arr2)//[1,2,3,4,9]

var arr=[
        {name:'anth',age:15},
        {name:'btne',age:18},
        {name:"rouse",age:24}
    ]
    var arr2=arr.filter(function(val){
        return val.age>18
    })
    console.log(arr2)//[{name:'rouse',age:24}]
    
    var arr3=arr.filter(function(val){
        return val.name.indexOf('n')>-1
    })
    console.log(arr3)//[{name:'anth',age:15},{name:'btne',age:18}]

**reduce** 遍历数组，调用回调函数，将数组元素组合成一个值，不改变原数组

回调函数：把两个值合为一个，返回结果

value，一个初始值，可选

var arr = [3,4,9]
    arr.reduce(function(v1,v2){
        return v1 + v2
    })  //16
    arr.reduce(function(v1,v2){
        return v1 * v2 
    })  //108

[Link 1]: http://www.w3school.com.cn/tiy/t.asp?f=jsrf_array
[For...In]: http://www.w3school.com.cn/tiy/t.asp?f=jsrf_array_for_in
[- concat]: http://www.w3school.com.cn/tiy/t.asp?f=jseg_concat_2
[- join]: http://www.w3school.com.cn/tiy/t.asp?f=jseg_join
[- sort]: http://www.w3school.com.cn/tiy/t.asp?f=jseg_sort_1
[- sort 1]: http://www.w3school.com.cn/tiy/t.asp?f=jseg_sort_2