Javascript基础

JS的引入方式

　　内接式

　　　　<script type="text/javascript">

　　　　　　xxx

　　　　</script>

　　外接式

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

调试语句

　　alert(''); 弹出窗口

　　console.log(''); 控制台输出

声明变量

　　var a = xxx;

　　var a; a= xxx;

　　定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。

　　　　　　　关键字后面一定要有空格隔开。

　　变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。

　　变量名：我们可以给变量任意的取名字。

变量的命名规范

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

基本数据类型

　　数据类型查看方式：alert(typefo a)

　　number, string, bool, undefined, null,

引用数据类型

　　function,object, array

运算符

　　+， -， *， /， %， ++， --

比较运算符

　　> , <  , ==(等于),  ===(等同于,值和类型都相同),  !=, !==

逻辑运算符

　　&& 相当于python中的and

　　|| 相当去python中的or

数据类型转换

　　字符串转换为数字

　　　　var a = "text";

　　　　console.log(Number(a))

　　数字转换为字符串

　　　　var a = 123;

　　　　a.toString();

流程控制

　　if(条件){

　　条件成立执行

　　}else{

　　条件不成立执行

　　}

switch语句

　　 var weather = 'rainy';
        switch (weather) {
            case 'sunny':
                alert(1);
                break;
            case 'rainy':
                alert(2);
                // 编写switch语句 小心break,case穿透
                break;
            case 'snowing':
                alert(3);
                break;
            default:
                alert(4);
                break;
        }

While 循环

　　初始化循环变量

　　判断循环条件

　　更新循环变量

　　　　while(){

　　　　}

　　do while循环则是先执行一次，在判断循环条件

For 循环

　　for(条件){

　　　　执行语句

　　}

三元运算

　　var isresult = 1 < 2 ?  '真的' : '假的';
       alert(isresult);

函数

　　封装重复性代码

　　function(参数){

　　　　代码内容;

　　}

　　// 函数表达式
        var division =  function(a,b){
            return a / b;
        }

　　函数的作用域：

　　局部作用域以及全局作用域的概念

对象

　　var object = {

　　　　name: "alex",

　　　　sex: "男",

　　　　age: 18,

　　　　fav: function(参数){

　　　　　　　　执行语句;　　　　　　

　　　　　　}

　　}

　　console.log(object);

　　console.log(object.name);

　　console.log(object.fav(参数));

 

数组常用方法

　　数组转字符串 toString, toLoacleSring

　　　　arr = [1, 2, 3];

　　　　var a = arr.toString();

　　　　var b = arr.toLocaleString();

　　数组元组拼接 join()

　　　　var colors = ['red', 'blue', 'green'];

　　　　var a  = colors.join('|');

　　栈添加和删除 push, pop

　　　　var colors = ['red', 'blue', 'green'];

　　　　var newcolors = colors.push('yellow');

　　　　var lastitem = colors.pop();

　　队列添加和删除, 先进先出 unshift() shift()

　　　　newcolors = colors.unshift("purple");

　　　　console.log(newcolors);

　　　　console.log(colors);

　　　　var firstItem = colors.shift();

　　　　console.log(firstItem);

　　　　console.log(colors);

　　数组排序:

　　倒序,也就是反转 reverse()

　　升序或者降序 sort()

　　　　var values = [0, 10, 15, 16, 2, 3 ]　

　　　　function compare1(a,b){
           　　 if (a < b ) {
               　　 return -1;
           　　 }else if(a > b){
            　　    return 1;
    　　        }else{
      　　          return 0;
   　　         }
      　　  }
     　　   function compare2(a,b){
           　　 if (a < b ) {
                　　return 1;
            　　}else if(a > b){
                　　return -1;
            　　}else{
                　　return 0;
            　　}
        　　}
        　　// values.sort(compare1); //升序
        　　// console.log(values);
        　　values.sort(compare2); // 降序
        　　console.log(values);

　　　　数组合并 concat();

　　　　var colors = ['red', 'blue'];

　　　　var newColors = colors.concat('green');

　　　　　　newColors = newColors.concat({name:'zhangsan'});

　　　　数组切片 slice(start, stop)

　　　　var newcolors = colors.concat({name:"lisi"},['black','purple']);
       　　console.log(newcolors); //5
        　　// newcolors = newcolors.slice(1,2);
       　　 newcolors = newcolors.slice(-2,-1); //等同于slice(3,4)
        　　console.log(newcolors);

　　　　数组元素的 删除，插入，替换 splice(起始位置，删除的个数，添加的元素)

　　　　 var names = ['张三','李四','mjj','alex'];
        　　// names.splice(0,2);
       　　 // console.log(names);
        　　// 3.2 插入
        　　// names.splice(1,0,'熊大大','jack');
        　　// console.log(names);
        　　// 3.3 替换
        　　names.splice(1,1,'xiongdada');
        　　console.log(names);

　　　　数组元素的索引查询: 正向查询indexOf() 反向查询 laxtIndexOf()

　　　　// alert(names.indexOf('mjj')); //1
        　　// alert(names.lastIndexOf('mjj')); //3
        　　// alert(names.indexOf('mjj',2)); //3
        　　// alert(names.lastIndexOf('mjj',2)); //1
        　　// alert(names.lastIndexOf('mjjxxxx',2)); //如果查不到结果 返回-1

