12-ES5和ES6

最新推荐文章于 2022-10-09 15:22:02 发布
最新推荐文章于 2022-10-09 15:22:02 发布
阅读量107 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44144457/article/details/124716514
版权

严格模式

  1. 如何启动严格模式？ 在作用域的开头添加’use strict’;
  2. 严格模式有哪些影响？
  • 必须使用关键字声明变量
  • 函数中的形参不允许重复
  • 函数中的形参值的改变不再影响arguments中值
  • 取消了arguments中的callee方法
  • 取消了解析对象的with方法
  • 取消了八进制
  • 新增关键字eval arguments

修改上下文中的this指向

这两个修改this指向的方法都是 函数的方法，都是用于修改this指向。

  1. call(对象,参数1，参数2，……) ： 返回对象
  2. apply(对象,数组||arguments) ： 返回对象
  3. bind(对象,参数1，参数2，……) ： 返回函数

JSON的方法

  1. JSON.parse() : 将JSON格式的字符串转为json对象
  2. JSON.stringify() : 将对象转为JSON格式的字符串。

let const

let : 用于声明变量的关键字

let 与 var的区别

  1. let不再做变量提升，只能先声明，后使用。
  2. let声明的全局变量不再是window对象的属性了。
  3. let在同一个作用域中，相同的变量只能声明一次。
  4. let声明会产生块级作用域，声明在块内的变量，只能在块内使用。(for循环有两个作用域，for本身是一个作用域，for循环体又是一个子级作用域)
//获取所有的li
let o_li = document.querySelectorAll('ul li');

/*
    i = 5
    len = 5;
    o_li[0].onclick = function(){
        alert(i);
    }
    o_li[1].onclick = function(){
        alert(i);
    }
    o_li[2].onclick = function(){
        alert(i);
    }
    o_li[3].onclick = function(){
        alert(i);
    }
    o_li[4].onclick = function(){
        alert(i);
    }
*/
//遍历每一个li，输出当前li所下标
// for(var i = 0,len = o_li.length;i < len;i ++){
//     o_li[i].onclick = function(){
//         alert(i);
//     }
// }

/*
    j = 0
    len = 5
    o_li[0].onclick = function(){
        alert(j);
    }
*/
/*
    j = 1
    len = 5
    o_li[1].onclick = function(){
        alert(j);
    }
*/
/*
    j = 2
    len = 5
    o_li[2].onclick = function(){
        alert(j);
    }
*/
/*
    j = 3
    len = 5
    o_li[3].onclick = function(){
        alert(j);
    }
*/
/*
    j = 4
    len = 5
    o_li[1].onclick = function(){
        alert(j);
    }
*/
/*
    j = 5
    len = 5
    
*/
for(let j = 0,len = o_li.length;j < len;j ++){
    o_li[j].onclick = function(){
        alert(j);
    }
}

const : 用于声明常量

  1. const常量只能声明一次，不能再进行赋值更改。
  2. 复合数据类型的数据，只要不改变引用地址，那么符合常量的要求。

变量的解构赋值

  1. 数组的解构赋值，可以快速读取数组中的元素。
//声明数组
let arr = [1,2,3,4];
//解构赋值，读取数组中的元素
let [a,b,c,d] = arr;
console.log(a,b,c,d);
//可以快速交换两个变量中的数据
[a,b] = [b,a];
console.log(a,b,c,d);
  1. 对象的解构赋值，可以快速读取对象中的属性。
// //声明对象
// let obj = {id : 1,name : '手机',price : 3999,num : 2};
// //快速读取对象中的属性或方法
// let {num,name,id,price} = obj;
// console.log(id,name,price,num);

//在ES6中，如果对象中的属性名和属性值的名称相同时，可以简写为一个名字

let id = 1;
let name = '手机';
let price = 3999;
let num = 2;

