欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

web前端篇：JavaScript基础篇（易懂小白上手快）-1

程序员文章站 2022-03-22 12:45:27
[TOC] 详细内容： 0.JavaScript的引入 1.第一个JavaScript 1.alert语句 用途：弹出警告框。 2.注释： JavaScript对换行，缩进，空格不敏感。 单行注释(ctrl +/) 多行注释（ctrl+shift+/） 3.console.log('') 控制台输出 ......

目录

详细内容：

0.javascript的引入

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>

</head>
<body>
<!--行内js-->
    <p id="" class="" style="" onclick="console.log(2);">mjj</p>
<!--内嵌-->
<script type="text/javascript">

    //js代码


</script>
    <script type="text/javascript" src="js/index.js"></script>

</body>
</html>

1.第一个javascript

1.alert语句

  • 用途：弹出警告框。

        <script>
        alert('你好')
    </script>

web前端篇：JavaScript基础篇（易懂小白上手快）-1

2.注释：

  • javascript对换行，缩进，空格不敏感。

  • 单行注释(ctrl +/)

    //我是单行注释

  • 多行注释（ctrl+shift+/）

    /*
多行注释1
多行注释2
*/

3.console.log('')

  • 控制台输出。

        <script>
        console.log('hello world!');
    </script>

web前端篇：JavaScript基础篇（易懂小白上手快）-1

4.prompt()语句

  • 弹出能够让用户输入的对话框

        <script>
        prompt('今天天气如何？')
    </script>

web前端篇：JavaScript基础篇（易懂小白上手快）-1

  • prompt()语句中，用户不管输入什么内容，都是字符串。

  • alert和prompt的区别

    alert('今天天气如何？');//直接使用，不需要变量
var a = prompt("请输入一个数字");//必须用一个变量，来接收用户输入值

2.变量

1.变量的定义

  • var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”。
    • 定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。
    • 变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。
    • 变量名：我们可以给变量任意的取名字。

2.变量的写法：

var a = 100;
console.log(a);//输出100

3.变量命名规范：

  • 变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是javascript保留字，如下：

    abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

3.变量的类型

1.数值型：number

<script>
    var a= 100;
console.log(typeof a);
</script>
//number
  • 通过typeof()表示“获取变量的类型”，语法：typeof 变量

2.字符串型：string

    <script>
        var a = "abcde";
        var c= '1234';
        var d = '哈哈';
        var e = '';   //空字符串
        
        console.log(typeof a);//string
        console.log(typeof c);//string
        console.log(typeof d);//string
        console.log(typeof e);//string

    </script>

3.boolean布尔值

  • 为js中的boolean的值也只有2中：true和false。他们通常被用于在适当的代码之后，测试条件是否成立，比如 3 > 4。这是个表达式，我们都知道3是不会大于4的，所以返回了false。

    3>4;//false
4>=3;//true

4.字符串拼接

  • 通过+拼接：

    <script>
console.log('我'+"爱"+"吃"+"饭")
</script>
//我爱吃饭

  • 通过$和tab上面键拼接

        <script>
        var name = 'jk' , age = 20;
        var str = `${name}今年是${age}岁数了`;
        console.log(str);
    </script>
//jk今年是20岁数了

5.数学运算符

  • javascript有一套可用的全功能的数学功能，接下来我们就重点来学习javascript中的数学运算吧。

  • 算数运算符

运算符 名称 作用 示例
+ 加法 两个数相加。 6 + 9
- 减法 从左边减去右边的数。 20 - 15
* 乘法 两个数相乘。 3 * 7
/ 除法 用右边的数除左边的数 10 / 5
% 求余(有时候也叫取模) 在你将左边的数分成同右边数字相同的若干整数部分后，返回剩下的余数 8 % 3(返回 2，将8分成3份，余下2 。) 
5 + 4 * 3;
num % 8 *num;

  • 运算符优先级

  • javascript中的运算符优先级与数学运算符优先级相同—乘法和除法总是先完成，然后再算加法和减法。

  • 递增和递减运算

    • 增量（++）或递减（--）
    var x = 3;
x++;//相当于x = x + 1
    • 常见如下：
