javaScript 初步涉猎

1. <script>元素

defer表明脚本在执行过程中不会影响页面的构造，也就是说脚本在延迟到整个页面渲染完成后才执行。浏览器在遇到defer脚本解析的时候，是去异步下载脚本，但不会停下dom渲染的工作，等到页面渲染完成后，再执行脚本，遇到多个会按顺序加载。

async浏览器立即异步下载文件，不同于defer得是，下载完成会立即执行，此时会阻塞dom渲染，所以async的script最好不要操作dom。因为是下载完立即执行，不能保证多个加载时的先后顺序

2.<noscript>
   <p>不支持script的h5</p>
</noscript>

3.语言->阿拉伯数字->二进制(ASCII 美国信息交换标准代码 Unicode码扩展自ASCII字元集。)

4.Unicode是一个编码方案，Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。Unicode 编码共有三种具体实现，分别为utf-8,utf-16,utf-32，其中utf-8占用一到四个字节，utf-16占用二或四个字节，utf-32占用四个字节。

base64 也是字符
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
fromCharCode(72,69,76,76,79)//hello 可接受一个指定的 Unicode 值，然后返回一个字符串

var iNum = 10;
alert(iNum.toString(2));	//输出 "1010"
alert(iNum.toString(8));	//输出 "12"
alert(iNum.toString(16));	//输出 "A"

parseInt() 方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt() 方法的第二个参数指定的，所以要解析十六进制的值，需如下调用 parseInt() 方法：

var iNum1 = parseInt("10", 2);	//返回 2
var iNum2 = parseInt("10", 8);	//返回 8
var iNum3 = parseInt("10", 10);	//返回 10
var iNum1 = parseInt("AF", 16);	//返回 175

new Blob([uInt8Array], { type: “audio/wav” });
array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。

  const bytes = window.atob(base.split(',')[1]);
                const ab = new ArrayBuffer(bytes.length);
                const ia = new Uint8Array(ab);
                for (let i = 0; i < bytes.length; i++) {
                    console.log(bytes.charCodeAt(i), 'bytes.charCodeAt(i)')
                    ia[i] = bytes.charCodeAt(i);
                }
                blob = new Blob([ab], { type: 'image/png' });
            
             var binary =""
             var bytes = new Uint8Array(buffer);
                var len = bytes.byteLength;
                for (var i = 0; i < len; i++) {
                  binary += String.fromCharCode(bytes[i]);
                }

canvas.toBlob(callback, type, encoderOptions); callback 函数回调 type格式 encoderOptions 图片质量

5.属性名驼峰命名
6.a .标识符 第一个是字母 下划线_ 美元符$
b. 其他 字符 下划线_ 美元符$ 数字
7.严格模式
“use strict”
8.关键字保留字

break    do       instanceof  typeOf
case     else     new         var
catch    finally  return      void
continue for      switch      while
debugger function  this       with
default  if        throw
delete   in         try

abstract  enum      int  short
boolean   export    interface
byte      extends    long
char      final      native
class     float      package
const     goto       private
debugger  implements protected
double    import     

第五版
非严格模式

class  enum  extends  super
const  export import

严格模式

implements  package  public
interface   private   static
let         protected  yield

9.超出范围 isFinite{}

如果 number 是有限数字（或可转换为有限数字），那么返回 true。否则，如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false。

10.数值判断
isNaN() 函数用于检查其参数是否是非数字值。

如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。(能隐士转换的数字的false)

Number()  所有
parseInt() //string
parseFloat()//string
console.log(isNaN(10))//false
console.log(isNAN('a'))//true

11.String类型是0或多个Unicode字符组成的字符序列

String() 所有
toSting() 除 null undefined
转义字符
\n       换行
\t       制表
\b       空格
\r       回车
\f       进纸
\\       斜杠
\'       单引号  
\"       双引号
\xnn     以十六进制代码nn表示一个字符(其中n为o~F)
\unnn    以十六进制代码nnn表示Unicode (其中n为0~F) \u03a3 表示Σ