　　　　数组的迭代方法
　　　　filter() 将数组的元素进行过滤

　　　　var numbers = [1,2,3,6,19,4,20];
　　　　var filterResult = numbers.filter(function(item,index,array){
　　　　　　console.log('item:'+ item);
　　　　　　console.log('index:'+ index);
　　　　　　console.log('array:'+ array);
　　　　　　return item > 10
　　　　});
　　　　console.log(filterResult);
　　　　map()方法
　　　　var mapresult = numbers.map(function(item,index,array){
　　　　　　return item * 2;
　　　　})
　　　　console.log(mapresult);   
　　　　for(var i = 0; i < mapresult.length; i ++){
　　　　 　　// console.log(mapresult[i]);
　　　　}
　　　　forEach()
　　　　mapresult.forEach(function(item,index){
　　　　　　console.log(item);
　　　　})

字符串的常用方法

　　属性 length

　　方法

　　　　charAt()

　　　　charCodeAt()

　　　　concat()

　　　　slice()

　　　　substring()

　　　　substr()

　　　　indexOf()

　　　　lastIndexOf()

　　　　trim()

　　　　toLowerCase()

　　　　toUpperCase()

　　　　toLocaleLowerCase()

　　　　toLocaleUpperCase()

　　　　console.log(str.length);//获取字符串的长度  11
　　　　console.log(str.charAt(1)); //e  获取指定的字符
　　　　console.log(str.charCodeAt(1)) //101 获取指定的字符对应的编码
　　　　console.log(str.concat(' mjj',' jack')); //拼接字符串  通常情况 不适用它来做拼接,使用 +来做多个字符的拼接
　　　　console.log(str.slice(2));
　　　　console.log(str.substring(2));
　　　　console.log(str.substr(2));

　　　　// 第一个参数是起始的位置,第二个参数是结束的位置 顾头不顾尾

　　　　console.log(str.slice(2,4));
　　　　console.log(str.substring(2,4));
　　　　// 第二个参数是返回的字符数
　　　　console.log(str.substr(2,6));
　　　　console.log(str.slice(-3,-1)); //rld slice(8,10)
　　　　console.log(str.slice(8,10));
　　　　var str = 'hello world';
　　　　console.log(str.indexOf('o')); //4
　　　　console.log(str.lastIndexOf('o')); //7
　　　　console.log(str.indexOf('o',6)); //7
　　　　console.log(str.lastIndexOf('o',6)); //4
　　　　// trim()清除当前 字符串的前后后格
　　　　var str = '       hello world       ';
　　　　console.log(str.trim());
　　　　console.log(str);
　　　　var str = 'Hello Mjj';
　　　　// console.log(str.toUpperCase());
　　　　console.log(str.toLowerCase());

Date日期对象

　　四种方式创建

　　　　var now = new Date();

　　　　var xmas =  new Date('December 25,1995 13:30:00');

　　　　var xmas = new Date(1995,11,25);

　　　　var xmas = new Date(1995,11,25,14,30,0);

　　常用方法

　　　　var now = new Date();

　　　　console.log(now.getDate());

　　　　console.log(now.getMonth());

　　　　console.log(now.getFullYear());

　　　　console.log(now.getDay()); //获取一星期中的第几天(0 ~ 6)

　　　　console.log(now.getHours()); //获取小时(0~23);

　　　　console.log(now.getMinutes()); //获取分钟(0~59);

　　　　console.log(now.getSeconds()); //获取秒(0~59);

　　日期格式化方法

　　console.log(now.toDateString());

　　console.log(now.toTimeString());

 　　常用格式化方法

　　console.log(now.toLoacleDateString());

　　console.log(now.toLocaleTimeString());

　　console.log(now.toLocaleString())

字符串和数字转换

        var str = '13131.9090013';
        // 字符串转数值类型
        console.log(parseInt(str));
        console.log(parseFloat(str));
        console.log(typeof parseFloat(str));
        var a  = Number(str);
        console.log(isNaN(a)); //NaN  

        var  num = 1313.179;
        // 强制类型转换
        console.log(num.toString());
        console.log(typeof num.toString());
        console.log(String(num));

        // 隐式转换
        console.log('' + num);
        console.log(''.concat(num));
        console.log(Number(num.toFixed(2)));

Math对象

　　var max = Math.max(3,34,56,21);

　　var min = Math.min(3,34,56,21);

　　var arr = [1,2,32,23,45,32];

　　var max = Math.max.apply(null,arr);

　　var min = Math.min.apply(nulll,arr);

　　//ceil() floor() round()

　　var num = 24.8;

　　console.log(Math.ceil(num)); //天花板函数 向上取整

　　console.log(Math.floor(num)); //地板函数 向下取整

　　console.log(Math.round(num)); //标准的四舍五入

　　随机数

　　　　console.log(Math.random());

　　获取随机色

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

            function randomColor(){
                var r = random(256,0), g = random(256,0), b = random(256,0);
                var result = `rgb(${r},${g},${b})`;
                return result;
            }
            var rc = randomColor();
            console.log(rc);
            document.body.style.backgroundColor = rc;