let obj = {
    id : id,
    name : name,
    price : price,
    num : num
}
console.log(obj);
let object = {
    id,
    name,
    price,
    num
}
console.log(object);
  1. 解构赋值的好处：
  1. 可以快速读取数组中的元素或对象中的属性
  2. 可以快速交换两个变量中的值
  3. 函数中的形参可以设置默认值了
  4. 函数中的形参可以不按照顺序传递参数了
  5. 函数中的return可以返回多个数据了
function fn({a = 1,b = 2,c = 3}){
    if(a < b){
        [a,b] = [b,a];
    }
    if(a < c){
        [a,c] = [c,a];
    }
    if(b < c){
        [b,c] = [c,b];
    }
    return [a,b,c];
}
let [x,y,z] = fn({b : 5,a : 4,c : 6});
console.log(x,y,z);

字符串新增方法

  1. includes(‘字符串’,start) : 检测父串中是否包含有子串，如果有，则返回true,否则，返回false, start: 从指定的下标向后查找，且包含start的位置。
  2. startsWith(‘字符串’,start) : 检测子串是否在父串的开头部分，返回布尔值, start: 从指定的下标向后查找，且包含start的位置。
  3. endsWith(‘字符串’,start) ：检测子串是否在父串结尾部分，返回布尔值, start: 从指定的下标向前查找，且不包含start的位置。
//声明一个字符串
let str = 'how do you do';
console.log(str.includes('do'));  //true
console.log(str.startsWith('do')); //false
console.log(str.endsWith('do')); //true

console.log(str.includes('do',4));  //true
console.log(str.startsWith('do',4)); //true
console.log(str.endsWith('do',5)); //false

console.log(str.endsWith('do',6)); //true
  1. repeat(n) : 重复字符串。

n : 如果n 是一个正整数，则正常重复字符串。
n : 如果n 是一个其它类型的数据，则将其它类型转为Number类型，继续重复。（如果不能转为数字，则转为NaN，按0次算）
n : 如果是小于等于-1 的数据，直接报错。

let str = 'do';
console.log(str.repeat(3)); //'dododo';
console.log(str.repeat(0)); //'';
console.log(str.repeat(1)); //'do';
console.log(str.repeat('3')); //'dododo';
console.log(str.repeat('3a')); //'';  NaN按0次算
console.log(str.repeat(true)); //'do';
console.log(str.repeat(false)); //'';
console.log(str.repeat(-0.3)); //'';
console.log(str.repeat(-3)); //报错;
  1. … : 展开运算符
//声明一个字符串
// let str = 'hello';
// let arr = [... str];
// console.log(arr);
  1. 模板字符串： ${变量}

箭头函数

() => {}

  1. 不利于阅读
  2. 没有自己的this指向，箭头函数中的this指向了上下文中的对象。
  3. 箭头函数不能实现构造函数
  4. 不能new 箭头函数
  5. 推荐在回调函数里使用

回调函数：当一个函数作为另一个函数的参数时，这个函数称为回调函数。

Symbol

ES6新增的一种基本数据类型Symbol，这个数据类型可以确保变量中值的唯一性。

Set 集合 (特点：具有自动去除重复元素的功能)

  1. 如何创建set对象？
// let set = new Set(); //空的set对象
let set = new Set([1,2,1,2,3,2,1,2,4]);
  1. 属性是什么？

set.size : 获取set对象的长度

  1. 方法是什么？

set.add(元素，元素，……) : 添加元素，返回set对象
set.has(元素) : 检测元素是否存在，返回布尔值
set.delete(元素) : 删除指定的元素，返回布尔值
set.clear() : 清空set对象
set.forEach((value,key,set) => {}) : 遍历set对象
set.keys() : 获取所有的key
set.values() : 获取所有的value
set.entries() : 获取所有的key和value

循环：for of

for(变量 of set集合){
    //语句组;
}