12.obect

var o=new Object
constructor 创建对象o的构造函数 Object
hasOwnProperty o.hasOwnProperty ('name)检测是否当前实例 而不是原型链中
isPrototypeOf(object) 检测是否是实例的原型对象
propertyIsEnumerable()判断是否能被枚举 for-in遍历
toLocalString()返回对象的字符串 本地表示
toString() 返回对象的字符串
valueOf()  返回对象字符串 toString一致 (先用valueOf 在toString)

13.一元操作符
+隐士转化成 (字符为主)
-*/隐士转化为(数字为主) ++ –
++a 和a++
–b和b–

14.位操作符(js的底层操作)

var a=18;
var b=-a
按位非~
var a=18
var b=~a-1
按位与&
var a=25&3
console.log(a)//1

25和3的二进制码对应位上只有一位同时是1,而其他的位数都等于0 所以1

按位或|
var a=25|3
console.log(a)//27

按位异或^
var a=25^3
console.log(a)//26

左移<<
var a=3 //等于二进制的11
var b=a<<5  //等于 1100000  96
右移
var a=96; //等于1100000	
var b=a>>5 //11          3
无符号右移(对于正数来说 有序和无序一样)
var a=96 //等于1100000 a.toString(2),b.toString(2)
var b=a>>>5 //等于1

无序符号右移(负数)

15.布尔操作符
a.逻辑非 ! Booleran()等价!!
b.逻辑与 && 第一个为假返回假, 第一个为真返回第二个 (找假)
c.逻辑或 || di 第一个为假返回第二个 第一个为真 返回第二个(找真)
16.加性操作符
+隐士转化成 (字符为主)
-*/ %隐士转化为(数字为主) ++ –
++a 和a++
–b和b–
17.关系操作符

< 小于 >大于 <= 小于等于 >=大于等于 
1.如果2个都是数字 则执行数字比较
2.两个字符串 比较字符编码
3.数字和字符转 数字比较
4.对象 调用valueof 进行比较
5.布尔转换比较

18.逗号是并列声明

var a=0,b=1;

19.do-while

var i=0;
do{
i+=2
}while(i<10)
console.log(i)

var i=0;
while(i<10){
i+=2
}

for(var i=0;i<4;i++){
}

lable可以来标识for循环

loop:
for(var i=0;i<5;i++){
}
 var arr = [[1, 2, 3], [2, 3, 4], [3, 5, 6]]
        let arr2=[]
        for (var i = 0; i < arr.length; i++) {
            let arr1 = arr[i]
            for (var j = 0; j < arr1.length; j++) {
                if (arr1[j] == 3) {
                    arr2.push(arr1[j])
                    break
                }
                console.log(arr1[j])
            }
            break
        }
        console.log(arr2,'arr1[j]')
break 终止循环
continue 跳出循环

20.with语句

let obj={
name:'zs',
age:18
}
with(obj){
var name=name;
var age=age
}

警告:严格模式报错 不建议使用
21.switch

var num=0
switch(1){
case 1: num=2
break;
case 1:
case 2: 
 num=2
break;
default:33
}

注意:switch 语句使用的全等符号 10和’10’不相等
22.函数

function (){}  匿名函数
function (){return 12} 返回值匿名函数
function a(){}  申明函数
function a(){return 12} 返回值申明函数
argument 接受参数的
函数参数都是按值传递

23.基本数据 引用数据类型
a.基本数据类型没有动态(在栈中) 添加属性(深拷贝 相互独立)
b. 引用数据类型(在堆中) 可以动态添加属性(浅拷贝 相互影响)

24.类型检测
基本类型 typeOf
引用类型 :

     方式一
        let arr = [1, 2, 3]
        let obj = {
            name: 'zs',
            age: 18
        }
        console.log(arr.constructor=='Object')
        console.log(obj.constructor=='Array')
      方式二
        let arr = [1, 2, 3]
        let obj = {
            name: 'zs',
            age: 18
        }
        console.log(arr instanceof Array);//true。
        console.log(obj instanceof Object);//true。
     方式三
        let arr = [1, 2, 3]
        let obj = {
            name: 'zs',
            age: 18
        }
      Object.prototype.toString.call(arr ));//[object Array]
      Object.prototype.toString.call(obj ));//[object Object]
     方式四
     ypeOf obj==object&&JSON.Stringfly(obj).slice(0,1)=='{'
     方式五
     ypeOf obj==object&&Array.isarray()
        

