前端0:js基础

1.js是按顺序执行的,故把 <script> 内容放到 <head> 里,或放到 <body> 内容之前,与<script> 内容放到 <body> 内容之后 执行的效果会有所不同。经常会遇到:

  ①<head><script> 里修改图片路径 obj.src 失败,由于未加载 window.onload。

2.节点处理

  由于浏览器兼容性差异,各标签之间的空白也算为节点,index 随之变化。

3.查询字符串:JS与服务器的通信,避免URL等数据格式不正确即未经编码,导致通信错误。

1 function addQueryStringArg(url,name,value){
2 if(url.index("?")==-1){
3 url+="?";
4 }else{
5 url+="&";
6 }
7 url+=encodeURLComponent(name)+"="+encodeURLComponent(value);
8 return url;
9 }

4.数组处理:

  arr=null 数组删除

  arr.pop 去尾,返回尾巴

  arr.join(‘.‘)   数组转字符串,以 . 分开,一般配合 split

  arr.reduce(fn)  接收一个函数进行两两迭代,数组中的每个值(从左到右)开始合并,最终计算为一个值。

  arr.map(fn,cb)   参数为函数表达式及回调,fn(a,b,c) 参数默认为当前数组值,当前数组值索引,etc

  arr.shift() 删除头,返回头

  arr.unshift(‘a‘) 加头,返回length

  arr.push 加尾,返回length

  arr.splice(index,howmany,...itemn) 添加删除,返回原arr,index表示操作位置,index初始为0;howmany表示删除个数,howmany=0为不删除,改插入,插入index-1位置;...itemn为加入的参数若干,非纯函数,输出改变

  

var xs = [1,2,3,4,5];

// 不纯的
xs.splice(0,3);
//=> [1,2,3]

xs.splice(0,3);
//=> [4,5]

xs.splice(0,3);
//=> []

  纯函数:arr.slice(start,end) 提取,返回子arr,内容是从 start 处到 end-1,参数可负,原arr不变,纯函数输出不变

  Array.prototype.slice.apply(arguments) 类数组转数组 e.g.call

字符串处理:

  str.substring(start,end) 提取,返回子str,内容是从 start 处到 end-1,if (start<0) start=0,原str不变

  str.split() 分割,返回数组arr,若需要进一步split,注意:分割后为数组,故用for循环split

  str.parse() 转成json,注意:字符串中的属性要严格加上引号

  str.substr(start,length) 返回子str,注意:不建议使用

  字符串的部分修改可以使用replace 或者拼接

5.underscore对象处理:

  underscore 待整理

  if ( ‘a‘ in obj ) 判断对象 (json)obj 中是否有 a,注意 ‘a‘ 的 ‘‘,同样 obj 可以替换为 arr,但此时只能寻找下标 0,1,2...

json处理:

  json.stringify() 转成str

  json 转 url string:for in 遍历,push( = ) 存入数组,join(‘&‘) 转成 str,补套接字

  json.parse() 将字符串转换成 json

  遍历用 for in 后存入 push 数组

6. 

7.switch(true){case 80<n:document.write(‘优秀‘);break;}//当表达式为比较时,参数为布尔值。

8.Math.floor/Math.ceil/Math.round//要上下兼顾建议floor,使用Math.floor(Math.random()*(max-min+1)+min)

9.页面所获取的内容都是字符串,eg:typeof getElementById(ID).value

10.URL-encode处理避免读取错误请求 url:    encodeURLComponent()     

e.g.     encodeURLComponent("MTAuMTA4LjUyLjM2O2FkbWluO2ExMjM0NTY3OzgwMDA=")   //MTAuMTA4LjUyLjM2O2FkbWluO2ExMjM0NTY3OzgwMDA%3D

11.<button onclick=‘func(event)‘></button>//event必须通过实际参数形式传递给函数func(e),考虑是否需要全局window

{alert(e.target.value);}

12.javascript 是单线程的,但浏览器内部不是单线程的。你的一些 I/O 操作,定时器的计时和事件监听(click,keydown...)等都是由浏览器提供的其他线程来完成的。

改变 this 指向:将 this 添加到指定环境中,若环境为 null,则指向 window。

  .call(环境,参数1,参数2)

  .apply(环境,[参数1,参数2])

  .bind(环境,参数1,参数2...)

  总结:call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加。

  e.g.