运算符 名称 作用 示例 等价于
+= 递增赋值 右边的数值加上左边的变量，然后再返回新的变量。 x = 3;x += 4; x = 3;x = x + 4;
-= 递减赋值 左边的变量减去右边的数值，然后再返回新的变量。 x = 6;x -= 3; x = 6;x = x - 3;
*= 乘法赋值 左边的变量乘以右边的数值，然后再返回新的变量。 x = 2;x *= 3; x = 2;x = x * 3;
/= 除法赋值 左边的变量除以右边的数值，然后再返回新的变量。 x = 10;x /= 5; x = 10;x = x / 5; 
//第一题：
<script>
        var a = 4;
    var c = a ++;
    console.log(c);//4
    console.log(a);//5
</script>
//先让a的值赋值给c,再对a++

//第二题：
<script>
    var a = 4;
    var c = ++a;
    console.log(c);//5
    console.log(a);//5
</script>
//想让a加法运算，再将a赋值给c

//第三题：
<script>
    var a = 2;
    var b = '2';
    console.log(a == b);//true
    console.log(a === b); //false
</script>
//== 比较的是值 console自动将a转换字符串进行比较，===比较是值和数据类型。

6.数字和字符串之间的转换

  • 数字转字符串

    <script>
    var mynum = "" +234;
    console.log(typeof mynum);
</script>
//string
    var mynum = 123;
var mystr = mynum.tostring();

var num  = 1233.006;
// 强制类型转换
console.log(string(num));
console.log(num.tostring());
// 隐式转换
console.log(''.concat(num));
// tofixed()方法会按照指定的小数位返回数值的字符串 四舍五入
console.log(num.tofixed(2));

  • 字符串转数字

    <script>
    var mystr = '123';
    var mynum = number(mystr);
    console.log(typeof mynum);
</script>
//number

var str = '123.0000111';
console.log(parseint(str));//123
console.log(typeof parseint(str));//number
console.log(parsefloat(str));//123.0000111
console.log(typeof parsefloat(str));//number
console.log(number(str));//123.0000111

4.数组

1.数组的创建

var shop = ['apple','milk','banana','orange']

2.访问和修改数组

shop[0];//访问数组
shop[0] = 'pen'；

3.获取数组长度

shop.length;

5.条件语句

1.if...else语句

  • 语法：

    if (判断条件) {
  //结果1
}else{
    //结果2
}
    • 关键字 if，并且后面跟随括号。
    • 测试的条件，放到括号里。这个条件会利用比较运算符进行比较，并且返回true或者false。
    • 一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且只会在条件语句返回true的时候运行
    • 关键字else
    • 另一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且当条件语句返回值不是true的话，它才会运行。

2.else...if语句

  • 上述例子提供我们两种选择或结果，但我们如果想要多个选择和结果可以用else if.
var weather = 'sunny';
if(weather == 'sunny'){
    //天气非常棒，可以出去玩耍了
}else if(weather == 'rainy'){
    //天气下雨了，只能在家里呆着
}else if(weather == 'snowing'){
    //天气下雪了，可以出去滑雪了
}

3.if ...else的嵌套

var weather = 'sunny';
if(weather == 'sunny'){
    if(temperature > 30){
        //还是在家里吹空调吧
    }else if(temperature<=30){
        //天气非常棒，可以出去玩耍了
    }
}

4.逻辑运算符：&&，||，！

  • && — 逻辑与; 使得并列两个或者更多的表达式成为可能，只有当这些表达式每一个都返回true时，整个表达式才会返回true.
  • || — 逻辑或; 当两个或者更多表达式当中的任何一个返回 true 则整个表达式将会返回 true.
  • ! — 逻辑非; 对一个布尔值取反, 非true返回false,非false返回true。
var mathscore = 88;
var enlishscore = 90;
if(mathscore > 70 || enlishscore > 95){
    console.log('才可以玩游戏');
}else{
    console.log('在家里写作业');
}

5.switch语句

var weather = 'sunny';
switch(weather){
    case 'sunny':
        //天气非常棒，可以出去玩耍了
        break;
    case 'rainy':
       //天气下雨了，只能在家里呆着
        break;
    case 'snowing':
        //天气下雪了，可以出去滑雪了
        break;
    default:
        //哪里也不出去
}

6.三元运算符

  • 三元运算符它解决了像if..else块较少的代码。如果你只有两个通过true/false条件选择。
