js基础(一)

1.三种基本引用格式

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js基础用法</title>
        <!--01.内嵌式用法-->
        <script>
            alert('内嵌式用法');
            //             单行注释快捷键 ctrl + /
            /* ShadowRoot  多行注释快捷键 shift + alt + a
             dsa */
        </script>
        <!--02.外部引用式-->
        <script src="my.js"></script>
    </head>
    <body>
      <!--03.行内式用法-->
      <input type="button" value="按钮" onclick="alert('行内式用法')">
    </body>
</html>

2.输入输出方法

   1. alert('弹出警示框');

   2. console.log("控制台输出");

   3. prompt("弹出窗口输入");

3.undefined与null参与计算

  var variable = undefined;
  console.log(variable  + 'pink'); //输出  字符串 'undefinedpink'
  console.log(variable + 1) //输出 NaN  

  var star = null;
  console.log(null  +'pink'); //输出 字符串'nullpink'
  console.log(null + 1); //输出 1

4.typeof 变量类型检测

var num = 1;
var you = null;
console.log(typeof num);  // number
console.log(typeof you);  //object

5.类型转换

 1. 转 字符型
	 var num  = 18;
	 console.log( num.toString() ); // '18'	
	 console.log( String(num) ); // '18'
	 console.log( num  + ''); // 隐式转换		与字符串进行运算都会被强制转换为字符串类型		
 2. 转 数字型
     var str = '18';
     console.log( parseInt(str) ); // 18  ,整型
     console.log( parseInt(3.14) ); // 3 
     console.log( parseInt(3.94) ); // 3 
     console.log( parseInt(120px) ); // 120 ,自动截去不是数字的部分 
     console.log( parseInt(height120px) ); // NaN
     console.log( parseFloat(3.14) ); //3.14  浮点型
     console.log( Number(str) ); //18
     console.log( '18' - 9 ); // 9  ,隐式转换,由 - * / 参与的数字运算都会被转化为数字型
 3.转 布尔型
     console.log( Boolean('') ); //false
     console.log( Boolean(0) ); //false
     console.log( Boolean(NaN) ); //false
     console.log( Boolean(null) ); //false
     console.log( Boolean(undefined) ); //false

6.== 与 ===

console.log( 18 == '18'); // true ,判断两边的值是否一样
console.log( 18 === '18'); //false	 ,判断两边的值与数据类型完全一样		

7.逻辑中断

1.逻辑与的中断,  表达式1 && 表达式2   如果表达式1为真,返回表达式2的值。如果表达式1为假,返回表达式1的值
  console.log( 1 && 456 && 2 );//2
  console.log( 0 && 456 );//0
2.逻辑或的中断,  表达式1 || 表达式2   如果表达式1为真,返回表达式1的值。如果表达式1为假,返回表达式2的值
  console.log( 123 || 456 || 789 ); //123
  console.log( 123 || 0 || 890 ); //123
  console.log( 0 || 456 || 980 ); //456	

8.内置对象

1.Math.abs() 取绝对值
Math.abs(1); //1
Math.abs(-1);//1
Math.abs('-1');//1  隐式转换
Math.abs('p');//NaN

2.Math.floor() 向下取整
Math.floor(1.1); //1
Math.floor(1.9); //1

3.Math.ceil() 向上取整
Math.ceil(1.1);//2
Math.ceil(1.9);//2

4.Math.round() 四舍五入          .5是按大的取 
Math.round(1.1);//1
Math.round(1.5);//2
Math.round(1.9);//2
Math.round(-1.5);//-1  特殊情况  

5. Math.random()取随机数
 Math.floor( Math.random()*(max-min+1) )+min; //返回 [max,min]的整数随机数

6. 检测数组
var arr=[1,2,3];
var isarr1 = arr.isArray();
var isarr2 = arr instanceof Array;

7. 添加数组元素
var arr = [1,2,3];
arr.push(4);//改变原数组,向数组末尾添加新项,返回值为新数组长度
arr.unshift(0);//改变原数组,向数组开头添加新项,返回值为新数组长度

8. 删除数组元素
var arr = [1,2,3];
arr.pop();//改变原数组,删除数组中最后一个元素,返回值为删除的元素
arr.shift(0);//改变原数组,删除数组中开头的一个元素,返回值为删除的元素

9. 数组排序
var arr = [1,2,3];
arr.reverse();//颠倒数组的位置
arr.sort( function(a,b){
return a-b;  //升序排列
// return b-a ;  //降序排列
});

10. 获取数组的索引号
var arr = [1,2,3,1];
arr.indexOf(1); // 0  从前往后找,返回找到第一个数的索引号  也可用于查找数据是否存在数组中
arr.indexOf(1,2); // 0  从第二个位置,从前往后找,返回找到第一个数的索引号  也可用于查找数据是否存在数组中
arr.lastIndexOf();//3  从后往前找,返回最后一个数的索引号  

11. 字符串对象
  对字符串对象进行的操作并不会修改字符串本身,而是会返回一个新的字符串
  var word = 'abc';
  word.charAt(0); //根据索引号返回索引号位置的字符
  word.charCodeAt(0);//根据索引号返回索引号位置的字符的ASCLL码
  word.str(0); //H5新特性

12. 字符串的方法
var str = 'a,bc';
str.concat('de','fj');//拼接字符串
str.substr(1,1);//从1位置后开始截取一个字符串
str.replace('a','*');//将a替换成* ,只能替换一次
str.split(',');//按分隔符,将字符串变成数组   与join相反

13. 简单数据类型和复杂数据类型中与堆和栈
简单数据类型:(string,number,boolean,undefined,null)放在栈中,直接开辟一个空间,存放的是值
复杂数据类型:(数组,对象)首先在栈中存放地址,然后数据存放在堆中,注意,当复杂类型的进行赋值时,新变量和旧变量指向同一个空间。
function Person(name){
  this.name = name;
}
function fn(x){ //相当于x=p  相当于指针指向同一块空间 只有复杂数据类型会这样
	console.log(x.name);//刘德华
	x.name='张学友';
	console.log(x.name);//张学友
}
var p = new Person('刘德华');
console.log(p.name);//刘德华
fn(p);
console.log(p.name);//张学友
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页