基础知识点

2017-09-05  本文已影响0人  程少辉

js历史

是基于事件和对象驱动的解释性，松散型的语言

解释性：由浏览器解释执行

松散型：变量可以用来保存任何类型的数据

ECMAscript

变量 值和址

就是计算机内存里的一块地址单元，为了存储数据

 var nub,nub1;
 nub=200;

 var nub=200,nub1='123';
 
 const PI=3.14;
 const arr = [1]
 arr.push('1')

数据类型

根据存储位置不同来划分

基础数据类型的值一般存储在栈区 传值

引用数据类型的值一般存储在堆区，地址（引用） 存储在栈区 传址

基础数据类型：

Number    string    boolean      null     undefind     symbol
基础数据类型 name 描述
Number 数值类型 （0B/0b十六进制 0o/0O八进制 0x/0X二进制） NaN（not a number）
string 字符串类型 "" '' `` 转义序列 \n(换行符) \f(换页符) \t(制表符) \r(回车符) \b(退格) \v(垂直制表符)
boolean 布尔类型 true false
null 空对象 占位符空
undefind 未定义
symbol 表示不重复的值

undefined

undefined == null //true

typeof      //number   string     boolean     object    function

instanceof    检测某一个对象是否是某一个构造函数的实例   一般用于检测引用类型    例如：//Array

`` 模板字符串

var nub1 = 5
var nub2 = 40
console.log(`我们班${nub1 + nub2} 人,男生${nub2}人`)
console.log('我们班'+ (nub1 + nub2) + "人，男生" + nub2 + '人')

运算符

运算符 符号 描述
算数运算符 + - * / % + 字符串相加表示连接，相加后变成字符串 % 不对小数取余数 ++ -- 分先后
逻辑运算符 && || ! '' 、 0 、 null、 undefined、 false、 NaN => false
比较运算符 > < >= <= == != === !== 字符串进行比较的时候，比较ascii码值大小
一元运算符 -- ++
三元运算符 boolen_expression ? true_value : false-value 根本目的：赋值；满足条件赋值
特殊运算符 new / delete / typeof 创建对象 / 删除对象的属性 / 判断类型
赋值运算符 -= += *= /= %=
扩展运算符 ... 
  // Number()  不能转换undefined   // NaN
  // 调用 Number()顶层函数进行隐式转换   
  console.log(true + false)   // 1
  console.log(null + 1)  // 1
  console.log(undefined + 1) // NaN

* &&
* ||
* !    非(!)运算结果一定是boolean类型值

  true && 1   // 1
  true || 1   // true
  null && false // null
  1 && 2    // 2
  
  !!1   //  boolean() 函数
  


console.log('abc' == 'acb')    // false
console.log(true > 1)   // false
console.log(true == 1)   // true
console.log(true === 1)    // false   ===  检测类型

ASCII 美国标准信息交换码 EASCII 欧洲标准 gb2312 国标 =>> gbk（微软）（扩展【繁体字、少数民族字】）

uncode(通用) 传输方式（utf-8）

0 48 a 97 A 65 上 回车

流程控制

当满足某个条件的时候，按照一定顺序执行的代码

   ```js
  var arr = []
  do() {
    arr.push(1)       //隐式的步径值
  } while(arr.length < 0)   // arr = [1]
   ```

​

数组

数组就是一系列有直接或者间接联系的数据的集合

var arr = ['a']
console.log(arr['length'])
console.log(arr.length)

// 数据的length属性很有特点——它不是只读的。可以通过设置这个属性，从数组的末尾移除项或向数组中添加新项

//js可以使用方括号表示法来访问对象的属性。
//在使用方括号语法时，应该将要访问的属性以 【字符串的形式】 放在方括号中

//使用方括号语法的主要优点是可以通过变量来访问属性                  

两个数组链接
return [...arr1,...arr2]

函数

将实现某一特定功能的代码块，封装起来，以便重复使用

function fun() {
  consloe.log(arguments[0])  //
}
var nub1 = 200
var nub2 = 300
fun(nub1, nub2)

    function fun(nub1, nub2 = '123') {
      console.log(nub2)  //null
    }
    var nub1 = 200
    var nub2 = 300
    fun(nub1, null)

    function fun(nub1, nub2 = '123') {
      console.log(nub2)  //'123'
    }
    var nub1 = 200
    var nub2 = 300
    fun(nub1, undifined)