(codition) ? run this code : run this code instead;
<script>
    var a = '';
    (1 > 2)? a='真的' : a='假的';
    console.log(a)

</script>
//假的

7.循环

1.for循环

  • javascript的循环有两种，一种是for循环，通过初始化条件、结束条件和递增条件来循环执行语句块，语法如下：
for (初始化条件;结束条件;递增条件){
    run this code
}

  • 示例：

        <script>
        var total = 0;
        var i;
        for (i = 1;i <= 1000; i++){
            total = total + i;
        }
        console.log(total);//500500
    </script>

2.使用break退出循环

  • for循环的3个条件都是可以省略的，如果没有退出循环的判断条件，就必须使用break语句退出循环，否则就是死循环：

        <script>
        var x = 0;
        for (;;){
            if (x>100) {
                break;
            }
            x ++;
            console.log(x)
        }
    </script>
//1.....101

3.continue语句

  • continue语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。

        <script>
        var x;
        for (var i = 0; i<=10; i++){
            if (i==3) continue;
            x ='这个数字是' + i;
            console.log(x)
        }
    </script>
//这个数字是0......这个数字是10

4.while循环

  • javascript中的另一种循环则是while循环，使用它最佳。

  • 语法：

    while (判断循环结束条件){
  //code to run
  递增条件
}

  • 示例：

    <script>
    var a = 1;
    while (a <=100){
        console.log(a);
        a += 1;
    }
</script>
//1 2 3 .....100

5.do...while

  • 最后一种循环是do { ... } while()循环，它和while循环的唯一区别在于，不是在每次循环开始的时候判断条件，而是在每次循环完成的时候判断条件：

    var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100

  • 用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。

8.函数

  • 在javascript中另一个基本概念是函数，它允许你在一个代码块中存储一段用于处理一个任务的代码，然后在任何你需要的时候用一个简短的命令来调用，而不是把相同的代码写很多次。

1.函数定义

  • 一个函数定义(也称为函数声明，或函数语句)由一些列的function关键字组成。例如，以下代码是一个简单的计算多组数的和的函数，我们给它命名为sum。

    function sum(a,b) {
  //函数体
}

2.函数的调用

  • 函数定义好后，它是不能自动执行的，需要调用它，直接在需要的位置写函数名。

    <script>
    function sum(a,b){
        console.log(a+b);
    }
    sum(3,5);
</script>
  • 我们把定义函数时传入的两个参数a和b叫形参(形式参数，一个将来被代替的参数)，调用函数时传入的两个参数叫实参(实际的参数)。

  • 如果向在定义函数时添加多个形参。可以在后面添加多个，注意参数之间用逗号隔开。

3.函数的返回值

  • 我们在计算两个数之和的时候，可以给函数一个返回值，每次调用该函数，你就能计算出两个数之和。

    <script>
    function sum(a,b){
        return a+b
    }
    var result = sum(3,5);
    console.log(result);
</script>

4.函数表达式

  • 虽然上面的函数定义在语法上是一个语句，但函数可以由函数表达式创建。这样的函数可以是匿名的;它不必有一个名称。例如，函数sum也可以这样去定义：

    var sum = function(a,b){
    return a + b;
}
sum(4,5);

5.函数作用域冲突

  • 处理函数时，作用域是非常重要的一个概念。当你创建函数时，函数内定义的变量和其它东西都在它们自己的单独的范围内，意味着它们被锁在自己独立的房间内。

  • 所有的函数的最外层被称为全局作用域。在全局作用域内定义的值可以任意地方访问。

    <!-- my html file -->
<script src="first.js"></script>
<script src="second.js"></script>
<script>
  hello();
</script>
    //first.js
var name = 'tom';
function hello() {
  alert('hello ' + name);
}
    //second.js
var name = 'jack';
function hello() {
  alert('hello ' + name);
}
    • 这两个函数都是用hello()形式调用，但是你只能访问到 second.js文件的hello()函数。second.js 在源代码中后应用到html中，所以它的变量和函数覆盖了 first.js 中的。我们称为这种行为叫代码冲突。

  • 例题：

        function fn() {
        switch (arguments.length){
            case 2:
                console.log('2个参数');
                break;
            case 3:
                console.log('3个参数');
                console.log(arguments);//arguments(3) [2, 3, 4, callee: ƒ, symbol(symbol.iterator): ƒ]
                break;
            default:
                break;
        }
    }
    fn(2,3);//2个参数
    fn(2,3,4);//3个参数
//arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数.
//arguments对象不是一个 array 。它类似于array，但除了length属性和索引元素之外没有任何array属性。

6.函数内部的函数

  • 在任何地方你都可以调用函数，甚至可以在另一个函数中调用函数。这通常被用作保持代码整洁的方式。如果你有一个复杂的函数，如果将其分解成几个子函数，它更容易理解：
function mybigfunction() {
  var myvalue = 1;
  subfunction1(myvalue);
  subfunction2(myvalue);
  subfunction3(myvalue);
}
function subfunction1(value) {
  console.log(value);
}
function subfunction2(value) {
  console.log(value);
}
function subfunction3(value) {
  console.log(value);
}

  • 函数自执行

    （function(){
          //代码
        })();

9.对象（object）:

  • 对象属性：它是属于这个对象的某个变量。比如字符串的长度、数组的长度和索引、图像的宽高等。

  • 对象的方法：只有某个特定属性才能调用的函数。表单的提交、时间的获取等。

  • 对象的创建方式：

    1.字面量表示法

    • 对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。

      <script>
    var person = {
        name : 'xjk',
        age : 22,
        fav :function() {
            console.log('学js')
        }

    };
    person.fav();//学js
    console.log(person.name);//22
</script>
      var person = {};//与new object()相同

var obj2 = new object();
    2.点语法(set和get)
    <script>
    var person = {};
    person.name='xjk';
    person.fav = function(){
        console.log(this)
    };
    person.fav();//{name: "xjk", fav: ƒ}
    console.log(person.name);//xjk
</script>
    //set get  用法：
//1、get与set是方法，因为是方法，所以可以进行判断。
//2、get是得到 一般是要返回的   set 是设置 不用返回
//3、如果调用对象内部的属性约定的命名方式是_age   
    var my = {
        name:'jk',
        work:function () {
            console.log('working');
        },
        _age:22,
        get age(){
            return this._age;
        },
        set age(val){
            if (val<0 || val>100) {
                throw new error('invalid value')
            }else{
                this._age = val;
            }
        }
    };
    console.log(my.age);//22
    my.age = 18;
    console.log(my.age);//18
    my.age = 200;
    console.log(my.age);//uncaught error: invalid value
    3.括号表示法
    person['name'];

  • ecmascript6：

    <script>
    class person{
        constructor(name,age){
            //初始化相当于python__init__,this相当于self
            this.name = name;
            this.age = age;
        }
        fav(){
            console.log(this.name);
        }
    }
    var p = new person('mjj',18);
    p.fav();
</script>
//与python相似

  • 例题：

        var obj = {};
    obj.name = 'mjj';
    obj.fav = function(){
        //obj
        console.log(this);
    };
    console.log(this);
  //window {postmessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: window, …}全局的。
    function  add(x,y) {
        console.log(this.name);
        console.log(x);
        console.log(y);
    }

    add.call(obj,1,2);
  //obj传入add 函数，给this赋予局部函数，为obj.name，调用obj对象的name并打印。

  add.apply(obj,[1,2]);
  //apply 与call相似，第二个参数传入必须为数组



//匿名函数
    (function () {
        console.log(this);
    })();
//window

  • 注意：首先要了解js里的this对象，this对象是在运行时基于函数的执行环境绑定的，在全局函数中，this等于window，而当函数作为某个对象例如a的方法b被调用时，this等于a对象，这里有个例外，匿名函数的执行环境具有全局性，因此匿名函数的this对象通常指向window。用一句话总结，就是谁调用this，谁就被引用。

    <script>
    var name = 'wusir';
    (function () {
        console.log(this.name);
    })();

</script>
//wusir

  • 练习题：

    <script>
    var name = 'window';
    var obj = {
        name:'my obj',
        getname:function () {
            var name = 'inner name';
            return this.name;
        }
    };
    alert(obj.getname());
</script>
//my obj
//谁调用this，谁就被引用。

  • apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性. function.apply(obj,args)方法能接收两个参数 obj：这个对象将代替function类里this对象 args：这个是数组，它将作为参数传给function（args-->arguments）call:和apply的意思一样,只不过是参数列表不一样. function.call(obj,[param1[,param2[,…[,paramn]]]]) obj：这个对象将代替function类里this对象

