我正在参与掘金创作者训练营第6期

初识JavaScript

js的组成

ECMAScript

ECMAScript是由ECMA国际进行标准化的一门语言，往往被称为Javascript或Jscript，但实际上后两者是ECMAScript语言的实现和扩展。

ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM－文档对象模型

document object model 是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小位置颜色等）

BOM－浏览器对象模型

browser object model 是指浏览器对象模型她提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

js三种书写位置

$\color{cyan}行内式js：直接写在元素内部$
$\color{cyan}内嵌式js ：内嵌在head标签里$
$\color{cyan}外部js ：引入外部js文件$

注释

ctrl+/ 单行注释
shift+alt+a 多行注释

Javascript输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

声明变量特殊情况

情况	说明	结果
var age;console.log(age);	只声明不赋值	undefined
console.log(age);	不声明不赋值直接使用	报错
age=10;console.log(age);	不声明只赋值	10

$\colorbox{cyan}{尽量不要使用name作为变量名在网站有特殊意义}$
$\colorbox{cyan}{变量名严格区分大小写}$

变量类型

Number类型

        // 数字型的最大值
        console.log(Number.MAX_VALUE);
        // 数字型的最小值
        console.log(Number.MIN_VALUE);
        // 无穷大
        console.log(Number.MAX_VALUE*2);//Infinity 无穷大 
        //无穷小
        console.log(-Number.MAX_VALUE*2);//-Infinity 无穷小
        //非数字
        console.log('字符串'-100);//NaN

字符串类型

字符串转义字符

转义符	解释说明
\n	换行符 n是newline的意思
\	斜杠\
'	单引号
"	双引号
\t	tab缩进
\b	空格 b是blank的意思

检测获取字符串长度length

var str='abcdef';
console.log(str.length);// 6

布尔型Boolean

布尔型有两个值：true和false 其中true表示真，而false表示假布尔型和数字型相加的时候，true的值为1，false的值为0

console.log(true+1); //2
console.log(false+1); //1

Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值undefined

var variable;
console.log(variable);//undefined
console.log('你好'+variable);//你好undefined
console.log(11+undefined);//NaN
console.log(true+variable);//NaN

一个声明变量给Null值，里面存的值为空

var vari=Null;
console.log('你好'+vari);//你好Null
console.log(11+vari);//11
console.log(true+vari);//1

数据类型转换

转换为字符串

方式	说明	案例
toString()	转成字符串	var num=1;alert(num.toString());
String()强制转换	转成字符串	var num=1;alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1;alert(num+"我是字符串");

转换为数字型

方式	说明	案例
parseInt(string)	将string类型转换成整数数值型	parseInt('78');
parseFloat(string)	将string类型转换成浮点数数值型	parseFloat('78.12');
Number()强制转换函数	将string类型转换成数值型	Number('12');
js隐式转换（- * /）	利用算术运算隐式转换为数值型	'12'-0

转换为Boolean型

方式	说明	案例
Boolean()	其他类型转换为布尔值	Boolean('true');

$\colorbox{cyan}{代表空、否定的值都会转换成false 如'',0,NaN,null,undefined}$
其余值都会被转换为true

数组

创建数组

$\colorbox{cyan}{1}$ 使用var myArray=new Array();方法创建数组
$\colorbox{cyan}{2}$ 使用var myArray=[];创建数组

函数

函数的两种声明方式

$\colorbox{cyan}{1}$ 利用函数关键字自定义函数（命名函数）

function fn(){
    //函数代码块
}
fn();

$\colorbox{cyan}{2}$ 函数表达式(匿名函数)

var 变量名=function(){};

var fun=function(){
    //函数代码块
}
fun();
//fun是变量名 不是函数名
//函数表达式声明方式跟声明变量差不多 只不过变量里存的是值 而函数表达式里存的是函数

var fun=function(aru){
    //函数代码块
}
fun(aru);
//函数表达式也可以进行传递参数

作用域链

内部函数访问外部函数的变量采取的是链式查找的方式来决定取哪个值这种结构我们称为作用域链就近原则

var num=10;
function fn(){ //外部函数
    var num=20;
    function fun(){ //内部函数
        console.log(num);
    }
}

作用域链案例

function f1(){
    var num=123;
    function f2(){
        console.log(num);//站在目标出发，一层一层的往外查找
    }
    f2();
}
var num=456;
f1();

预解析