var sum=function(a,b){
    var he=a+b;
    return he;
}
var num=sum(1,2); 
console.log(num)   //3

作用域指的是变量或者是函数在某个范围内有意义。

当一个函数嵌套另外一个函数，作用域发生嵌套，就会形成作用域链 。
在一个函数运行时候，会自动的创建一个集合，用来保存可见范围内所有的变量或者是对象。这个集合就是作用域链。

作用域 环境 描述
全局环境 window 定义在全局环境中变量、函数，称为全局变量、全局函数
局部环境 函数 定义在局部环境中的变量、函数，称为局部变量、局部函数
块级作用域 
var nub=200;
function fun(){
    var nub=300;
    console.log();
}
fun();
console.log(nub);

在程序开始运行之前，js会将以var 声明的变量和以function关键字声明的函数，提前解析到相应的环境中。

预解析是分块解析的，但是所有的script标签对又是一个整体，已经加载的script里面的内容，可以在后面的script里面访问

console.log(nub);
var nub=200;
console.log(nub);

当一个函数嵌套另外一个函数，在内部函数中用到了外部函数的局部变量，在函数外部去访问内部函数的时候，就形成了闭包

function aa(){
    var nub=200;
    function bb(){
         console.log(nub);
    }
    return bb;
}
var fun=aa();
  fun()  //  200 

// 按照垃圾处理，aa运行结束的时候，内部的200应该是被清除。但是这是时候，将bb函数返回，在外部调用的时候，会用到nub这个局部变量，js会将这个变量保留下来。
  

(function () {
    alert(1);
})()

当函数的参数传递是函数的时候，这个函数就是回调函数 //当一个函数作为另一个函数参数的时候

function fun(a, b, fn) {
    fn(a, b)
}
fun(1, 3, function () {
    console.log(a * b)
})      // 3

当一个函数自己调用自己的时候，就形成了递归

// 阶乘  5！  n!
function jie(n) {
  if (n == 0) {
    return = 1
  }
  return n * jie(n - 1)
}

// 费波那契  1 2 3 5 8 13 ... n
function fei() {
  if (n == 1) {
    return 1
  }
  if (n == 2){
    return 2
  }
  return fei(n - 1) + fei(n - 2)
}
// 深拷贝和浅拷贝
// var arr=[[1,[]],[1,2],["a","b"]]

Nubmer() String() Boolean() parseInt() parsefloat()

// 做算术运算隐式调用Number函数
console.log(1 - true)  //0
console.log(1 - undefined)  //NaN
console.log(1 - null)   //1


// 做比较运算隐式调用Number函数
console.log(1 > true)  //false
console.log(null == undefined) //true     特殊情况
console.log(null == false) //false      特殊情况

// 做布尔运算隐式调用Boolean函数

对象

人们研究的一切事物都可以称之为对象

类和对象

将一些具有某些特性的对象的特征抽象起来就形成类
类也可以作为对象 的判别，也可以用来创建对象

类是对象的抽象 对象是类的实例化

1.创建一个空对象  obj
2.让obj._proto_ == Person.prototype
3.Person.call(obj)

var obj={
    name:'lisi',
    age:123,
    fun:function(){
        
    }
}
console.log(obj.name)
console.log(obj['name'])
obj.index=1;
obj['index']=1;
obj.fun();


 var obj=new person();
 person.prototype={
     aa:function(){
     }
 }
 每个对象都有__prototype__ 属性    每个函数都有prototype属性

数组方法

pop,push,reverse,shift,sort,splice,unshift 会改变原数组

join,concat,indexOf,lastIndexOf,slice,toString 不会改变原数组

map,filter,some,every,reduce,forEach这些迭代方法不会改变原数组