10.内置对象：

  • 它提供了一些列预先定义好的对象，而我们可以把这些对象直接用在自己的脚本里。我们称这种对象叫内置对象（navtive object）。

1.array

  • 其实我们已经见过一些javascript内置对象了。数组就是一种javascript内置对象中的一种。本节我们主要介绍数组常用的属性和方法。
1.1数组创建：
var colors = new array();
1.2使用字面量方式创建数组
var colors = [];
1.3 isarray
  • 判断是否为数组
<script>
    var  colors = ['red','green','blue'];
    if (array.isarray(colors)){
        console.log("是数组")
    }
</script>
//是数组
1.4 tostring

  • 数组中每个值得字符串形式拼接。

    <script>
    var  colors = ['red','green','blue'];
    alert(colors.tostring());
</script>
//red,green,blue
1.5 join

  • 分割字符串

    <script>
    var  colors = ['red','green','blue'];
    res = colors.join("|");
    console.log(res);
</script>
//red|green|blue
1.6栈方法push() pop()
  • 数组也可以像栈一样，既可以插入和删除项的数据结构。栈是一种lifo(last-in-first-out,后进先出)的数据结构，也就是最新添加的那项元素最早被删除。而栈中项的插入（叫做推入）和移除(叫做弹出)，只发生在一个位置——栈的顶部。
    • push():可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
    • pop():从数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项 。
     <script>
    var  colors = ['red','green','blue'];
    colors.push('yellow','black');
    console.log(colors);
</script>
//["red", "green", "blue", "yellow", "black"]
    <script>
    var  colors = ['red','green','blue'];
    res = colors.pop();//res = 'blue'
    console.log(colors);
</script>
//["red", "green"]
1.7队列方法 shift() unshift()

  • 队列数据结构的访问规则是 fifo(first-in-first-out， 先进先出)。队列在列表的末端添加项，从列表的前端移除项。

  • shift()

    <script>
    var  colors = ['red','green','blue'];
    var item = colors.shift();
    alert(item);
</script>
//red

  • unshift()

    var colors = [];
var count  = colors.unshift('red','green'); //推入两项
alert(count); //2
console.log(colors); // ["red", "green"]
1.8reverse()

  • 反转数组。

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

  • 方法按升序排列

    • 默认情况下，sort()方法按升序排列——即最小的值位于最前面，最大的值排在最后面。 为了实现排序，sort()方法会调用每个数组项的tostring()转型方法，然后比较得到的字符串，以确定如何排序 。即使数组中的每一项都是数值，sort()方法比较的也是字符串。
    var values = [0,1,5,10,15];
varlus.sort();
alert(values); //0,1,10,15,5
//可见，即使例子中值的顺序没有问题，但 sort()方法也会根据测试字符串的结果改变原来的顺序。 因为数值 5 虽然小于 10，但在进行字符串比较时，”10”则位于”5”的前面，于是数组的顺序就被修改了。 不用说，这种排序方式在很多情况下都不是最佳方案。
1.10 concat方法
  • 数组合并方法，一个数组调用concat()方法去合并另一个数组，返回一个新的数组。concat()接收的参数是可以是任意的。
    • 参数为一个或多个数组，则该方法会将这些数组中每一项都添加到结果数组中。
    • 参数不是数组，这些值就会被简单地添加到结果数组的末尾
var colors = ['red','blue','green'];
colors.concat('yello');//["red", "blue", "green", "yello"]
colors.concat({'name':'张三'});//["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);// ["red", "blue", "green", {…}, "black", "brown"]
1.11 slice()方法
  • slice()方法，它能够基于当前数组中一个或多个项创建一个新数组。slice()方法可以接受一或两个参数，既要返回项的起始和结束位置。
    • 一个参数的情况下，slice()方法会返回从该参数指定位置开始到当前数组默认的所有项
    • 两个参数的情况下，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
var colors = ['red','blue','green','yellow','purple'];
colors.slice(-2,-1);//["yellow"] 
colors.slice(-1,-2);//[]
//解析colors.slice(-2,-1) 等于colors.slice(3,4)，都加colors.length.此时为5.
1.12splice

  • 用于数组删除，插入，替换。

    //1.删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的个数。例如splice(0,2)会删除数组中的前两项。