var a = {
    user:"追梦子",
    fn:function(e,d,f){
        console.log(this.user); //追梦子
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10); //或者 var d = b.bind(a,10,1,2);  或者 var e = b.bind(a)
c(1,2);

13.动态创建的dom元素

  在此基础上添加监听事件,需要全局方法 <dom onclick=‘window.fn()‘ /> 或查询相关资料。

14.禁止使用 遍历节点添加事件绑定

  解决方法:父级监听事件委托/代理 addEventListener(‘events‘, fn, false);

15.try catch 异步编程中

  try 代码块中避免使用赋值逻辑,并结合类型检查 typeof

  朴灵曾提到:异步编程的难点之一是异常处理,书中描述 "尝试对异步方法进行try/catch操作只能捕获当次事件循环内的异常,对call back执行时抛出的异常将无能为力"。

原文地址:https://www.cnblogs.com/yuqlblog/p/11179989.html

时间: 2024-10-12 15:43:46

前端0:js基础的相关文章

前端之js基础篇

JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准.次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版. 该标准一开始就是针对JavaScript语言制定的,但是没有称其为JavaScript,有两个方面的原因.一是商

js基础——运算符

爱创课堂前端培训--js基础 运算符 一.运算符 运算符(Operators,也翻译为操作符),是发起运算的最简单形式. 分类:(运算符的分类仁者见智,本课程进行一下分类.) 数学运算符(Arithmetic operators) 比较运算符(Comparison operators) 逻辑运算符(Logical operators) 赋值运算符(Assignment operators) 按位运算符(Bitwise operators) 条件 (三元) 运算符(Conditional oper

JS基础知识回顾:ECMAScript的语法(三)

ECMA-262描述了一组用于操作数据值的操作符,包括算术操作符.位操作符.关系操作符和相等操作符. ECMAScript操作符的与众不同之处在于,他们能够适用于很多值,例如字符串.数字值.布尔值.甚至是对象. 在将这些操作符应用于对象时,相应的操作符通常都会调用对象的valueOf()和(或)toString()方法,以便取得可以操作的值. 只能操作一个值的操作符叫做一元操作符. 递增和递减操作符直接借鉴自C,各有前置型和后置型两个版本:a++.++a.a--.--a 这四种操作符不仅适用于整

《饿了么大前端 Node.js 进阶教程》—Javascript 基础问题—引用传递

<饿了么大前端 Node.js 进阶教程>地址:https://github.com/ElemeFE/node-interview 1.如何编写一个 json 对象的拷贝函数 function clone(obj){ var result; if (Array.isArray(obj)) { result = []; obj.forEach((item) => { result.push(clone(item)); }); } else if (typeof obj === 'objec

《饿了么大前端 Node.js 进阶教程》—Javascript 基础问题—作用域

<饿了么大前端 Node.js 进阶教程>地址:https://github.com/ElemeFE/node-interview 作用域从某种意义上来说是个难点,它需要你真真正正的了解JS的分词.词法分析,语法分析,代码生成,LHS查询,RHS查询等深层的东西. 如果不知道可以读一下<你不知道的JavaScript:上卷> let和var的区别 1.let只在声明的代码块中有效,{}中使用let声明变量,外面是访问不到的,这就是块级作用域 2.不存在变量提升问题 3.重复声明会报

《饿了么大前端 Node.js 进阶教程》—Javascript 基础问题—类型判断

lodash的类型判断源码 <饿了么大前端 Node.js 进阶教程>地址:https://github.com/ElemeFE/node-interview  lodash介绍:lodash是目前很流行的JS工具库,它封装了许多JS常用到的工具方法,在阅读源码时,你会发现代码冗长:官网说这是性能优化,不管你信不信,反正我信了! (1)null 类型 function isNull(value) { return value === null; } (2)number类型 function i

js基础--javascript基础概念之数组(二)

js基础--javascript基础概念之数组 数组栈方法 数组可以像栈一样.栈是一种先进后出的数据结构,最先添加的数据最后一个出来.栈方法添加数据也称为 推入  移除数据称为 弹出. js为数值栈方法提供了 push()   和  pop() ;  两个方法. push() push() 方法接受参数就是你要添加进入到数组的值.push()  方法会将他们逐一添加到数组的末尾  数组的length属性会跟着更新数据. *push(多个数组元素值) 返回的修改后的数组长度 var array =

JS基础知识回顾:引用类型(一)

在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起,而对象时引用类型的一个实例. 尽管ECMAScript从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构,所以虽然说引用类型与类看起来想死,但他们并不是相同的概念. 不过引用类型有的时候也可以被称为对象定义,因为他们描述的是一类对象所具有的属性和方法. 新对象是使用new操作符后跟一个构造函数来实现的,构造函数本身就是一个函数,只不过该函数时处于创建新对象的目的而定义的. ECMASc

JS基础复习

js基础语法 Netcape js基础语法规范(ECMAScript1,2,3,3.1,5(IE9),6   ES    ES6=es2015) DOM BOM BOM :是由浏览器厂商各自实现的,所以差异比较大 DOM:相关的规范  是由W3C维护的 Node的优势  没有浏览器的兼容性问题 前端项目尽量不要使用ES6,需要考虑兼容性问题 --------------------------------数据类型--------------------------- 1.数据类型分类: 基本数据

JS基础知识回顾:变量、作用域和内存问题

ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值. 基本类型值指的是简单的数据段,而引用类型值指的是那些可能由多个值构成的对象. 引用类型的值是保存在内存中的对象,与其他语言不同,JavaScript不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间. 在操作对象时,实际上是在操作对象的引用而不是实际的对象. 在很多语言中,字符串以对象的形式来表示,因此被认为是引用类型的,ECMAScript放弃了这一传统. 定义基本类型值和引用类型值的方式是类似的:创建