数组方法 作用 例
push()* 在数组后端添加任意个项并返回新数组的长度 var arr = [1,4,3] result = arr.push('a', 'b') console.log(arr, result) // [1, 4, 3, "a", "b"] 5
pop()* 移除数组中最后一项并返回该项 var arr = [1,4,3] result = arr.pop() console.log(arr, result) // [1, 4] 3
shift()* 移除数组中第一个项并返回该项 var arr = [1,4,3] result = arr.shift() console.log(arr, result) // [ 4, 3] 1
unshift()* 在数组前端添加任意个项并返回新数组的长度 var arr = [1,4,3] result = arr.unshift('a', 'b') console.log(arr, result) // ["a", "b", 1, 4, 3] 5
join() 只接受一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串（默认，连接） var arr = [1,4,3] result = arr.join('&') || arr.join('') console.log(arr, result) // [1, 4, 3] "1&4&3" || "143"
concat() 先创建当前数组的一个副本，然后将接收到的参数添加到副本末尾，最后返回新构建的数组 var arr = [1,4,3] result = arr.concat('a', 'b') console.log(arr, result) // [1, 4, 3] [1, 4, 3, "a", "b"]
splice()* 从数组中删除、添加项目，然后返回被删除的项目arr.splice(index,num,item1,..,itemX) var arr = [1,4,3] result = arr.splice(1,1,'a','b') console.log(arr, result) // [1, "a", "b", 3] [4]
slice() 从已有的数组中返回选定的元素。接受一个或两个参数，即要起始位置和结束位置，不影响原数组 arr.slice(index1,index2) var arr = [1,4,3] result = arr.slice(0,2) console.log(arr, result) // [1, 4, 3] [1, 4]
sort()* 按升序排列数组项 var arr = [1,4,3] result = arr.sort() console.log(arr, result) // [1, 3, 4] [1, 3, 4]
reverse()* 反转数组项的顺序 var arr = [1,4,3] result = arr.reverse() console.log(arr, result) // [3, 4, 1] [3, 4, 1]
includes() 判断一个数组是否包含一个指定的值，如果是，酌情返回true或false var arr = [1,4,3] result = arr.includes(1) console.log(arr, result) // [1, 4, 3] true
find() findeIndex() filter() forEach() map() every() some()
undefined -1 [] undefined [undefined] false/true true/false
find() 返回数组中满足提供测试函数的第一个元素的值。否则返回undefined var arr = [1,3,5,7,8] var result = arr.find(value => value > 5) console.log(arr, result) // [1, 3, 5, 7, 8] 7
findIndex() 返回数组中满足提供测试函数的第一个元素的索引。否则返回-1 var arr = [1,3,5,7,8] var result = arr.findIndex(value => value > 6) console.log(arr, result) // [1, 3, 5, 7, 8] 3
filter() 对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组 var arr = [1,3,5,7,8] var result = arr.filter(value => value > 4) console.log(arr, result) // [1, 3, 5, 7, 8] [ 5 , 7, 8]
forEach() 对数组中的每一项运行给定函数，这个方法没有返回值 主要用来遍历数组 var arr = [1,3,5,7,8] var result = arr.forEach(value => value) console.log(arr, result) // [1, 3, 5, 7, 8] undefined
map() //映射 返回什么样的值，形成什么样的集合 var arr = [1,3,5,7,8] var result = arr.map(value => value*2) console.log(arr, result) // [1, 3, 5, 7, 8] [2, 6, 10, 14, 16]
some() 对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true var arr = [1,3,5,7,8] var result = arr.some(value => value > 7) console.log(arr, result) // [1, 3, 5, 7, 8] true
every() 对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true var arr = [1,3,5,7,8] var result = arr.every(value => value > 3) console.log(arr, result) // [1, 3, 5, 7, 8] false

字符串

