JavaScript小结-526互联

JavaScript

什么是JavaScript？

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

js的特点

（1）脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。//由浏览器解释运行
（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。
（3）简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
（4）动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
（5）跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用

js的三大核心

ECMAScript  js基础语法
DOM	文档对象模型
BOM	浏览器对象模型

w3c万维网联盟组织

万维网联盟（World Wide Web Consortium，简称 W3C）创建于1994年，是Web技术领域具有权威和影响力的国际中立性技术标准机构。W3C已发布了400多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（HTML）、可扩展标记语言（XML）以及帮助残障人士有效获得Web 内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

ECMA欧洲计算机商会

Ecma国际（Ecma International）是一家国际性会员制度的信息和电信标准组织。1994年之前，名为欧洲计算机制造商协会（European Computer Manufacturers Association）。因为计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。现名称已不属于首字母缩略字。

ISO国际标准化组织

国际标准化组织（International Organization for Standardization，简称为ISO）成立于1947年，是标准化领域中的一个国际组织，该组织自我定义为非政府组织，官方语言是英语、法语和俄语。ISO一来源于希腊语“ISOS”，其意为“平等”。

ISO负责当今世界上多数领域（包括军工、石油、船舶等垄断行业）的标准化活动，通过2856个技术结构（含技术委员会611个、工作组2022个、特别工作组38个）开展技术活动。

js基本代码

// 单行注释
/* 多行注释*/
alert //弹窗
confirm //确认弹窗
prompt //输入弹出
console.log() //日志输出弹窗
console.warn() //警告弹窗
console.error() //错误弹窗

变量

什么是变量？

变量，变化的量，用来存储程序运行中产生的临时数据
变量的初始化

初始化包含两步：声明和赋值

数据类型

基本数据类型，

存储在堆内存中，因为基本数据类型的长度都是定值，堆内存的空间小，适合存储基本数据类型。

number //数值型
string //字符串型
boolean //布尔类型
null  //   声明  赋空值
undefined //  声明未赋值  默认 undefined

复杂数据类型（引用数据类型），

存储在栈内存中，因为引用数据类型的长度不定，栈内存空间更大，易于存储。

Array,Date,Math,Object等

变量命名规范

变量只能包含，字母，数字，_ , $
驼峰命名法则

typeof

typeof用来检测变量的类型

number //数值型
string //字符串型
boolean //布尔类型 	false 0 '' undefined null NaN 默认为false
object  //  
function //  
undefined

类型转换

通常情况 parse数据类型((待转换的数据))

比如 parseInt(('123'));

或者数据类型(待转换的数据)

比如 Number('1521');

运算符

// + - * / %(取模) ++ --   算数运算符
// =   +=   -=   *=   /=   %=  赋值运算符
// >  <  >=  <=   ==   ===(全等，即比较值又比较数据类型) !== !=  比较运算符
// &&   ||   ! 逻辑运算符

流程控制

顺序

程序从上到下，依次执行

选择

//单选
if(条件1){
    代码1;
}
//双选
if(条件1){
    代码1;
}else{
    代码2;
}
//多选   case穿透，记得加break
switch(表达式){
    case 1:
        代码1;
        break;
    case 2:
        代码2;
        break
    case 3:
        代码3;
        break
    default:
        代码4;
}

if(){
    
}else if(){
    
}else if(){
    
}

循环

//循环结构  当形
for(){}
while(){}

//直到型
do{}while()

数组

数组是一段连续的内存空间，js中数组不定长，可以修改长度，且同一数组可以存储不同类型的数据

数组创建：

//字面量创建
var arr = [元素1,元素2,元素3.......]
//new 关键字创建
var arr = new Array(6) //括号内写数字表示数组长度
var arr = new Array(元素1,元素2,元素3......)

数组常用方法：

/* 
push 向后添加元素 unshift向数组头部添加元素

shift 从头部删除元素  pop从尾部删除元素 splice(index,count)删除元素，index表示开始索引，count表示个数

slice(index,end) 数组截取，返回一个新数组，不修改原数组 index表示开始索引，end表示结束索引(不包含 数学符号 [idnex,end) )

idnexOf(元素) 查找数组中是否包含当前元素，如果包含，返回第一次出现的下标，否则-1
lastindexOf(元素) 同上，从后向前查找

reverse()  数组翻转

join('str') 将数组转化为字符串，不改变原数组，("str")可以改变分隔符的内容,如果不写则没有分隔符

concat() 拼接
参数传入一个数组 进行数组的合并 返回值为合并后的数组 不会改变原数组

sort() 排序
*/

