1-红宝书读书笔记-1~3章简介以及基本概念

最新推荐文章于 2024-09-05 16:27:03 发布

有蓝

最新推荐文章于 2024-09-05 16:27:03 发布

阅读量147

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_61398960/article/details/126742384

版权

JavaScript简介

一开始这玩意就是拿来做表单验证的

后来就慢慢变的啥都能做了

浏览器和js

浏览器有两部分：

渲染引擎（用于解释css和html代码，比如chrome的blink，老版本的webkit），

js引擎（js解释器，比如chrome的v8）

JavaScript的三个组成部分

ECMAScript JavaScript语法

Dom 页面文档对象模型

Bom 浏览器对象模型

变量

执行这样的程序，用var定义的变量将会成为局部变量，这个变量在函数退出之后就会被销毁，下面的程序执行将会报错

function test(){
   var message = 10;
}
test();
console.log(message);

但是下面的程序执行就不会报错，这个变量没有使用var定义，那么他就会成为一个全局变量

没有加 var 能定义一个全局变量，不过很不推荐这么做

function test(){

  message = 10;

}

test();

console.log(message);

数据类型

为啥要数据类型，不同数据所需占用的空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型

js是一个弱类型的语言

分类

分类：简单数据类型（基本数据类型），复杂数据类型

简单数据类型有：undefined，Null，Boolean，Number，String

复杂数据类型：Object

使用typeof来判断数据类型

var message = 'zhouzhouzhenshuai';
console.log(typeof message);
console.log(typeof (message));
console.log(typeof 12);

当一个变量声明之后，如果没有进行初始化或者赋值操作，会默认取得undefined值，但是当一个变量没有定义的时候，只能进行typeof操作（会返回undfined）

var message;

// 并没有定义age

console.log(message);

console.log(age);

console.log(typeof message);

console.log(typeof age);

var message;
// 并没有定义age
console.log(message);
// console.log(age);
console.log(typeof message);
console.log(typeof age);

使用typeof判断未定义的变量将会返回undefined

实际上undefined是派生自null的，所以相等性测试会返回true

console.log(undefined == null);

但是null和undefined的用法却完全不同，无论什么情况下都没有必要将一个变量的值设置为undefined，但是我们却经常将一个变量的值设置成null

Number类型

包括小数以及整数

NaN表示非数字，可以使用isNaN()来判断

console.log(isNaN(NaN));
console.log(isNaN(10));
console.log(isNaN("10"));//可以转化成数字false
console.log(isNaN("zhou"));//不能转化成数字true
console.log(isNaN("true"));//能转化成数字false

数值范围

如果超出数值范围，将会被转化成Infinity或者-Infinity（正无穷和负无穷）

console.log(0/0);
console.log(5/0);
console.log(-9/0);

数值转化

三个函数，将非数值转化为数值：Number（），parseInt（），parseFloat（）

Number()转化规则

先导0将会被去掉

Boolean值会被转化成0和1

null返回0

undefined返回NaN

16进制的‘0xf’会被转化成10进制

字符串是空的转化成0

字符串包含其他格式的字符转成NaN

console.log(Number('zhouzhou'));
console.log(Number('00012'));
console.log(Number(true));
console.log(Number(''));

parserInt()

处理整数的时候一般使用这个

忽略字符串前面的空格

查找到第一个数字，继续解析下一个字符，直到不是数字

0x开头转化成16进制数

console.log(parseInt("zhou"));
console.log(parseInt("22.5"));
console.log(parseInt("65zhou"));
console.log(parseInt("070"));
console.log(parseInt("0xf"));

在0开头的转化方式种es3和es5有分歧，在处理"070"es3会认为是8进制数，转化成56,es5则会认为是十进制数去掉0，转化成70

但是perseInt可以提供第二个参数，指定转化的进制数

console.log(parseInt('070',8));

parseFloat()

同理，小数点变成可以解析的

String类型

可以用单引号或者双引号表示

转化成字符串

Number，Boolean，Object和String都有toString()方法

一般来说调用字符串方法不必传递参数，但是也有例外，当Number类型调用的时候，可以通过传入的参数来进行进制转化

var age = 10;
console.log(age.toString());
console.log(age.toString(2));
console.log(age.toString(8));
console.log(age.toString(16));

操作符

一元操作符

只能操作一个元素的操作符叫一元操作符

递增递减++ --

加减 + -

位操作符按位非~ 。。。

全等和相等

全等比较类型 ===

相等不会比较类型 == 相等会线转化类型

语句

for-in语句

迭代

for( item in arr ){
}

label和break，continue

var num = 0;

for (var i = 1 ;i < 10; i++){
    if(i % 5 == 0){
        break;
    }
    num++;
}
console.log(num);//4

var num = 0;

for (var i = 1 ;i < 10; i++){
    if(i % 5 == 0){
        continue;
    }
    num++;
}
console.log(num);//8

break跳出后不会再继续执行

continue跳出后还会继续执行

label语句的作用是可以在代码中添加标签，以便将来使用

下面是一个break和label语句的结合使用

var num = 0;

outermost:
for(var i = 0; i < 10; i++){
    for(var j = 0;j < 10 ;j++){
        if (i == 5 && j==5){
            break outermost;
        }
        num++;
    }
}
console.log(num);//55

with语句

简化多次编写同一个对象的操作

var Obj = new Object({
    name:'zhou',
    age:10,
    sex:0
})
var aa = Obj.name;
var bb = Obj.age;
var cc = Obj.sex;

对于上面的操作我们可以通过with语句来完成

var Obj = new Object({
    name:'zhou',
    age:10,
    sex:0
})

with(Obj){
    var aa = name;
    var bb = age;
    var cc = sex;
}

由于大量使用with语句会造成性能下降，所以不建议使用with语句，而且在严格模式中使用with语句会报错

函数

ECMAScript函数不介意传递进多少参数，也不在乎传入的是什么数据类型，也就是说，即便你定义的函数只接受两个参数，在调用这个函数的时候也未必一定要传递两个参数，可以传入一个三个甚至不传递参数。之所以这样原因是ECMAScript中的参数在内部使用一个数组来表示的。函数接收到的永远都是这样一个数组，而不关心数组中包含哪些参数。

在函数体内可以通过arguments对象来访问这个参数数组，从而获得传递给函数的每一个参数

其实，arguments对象只是与数组类似（它并不是一个Array的实例）

但是我们可以通过类似的方式获取arguments中的元素，传入的第一个参数是arguments[0]，第二个是arguments[1]

function sayHi(){
    console.log(arguments[0]+' '+arguments[1]);
}

sayHi('zhouzhou','nihao')

我们也可以用.length获取arguments中有多少参数

function sayHi(){
    console.log(arguments[0]+' '+arguments[1]);
    console.log(arguments.length);
}

sayHi('zhouzhou','nihao')

我们可以使用这个特性让函数能够接收任意个参数并分别实现适当的功能

这玩意类似于重载，这就是一个例子

function sayHi(name,age){
    if(arguments.length == 0){
        console.log('你好');
    }else if(arguments.length == 1){
        console.log('你好'+name);
    }else if(arguments.length == 2){
        console.log('你好'+age+'岁的'+name);
    }
}
sayHi();
sayHi('周周');
sayHi('周周',18);

function dispalyInfo(args){
    var output = '';

if(typeof args.name == 'string'){
    output += 'name' + args.name + '\n';
}

if(typeof args.age == 'number'){
    output += 'age' + args.age + '\n';
}

console.log(output);

}

dispalyInfo({
    name:'zhouzhou',
    age:18
})

dispalyInfo({
    name:'qiqi'
})