JS的ES5和ES6新增的方法(重点)
ES5 EcmaScript5 严格模式和高阶函数
严格模式
1.全局严格 函数外的是全局
2.局部严格 函数内部的是局部
使用严格模式 "use strict" 必须放在代码的第一行位置,否则失效
在严格模式中window 是顶级对象,宿主对象
为什么使用严格模式
总结:严谨 安全 速度
1.消除JavaScript语法的一些不合理,不严谨支出,减少一些怪异的行为
2.代码运行的一些不安全之处,保证代码运行的安全
3.提高编译器效率,增加运行速度
注意细节
1.声明函数必须使用关键字 var let constant
2.禁止函数内this指向window,默认指向undefined,普通函数默认this指向window
3.禁止使用8进制,不能使用0开头,0x是十六进制
4.不允许在非函数的代码块内声明函数
if(true) function fn(){} if没有大括号就报错
5.arguments 与参数不同步 (arguments不变)
arguments 1).只能在函数内部出现和使用
2).是一个伪数组 3).动态的接收实参
6.eval函数作用域
作用域:
a.全局作用域 b.局部作用域 c.严格模式下的eval局部作用域 d.ES6的块级作用域(let,const)
eval()函数 会将传入的字符串当做js代码来执行 使用eval() 解析数组与对象
7.delete 变量 报错
ES5方法
ES5----bind apply call
绑定一个新对象, 让函数中的this指向该对象, 一般在定时器中使用较多。
bind:改变this指向,但是不会立即执行
bind:第2个参数,给函数传递参数,且它优先于函数的参数
setTimeout和setInterval函数的this默认始终是window
call() 改变this执行,并且会立即执行
call() 从第2个参数开始,都是被调用函数的参数,可以有多个参数
apply() 改变this执行,并且会立即执行
apply() 只有两个参数,第二个参数是数组
据说: call效率高于apply,预先使用call
function fn(o){
var str=Object.prototype.toString.call(o)
return str.slice(1,str.length-1).split(/ /)[1]
}
var arr=[]
console.log(fn(arr));
与this指向相关的知识点
- bind,call,apply 改变this的指向
- new 操作符,也能改变this的指向
- 函数内的this,默认指向window
- 对象里的方法的this,默认指向当前的对象
- 事件里的this,指向当前的绑定者
- 箭头函数里的this指向上下文对象(环境)
- 严格模式下函数的this是undefined
- 类的方法的this,指向当前类的实例
- 类的静态方法的this,指向当前的类
高阶函数
forEach map reduce some every filter indexOf ...
forEach、map以及reduce的相同点:
都是用于处理数组 都不兼容IE8及以下
forEach、map以及reduce的不同点:
forEach 方法是将数组中的每一个值取出做一些程序员想让他们做的事情
map 方法是将数组中的每一个值放入一个方法中做一些程序员想让他们做的事情后可以返回一个新的数组 reduce 方法 将数组中的每一个值与前面的值处理后得到的最终值
ES6
ES6新增关键字
let 具有块级作用域
const 声明的是常量,一旦声明,值将是不可变的, const 也具有块级作用域 , const 不可重复声明
let 与const的区别?
相同点:
let 和const 都可以避免变量提升 都有块级作用域
不同点:
let 声明的值,可以被修改
const 声明的值是 值类型,不能被修改 / 引用类型,可以修改值,不能修改类型
块级作用域
ES6以前,只有全局作用域和函数局部作用域,ES6之后加入块级作用域,一个大括号{}我们称之为一个代码块,一个大括号{}的内部就是块级作用域
利用块级作用域可以有效解决以下问题
1.防止全局变量泄露
2.防止变量提升带来的覆盖问题,友好遵循了先定义,后使用的规则
ES6 - String新增方法
ES3的字符串方法有哪些?
charAt() charCodeAt() String.fromCharCode() search() match() indexOf() lastIndexOf() slice() substring() substr() replace()
toUpperCase() toLowerCase() concat()和+ split() trim() toString()
ES6方法
padStart()从前填充
padEnd()从后填充
repeat(n)重复n次字符 返回一个新字符串
includes() indexOf,lastIndexOf 返回布尔值,表示是否找到了参数字符串
startsWith() 返回布尔值,表示参数字符串是否在源字符串的头部
endsWith() 返回布尔值,表示参数字符串是否在源字符串的尾部
字符串模板 `${xx}`
ES6-新增数组方法
ES3+ES5数组的方法
push() pop() shift() unshift() sort() reverse() slice() splice() concat() join() Array.isArray() indexOf() forEach() map() some() every() reduce() filter()
ES6新增
Array.from() 把伪数组转换成真的数组
Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map) 还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理
Array.of() 将一组值转换为数组
find 找数组对象 findIndex()找下标
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
for-of 遍历集合
这是目前遍历数组最简洁和直接的语法;它避免了for-in的所有缺陷;
与forEach()不一样,它支持break,continue和return
entries() keys() values()
可以用for-of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历
ES6-函数增强
箭头函数是函数的一种语法糖(拉姆达 lambda)
1.箭头函数的this指向上下文对象(环境)
2.箭头函数不能被实例化,它没有构造器
3.箭头函数绑定给事件,this始终指向window
4.箭头函数的this不能被call,bind,apply改变
tips:
如果只有1个形参,可以不用写小括号
返回的内容,只有一句话,就省略return 与 {} 括号
如果返回的是一个对象,{} 被理解为函数的{} ,而不是对象的{}
扩展运算符
(spread)是三个点(...),将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用
函数默认参数
function fn(n=100){
return n
}
console.log(fn());//100
console.log(fn(200));//200
console.log(fn(300));//300
ES6-对象的增强
Object.is() 比较 属于全等于 ===
Object.assign() 合并,浅拷贝
//方式的简写
var obj={
name:"zhang",
show(){
console.log(this);
}
}
obj.show()
//属性的简写
var name="lisi"
var obj1={name:name}
var obj2={name}
console.log(obj1);
console.log(obj2);
//[]定义属性和方法
var a='na'
var b='me'
var temp='sayHi'
var obj3={
[a+b]:'wang',
['age']:20,
[temp](){
}
}
console.log(obj3);
ES6-Set
数据结构Set类似于数组,但是成员的值都是唯一的,没有重复的值。
Set的属性和方法:
size : 数量
add(value):添加某个值,返回Set结构本身
delete(value):删除某个值,返回一个布尔值,表示删除是否成功
has(value):返回一个布尔值,表示该值是否为Set的成员
clear():清除所有成员,没有返回值
ES6-WeakSet
WeakSet和Set一样都不存储重复的元素, 用法基本类似,但有一些不同点, WeakSet的成员只能是对象,而不能是其他类型的值。
ES6-Map
Map 是一个“超对象”,其 key 除了可以是 String 类型之外,还可以为其他类型(如:对象)
方法
size:返回成员总数。
set(key, value):设置一个键值对。
get(key):读取一个键。
has(key):返回一个布尔值,表示某个键是否在Map数据结构中。
delete(key):删除某个键。
clear():清除所有成员。
keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回所有成员的遍历器。
ES6-解构赋值
数组(完全对称,不完全对称)
var [a,[b,c],d] = [1,[2,3],4];
对象 (属性名相同,属性名不同)
var {name,age} = {name:'zhangsan',age:19}
函数
function func([x,y]){return x - y};
console.log( func([19,11]) );
解构赋值可以有效解决以下2个问题
1.快速提取JSON字符串 2.交换数组中的2个元素
ES6-Class
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
class Point {
constructor(x, y) {
this.x = x; this.y = y;
}
toString() {
return '('+this.x+', '+this.y+')';
}}
注意: constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。
Class之间可以通过extends关键字,实现继承
ES6-Symbol
Symbol 是ES6引入的一种新的数据类型,来表示独一无二的值
//创建Symbol值 ,不能添加new
var s1 = Symbol();
var s2 = Symbol();
s1 === s2; // false
//有参数的情况
var s1 = Symbol("foo");
var s2 = Symbol("foo");
s1 === s2; // false
ES6-Generator
Generator Function: 生成器函数, 最大特点就是可以交出函数的执行权(即暂停执行)Generator函数的写法: *号是为了区分于普通函数,
function* gen(x){
var y = yield x + 2;
return y;
}
var g = gen(1);
console.log(g.next()) // { value: 3, done: false }
console.log(g.next()) // { value: undefined, done: true }
整个Generator函数就是一个封装的异步任务,异步操作需要暂停的地方,都用 yield 语句注明,
next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法,会返回一个对象,表示当前阶段的信息( value 属性和 done 属性)。
value 属性是 yield 语句后面表达式的值,表示当前阶段的值;
done 属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段
JS中各种循环的区别:
for : JS语言诞生就有的循环, 也是使用最多的循环方式, 很多计算机语言都有的循环方式, 可用于遍历数组,字符串;
while : 很多计算机语言也都有的循环方式, 和for循环在使用上的区别是: for循环一般用于已知遍历次数的情况,while一般用在不知道遍历次数的情况;
do-while: 和while有点类似, 使用较少
for-in : 专门用于遍历对象的循环方式 , 也可以遍历数组,但不推荐遍历数组
forEach: ES5新增的遍历方式,支持IE9+, 遍历数组的写法比较简洁,快速, 但是不能中断循环,不能使用break和continue;
for-of : ES6新增的遍历方式, 和for-in用法类似, 但比for-in强大很多, for-of可以遍历数组, 字符串, Set, Map等.
补充面试题
attribute和property的区别?
attribute dom对象的属性 ,标签上 href,src,type,class,id...
property js对象的属性
如何检测数据类型?
1.typeof,
2.instanceof,
3.Object.prototype.toString.call()
使用eval() 解析数组与对象
1. JSON.parse() 2. eval()
若有收获,就点个赞吧
JS的ES5和ES6新增的方法(重点)相关推荐
- ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解 在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...
- H5新增、CSS3以及ES5、ES6新增特性
1.H5新增 新增特性:语义化标签.音视频处理API.canvas.拖拽释放API.history API.地理位置API.webSocket.web存储的localStorage和SessionSt ...
- ES5实现ES6的一些方法-call,bind,is,promise
Object.is Object.is = function(x, y) {// SameValue algorithmif (x === y) { // Steps 1-5, 7-10// Step ...
- ES6 - 字符串模板与新增字符串方法
字符串模板 解决痛点:简化字符串拼接,比如innerHTML,url等 语法格式:反引号 let name = 'murphy'; let age = 18; console.log(`名字${nam ...
- 常用浏览器内核的了解、ES5和ES6的区别、ES6的更新的笔试题
对浏览器的内核的了解?有哪些内核?(重点6分) 浏览器要渲染出网页给用户看,必须加载html编码和js脚本,渲染引擎渲染页面的UI和js执行引擎操作内存,就是浏览器的的重要组成程序:内核 根据不同的浏 ...
- 2023前端面试题------JS 面试题(2) es6
2023前端面试题------es6 面试题 三. JS高频面试题 15. 事件循环 16. 微任务和宏任务 17. http相关 18. 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生 ...
- ES6新增关键字:let和const及let的常用场景
1.ES6: ● 我们所说的ES5和ES6其实就是在js语法的发展过程中的一个版本而已 ● ECMAScript就是js的语法,ES6新增了一些功能 2.let和const关键字 和var的区别 ● ...
- ES5和ES6继承的区别
ES5的继承方法可以看这篇: https://blog.csdn.net/qq593249106/article/details/83098432 ES5与ES6的继承方法对照: ES5 functi ...
- ES6/02/创建对象,构造函数和原型,原型和原型链,this指向,类,ES5新增的方法,数组方法,回调函数,ES5新增的字符串方法,ES5中新增的对象方法
创建对象 1,利用new Object()创建对象 var obj1 =new Object(); 2,利用对象字面量创建对象 var obj2={}; 3,利用构造函数创建对象 function S ...
最新文章
- 清华理工男,跳了7年舞,来华为一年当了PL,这什么小哥哥
- JS中的Math.ceil和Math.floor函数的用法
- Win7下telnet使用
- linq4j java8_Linq4j简明介绍
- VisualVM初次使用BTrace功能方法步骤
- 61. Catalog 分类页面商品排序
- 数理化计算机电子 武大水平,全方位比较南开大学、武汉大学——以数据为基础.doc...
- 用c语言编程图书管理系统,C语言图书管理系统简洁版
- 关于linux中文输入法
- 懒人分析jQuery源码
- 日常折腾日记:手动配置UG二次开发环境——使用NX Open C++和Visual Studio
- 显微镜自动聚焦原理是什么_光学显微镜自动聚焦算法研究
- cocos creator 使用anysdk接入admod
- oCPC和oCPM的本质区别是什么?
- libreoffice python_如何在LibreOffice中运行python宏?
- c++读取文本中文乱码
- matlab 局部极值点,matlab 图像局部求极值
- 四面阿里,因为最后一个问题与offer失之交臂
- 一文带你了解安全多方计算
- 为什么股票投资是世界上最难成功的行业
热门文章
- 立创EDA专业版入门经验分享(1)——对标AD的快捷操作
- 锂电池行业NMP废气处理——吸附回收
- Vue Element UI Image Carousel 在滚动的图片上实现文本的缩略显示与全部显示
- 在Centos7下使用reportlab输出中文到pdf文档
- mysql创建子账号权限设置
- 介绍几种java反编译软件使用
- 几千微信好友是这样来的
- 【NLP基础理论】 09 分布语义学(Distributional Semantics))
- 解决安卓视频同步(下载)到本地,视频加密解密播放问题
- 陈妍希和你一起带“蛙儿子”做公益,守护宝贝她有话跟你说!