数组遍历的内置方法：

/*
arr.forEach(function(item,index,arr)){//单纯的遍历数组}
            
arr.filter(function(item,index,arr){})
filter方法返回一个数组  回调函数return true的那个元素会被放入到新数组里面去可以用作数组元素的过滤
*/

var arr=['张飞','刘备','关羽','赵云','刘备','马超']
arr.forEach(function(item,index,arr){
    console.log(item,index,arr);
}
  
var arr=[1,45,78,34,2,8,9];
var newArr=arr.filter(function(item,index,arr){
    // console.log(item,index);
    if(item>30){
        return true
    }
})
console.log(newArr);

函数

函数，将代码封装为函数，可以重复，多次利用

函数的定义

//方式1
function 函数名(){
   函数体代码;
}

//方式2 匿名函数
var 变量 = function(){
    函数体代码;
}

/*
匿名函数和普通函数的主要区别在于
函数名称和变量作用域。匿名函数没有名称，需要通过变量来引用和调用
在函数声明中定义的函数会被提升到当前作用域的顶部，在使用匿名函数时需要注意变量的作用域
*/

函数的返回值return

/*
	

*/

arguments伪数组

/*
1 具有数组的length属性
2 按照索引的方式进行存储的 
3 他没有真正数组的一些方法 push() pop()。。。	
*/

//当不确定函数的形参个数时可以用arguments来接收参数 如下
function getSum(){
     var sum=0;
     for(var i=0;i<arguments.length;i++){
         sum+=arguments[i]
     }
     console.log(sum);
}
console.log(getSum(1,23,56,45));
console.log(getSum(1,23,56,45,99,89));

回调函数

什么是回调函数，即为函数的形参可以接收函数类型的变量

如：function A( function B() ){

}

由于JS中所有的变量定义均用 var ，所以当函数的形参想要接收函数时，这个函数就被称为回调函数，类似java的函数形参传递了一个对象。

变量作用域

变量分为：局部变量，全局变量

隐式全局变量

a = 10; //没有使用 var声明的变量，不推荐用，无形中增加了维护成本
var a=b=c = 30;//  b,c 为全局， a为局部
//等价于
var a = 30;
b=30;
c=30;

作用域

 全局作用域：
 	变量在函数外不属于任何一个函数的变量就是全局变量 整个js代码都可以使用
	全局变量的生命周期：
          页面加载时创建
          页面关闭时销毁
          生命周期比较长 容易造成空占内存 而且还会造成命名冲突(全局污染)
局部作用域：
	变量在函数内创建 就是局部作用域
	局部变量只能在当前函数内部使用
	
	局部变量的生命周期：
          函数调用时变量创建
          函数调用完毕时 变量销毁
          参数也是局部变量  所以不同的函数 可以有相同的形参名字

函数变量提升

/*
js代码并不是页面加载时 就完完全全的从第一行开始逐行执行并解析 
  而是开始执行之前 先进入预解析阶段

在预解析阶段 把使用var和function创建的变量进行提升 目的为了更方便使用数据

会把变量和函数的声明放到最前面，保证赋值和调用永远在声明之后

*/

面向对象

对象的创建

//字面量创建
var obj = {
	k1:v1,
	k2:v2,
	k3:v3,
	k4:function(){
	
	}
}


// object函数，new关键字创建
    var obj=new Object();//默认创建的是空对象
    console.log(obj);
    //动态的绑定属性和方法
    obj.name='张飞';
    obj.age=18
    obj.study=function(){
     console.log('学习到深夜12点');
    }

//工厂模式创建
function getPerson(name,age){
    var person = new Object();
    person.name = name;
    person.age = age;
    person.fun = function(){
        console.log('吃饭')
    }
    return person;
}
var p1 = getPerson('张三',22);

//构造函数创建
function Person(name,age){
    this.name = name;
    this.age = age;
    this.fun = function(){
        console.log('吃饭');
    }
}

var p2 = new Person('李四',15);