字符串方法 描述 例子
charAt() 以单字符字符串的形式返回给指定位置的那个字符 var str = 'hello world' var result = str.charAt(1) //e
charCodeAt() 返回给指定位置的那个字符的字符编码 var str = 'hello world' var result = str.charCodeAt(1) //101
fromCharCode() 接收一个或多个字符编码，然后将它们转化成一个字符串 var result = String.fromCharCode(104, 101, 108, 108, 111) console.log(result) //hello
concat() 用于将一个或多个字符串拼接起来，返回拼接的到的新字符串，不改变原先的字符串的值 可以接受任意多的参数 var str = 'hello ' var result = str.concat('world'，’！‘) console.log(str, result) //hello hello world!
replace() 接受两个参数，第一个参数可以是RegExp对象或者一个字符串，第二个参数可以是一个字符串或者一个函数。如果第一个参数是字符串，那么只会替换第一个子字符串 var arr = 'hello world' var brr = arr.replace('he','ll') console.log(arr, brr) //llllo world
split() 这个方法可以基于指定的分隔符将一个字符串分割成多个字符串，并将结果放在一个数组中 var str = 'red, blue, green' var result = str.split(',', 2) console.log(str, result) //red, blue, green ["red", " blue"]
substr() 返回一个字符串中从指定位置开始到指定字符数的字符 var str = "abcdefghij"; console.log("(1,2): " + str.substr(1,2)); // (1,2): bc console.log("(1): " + str.substr(1)); // (1): bcdefghij
substring() 返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集 var anyString = "Mozilla"; console.log(anyString.substring(0,3)); console.log(anyString.substring(3,0)); // 输出 "Moz"
indexOf() 从一个字符串中开头向后搜索给定的子字符串，然后返回子字符串的位置（如果没有找到该子字符串，则返回-1）可接受第二个参数，表示从字符串的哪个位置开始向后搜索 var str = 'hello ' var result = str.indexOf('e') console.log(str, result) // hello 1
lastIndexOf() 从一个字符串中末尾向前搜索给定的子字符串，然后返回子字符串的位置（如果没有找到该子字符串，则返回-1）可接受第二个参数，表示从字符串的哪个位置开始向前搜索 var str = 'helloe ' var result = str.lastIndexOf('e') console.log(str, result) //helloe 5
slice() 提取字符串的一部分，并返回一新的字符串 var str1 = 'The morning is upon us.'; var str2 = str1.slice(4, -2); console.log(str2); // morning is upon u
startsWith() 用来判断当前字符串是否是以另外一个给定的子字符串“开头”的，根据判断结果返回 true 或 false。 var str = "To be, or not to be, that is the question."; alert(str.startsWith("To be")); // true alert(str.startsWith("not to be")); // false alert(str.startsWith("not to be", 10)); // true
endsWith() 用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false var str = "To be, or not to be, that is the question."; alert( str.endsWith("question.") ); // true alert( str.endsWith("to be") ); // false alert( str.endsWith("to be", 19) ); // true alert( str.endsWith("To be", 5) ); // true
includes() includes() 方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回true或false var str = 'To be, or not to be, that is the question.'; console.log(str.includes('To be')); // true console.log(str.includes('To be', 1)); // false
toLowerCase() 字符串转化为小写 var str = 'Hello ' var result = str.toLowerCase() console.log(str, result) //Hello hello
toUpperCase() 字符串转化为大写 var str='Hello ' var result = str.toUpperCase() console.log(str, result) //Hello HELLO
trim 创建一个字符串的副本，删除前置及后缀的所有空格，然后返回结果 var str = 'hello ' var result = str.trim() console.log(str, result) //hello hello
trimLeft 从一个字符串的左端移除空白字符。
trimRight 从一个字符串的右端移除空白字符

Math

Math方法 描述 例子
Math.abs(num) 返回num的绝对值 只处理第一个参数 var result = Math.abs(-1) // 1
Math.max() 确定一组数值中的最大值，可以接受任意多的数值参数 var result = Math.min(-1,3,2) //-1
Math.min() 确定一组数值中的最小值，可以接受任意多的数值参数 var result = Math.min(-1,3,2) //3
Math.ceil() 执行向上舍入，即它总是将数值向上舍入为最接近的整数 只处理第一个参数 var result = Math.ceil(3.4) //4
Math.floor() 执行向下舍入，即它总是将数值向下舍入为最接近的整数 只处理第一个参数 var result = Math.floor(3.6) //3
Math.round() 执行标准舍入，即它总是将数值四舍五入为最接近的整数 只处理第一个参数 var result = Math.round(3.5) //4
Math.random() 返回大于0小于1的一个随机数 不加参数 有参数没用 var result = Math.random() //0.5254465176488599
Math.sin(x) 返回x的正弦值 var result = Math.sin(1) //0.8414709848078965
Math.cos(x) 返回x的余弦值 var result = Math.cos(1) 0.5403023058681398
Math.tan(x) 返回x的正切值 var result = Math.tan(1) 1.5574077246549023
Math.PI π的值 var result = Math.PI //3.141592653589793
Math.pow(num, power) 返回num的power次幂 var result = Math.pow(2,4) //16
Math.sqrt(num) 返回num的平方根 var result = Math.sqrt(4) //2

BOM

window属性和方法

location

http: / https:(http加强版，比较安全)
//超文本传输协议

