Home > Article > Web Front-end > Deep dive into the basics of JavaScript

Deep dive into the basics of JavaScript

php中世界最好的语言Original: 2018-03-13 13:19:551375browse

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>

Return value 2

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

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>

General summation

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

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>```

- 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>

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
}
}

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;));
};

Note3499910bf9dac5ae3c52d5ede7383485This function only Applicable to single style, composite style is not applicable!!!5db79b134e9f6b82c0b36e0489ee08ed
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); //也可以这样创建

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>

- 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>

- 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"]

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

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

- 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>

② 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>

- 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>

- 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>

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

Deep dive into the basics of JavaScript

Related articles