js语法

---

前言

解释型弱类型语言，开发web的脚本语言，给网页增加动态效果。

语言特点：面向对象，命令式和声明式。

node平台开发服务器用的也是js
React和Vue框架底层也是js

js由三部分组成

1. ECMAScript：语法规范
2. DOM：document object model文档对象模型
3. BOM：browser object model 浏览器对象模型

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、简写

1. 三元
   条件？true：false；
2. 箭头函数（ES6）
   var c = () => {
   let
   }
3. 闭包
   可以访问其他作用域中的变量，这一的函数即为闭包

二、数据类型

变量：

1.声明 var，变量使用前一定要声明！！！
浏览器会讲变量声明提前到作用域最上方
声明多个同名变量，用后面的！

2.赋值
声明和赋值分开，声明提前，赋值不会提前！

3.使用

关键字
typeof 数据 :string 查看数据类型
typeof null ==>‘object’

栈空间：基本数据类型，引用类型的声明
堆空间：引用类型内容

基本数据类型

String

var num = .length
var index = .indexOf(’ ')

var arr = .split(’’)以某字符或空切割字符，返回arr[0] [1]

var newStr = .substring(index1,index2)和array的slice
var newStr = .substr(index,num)和splice差不多

var newStr = .replace(element1, element2)查找1替换为2
var arr = .match(‘element’) element或者正则，匹配到的第一个

var newStr = .toUppercase()
判断大小写str[index] < ‘a’ ==> 大小字母

返回新的string对旧的string没有影响

str.split 与 arr.join
结合正则~
split
match匹配第一个加g没用
search获得第一个的index

首字母大写

function Upperalpha(str){
    var arr1 = str.split(' ');
    var res = '';
    for(var i=0;i<arr.length;i++){
        var newStr = arr1[i][0].toUppercase() + arr1[i].substr(1) + ‘ ’;
        res += newStr
    }
    return res;
};

Number

数字类型的字面量：
整数：十进制
小数（浮点数）:IEEE754浮点数算术标准，底层转化为二进制计算
科学计数法：e
特殊值：

1. ±2^53 ±Infinity 12/0
2. NaN计算不出结果 0/0

Boolean

Undefined

变量仅声明，没有赋值，即undefined

Null

空对象

引用类型object

1.数组array[ ]

.length

会改变array
尾部
.push() 加在后面
var element = .pop() 删最后一个,返回删除的元素

头部
.unshift() 向数组头部添加多个元素
var element = .shift() 删头部一个元素

.reverse() 翻转
var str = .join(’*’)

不会改变array，生成新的arr
var newArr = .slice(index2)从头开始切到index2
var newArr = .slice(index1,index2)切割，包含起始index，不包含结束index

var newArr = .splice(index)
var newArr = .splice(index,num)索引和个数，从index切出num个
var newArr = .splice(index,0,’ ‘)插入
var newArr = .splice(index,2,’ '， ’ ')替换

var index = .indexOf(’ ‘) 没有的话，返回-1，去除重复元素
var boolean = .includes(’ ')

---

agruments类数组

只能用length，在函数没有形参的情况下，在函数体可以获取传递给函数实参
可以拿到调用时用到的所有实参，遍历出来

---

json（k-v）

读取数据：var 变量名 = .key or [‘key’]
修改数据： .key = ‘ ’ or [‘key’] = ’ ’
添加数据：有即修改，没有即添加

var data = {
	key: 'value',
}

函数

声明+调用

关键字函数function 函数名(){ }；和变量声明一样，也会提前

表达式函数var 变量名 = function 函数名(){ }；
变量名调用（简写！）
调用不用到函数名，直接用匿名函数即可，不用写函数名
有简写，不会提前

回调函数
传递的参数是另一个函数的声明部分
function promise （a, b, callback）{
callback();
};
promise(1,2,function(){
console.log(a)
})

递归函数
函数自己调用自己

IIFE：在声明表达式函数的同时，立马执行一次
关键字匿名函数转化为表达函数：
前面加！或者加（）包起来

函数的方法：

apply与call
修改函数上下文，函数都可以执行一次
不同，函数传参方式
fun.apply({‘name’:‘apply’},[a,b,c])
fun.call({‘name’:‘call’},‘a’,‘b’,‘c’)

手写apply

Function.prototype.myApply = function(context=window){
    context.fn = this;
    if(arguments[1]){
        content.fn(...arguments[1]);
    }else{
        context.fn();
    }
}

内置函数

浏览器自带的功能
alert()
console.log()
var age:String = prompt(’ ')

timer = setTimeout(callBack,time)延时期
clearTimeout(timer)

正则reg

方法：
.exec(str)
var boolean = .test(str)

定界符//

边界符^ $

字符：
字符集[a-z1-9A-Z]在里面选一个
匹配一个汉字[\u4e00-\u9fa5]
预定义类
\s空格
\d数字
\w任意 字母，数字，下划线

量词：
+次数>=1
*次数>=0
?次数 = 1
{m,n} {m,} {n}

分组
（）

修饰：
//g全部匹配出来-match
//i大小写不敏感

DOM

var input1 = document.

BOM

内置对象

console.log(Math)

Math

.abs() 绝对值
.pow(2,3) 2的3次幂
.random() 随机取0-1间的小数

Date

Date.now()

---

数据类型转换

• 加法(隐形转换成数字) or 连字符（只要有string）
  % 取余数
  A++ 当次变量使用后+
  ++A 当前这一次使用变量之前+

1）其他数据类型转换为数字类型

parseInt(:String) ==> Int:Number
parseFloat()
将括号内的内容转化为string， 从左到右，到非数字结束，一开始就不是数字即NaN

number()
true:1;false:0
undefined:NaN (关注，不常见)
null:0
string（和parseFolat类似）
空字符串0和parseFloat不同
Number(’’) ==>0
parseFloat(’’) ==> NaN

2）其他数据类型转换为Boolean
0，NaN ==>> false
其余数字 ==>> true
’ ’ ==>> false
非空字符串 ==>> true
undefined ==>> false
null ==>> false

运算符

比较 ==> true or false
隐形转换为Number
特殊值比较：
NaN != NaN ==> true
Infinity = Infinity ==> true
!==不全等
字符串和字符串进行对比,转换为ASCII：
0-9 < A-Z < a-z

逻辑符（&& | | !置反 ） ==> true or false
隐性转换为Boolean

语句

for条件；数据保留在循环体外
break跳出循环for
continue跳出当前，执行下一循环

var sum = 0;
for (var i=0;i<11;i++){
    sum = sum + i;
};
console.log(sum);

关键字补充

原生js

1. 获取元素，监听事件

window.onload = ()=>{
    var btnSrch = document.querySelector('#btnSrch');
    btnSrch.addEventListener('touchstart',()=>{
        console.log('touchstart');
    });
    var btnSrch = document.querySelector('#btnSrch');
    btnSrch.addEventListener('touchmove',()=>{
        console.log('touchstart');
    });
};

2. 获取url和正则匹配

/**
 *获取url地址中参数的方法
 *
 * @param {string} key
 * @return {string} 
 */
var getUrlParam = (key) => {
    var reg = new RegExp(key+'=([^&]*)');
    var results = location.href.match(reg);
    return results ? results[1] : null;
}

var kwParam = getUrlParam('kw');

3. 闭包Timeout：防抖+节流

防抖：在开发中经常会遇到一些时间频繁触发，比如鼠标，scroll，resize，input
在事件触发n秒后执行一次

var input = document.querySelector('#input');
var debounce = (callback,time)=>{
    let timer;
    return ()=>{
        if(timer) clearTimeout(timer)
        timer = setTimeout(callback,time);
    }
};
//n秒后执行的函数
var handler = ()=>{

};
//绑定事件
input.addEventListener('keyup',debounce(handler,1000));

节流：在n秒内函数执行一次

var input = document.querySelector('#input');
var throttle = (callback,time)=>{
    let lock = true;
    return ()=>{
        if(lock){
            lock = false;
            setTimeout(()=>{
                lock = true;
                callback();
            },time);
        } 
    }
};
//n秒后执行的函数
var handler = ()=>{

};
//绑定事件
input.addEventListener('keyup',debounce(handler,1000));

总结

之后可能会继续补充~