JavaScript零碎知识点归纳

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

1、a标签的特殊用法

即在链接地址中写入javascript代码,结果弹出OK,而不链向百度

<a href="javascript:void(0)" target="_blank" rel="external nofollow" >不链接到任何地方</a>

2、javascript中的变量作用域

2.1. 全局变量与局部变量

<script>
    var i; //全局变量 
    //方法名是camel命名法 
    function sayHello(){
	//方法里面的变量是局部变量 var x=100;
	alert(x);
	x++;
    }
    sayHello(); //输出100
    alert(x); //报错,因为x是局部变量,访问不到 
</script>

2.2. 函数嵌套函数

<script>
function sayHello(){ 
    var x=100;
    if(x==100){
        var y=x+1;
<span style="white-space:pre">	</span>alert(y); //输出101 
    }
    alert(y); //也输出101,在方法内部,不存在块级作用域,在C#中就不可以了!!!
    for(var i=0;i<2;i++){ 
<span style="white-space:pre">	</span>alert(i)
    } //在for循环里面定义的变量是块级作用域
    alert(i); //因为i是局部变量,所以输出2 
}
sayHello();
</script>

注:变量使用前可以不用var声明,这样的变量会被认为是“全局变量”,但很少这样用

3、 js中的undefined与null

undefined(未知状态):

3.1、变量定义,但没有赋值,则变量的值为undefined

3.2、调用的方法没有返回值,返回的值为undefined

3.3、对象的属性值不存在,则返回值为undefined,如:document.ddd

Demo1:

var xx;
var yy=null;
if(xx==yy){
    alert('相等'); 
} else { 
    alert('不等');
}

输出结果为相等,因为在进行if判断时,浏览器会对xx及yy进行值的判断,因为两者都没有具体的值,认为他们都是false。

如果if判断中换成===[全等于符号],则输出不等! 因为===表示要求xx及yy的数据类型和值都要相同才可以!

Demo2:

var xx=10 
var yy='10'; 
if(xx==yy){
    alert('相等'); 
} else {
    alert('不等');
}

输出相等,如果换成===,则输出不等

Demo3:

var n='10'; 
switch(n){
    case 10: 
        alert('数字');
        break;
    case '10':
        alert('字符串'); 
        break;
}

输出字符串

总结:

if中的判断是判断数值,不考虑类型

switch中的判断要考虑类型

4、类型

var n=10;

var x;

typeof(n)的值是'number',

typeof(x)的值是'undefined',

结果有引号的!

var x=10;
if(typeof(x)!='undefined' && x!=null){
    alert('变量可用');
} else {
    alert('变量不可用');
}
if(x){ 
    alert('变量可用');
} else {
    alert('变量不可用');
}

两者几乎没有什么区别,但当变量x连声明都没有的话,第一种显示"变量不可用",而第二种会报错!

var x1=1;

var x2=0;

var x3='';

var x4='aaa';

var x5=null'

var x6;

if()判断后的结果分别为:true、false、false、true、false、false

<script type="text/javascript"> 
    function f1() {
	alert('first f1'); 
    }
    function f1(name) { 
<span style="white-space:pre">	</span>alert(name);
    }
    f1();
</script>

调用 f1() 后的结果：undefined。在JS中,不存在函数重载的说法,因为变量类型都是弱类型的。

所以带有参数的方法被调用,其里面的参数类型为var，所以结果为undefined。

5、类型转换

parseInt 转成数字!

parseInt(10aaa) 输出结果为10

var n1=parseInt('adw12013s') 输出结果为NaN

Number是针对数字的,Number(参数),参数必须是整数或者小数(是'3.7'就返回3.7),是的话,就转换;不是的话,返回NaN

//下面的判断不可以(条件不成立),用第二种

if(n1==NaN){

alert('不是数字');

}

//这样就可以了

if(isNaN(n1)){

alert('不是数字');

}

关于String() 与toStirng()

<script type="text/javascript">
    var v = null;
    v = String(v);
    alert(v); //结果是'null'
    var v1;
    v1 = String(v1);
    alert(v1); //结果是'undefined' 
    var v2 = null;
    v2 = v2.toString();
    alert(v2); //报错
    var v3 ;
    v3 = v3.toString();
    alert(v3); //报错
</script>

执行一段字符串的js代码

var js = 'var n=1;n++;'; 
js += 'alert(n)';
eval(js);

6、字符串操作

6.1 length属性:获取字符串的字符个数。(无论中文字符还是英文字符都算1个字符。)charAt(index)方法:获取指定索引位置的字符。(索引从0开始)

6.2 indexOf(‘字符串’,startIndex)方法:获取指定字符串第一次出现的位置。startIndex表示从第几个开始搜索。

6.3 split(‘分隔符’,limit);//根据分隔符将一个字符串返回为一个数组。limit表示要返回的数组的最大长度(可自定义)。