<script>
    var colors = ['red','blue','green','yellow','purple'];
    colors.splice(0,2);
    console.log(colors);//["green", "yellow", "purple"]
</script>
//2.插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的个数）和要插入的项。如果要插入多个项，可以再传入第四、第五、以至任意多个项。例如，splice(2,0,'red','green')会从当前数组的位置2开始插入字符串'red'和'green'。
<script>
    var colors = ['red','blue','green','yellow','purple'];
    colors.splice(2,0,'red','green');
    console.log(colors);//["red", "blue", "red", "green", "green", "yellow", "purple"]
</script>
//3.替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,"red","green")会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串"red"和"green"。
<script>
    var colors = ['red','blue','green','yellow','purple'];
    colors.splice(2,1,'red','green');
    console.log(colors);//["red", "blue", "red", "green", "yellow", "purple"]
</script>
1.13 indexof() lastindexof()位置方法

  • indexof()和 lastindexof()。这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中，indexof()方法从数组的开头(位置 0)开始向后查找，lastindexof()方法则从数组的末尾开始向前查找。在没找到的情况下返回-1.

    <script>
    var num = [1,2,3,4,5,4,3,2,1];
    alert(num.indexof(4));//3 查找值为4的索引为3
</script>

<script>
    var num = [1,2,3,4,5,4,3,2,1];
    // alert(num.indexof(4));//3 查找值为4的索引为3
    alert(num.lastindexof(4));//5 从后开始查找值为4的 索引为5（索引还是从前面开始算）
</script>

<script>
    var num = [1,2,3,4,5,4,3,2,1];
    alert(num.indexof(4,4));//5 第一个参数要查找的值4，第二个参数为规定在字符串中开始检索的位置,从4好位置开始查找
    // alert(num.lastindexof(4));//5 从后开始查找值为4的 索引为5（索引还是从前面开始算）
</script>
1.14迭代方法 filter map foreach

  • filter()函数，它利用指定的函数确定是否在返回的数组中包含某一项。

    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]

  • map方法

    • 方法也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行输入函数的结果。
    var numbers = [1,2,3,4,5,4,3,2,1];
var filterresult = numbers.map(function(item, index, array){
    return item * 2;
});
alert(filterresult); //[2,4,6,8,10,8,6,4,2]

  • foreach()方法

    • 它只是对数组中的每一项运行传入的函数。这个方法没有返回值， 本质上与使用 for 循环迭代数组一样。
    <script>
    var num = [1,2,3,4,5,4,3,2,1];
    var res = num.foreach(function(item,index,array){
        console.log(index,item);

    });
</script>
/*
第一个索引index，第二个值item
0 1
1 2
2 3
3 4
4 5
5 4
6 3
7 2 
8 1
*/

2.string

2.1 length方法
  • 获取字符串长度。
var stringvalue = "hello world"; 
alert(stringvalue.length);     //"11"
2.2charat() charcodeat()字符方法

  • 这两个方法都接收一个 参数，即基于 0 的字符位置。其中，charat()方法以单字符字符串的形式返回给定位置的那个字符。

    <script>
    var stringvalue = "hello world";
    alert(stringvalue.charat(1));//'e'
</script>

var stringvalue = "hello world";
alert(stringvalue.charcodeat(1)); //输出"101" 当前字符编码
2.3 concat()字符串操作方法

  • 用于将一或多个字符串拼接起来， 返回拼接得到的新字符串.concat可以接收任意多个参数。

    <script>
    var stringvalue = "hello ";
    var result = stringvalue.concat("world",'!');
    alert(result);//hello world!
</script>
2.4子字符串创建新字符串

  • slice() substr() substring()

  • 与 concat()方法一样，slice()、substr()和 substring()也不会修改字符串本身的值——它们只是 返回一个基本类型的字符串值，对原始字符串没有任何影响。

    • slice()、 substring() 第二个参数指定的是字符串最后一个字符位置。
    • substr()第二个参数指定则是返回字符个数。
    var stringvalue = "hello world";
