Javascript基础

作者: 宁缺毋滥_e36a | 来源:发表于2019-03-11 15:27 被阅读0次

1. 标识符

所谓的标识符,就是指变量、函数、属性的名字，或者函数的参数。标识符主要有以下规则：

首字符必须是字母、下划线_或者美元符$
其他字符可以是字母、下划线_、美元符$或者数字
标识符的命名遵循驼峰命名，即myCar

用var操作符定义的变量将成为定义该变量的作用域中的局部变量.也就是说,如果在函数中使用var定义一个变量,那么这个变量在函数退出后就会被销毁,如:

function test() {
  var message = "hi";
}
test();
console.log(message); //错误

a = 5 // 省略var操作符,创建的是一个全局变量

2. 数据类型

基本数据类型: number, string, boolean, undefined, symbol, null

复杂数据类型: object (三种引用类型: function, arrary, object)

symbol理解使用请移步: 理解和使用ES6中的Symbol

特殊值: NaN, undefined, null

NaN有以下两个特点:

1.任何涉及NaN的操作都会返回NaN,包括NaN/0 // NaN.

2.NaN与任何值都不相等,包括NaN本身,NaN==NaN // false.

鉴于上面两点,判断一个变量是否是NaN需要使用javascript提供的isNaN()方法,例: isNaN(NaN) // true

undefined声明但是没有初始化的变量的值即为undefined,可以理解为此处应该有一个值,但是实际上没有,我们给它一个默认值undefined

// 声明的变量
var a; //相当于var a=undefined;
console.log(typeof a); //undefiend

// 注意一下未声明的变量会直接报错的
console.log(b); //!报错 b is not defined

null表示一个空对象指针，如果定义的变量准备在将来用于保存对象时，那么最好将变量初始化为null

typeof操作符返回一个字符串，表示未经计算的操作数的类型

let s = Symbol()
typeof 5 ---------> number
typeof NaN -------> number
typeof 'a' -------> string
typeof true ------> boolean
typeof undefined -> undefined
typeof s ---------> symbol

let fn = function() {}
typeof null ------> object
typeof [] --------> object
typeof {} --------> object
typeof fn --------> function

基本类型使用字面量赋值,使用instanceof并不能判断其变量类型,因为字面量就是我们所见到的字符,没有调用构造函数,也就不能在原型上找到

let a = 5
a instanceof Number // false

let b = false
b instanceof Boolean // false

let c = Symbol
c instanceof Symbol // false

但是复杂类型使用字面量赋值时,往往能判断其变量类型,这是因为在js中根本不存在真正的空对象，即使是最简单的{}对象也会包含从Object.prototype继承而来的属性和方法

let obj = {}
obj instanceof Object // true
[] instanceof Array // true

// 注意
null instanceof Object // false

3. 常用方法

所有的对象都有toLoacleString(),toString(),valueOf()

1.Number

isNaN(number) // 判断是否是NaN
number.toFixed(2) // 保留小数点后两位
number.toString() // 将数字转换成字符串

Number可以配合Math对象来使用
Math.random() // 随机取0-1的数
Math.abs(number) // 取绝对值
Math.round(number) // 四舍五入
Math.floor(number) // 向下取整
Math.ceil(number) // 向上取整

2.String

string.replace(searchValue, replaceValue) // 找到searchValue,只会在第一次的时候换成replaceValue,searchValue可以是正则表达式
'abcda'.replace('a', 'b') // 'bbcda'
'abcda'.replace(/a/g,'b') // 'bbcdb'

string.slice(start, end) // 从索引start到end的字符串,end可以为负数,负数表示倒数 
'abcd'.slice(0,3) //'abc'
'abcd'.slice(0,-1) //'abc'

string.split('.') // 以.分割字符串,结果为一个数组[] 
'192.168.1.0'.split('.') // ['192', '168', '1', '0']

3.Array