javascript代码是由浏览器中的javascript解析器来执行的。javascript解析器在运行javascript代码的时候分为两步：预解析和代码执行。
$\colorbox{pink}{预解析}$ js引擎会把js里所有的var 还有 function提升到当前作用域的最前面。
$\colorbox{pink}{代码执行}$ 按照代码的书写顺序从上往下执行

预解析分为变量预解析（变量提升）和函数预解析（函数提升）
变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作

console.log(num);//undefined
var num=10;
//相当于执行了以下代码
var num;
comsole.log(num);
num=10;

fun();//报错 is not a function;
var fun=function(){
//代码函数块
}
// 相当于执行了以下代码
var fun;
fun();
fun=function(){
}

函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数

fn();
function fn(){
    console.log(11);
}
//相当于执行以下代码
function fn(){
    console.log(11);
}
fn();

$\colorbox{red}{注意:}$
函数表达式不会进行提升
函数表达式调用必须写在函数表达式的下面

对象

在javascript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的：
属性：事物的特征，在对象中用属性来表示。
方法：事物的行为，在对象中用方法来表示。

创建对象

使用字面量创建对象字面量：就是花括号{}里面包含了表达这个具体事务（对象）的属性和方法。

var obj={
    uname:'张三',
    age:18,
    sex:'男',
    sayHi:function(){
        console.log('hi~');
    }
}
//里面的属性或者方法我们采取键值对的形式 键 属性名 值 属性值
//多个属性或者多个方法中间用逗号隔开
//方法冒号后面跟的是一个匿名函数

使用new Object创建对象

var obj = new Object();
obj.uname = '张三';
obj.age = 18;
obj.sayHi = function(){

}

利用构造函数创建对象

为什么需要构造函数？
一次创建一个对象，里面很多属性和方法都是大量相同的，我们只能复制。因此我们可以利用函数的方法，重复这些相同的代码，我们就把这个函数称为构造函数。这个函数不一样，里面封装的不是普通代码，而是对象。

构造函数：一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象里面一些公共的属性和方法抽象出来封装到函数里面。

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function() {}
}
new 构造函数名(实参);
//构造函数名字的首字母要大写
//构造函数不需要return 就可以返回对象

构造函数和对象、

构造函数：抽象了对象的公共部分，封装到了函数里面，它泛指某一大类。
创建对象：特指某一个，通过new关键字创建对象的过程也称对象的实例化。

new在执行时会做四件事

1.在内存中创建一个新的空对象
2.让this指向这个空对象
3.执行构造函数里面的代码，给这个新对象添加属性和方法
4.返回这个新对象（所以构造函数不需要return）

使用对象的属性以及方法

//调用属性 对象名.属性名
console.log(obj.uname);
//第二种方法 对象名['属性名']
console.log(obj['age']);
//调用对象方法名 对象名.方法名()
obj.sarHi();

遍历对象属性

for in 语句用于对数组或对象的属性进行循环操作。

for(var k in obj){
    console.log(k);//k 变量输出得到的是属性名
    console.log(obj[k]);//obj[k]得到的是属性值
}
//k是变量不加引号

内置对象

JavaScript中的对象分为3种：自定义对象内置对象浏览器对象
前两种对象是JS基础内容属于ECMAScript 第三个浏览器对象属于JS独有
内置对象就是指JS语言自带的一些对象这些对象供开发者使用并提供了一些最常用的或是最基本而必要的功能（属性和方法）

查文档

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询
MDN网址：MDN Web Docs (mozilla.org)

如何学习对象中的方法?

查阅该方法的功能

查看里面参数的意义和类型

查看返回值的意义和类型

通过demo进行测试

math对象

得到两个数之间的随机整数并且包含这两个整数

//Math.floor(Math.random()*(max-min+1))+min;
function getRandom(min,max){
    return Math.floor(Math.random()*(max-min+1))+min;
}

Date对象

Date对象和Math对象不一样，他是一个构造函数，所以我们需要实例化后才能使用。

//获取当前时间必须实例化
var now = new Date();

如果括号里有时间就返回参数里面的时间例如日期格式的字符串 '2019-5-1' 可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')

        var date = new Date();
        console.log(date.getFullYear());//返回当前年
        console.log(date.getMonth()+1);//月份 返回的月份小1
        console.log(date.getDate());//返回几号
        console.log(date.getDay());//返回周几 周日0-周六6
        // 日期格式化
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var dates = date.getDate();
        var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day = date.getDay();
        console.log('今天是'+year+'年'+month+'月'+dates+'日'+arr[day]);