6.4 substr(startIndex,len)//从startIndex开始,截取len个字符。

6.5 substring(startIndex,stopIndex)//从startIndex开始,截取到stopIndex位置(不包括stopIndex所在的字符)。

<script type="text/javascript">
    //var uname = new String('a我不h是美女haha10086');
    var uname = 'a我不h是美女haha10086'; //与上面一句等价! 
    alert(uname.length); //输出16
    alert(uname.charAt(6)); //输出 女
    alert(uname.indexOf('h', 4)); //输出7(从索引4开始寻找,找到索引7发现h)
    //split第一个参数是分隔符,第二个参数是要返回的最大元素个数。 
    var result = uname.split('h'); //第二个参数不写最好! 
    alert(result.length);
    for (var i = 0; i < result.length; i++) {
<span style="white-space:pre">	</span>alert(result[i]); 
    }
    // substr与substring的比较 //从索引为2的字符开始,截取5个字符,索引是从零开始的。 
    var result1 = uname.substr(2, 5); //常用 alert(result1);
    //从第2个索引开始截取,截取到第5个索引之前。(不包括第5个索引的字符) 
    var result2 = uname.substring(2, 5);
    alert(result2);
</script>

7、Array对象

JavaScript中的Array对象就是数组,首先是一个动态数组,而且是一个像C#中数组、ArrayList、Hashtable等的超强综合体。

数组的使用方式:

var names = new Array();//无需初始化长度,动态

names[0] = "tom";

names[1] = "jerry";

names[2] = 12;

names[3] = true;

遍历数组(for循环)

for (var i = 0; i < names.length; i++) {

alert(names[i]);

}

for (var key in names) {

alert(key);

}

输出的是键,与C#不一样,C#的foreach输出的是值要想输出值,把alert(key)写成alert(names[key])即可。

总结:JS中遍历数组一般用for循环,遍历字典,一般用for-in循环

8、js中的对象(一般情况下,方法名开头小写,对象名开头大写)

<script type="text/javascript"> 
    function Person() {
        this.name = 'Jason';
        this.age = 19;
    }
    var p = new Person();
    for (var key in p) {
        alert(key);
    }
</script>

输出name,age

//注意:JS中数组的初始化是用[],而C#中用{},

Demo1:

<script type="text/javascript"> 
    var names = new Array(); 
    names['one'] = "tom"; 
    names['two'] = "jerry"; 
    names['three'] = 12; 
    names['four'] = true;
    //当names的键不再是简单的0、1、2的时候,names.length的值就会是0,此时用for循环就不行 了,应该使用for in 循环完成
    for (var key in names) {
<span style="white-space:pre">	</span>//注意集合中不能用names.key调用(因为它是数组,不是对象),注意与下面的对象的调用有区别 
<span style="white-space:pre">	</span>alert(names[key]); 
    }
</script>

Demo2:

function Person(){}
var r=Person(); //是方法
alert(r); //输出'undefined'
var r=new Person(); //是对象
alert(r); //输出'Object'

Demo3:

function Person(_name, _age) {
    this.name = _name;
    this.age = _age; 
    this.sayHello = function () {
<span style="white-space:pre">	</span>alert(this.name+','+this.age); 
    };
}
var p = new Person('Jason', 18); 
alert(p.age); //两句alert等价
//下面的书写形式说明了。在js中对象就是键值对,键值对就是对象 alert(p['age']);
alert(p['age']);

9、关于js中的扩展方法

Demo1:

<script type="text/javascript">
    //原型
    function Person(_name) { 
<span style="white-space:pre">	</span>this.name = _name;
    }
    //扩展方发,即给Person这个原型添加了sayHi方法,以后不管哪个对象都可以直接调用了(注: prototype就是原型的意思)
    Person.prototype.sayHi = function () { 
<span style="white-space:pre">	</span>alert('hi!!!');
    };
    var p1 = new Person();
    p1.age = 19; //给p1对象自己扩展age属性,只有自己可以用,下面写成p2.age就错误了 alert(p1.age);
    var p2 = new Person();
    //alert(p2.age); 错误,因为p2没有这个属性
    p2.sayHi(); //正确---因为是扩展方法,大家都可以使用
</script>

Demo2: 给String这个对象添加一个判断是不是邮箱的扩展方法

<script type="text/javascript">
    //下面执行的一段代码,即自己手动的给String这个对象添加了一个isEmail方法,String原本是没 有的。
    String.prototype.isEmail = function () {
        if (this.indexOf('@') != -1) {
            return true;
        }
        return false;
    };
    //添加完成之后,自己就可以使用这个方法了!
    var email = '[email protected]';
    var b = email.isEmail();
    alert(b);
</script>

JavaScript零碎知识点归纳

继续阅读

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

jquery_126_demo

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条