JavaScript基础补充

JavaScript基础补充

JavaScript是一门是弱类型 , 边解释边执行的浏览器端脚本语言. 起初的开发目的是用于浏览器端做表单验证的 ,后来发现用来网页的特效,动画非常的好用  ,发展目前, 可以用制作网页的交互特效 和数据交互,还用于在后端开发(Node.js) , 小程序 , 移动的App , 物联网...

ECMAScript 标准

1.目前学习的是浏览器端的JS   = > 目前版本ES5

2.后端的JS (Node.js) 

---

一、在网页中使用JS

1.直接在标签中通过属性添加事件的方式调用

<button onclick="hello()">点击我呀</button>

2.在html文档内部 , 通过script标签编写脚本

<script>
    var a = 10;
    alert(a);
</script>

3.通过script标签引入外包的脚本

<script src="js/a.js"></script>

---

ECMA标准语法:

1.变量: 变量是个筐,啥都往里装. (是一个用于在程序中存储临时数据的一个容器 , 可以随时改变容器中的数据)

使用 var 关键字声明
变量名要求:
    1.变量必须是字母下划线数字$
    2.变量名不能以数字开头,一般就是以字母下划线$ 开头
    3.不能使用关键字, 保留字作为变量名 
    4.变量名要做到见名识意 
    5.建议使用驼峰命名法:studentName

2.数据类型:

1.基础(值)类型数据 : 存储在内存的栈内存中
    undefined 
    null
    boolean
    string
    number
​
2.对象(引用)类型数据 : 存储在内存的堆内存中
    object
    array
    symbol
    function
    ...
    
    检测数据类型: typeof / typeof()
    
    常见的返回的结果:
        *       null
        *       undefined
        *       string
        *       number
        *       boolean
        *
        *       object (无论是否为数组 , 对象 ... 都是返回object)
        *       function
    
      //判断一个变量是否数组
      // 1. 使用Array提供的一个方法
       console.log(Array.isArray(arr)); //true 表示是一个数组
​
​
      //2. 使用 instanceof 检测对象的构造函数
      console.log(arr instanceof Array); //true 表示是一个数组

3.运算符:

1.算术运算符:
     +  -  *  /  %  ++  --
​
2.比较运算符 
    > < == >=  <= != ===
​
3.赋值运算符
    =   +=  -=  *=  %= /=
4.逻辑运算符
&&(且)  ||(或)  !(非)
​
5.位于运算
&   |   ^ 

4.条件判断:

1.if(条件){}
2.if(条件){}else{}
3.if(条件1){}else if(条件2){}else{}
​
三目(元)运算符
var s = a>10?a:'0'+a
​
if(a>10){
    s = a;
}else {
    s = '0' + a
}
​
​
switch(表达式){
    case 常量1:
        //执行常量1代码块
    break;
    case 常量2:
        //执行常量2代码块
    break;
    case 常量3:
        //执行常量3代码块
    break;
    default:
        //默认执行操作
}

5.数组:

数组 :存储一组数据类型相同的集合 
通过数组下标方式访问 , 下标的索引位置从0开始
​
定义数组:
var arr = new Array(5);
var arr = new Array(10,20,30,40,50,60);
var arr = [10,20,30,40,50]; //字面量方式创建
​
数组的属性:length , 返回数组的长度
​
数组的常用方法:
concat() 合并一个或多个数组 , 返回一个新数组 ,不改变原数组
join() 使用指定的分隔符,将数组拼接成一个字符串 , 默认为逗号
reverse() 颠倒数组 (前后倒置)
sort() 数组排序
slice(start,end) 截取数组中区间(start<= x < end)的元素 ,返回一个新的数组 ,不改变原数组
splice(index,howmany,item,...item) 删除数组中index位置开始的元素,删除howmany个 ,然后在当前位置再插入item,...item ,返回被删除的元素 , 会改变原数组
indexOf(item,index) 查找数组中从index位置开始,item元素首次出现的位置,如果找到返回索引值,找不到返回 -1
​
经典的面试必问 :
push() 往数组的末尾处追加一个或多个元素 ,返回新的的长度
pop() 删除数组中的最后一个元素 ,并返回这个被删除的元素
shift() 删除数组的第一个元素 ,并返回被删除的元素
unshift() 在数组的开头位置追加一个或多个元素,返回新的长度
​
forEach() 数组遍历
map() 数组映射,将原数组的元素一一映射为一个对应的元素集合
filter() 过滤数组的元素
reduce() 累计
​
some() 检测一个数组中是否有匹配指定条件的结果,只要有一项符合则返回true ,否则false
every()检测一个数组中是否每一个元素都符合指定条件的结果,都符合则返回true ,否则false
includes() 检测数组中是否包含某个元素,返回布尔值 ,如有返回true ,没有 返回false

6.循环结构:

for(初始部分;循环条件;迭代条件){
    //每次循环操作
}
​
while
​
​
do...while
​
for in

7.函数: (方法 , 功能) 用于实现特定功能的代码块

使用关键字 function 定义一个函数
函数有参数
函数有返回值
函数可以实现一定的功能
​
1.具名函数和匿名函数
2.有参无参函数
3.系统函数和自定义函数
​
function abc(a,b){ //a , b 形参
​
return a + b;
    console.log('位于一个函数内部,return 后边的代码是不会执行的')
}
​
var a = abc(10,20);//实参
​
arguments : 伪数组对象 ,包含了所有的函数实参
​

8.字符串:

属性: length 返回字符串的长度 
​
方法:
    charAt(index) 返回字符串中指定index位置索引的字符
    indexOf(str,index)返回字符串中从index位置开始(0) ,首次出现str字符串的位置 ,如果找不到返回-1
    charCodeAt() 返回字符串中指定索引位置字符的ascii码的十进制值
    concat() 合并两个字符串
    match() 可以从字符串中查找匹配到指定的字符 ,并返回匹配结果
    matchAll() 可以从字符串中查找匹配到的字符串,并返回一个迭代器对象的结果集. (ES6新增)
    
    replace() 使用指定的字符串(正则)将字符串的匹配内容替换成指定的字符
    search() 搜索指定字符(正则)在字符串中的索引位置
    
    slice(start,end) 截取字符串中从(start<= X < end) 区间的字符 , 支付start为负数,从后面开始截取
    split(分隔符) 将字符串通过指定的分隔符切成一个新的数组
    substr(index,length)从index位置开始,共截取字符长度length个字符 , index可以为负数(从后面开始截取)
    substring(start,end)从字符串区间(start<= X < end)截取内容 , 不支持参数为负数
    
    toLowerCase() 将字符串转换成小写
    toString() 将数组, 数字对象转换成字符串
    toUpperCase() 将字符串转换成大写
    
    trim() 去除字符串中前后两边的空格
    trimStart() 去除字符串中开头的空格
    trimEnd()  去除字符串中末尾的空格