将获取时分秒封装成函数

//封装一个函数返回当前的时分秒
        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTime());

Date总的毫秒数（时间戳）

//获得Date总的毫秒数 时间戳 距离1970-1-1过了多少毫秒数
        //1.通过 valueOf() getTime()
        var date = new Date();
        console.log(date.valueOf());
        console.log(date.getTime());
        //2.简单的写法
        var date1 = +new Date();
        console.log(date1);
        //3.H5新增获得总毫秒数
        console.log(Date.now());

倒计时

function countDown(time) {
    var nowTime = +new Date();// 返回当前时间总的毫秒数
    var inputTime = +new Date(time);// 返回用户输入时间总的毫秒数
    var times = (inputTime - nowTime)/1000; //times是剩余时间总的秒数
    var d = parseInt(times/60/60/24);
    var h = parseInt(times/60/60%24); 
    var m = parseInt(times/60%60);
    var s = parseInt(times%60);
    return d+'天'+h+'时'+m+'分'+s+'秒';
}
console.log(countDown('2022-9-1 00:00:00'));

Array对象

push在数组后面追加元素
unshift在数组前面添加元素
pop删除数组最后一个元素，返回结果是删除的元素
shift删除数组第一个元素返回第一个元素的值
reverse翻转数组

var arr = [1,2,3];
arr.push(4,'pink');
console.log(arr);

arr.unshift('red',7);
console.log(arr);

排序

var arr = [13,4,77,1,7];
arr.sort(function(a,b){
    //return a-b;//升序
    return b-a;//降序
});
console.log(arr);

数组转换为字符串

//toString()将我们的数组转换为字符串
var arr = [1,2,3];
console.log(arr.toString());//1,2,3

//join分隔符
var arr = ['green','blue','pink'];
console.log(arr.join());//默认逗号
console.log(arr.join('-'));//green-blue-pink

字符串对象

基本包装类型

对象和复杂数据类型才有属性和方法简单数据类型为什么会有length属性基本包装类型就是把简单数据类型包装成了复杂数据类型

var str = 'wendy';
console.log(str.length);

//1.把简单数据类型包装成复杂数据类型
var temp = new String('wendy');
//2.把临时变量的值给str
str = temp;
//销毁临时变量
temp = null;

常用方法

字符串所有的方法都不会修改字符串本身（字符串本身不可变）操作完成会返回一个新的字符串
charAt(index)根据位置返回字符
charCodeAt(index)返回相应索引号字符的ASCII值

简单类型和复杂类型

简单类型又叫做基本数据类型或者值类型复杂类型又叫做引用类型

值类型：在存储时变量中存储的是值本身因此叫做值类型
string number boolean undefined null

引用类型：复杂数据类型在存储时变量中存储的仅仅是地址（引用）因此叫做引用数据类型通过new关键字创建的对象（系统对象自定义对象）如Object Array Date等
引用类型变量（栈空间）里存放的是地址真正的对象实例存放在堆空间中

$\colorbox{pink}{简单类型传参}$
函数的形参也可以看作是一个变量当我们把一个值类型变量作为参数传给函数的形参时其实是把变量在栈空间里的值复制了一份给形参那么在方法内部对形参做任何的修改都不会影响到外部变量

function fn(a){
    a++;
    console.log(a);
}
var x = 10;
fn(x);
console.log(x);

$\colorbox{pink}{复杂类型传参}$
函数的形参也可以看作是一个变量当我们把引用类型变量传给形参时其实是把变量在栈空间里保存的堆地址复制给了形参形参和实参其实保存的是同一个堆地址所以操作的是同一个对象

function Person(name) {
    this.name = name;
}
function f1(x) {
    console.log(x.name);//好好学习
    x.name = '天天向上';
    console.log(x.name);//天天向上
}
var p = new Person('好好学习');
console.log(p.name);//好好学习
f1(p);
console.log(p.name);//天天向上

总结

文章主要介绍了js基础语法例如常用变量类型以及类型间的相互转换、对象的创建以及使用js内置对象常用方法、以及js中预解析相关知识、并且利用栈和堆讲解了简单类型和复杂类型的区别。由于变量声明、if...else...和for语句等语句使用和c语言c++相类似没有进行相关详细解释可查阅该网址进行学习：JavaScript 语法

按照开头js的组成将依次发布文章进行讲解本文首先讲解了第一组成部分：JavaScript基础语法后续依次讲解BOM和DOM

挥挥下次再见啦

JavaScript语法