Deep dive into the basics of JavaScript-JS Tutorial-php.cn

Deep dive into the basics of JavaScript

php中世界最好的语言

Release： 2018-03-13 13:19:55

Original

1372 people have browsed it

This time I will bring you in-depth JavaScript basic applications, What are the precautions for using JavaScript basic applications, the following are practical cases, let’s take a look take a look.

Function return value

Return value 1

<script>function show(){    return &#39;advb&#39;;
}var a=show();
alert(a); // 结果: advb</script>

Copy after login

Return value 2

<script>function show(a, b){    return a+b;
}
alert(show(3, 5));</script>

Copy after login

Return value 3

<script>function show(a, b){    //return; //没有return}
alert(show(3, 5));  //结果 : undefined</script>
<script>function show(a, b){    return; //没有return任何东西}
alert(show(3, 5));  //结果 : undefined</script>

Copy after login

General summation

<script>function sum(a, b){    return a+b;
}
alert(sum(12, 6));</script>

Copy after login

Sum of multiple parameters (arguments is a variable array)

<script>
    function sum()    {        //arguments 是一个可变数组 
        var result=0;        for(var i=0;i<arguments.length;i++)
        {
            result+=arguments[i];
        }        return result;
    }
    alert(sum(12, 6, 8, 6, 8, 6, 8)); //结果 : 54</script>```

Copy after login

- CSS function gets properties when two parameters are passed in, and changes when three parameters are passed in Style

<html>
<head>
<meta charset="utf-8">
<title>CSS函数</title>
<script>
function css(obj, name, value)
{
if(arguments.length==2) //获取
{
return obj.style[name];
}
else
{
obj.style[name]=value; //修改
}
}
window.onload=function ()
{
var oDiv=document.getElementById(&#39;div1&#39;);
//alert(css(oDiv, &#39;width&#39;)); //获取到宽度 200px
css(oDiv, &#39;background&#39;, &#39;green&#39;); //修改背景颜色为绿色
};
</script>
</head>
<body>
<div id="div1" style="width:200px; height:200px; background:red;">
</div>
</body>
</html>

Copy after login

function getStyle(obj, name)
{if(obj.currentStyle) //由于currentStyle只兼容IE,所以在IE浏览器中他是true,其他浏览器中为false
{
return obj.currentStyle[name]; //IE
}
else
{    //计算样式 其中getComputedStyle(oDiv, xxx) 第二个参数可以随便填,一般习惯写false
return getComputedStyle(obj, false)[name];  //Chrome、FF
}
}

Copy after login

Sample code:
Use the above function to obtain the non-interline style `backgroundColor`

window.onload=function (){var oDiv=document.getElementById(&#39;div1&#39;);
alert(getStyle(oDiv, &#39;backgroundColor&#39;));
};

Copy after login

NoteThis function only Applicable to single style, composite style is not applicable!!!
Single style: width, height, position, etc.
Composite style: background, border, etc.
>
3. Array - Array basics
- Array usage

Definition

var arr=[12, 5, 8, 9]; //一般用这种创建方式,简单
var arr=new Array(12, 5, 8, 9); //也可以这样创建

Copy after login

There is no difference, [] has slightly higher performance because the code is shorter

- Array The attribute

length

can both be obtained and set: ①. You can get the number of arrays, ②. You can also use array.length = 1; to set the number of arrays;

Example: Quickly clear the array //Use array.length = 0; to clear the array;

Principles for using arrays: Only one type of variables should be stored in the array

- Array methods

Add

push(element), add an element from the tail

unshift(element), add an element from the head

Delete

pop(), delete an element from the tail

shift(), delete an element from the head

- insert and delete `splice` (`phonetic symbol:[splaɪs]`): universal of arrays Operation

Delete

splice(start, length) //First parameter: Specify the position; Second parameter: Specify the length

Insert

splice(start, 0, element...)

Delete first, then insert

splice(start, length, element...)

Delete first, then insert

Replacement

Delete first, then insert, which can be used as replacement

-Array connection (merge two arrays):concatconcat(array 2)

Connect two Array

<script>
var a = [1,2,3];
var b = [4,5,6];
alert(a.concat(b)); 结果:[1,2,3,4,5,6];
alert(b.concat(a)); 结果:[4,5,6,1,2,3];
</script>

Copy after login

- join(separator)

Use the delimiter to combine array elements to generate a string (when learning ajax, use it to connect the URL)

<script>
var arr = [1,2,3,4];
alert(arr.join(&#39;-&#39;)) //1-2-3-4
alert(arr.join(&#39;- -p&#39;)) //1- -p2- -p3- -p4
</script>

Copy after login

- String split (`[splɪt]`Separate; decompose) The split() method is used to split a string into a string array. stringObject.split(separator,howmany)

separator Required. A string or regular expression to split the stringObject from where specified by this parameter.

howmany Optional. This parameter specifies the maximum length of the returned array. If this parameter is set, no more substrings will be returned than the array specified by this parameter. If this parameter is not set, the entire string will be split regardless of its length.

Using

If you want to split a word into letters, or a string into characters, use the following code:

"hello".split("")   //可返回 ["h", "e", "l", "l", "o"]

Copy after login

If you only need to return a part of characters, please use howmany parameters:

"hello".split("", 3)    //可返回 ["h", "e", "l"]

Copy after login

- Sort sort`sort([Comparison function])`, sort an array
Sort a string array
Sort a numeric array

① Sort a string array

<script>
var arr=[&#39;float&#39;, &#39;width&#39;, &#39;alpha&#39;, &#39;zoom&#39;, &#39;left&#39;];
arr.sort();
alert(arr); //结果 [&#39;alpha&#39;,&#39;float&#39;,&#39;left&#39;,&#39;width&#39;,&#39;zoom&#39;]
</script>

Copy after login

② Sort a numeric array - 2.1 Basic Edition

<script>
var arr=[12, 8, 99, 19, 112];
arr.sort();
alert(arr); //结果: [112,12,19,8,99] //其实他把数字当成字符串来排序了
</script>

Copy after login

- 2.1 Advanced Edition

<script>
var arr=[12, 8, 99, 19, 112];
arr.sort(function (n1, n2){
if(n1<n2)
{
return -1;//只要是个负数就可以 -2,-7等都可以
}
else if(n1>n2)
{
return 1; //只要是个正数就够了
}
else
{
return 0;
}
});
alert(arr); //结果:[8,12,19,99,112]
</script>

Copy after login

- 2.2 final version (evolved from 2.1)

<script>var arr=[12, 8, 99, 19, 112];
arr.sort(function (n1, n2){    return n1-n2; //若果n1>n2,为正;如果n1<n2,为负;如果相等,则为0;});alert(arr);//结果:[8,12,19,99,112]
</script>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other