let set = new Set();
//添加元素
set.add(1).add(2).add(1).add(3).add(4).add(5).add(6);
//检测元素是否存在
console.log(set.has(2));
//删除元素
console.log(set.delete(3));
//清空set对象
// set.clear();
//获取所有的key
console.log(set.keys());
//通过for of 遍历所有的key
for(let key of set.keys()){
    console.log(key);
}
//获取所有的value，并遍历出来
for(let value of set.values()){
    console.log(value);
}
//获取所有的key和value
for(let [key,value] of set.entries()){
    console.log(key,value);
}
//遍历set对象
set.forEach((value,key,set) => {
    console.log(key + '=> ' + value);
})
console.log(set);

Map {key : value}

  1. 如何创建map对象？
//创建空的map对象
// let map = new Map();
//初始化map对象
let map = new Map([
    [1,1],
    ['1',2],
    [true,3],
    [3,4]
])
  1. map对象的属性？

map.size : 获取map对象的长度

  1. map对象的方法？

map.set(key,value) : 添加元素，返回map对象
map.get(key) : 获取map对象中的属性
map.has(key) : 检测属性是否存在，返回布尔值
map.delete(key) : 删除指定的属性，返回布尔值
map.clear() : 清空map对象
map.forEach((value,key,map) => {}) : 遍历map对象
map.keys() : 获取所有的key
map.values() : 获取所有的value
map.entries() : 获取所有的key和value

//创建一个空的map对象
let map = new Map();
//添加元素
map.set(1,'one').set(2,'two').set(3,'three').set(4,'four').set(5,'five').set(6,'six');
//获取元素
console.log(map.get(2));
//删除元素
console.log(map.delete(2));
//检测元素是否存在
console.log(map.has(2));
//清空map对象
// map.clear();
//获取所有的key，并通过for of 遍历
for(let key of map.keys()){
    console.log(key);
}
//获取所有的value，并通过for of 遍历
for(let value of map.values()){
    console.log(value);
}
//获取所有的key和value，并通过for of 遍历
for(let [key,value] of map.entries()){
    console.log(key,value);
}
map.forEach((value,key,map) => {
    console.log(key + '=>' + value);
})

for in 和 for of的区别？

  1. for in中的循环变量表示 下标或key
  2. for of中的循环变量表示 元素或value
let arr = [1,2,3,4];
//for in
for(let i in arr){
    console.log(i); //i 代表下标
}
//for of 
for(let j of arr){
    console.log(j); //j 代表元素
}

生成器函数Generator

  1. 是ES6提出的一种异步编程解决方案。
  2. 异步 ： 同时进行的操作
  3. 同步 ： 按步骤执行的操作
  4. 异步编程有哪些问题？

让异步程序按顺序执行.
依赖调用的问题。

//生成器函数
function * fn(){
    yield 'how';
    yield 'are';
    yield 'you';
    return '?';
}
//     console.log(fn());
let fun = fn();
console.log(fun.next()); //{value: 'how', done: false}
// value : 表示产生的值
// done : 当前的状态   false : 表示后面还有语句等待执行。true : 表示后面没有语句了，结束了。
console.log(fun.next()); //{value: 'are', done: false}
console.log(fun.next()); //{value: 'you',done: false}
console.log(fun.next()); //{value: '?',done: true}
console.log(fun.next()); //{value: undefined,done: true}
console.log(fun.next()); //{value: undefined,done: true}
console.log(fun.next()); //{value: undefined,done: true}
console.log(fun.next()); //{value: undefined,done: true}

Class 类

//ES5
function 函数名([参数]){ //函数名 : 大驼峰
    //属性
    this.属性名 = 属性值;
    this.属性名 = 属性值;
    //方法
    this.方法名 = function([参数]){
        //功能实现
    }
}
//ES6
class 类名{  //类名：大驼峰
    //构造函数
    constructor([参数,参数]){
        //设置属性
        this.属性名 = 属性值;
        this.属性名 = 属性值;
    }
    //方法
    方法([参数]){
        //功能实现
    }
}

extends : 继承