map：返回一个数组，其中每个元素都使用指定函数进行过转换。

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped); // [21, 22, 23, 24, 25, 26]

filter：返回一个数组，只有当指定函数返回true时，相应的元素才会被包含在这个数组中。

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered); // [2, 4]

reduce：基于给定函数累加值.

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced); // 21

find、findIndex、indexOf

find：返回与指定条件匹配的第一个实例，不会继续查找其他匹配的实例

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6 虽然5之后的元素都符合条件，但只返回第一个匹配的元素。

findIndex：这与find几乎完全相同，但不返回第一个匹配的元素，而是返回第一个匹配元素的索引。

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1

indexOf：与 findIndex 几乎完全相同，但它的参数不是一个函数，而是一个简单的值。

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
//1

push、pop、shift、unshift

栈(后进先出)

push：这是一个相对简单的方法，它将一个项添加到数组的末尾。它就地修改数组，函数本身会返回添加到数组中的项。

let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5

pop：从数组中删除最后一项。同样，它也是就地修改数组。函数本身返回从数组中删除的项。

let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4

队列(先进先出)

shift：从数组中删除第一个项。同样，它也是就地修改数组。函数本身返回从数组中删除的项。

let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr); // [2, 3, 4]
console.log(shifted); // 1

unshift：将一个或多个元素添加到数组的开头。同样，它也是就地修改数组。与其他方法不同的是，函数本身返回数组最新的长度。

let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr); // [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted); // 7

splice：通过删除或替换现有元素或者添加新元素来修改数组的内容。这个方法也是就地修改数组。

下面的代码示例的意思是：在数组的位置1上删除0个元素，并插入b。

let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')

slice：从指定的起始位置和结束位置之前返回数组的浅拷贝。如果未指定结束位置，则返回数组的其余部分。这个方法不会修改数组，只是返回所需的子集。

let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
console.log(sliced); // ['c', 'd']
console.log(arr); // ['a', 'b', 'c', 'd', 'e']

sort：根据提供的函数对数组进行排序。这个方法就地修改数组。如果函数返回负数或0，则顺序保持不变。如果返回正数，则交换元素顺序。

let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);
console.log(arr); // [-1, 1, 2, 3, 5, 7, 7]

更多方法请参考: MDN

4. 语法

==/!=先转换再比较(强制转型) ===/!==仅比较不转换

null == undefined; //true 它们是类似的值
null === undefined; //false 它们是不同类型的值

条件操作符又称三元运算符

let max = (num1>num2) ? num1 : num2

当判断一个范围时请使用if语句

var scroe = 80
if(scroe >= 90) {
    console.log("成绩为优");
}else if(scroe >= 80) {
    console.log("成绩为良")
}else if(scroe >= 60) {
    console.log("成绩为及格")
}else {
    console.log("成绩为不及格");
}

在对比有限个值时,值不能太多,一般在1-4之间,使用switch语句

switch(m) {
    case x:
        //语句
        break;
    case y: 
        //语句
        break;
    default:
        //语句
        break;
}

循环次数已知,选择for循环

for(初始化条件表达式;条件表达式;条件改变表达式) {
    //循环体
}

循环次数未知,但是循环结束条件已知选择while语句

while(条件表达式) {
    //循环体
}

循环体至少执行一次时,选择do while语句例如:要先考试才能知道是否及格

do{
    //循环体
}while(条件表达式)

var score = 48;
do {
    console.log('没及格,需要再来考试!');
    score += 15;
} while (score < 60);

break 直接跳出循环

var num = 0;
for (var i = 1; i < 10; i++) {
    if (i % 5 == 0) {
        break;
    }
    num++;
}
console.log(num); //4 当i=4时,num=4,再执行循环i=5,跳出循环,下面的num++并没有执行,此时num还是4;

continue 跳出本次循环,继续执行下面的循环