// 协议    主机名+端口号/主机名   端口号   路径 查询字符串  锚地址
location.protocol     location.host/location.hostname      location.port       location.pathname location.search   location.hash

history

http: 
https：(http加强版，比较安全)
超文本传输协议
网络传输协议

TCP/IP     7层协议      网络层    
www.aebabs.com：80（端口号）(path) index.html?查询     域名   主机地址

DOM

文档操作

获取设置文档信息

获取宽高

如果一个块元素如果不设置宽度，默认宽度是它父元素的宽度，默认高度是它内容的高度

获取元素

对于元素内容的操作

对于元素属性的操作

获取属性

设置属性

对于元素的样式操作

事件

事件冒泡

事件流

定义： 当一个事件触发的时候，当前元素的父元素乃至整个页面都会以一定的顺序来响应事件，响应的顺序叫做事件流

var par = document.querySelector('.par')
    var son = document.querySelector('.son')
    var body = document.querySelector('body')
    var html = document.querySelector('html')
    par.onclick = function () {
        console.log(1)
    }

    html.addEventListener('click', function () {
        console.log('html捕获')
    }, true)
    body.addEventListener('click', function () {
        console.log('body捕获')
    }, true)
    par.addEventListener('click', function () {
        console.log('par捕获')
    }, true)
    son.addEventListener('click', function () {
        console.log('son捕获')
    }, true)
    html.onclick = function () {
        console.log('html冒泡')
    }
    body.onclick = function () {
        console.log('body冒泡')
    }
    par.onclick = function () {
        console.log('par冒泡')
    }
    son.onclick = function (e) {
        // 阻止事件流
        if (e.stopPropagation) {
            e.stopPropagation()
            e.preventDefault()
        } else {
            e.cancelBubble = true;
            e.returnValue = false
        }
        console.log('son冒泡')
}
    //html捕获  body捕获   par捕获   son捕获  son冒泡

事件委托

利用事件冒泡，对以下几种情况进行处理

  1. 新添加进来的元素，需要事件的时候
  2. 做事件优化的时候
  3. 使用ajax的时候
<body>
    <button>按钮</button>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>

var btn = document.querySelector('button')
btn.onclick = function () {
    var div = document.createElement('div')
    div.innerHTML = "new"
    document.body.appendChild(div)
}
// document.body.onclick = function () {
//  alert(1)
// }

// 目标事件源： 真正触发事件的元素
document.body.onclick = function (e) {
    var obj = e.target
    // console.log(obj)
    //判断
    if (obj.tagName == 'DIV') {
        obj.style.background = "blue"
    }
    // if (obj.nodeName == "DIV") {
    //  obj.style.background = "blue"
    // }
}

事件

文档节点

html文档中，所有的构成部分都是节点，每一个节点和节点之间的关系构成了整个html文档树模型

文档中的全部节点 类型 nodeName nodeType nodeValue
文档节点 document #document 9 null
文本节点 文本 #text 3 文本内容
元素节点 标签 'DIV' //('大写标签名') 1 null
注释节点 注释 #comment 8 注释内容
属性节点 属性 属性名 2 属性值

节点的操作

节点的创建

节点的增加

节点的删除

节点的复制

节点的替代

获取节点

获取父元素

获取父辈的子元素

获取同辈的相近元素

    function insertAfter(newobj,oldobj){
        var next=oldobj.nextSibling;
        if(next){
            oldobj.parentNode.insertBefore(newobj,next)
        }else{
            oldobj.parentNode.appendChild(newobj);
        }
    }

Ajax

html: 超文本标记语言

xhtml: 过渡 版本

xml: 可扩展标记语言

<clothes>
  <color>red</color>
</clothes>

版本控制工具

svn：集中式管理工具

git：分布式管理工具

git clone

git pull (多人协作)

将修改提交到暂存区

git add/*

将暂存区的文件更新到本地的仓库

git commit -m '更新说明'

将本地仓库和网络仓库进行合并同步

git push

语义化

img email url number 表单的属性

viedio

canvas 用js作图的技术，帮助我们快速渲染页面，降低

websokit

拖拽

formdata

filereader

变量 let

块级作用域

函数

赋值 结构赋值

运算符 扩展运算符

类

导入导出

获取元素的方式

方法

上一篇 下一篇

猜你喜欢

热点阅读