class 子类名 extends 父类名{
    constructor([参数]){
        super([参数]);
    }
}
笨兜兜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
七、Es5和字符串
qq_59614745的博客
03-24 149
Es5和字符串
ES5和字符串
m0_65463616的博客
03-24 145
js在产生的时候，年代比较早，当时的web需求比较少，所以刚开始的js功能比较少，语法没有特别严谨。随着时代的发展和web应用的普及，js需要更多的功能，以及更严谨的语法，所以，js会有版本的升级。第一版的js是ECMA一开始统一了标准以后的版本。我们现在的所使用的语法，大多是ECMAScript版本3的语法，简称es3。到目前为止，已经有了es7,8,9,甚至es10 的版本了。近几年，基本每年都会有新的版本更新。每个版本的更新，都需要浏览器支持才能运行，但浏览器不会在js更新之后，立马更新。
Es5，Es6中数组和字符串新增api
qq_63758795的博客
04-27 381
Es5，Es6中数组和字符串新增api
javascript语法 --- forEach()，map()，filter()，includes()，startsWith()，find()，some()，every()
qq_35415374的博客
10-17 373
arr.forEach() 遍历数组全部元素，利用回调函数对数组进行操作，自动遍历数组.length次数，且无法break中途跳出循环，因此不可控。 不支持return操作输出，return只用于控制循环是否跳出当前循环。 var arr = [1,2,3,4,5,] ; arr.forEach(function(item,index,arr){ console.log(item...
前端学习之JavaScript es6对比es5的新增方法
qq_45839045的博客
03-02 390
声明变量 新增let、const两种方法 let let的出现是为了弥补var将变量挂在window上的缺陷 与var不同： 1.不属于window 该变量不会挂载在window顶级对象上，而是新建一个对象。 ,2.不允许重复声明 var可以多次重复声明（最后一次声明会覆盖前面的声明），而let不能（会报错）可以避免重复命名 3.不存在变量提升（严格来说存在，但是会先被赋值，不会初始化） 先打印，再赋值会报错 4.暂时性死区 变量会绑定在块级作用域中，不受全局影响。 变量在作用域内已经存在，但必须在let/
React-ES5-To-ES6-清单：缺少的将ES5 React升级到ES6 +的手册
02-05
但是，随着ES6及更高版本现在被更广泛地接受，并借助等译程序工具，我们可以逐步淘汰一些ES5代码并在React开发中采用一些新JavaScript功能。 这是一个检查列表，可帮助您在React中将ES5代码转换为ES。 欢迎您为...
javascript-practice-es6:练习ES5至ES6代码
05-12
本实践项目主要聚焦于从ES5到ES6的过渡，通过一系列小代码片段帮助开发者深入理解和掌握ES6的新特性。 1. **箭头函数**： ES6中的箭头函数改变了函数的定义方式，语法更加简洁。例如，`function add(a, b) { ...
详解vue-cli+es6引入es5写的js(两种方法)
10-17
本文通过两种方法给大家介绍vue-cli+es6引入es5写的js，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
gulp-es6-node-module:es6-node-module 库的 gulp 包装器，旨在支持 es6-es5 构建
07-05
es6-node-module 库的 gulp 包装器，旨在支持 es6-es5 构建。 用法 安装： npm install gulp-es6-node-module 基本用法： gulp . task ( 'compileES5' , function ( ) { return gulp . src ( 'lib/**/*.js' ) ...
js兼容es5-es6.rar
12-03
1. `es6-to-es5.js`：这是一个可能的转换脚本，将ES6代码转换成ES5语法，使得老版本浏览器能理解。 2. `polyfills.js`：包含了一系列的polyfill函数，用于模拟ES6的特性，例如`Array.prototype.forEach`，`Promise`...
ES5和ES6新增常见方法
tangyu520lehua的博客
10-09 454
ES5和ES6新增常见方法
ES6语法篇：字符串新增的includes(), startsWith(), endsWith()三种实例化方法比较
www_web_com的博客
05-17 1512
在es6之前，真正意义上能够判断一个字符是否在一个字符串里面的方法只有indexOf，目前ES6新增了三个新的方法： includes()方法 该方法返回一个布尔值，true为找到了参数字符串。 let str = "hello world!"; str.includes('he') //true startsWith()方法 该方法判断一个字符串是否在另一个字符串的头部，返回一个布尔值，tru...
在javascript里 startsWith 或者 endsWith 这样的方法
wzp6010625的博客
11-24 1427
String.prototype.endWith=function(str){ if(str==null||str==""||this.length==0||str.length>this.length) return false; if(this.substring(this.length-str.length)==str) return true; else
ECMAScript6 (ES6、ES2015)新特性详解
完善飞跃
01-15 1万+
ES6 新特性ES6 新特性 一ES6简介 二块级作用域绑定 1 let声明 2 const声明Constant Declarations 3 循环中的块级绑定 4 循环中的函数 三函数的新增特性 1 带默认参数的函数 2 默认参数对 arguments 对象的影响 3 默认参数表达式 Default Parameter Expressions 4 未命名参数问题 5 函数中的扩展
javascript es6字符串的新增实例方法includes()、startWith()、endWith()；判断一个字符串是否包含另一个字符串
风雨飘飘飘啊飘的博客
04-09 993
es5中，我们判断一个字符串中是否包含另一个字符串，只有一种indexOf()方法。 在es6中，新增了实例方法includes()、startWith()、endWith()可以用来判断一个字符串是否包含另一个字符串。 includes()—返回布尔值，表示是否找到参数字符串。 startWith()—返回布尔值，表示是否在原字符串头部找到参数字符串。 endWith()—返回布尔值，表示是否在...
ES6-字符串扩展-includes(), startsWith(), endsWith()
极北
10-26 3879
ES5只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。 includes()：返回布尔值，表示是否找到了参数字符串； startsWith()：返回布尔值，表示参数字符串是否在查找字符串的头部； endsWith()：返回布尔值，表示参数字符串是否在查找字符串的尾部。   let s = 'Hello world!'; s.star...
startsWith()方法
热门推荐
玲曦的博客
04-15 4万+
startsWith()方法用来判断当前字符串是否是以另外一个给定的子字符串“开头”的，根据判断结果返回 true 或 false。 参数: str.startsWith(searchString [, position]); searchString 要搜索的子字符串。 position 在 str 中搜索 searchString 的开始位置，默认值为 0，也就是真正的字符串开头处。 示例: ...
React+Ant Design学习——“startsWith”报错
X北辰北的博客
10-19 766
问题描述：       根据《 07 React+Ant Design学习（一）——快速构建一个主页》的操作流程完成一个主页的编写之后，此主页在谷歌浏览器是正常运行的，但是在QQ浏览器打开却报错，如下：   解决方法：       通过查阅资料才发现这个startWith属性是ES5里新规范的一个属性，谷歌很及时的就支持了这一属性，而IE始终不支持，所以才导致QQ浏览器中报错的结果。所...
如何把JavaScript Map.keys()转换成数组
张旭乾 - 全栈工程师/海归
11-13 1万+
最近在写算法题时，发现一个小难处，javascript里的 map.keys() 获取出来的不是一个数组，而是一个 iterator，只能用 interator.next().value 获取值，很不方便，然后来查阅资料发现有两个解决方法： 解决方法一 let keys = map.keys(); let arr = Array.from(keys); 解决方法二 let keys = map....
ES5 和 ES6区别
最新发布
03-29
ES5 和 ES6 是 JavaScript 的两个版本，两者之间有以下区别： 1. 变量声明方式不同：ES5 使用 var 声明变量，ES6 使用 let 和 const 声明变量。 2. 箭头函数：ES6 引入了箭头函数，简化了函数的写法。 3. 模板...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值