var num = 0;
for (var i = 1; i < 10; i++) {
    if (i % 5 == 0) {
        continue;
    }
    num++;
}
console.log(num); //当i=4和9时,跳过了num++,循环完成时num=8;

// 函数执行完之后会立即销毁!!!
function sum(num1, num2) {
    return num1 + num2; //函数是否需要返回值是要看我们是否需要用到函数的返回值
}

function hello() {//函数在执行完return之后会立即退出
    return;
    console.log('你好,世界!'); //这段语句不会执行
}

函数声明:函数声明整体提升,函数表达式/变量声明:函数表达式命名提升

function test(a,b) {
   console.log(a)  
   console.log(b) 
   var b = 234
   console.log(b)  
   a = 123
   console.log(a) 
   function a() {}
   var a
   b = 234
   var b = function () {}
   console.log(a)
   function b () {}
   console.log(b)
}
test(1) // 打印结果为 fn a, fn b, 234, 123, 123, fn

DOM+BOM

DOM 概念 -> 节点树

getElementById 元素(唯一)

getElementByTagName 集合

getElementByClassName 集合

querySelector("#id") querySelector(".class") 第一个元素

querySelectorAll("p") 集合

getAttribute 获取属性值

setAttribute 设置属性值

attribute & property

attribute就是DOM节点自带的属性，例如html中常用的id、class、title、align等。

而property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等

// 新增节点和移动节点
var div1 = document.getElementById('div1')
// 添加新节点
var p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
div1.appendChild(p1) // 添加新创建的元素
// 移动已有节点。注意，这里是“移动”，并不是拷贝
var p2 = document.getElementById('p2')
div1.appendChild(p2)

// 获取父元素
var div1 = document.getElementById('div1')
var parent = div1.parentElement

// 获取子元素
var div1 = document.getElementById('div1')
var child = div1.childNodes

// 删除节点
var div1 = document.getElementById('div1')
var child = div1.childNodes
div1.removeChild(child[0])

DOM事件流

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="demo">Click Me</div>
  <script>
    var box = document.querySelector("#demo");
    box.addEventListener('click', function() {
        console.log("hello")
    })
  </script>
</body>
</html>

单击了页面中的div:

事件冒泡: click事件会按照 div-->body-->html-->document传播。湖中投石子, 涟漪传播方向

事件捕获: click事件会按照 document-->html-->body-->div传播。

事件流 的三个阶段: 事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一
个阶段是事件冒泡阶段，可以在这个阶段对事件作出响应。

事件委托：由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。

例如: 要为li绑定点击事件,不使用事件委托我们就需要创建三个事件,运用事件委托,可以为父元素ul绑定事件,通过e.target得到实际目标元素

<ul class="loves">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    var loves = document.querySelector(".loves");
    loves.onclick = function(event) {  // event 事件对象
      // event.target就是目标元素
      console.log(event.target.innerText)
    }
</script>

BOM 操作

BOM（浏览器对象模型）是浏览器本身的一些信息的设置和获取，例如获取浏览器的宽度、高度，设置让浏览器跳转到哪个地址。

window.screen对象：包含有关用户屏幕的信息
window.location对象：用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面
window.history对象：浏览历史的前进后退等
window.navigator对象：常常用来获取浏览器信息、是否移动端访问等等

获取屏幕的宽度和高度

console.log(screen.width)
console.log(screen.height)

获取网址、协议、path、参数、hash 等

// 例如当前网址是 https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.href)  // https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.protocol) // https:
console.log(location.pathname) // /timeline/frontend
console.log(location.search) // ?a=10&b=10
console.log(location.hash) // #some

另外，还有调用浏览器的前进、后退功能等

history.back()
history.forward()

获取浏览器特性（即俗称的UA）然后识别客户端，例如判断是不是 Chrome 浏览器

var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

Javascript基础

1. 标识符

2. 数据类型

3. 常用方法

1.Number

2.String

3.Array

4. 语法

DOM+BOM

BOM 操作

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读