注意:所有引用类型都是Object的实例

25.块级作用域

1.var会变量提升 先声明 后复值
2.let 产生作用域
3.查询标识 沿着作用域链查找(就近原则)

26.引用数据类型
object 存储在堆中(复用地址,存放数据) 存放数据传输数据
Array 存放有序数据 new Array(10) length为10的空数组 检测数组 Array.isArray()

27.对象都有 toLocaleString() toString() valueOf()
数组:

      let arr=[1,2,3]
      console.log(arr.toLocaleString()) //1,2,3
      console.log(arr.toString())//1,2,3
      console.log(arr.valueOf())//[1, 2, 3]
      arr.join()//1,2,3

数组的栈方法
push(后加) pop(后删除) unshift(前加) shift(前减)
队列方法
数组重排序
reverse() sort()

 var arr=[1,3,5,7,2,4,6]
     console.log(arr.sort((n,o)=>{
         console.log(n,o,'xxx')
         return o-n
     })
     //[7, 6, 5, 4, 3, 2, 1]

concat 合并 slice 截取

let arr=[]
arr.concat('a',[1,2])

let arr1=[1,2,3,4,5]
console.log(arr1.slice(-2,-1))//[4]
console.log(arr1.slice(0,1))//[1]

splice

let arr=[1,2,3,4,5,6]
//删除  arr.splice(0,2) arr[3,4,5,6]
//插入  arr.splice(0,0,a) arr[a,1,2,3,4,5,6]
//替换  arr.splice(0,2,a,b) arr[a,b,3,4,5,6]

位方法
indexOf() lastIndexOf()
迭代方法

every() 每一个 迭代所有
some() 一个 满足条件停止
filter() 过滤  迭代所有
map() 保留原数组操作 迭代所有
forEach() for循环 迭代所有

缩小方法

reduce() 迭代所有  左->右
reduceRight() 迭代所有 右->左

  var obj1 = {
            name: 'lis',
            age: 19,
            toLocaleString: function () {
                return this.name
            },
            toString: function () {
                return this.age
            }
        }
        console.log(arr.toLocaleString()) //[object Object]
        console.log(arr.toString())//[object Object]
        console.log(arr.valueOf())//{name: "zs", age: 18}

28.时间对象Date
查看 https://blog.csdn.net/qq_42374676/article/details/106399679
29.正则匹配

字面量申明
//g 匹配全局
//i 忽略大小写
//m 多行模式
//gi 匹配全局 不分大小写
正则表示的字符都要转义 
RegExp('cat','g')

var a='abcd'
/abc/.exec(a)//["abc", index: 0, input: "abcd", groups: undefined]
/abc/.test(a)
console.log(RegExp.$1)
[http://www.regular-expressions.info/tools.html](http://www.regular-expressions.info/tools.html)

30.函数声明

function a(){} //函数变量提升
let a=function(){} //不会变量提升
let a=new Function('x',"return x*2")

可以将函数体 当做函数传递

function a(b,x){
}
a(function b(){},x)

函数属性

arguments this
//递归函数
function a(x){
 x++
 if(x>5){
 return 
 }else{
 arguments.callee()
}
}
//this指向问题 在哪个运行环境 this指向谁
    window.color='red';
    var o={color:'blue'}
    function a(){
        console.warn(this.color)
    }
    a()//red
    o.a=a
    o.a() //blue
    -----------------------------
 function a(){
   console.log(this) //window
             }
box.onclick=function(){
     console.log(this)//box
}

函数的length prototype

function a(x){}
console.log(a.length)//1 一个参数
a.prototype.obj={

}

非继承方法 call apply bind

function sum(num1,num2){
 return num1+num2
}
function callSum1(num1,num2){
 return sum.apply(this,arguments)
}
function clasSum2(num1,num2){
 return sum.apply(this,[num1,num2])
}
console.log(callSum1(10,10))//20
console.log(clasSum2(10,10))//20
外面借用------------------
    function a(x,y){
         return x+y
     }
     function b(){

     }
     console.log(a.call(b,10,20))
bind绑定---------------------
function a(){console.log(this.name)}
var obj={name:'zs'}
var obj1=a.bind(obj)
obj1()

32.基本包装类型

String Number Boolean
在执行string number boolean基本类型 时后台自动生成对应的 
String Number Boolean基本包装类型 让其拥有对象的属性和方法 操作完后 立即销毁
        let a = 'a' //String
        console.log(typeof a)
        console.log(a instanceof String)//false
        let b = String('b')//String
        console.log(typeof b)
        console.log(b instanceof String)//false
        let c = new String('c')
        console.log(typeof c)           // Object
        console.log(c instanceof String)// 对象方法
        toString()  LocaltoString() valueOf()
        var d='abed'
        d.charAt(2)//'e' 返回字符
        d.charCodeAt(2)//'101' 字符编码
        字符拼接concat 
        var e='abcd'
        e.concat('efg')//abcdefg
        slice(x,y) x 索引 y索引  substr(x,length) x 索引 length长度 substring(x,y)x 索引 y索引 (x,y不为负数 且可以交换位置)
        var f='abcde'
        f.slice(-2)//de
        f.substr(-2,2)//de
        f.substring(2,0)//ab
        位置方法 indeOf(x,start) lastIndeOf(x,start)//x检索的字符 start 开始的位置
        trim() 清除所有的空格 非标准的 trimLeft() trimRight()
        toUpperCase() toLocaleUpperCase() 国际环境使用toLocaleUpperCase()
        let a='abc'
        a.toUpperCase() //ABC
        toLowerCase() toLocaleLowerCase()
        let b='ABC'
        b.toLowerCase()//abc
        b.toLocaleLowerCase()//abc
        match()//正则pipe
        var text = 'cat,bat,sat,fat'
        console.log(/.at/.exec(text));
        console.log(text.match(/.at/));
        search()//正则或字符串
        var str='ABCde'
        str.search('d')// 3
        replace(x,y)//x 字符串或正则  y替换字符或函数
        var aa='cat,bat,sat,fat'
        aa.replace('at','ond')//cond bat sat fat
        aa.replace(/at/g,'ond')//cond bond sond fond
        

      var text='cat,bat,sat,fat'
      text.replace(/(.at)/g,'word($1)') //'word (cat),word (bat),word (sat),word (fat)'

     function htmlEscape(text){
        return text.replace (/[<>"&]/,function(match,pos,origintext){
           switch(match){
           case "<":
          return "&lt"
           case ">":
          return "&gt"
          case "&"
         return "&amp"
         case "\"":
        return "&quot"
       }
       })
     }
   let bb="<p class=\"greeting\">hello word</p>"
   htmlEscape(bb)//&lt;p class=&quot;greeting;&gt;hello word &lt;/p&gt

   split(x,num)//字符串分割 x 字符串 正则 num 分割个数
   console.log(str.split(','))// ["red", "blue", "green", "yellow"] 
   console.log(str.split(',', 2))//["red", "blue"]
   localeCompare()字符串比较
   var color="yellow"
   color.localeCompare('brick')//1 //brick在字母表在yello之前
   color.localeCompare('yellow')//0
   color.localeCompare('zoo')//-1 //zoo在字母表在yello之后
   formCharCode()方法与 charCodeAt()互为反操作
   String.formCharcode(104,101,108,111)//hello
      
   Number  boolean 同上
   toFixed() 保留几位小数
   toExponential() 保留科学计数法的 方式

33.单体内置对象
global 全局

方法:isNan(), isFinite(), parseInt(), parseFolat(), encodeURI()
,encodeURIComponent(), eval()JavaScript 解析器(及时调用) 防止代码注入

属性:

在web浏览器重 global对象就是window 在node的js中就是 global
34.Math 内置数学函数

var max=Math.max(3,54,32,16)
console.log(max)//54
Math.ceil(25.9)//26
Math.floor(25.9)//25
Math.round(25.9)//26
Math.random()//随机数 0-1之间 
1到10的数值 Math.floor(Math.rondom()*10+1)
2到10之间的数值 Math.floor(Math.rondom()*9+2)
function selectFrom(lowervalue,uppervarlue){
 var choices=uppervarlue-lowervalue+1
 return Math.floor(Math.random()*choices+lowervalue)
}

修改这些属性 提供了Object.defineProperty()

var per={}
Object.defineProperty(per,'name',{
 writable:false,
 value:'zs'
})
console.log(per.name)//zs
per.name='ls'
console.log(per.name)//zs
----------------------------------
var per={
age:18
}
Object.defineProperty(per,'name',{
 Enumerable:false,
 value:'zs'
})
for(var key in per){
console.log(key) //age
}
--------------------------------
let per={}
Object.defineProperty(per,'name',{
     configurable:false,//所有的不能修改 Writable 为false  Enumerable false
     value:'zs'
   })
     console.log(per.name) //zs
     per.name='ls'
     console.log(per.name)//zs

2.访问属性
configurable :表示是否能对这个对象 增 删 改 查 默认是true
enumerable 表示是否能枚举 默认true
get 读取属性的函数
set 写入属性的函数

var book={
 _year:2004,
 edition:1
}
Object.defineProperty(book,'year',{
 get:function(){
 return this._year
},
set:function(newValue){
if(newValue>2004){
 this._year=newValue;
 this.edition+=newValue-2004
}
}
})
console.log(book)
book.year=2005;
console.log(book.edition)//2
------------------------------------------
defineProperties
 var book = {}
        Object.defineProperties(book, {
            _year: {
                value: 2004,
                writable: true
            },
            edition: {
                value: 1,
                writable: true
            },
            year: {
                get: function () {
                    return this._year
                },
                set: function (newValue) {
                    if (newValue > 2004) {
                        this._year = newValue;
                        this.edition += newValue - 2004
                        console.log(this.edition, 'this.edition')
                    }
                }
            }
        })
        console.log(book)
        book.year = 2005;
        console.log(book.edition)//2
        -------------------------------------------------
        let o={
            foo:'zs'
            }
     Object.getOwnPropertyDescriptor(o, "foo");
        // {
        //     configurable: true
        //     enumerable: true
        //     value: "zs"
        //     writable: true
        // }

36.工厂模式

function createPerson(name,age,job){
 var o=new Object()
 o.name=name;
 o.age=age;
 o.job=job
 o.sayName=function(){
   console.log(this.name)
}
return o
}
var per1=createPerson('zs',18,'student')
var per2=createPerson('lis',18,'student')

解决了重复 缺点是不是一个对象类型
37.构造函数构造

function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayName=function(){
  console.log(this.name)
}
}
var per=new Person('zs',18,'stendent')
var per2=new Person('lis',19,'stendent')
console.log(per.constructor==Person) //true
console.log(per instanceof Object)//true
console.log(per instanceof Person)//true