alert(stringvalue.slice(3));//"lo world"
alert(stringvalue.substring(3));//"lo world"
alert(stringvalue.substr(3));//"lo world"
alert(stringvalue.slice(3, 7));//"lo w"
alert(stringvalue.substring(3,7));//"lo w"
alert(stringvalue.substr(3, 7));//"lo worl"
2.5indexof() lastindexof()字符串位置方法

  • 有两个可以从字符串中查找子字符串的方法:indexof()和 lastindexof()。这两个方法都是从 一个字符串中搜索给定的子字符串，然后返回子字符串的位置(如果没有找到该子字符串，则返回-1)。

    var stringvalue = "hello world";
alert(stringvalue.indexof("o"));             //4
alert(stringvalue.lastindexof("o"));         //7
alert(stringvalue.indexof("o", 6));         //7
alert(stringvalue.lastindexof("o", 6));     //4
2.6trim()方法

  • trim()方法,删除字符串的前后空格.

    var stringvalue = "   hello world   ";
var trimmedstringvalue = stringvalue.trim();
alert(stringvalue);            //"   hello world   "
alert(trimmedstringvalue);     //"hello world"
2.7字符串大小写转换
var stringvalue = "hello world";
alert(stringvalue.tolocaleuppercase());  //"hello world"
alert(stringvalue.touppercase());        //"hello world"
alert(stringvalue.tolocalelowercase());  //"hello world"
alert(stringvalue.tolowercase());        //"hello world"

11.date对象方法

web前端篇：JavaScript基础篇（易懂小白上手快）-1

var date = new date();
console.log(date);
//mon jun 03 2019 23:51:28 gmt+0800 (中国标准时间)
console.log(date.getdate());
//3 根据本地时间返回本月第几天
console.log(date.getmonth()+1);
//6 根据本地时间返回第几月
console.log(date.getfullyear());
//2019  返回年
console.log(date.getday());
// 星期几
console.log(date.gethours());
//几时
console.log(date.getminutes());
//几分
console.log(date.getseconds());
//几秒
console.log(date.tolocalestring());
//2019/6/3 下午11:56:00
var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var date = new date();
console.log(weeks[date.getday()]);
var day = weeks[date.getday()];
document.write(`<a href="#">${day}</a>`);
  • 时钟：
<h2 id="time"></h2>
<script>
    var timeobj = document.getelementbyid('time');
    console.log(time);

    function getnowtime() {
        var time = new date();
        var hour = time.gethours();
        var minute = time.getminutes();
        var second = time.getseconds();
        var temp = "" + ((hour > 12) ? hour - 12 : hour);
        if (hour == 0) {
            temp = "12";
        }
        temp += ((minute < 10) ? ":0" : ":") + minute;
        temp += ((second < 10) ? ":0" : ":") + second;
        temp += (hour >= 12) ? " p.m." : " a.m.";
        timeobj.innertext = temp;
    }

    setinterval(getnowtime, 20)
</script>

12.window对象

  • ecmascript 虽然没有指出如何直接访问 global 对象，但 web 浏览器都是将这个全局对象作为 window 对象的一部分加以实现的。因此，在全局作用域中声明的所有变量和函数，就都成为了 window 对象的属性。来看下面的例子。
var color = "red";
function saycolor(){
    alert(window.color);
}
window.saycolor();  //"red"

13.math对象

13.1max min 最小值 最大值
var max = math.max(3,54,32,16);
alert(max);//54
var min = math.min(3,54,32,16);
alert(min);//3
var values = [1,2,36,23,43,3,41];
var max = math.max.apply(null, values);
console.log(max);
13.2舍入方法
  • math.ceil():执行向上舍入，即它总是将数值向上舍入为最接近的整数;
  • math.floor():执行向下舍入，即它总是将数值向下舍入为最接近的整数;
  • math.round():执行标准舍入，即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)。
<script>
    var a = 1.523;
    console.log(math.ceil(a));//2
    console.log(math.floor(a));//1
    console.log(math.round(a));//2
</script>
13.3random()随机数

  • 方法返回大于等于 0 小于 1 的一个随机数

  • 生成100~400随机整数

    <script>
    function random(min,max){
        return min +math.floor(math.random()*(max-min));
    }
    var res = random(100,400);
    console.log(res);

</script>

上一篇： Netty实战入门详解——让你彻底记住什么是Netty（看不懂你来找我）

下一篇： 《高性能javascript》随笔

推荐阅读