1. Введение
Несколько дней назад я переписал одну из своих кодовых баз с синтаксисом es6, сказав, что это переписывание, на самом деле изменений было не так много и нагрузка была невелика. Когда переписывание закончено, я лично резюмирую некоторые часто используемые грамматики es6 и его преимущества перед es5. Упомянутый ниже синтаксис может составлять 10-20% новых функций es6, но на него приходится около 80% разработки. Следующие статьи классифицированы в соответствии с новыми функциями, обычно используемыми в es6. Некоторые из примеров, упомянутых в статье, являются небольшими примерами моей кодовой базы, а некоторые скомпилированы мной. Это полезно знать всем! Я надеюсь, что это может помочь вам.Если вы чувствуете, что в статье что-то не так, или где это неправильно, пожалуйста, укажите это!
1. Могут быть некоторые люди, которые не знают, о какой кодовой базе я говорю, просто рекламируйте: Эта кодовая база представляет собой небольшой пример, в котором я инкапсулирую некоторые часто используемые javascript, такие как:Дедупликация массива,замена персонажа,Общие операции с Домом,Ленивая загрузка изображения57 мелких экземпляров и т. д. (Посмотреть описание). Код также загружен на github! версия es5 --ec-do-1.1.4. версия es6 --ec-do-2.0.0. Добро пожаловать в звезду. Я также надеюсь, что вы можете дать больше мнений или поработать с вами над улучшением этого проекта!
2. Что касается использования этой кодовой базы, вы можете зайти на github, чтобы увидеть ее, и я не буду здесь много говорить!
3. es6 выпускается уже более двух лет, а сейчас вышли es7 и es8, но в es7 и es8 не так много обновлений, можете обратиться по следующим двум ссылкам!Расскажите о возможностях ES7 и ES8.,Изучите ES7+ES8 за 10 минут.
2.let const
letа такжеvarРазница в том, чтоletСуществует четкое понятие области действия блока.
Следующий пример
//相当于声明了一个全局的i变量。
for(var i=0;i<10;i++){
console.log(i)
}
console.log('最后的值：'+i)
//j只在这个for循环有效，如果在循环外调用就会报错
for(let j=0;j<10;j++){
console.log(j)
}
console.log('最后的值：'+j)Другим распространенным сценарием использования: Например, страница имеет 5liИндекс, конечно 0, 1, 2, 3, 4. Нажмите на определенный Li, чтобы отобразить индекс Li.
var oLi= document.querySelectorAll('li')
for (var i = 0,len = oLi.length; i < len; i++){
oLi[i].onclick = function(){
console.log(i)
}
}
Напишите так, на самом деле, независимо от того, что вы нажметеli, оба показывают 5. потому что при нажатииliКогда приведенный выше код был выполнен, каждыйi, что равно 5, будет отображаться 5.
Эта проблема не возникает с let
var oLi= document.querySelectorAll('li')
for (let i = 0,len = oLi.length; i < len; i++){
oLi[i].onclick = function(){
console.log(i)
}
}
С помощью let, если вы нажмете первыйli, отображается 0, щелкните третийliОтображается 2. Это вы можете попробовать сами!
законченныйlet, сказатьconst,constПосле того как назначение инициализировано, его нельзя изменить. Как показано ниже.
В настоящее время я использую его для ссылки на плагины, библиотеки или модульную разработку!
Например, указанное выше, в развитии может быть вызвано одноименным исключением!
3.arrow function
Стрелочные функции используются очень часто! Написано тоже очень лаконично и понятно!
Следующий пример суммирования массива
//sumArr都是ecDo在这个对象里面的属性，但是大家看到es6和es5的定义方式不一样，是es6简写方式。
//es6写法-隐式返回
sumArr(arr) {
return arr.reduce((pre, cur) =>pre + cur)
}
//es6写法-显式返回
sumArr(arr) {
return arr.reduce((pre, cur) =>{return pre + cur})
}
//es5写法
sumArr: function (arr) {
return arr.reduce(function (pre, cur) {
return pre + cur
})
},
Другой распространенный сценарий — при использованииsetTimeoutилиsetIntervalкогда. Следующий «пример ленивой загрузки картинок» (код пока не должен быть слишком подробным, просто посмотрите на картинку. Код размещен для того, чтобы все увидели всю функцию целиком и не дали всех обмануть) . Процесс не детализирован, см.es6а такжеes5разница в использовании!
//es6写法，（如果看到函数参数有不懂的不用急，后面会提到！）
loadImg(className = 'ec-load-img', num = 0, errorUrl = null) {
let oImgLoad = document.getElementsByClassName(className);
for (let i = 0, len = oImgLoad.length; i < len; i++) {
//如果图片已经滚动到指定的高度
if (document.documentElement.clientHeight + document.documentElement.scrollTop > oImgLoad[i].offsetTop - num && !oImgLoad[i].isLoad) {
//记录图片是否已经加载
oImgLoad[i].isLoad = true;
//设置过渡，当图片下来的时候有一个图片透明度变化
oImgLoad[i].style.cssText = "transition: ''; opacity: 0;";
if (oImgLoad[i].dataset) {
this.aftLoadImg(oImgLoad[i], oImgLoad[i].dataset.src, errorUrl, function (o) {
//添加定时器，确保图片已经加载完了，再把图片指定的的class，清掉，避免重复编辑
setTimeout(()=>{
if (o.isLoad) {
this.removeClass(o, className);
o.style.cssText = "";
}
}, 1000)
});
} else {
this.aftLoadImg(oImgLoad[i], oImgLoad[i].getAttribute("data-src"), errorUrl, function (o) {
//添加定时器，确保图片已经加载完了，再把图片指定的的class，清掉，避免重复编辑
setTimeout(()=>{
if (o.isLoad) {
this.removeClass(o, className);
o.style.cssText = "";
}
}, 1000)
});
}
(function (i) {
setTimeout(()=>{
oImgLoad[i].style.cssText = "transition:all 1s; opacity: 1;";
}, 16)
})(i);
}
}
}
//es5写法
loadImg: function (className, num, errorUrl) {
var _className = className || 'ec-load-img', _num = num || 0, _this = this,_errorUrl=errorUrl||null;
var oImgLoad = document.getElementsByClassName(_className);
for (var i = 0, len = oImgLoad.length; i < len; i++) {
//如果图片已经滚动到指定的高度
if (document.documentElement.clientHeight + document.documentElement.scrollTop > oImgLoad[i].offsetTop - _num && !oImgLoad[i].isLoad) {
//记录图片是否已经加载
oImgLoad[i].isLoad = true;
//设置过渡，当图片下来的时候有一个图片透明度变化
oImgLoad[i].style.cssText = "transition: ''; opacity: 0;"
if (oImgLoad[i].dataset) {
this.aftLoadImg(oImgLoad[i], oImgLoad[i].dataset.src, _errorUrl, function (o) {
//添加定时器，确保图片已经加载完了，再把图片指定的的class，清掉，避免重复编辑
setTimeout(function () {
if (o.isLoad) {
_this.removeClass(o, _className);
o.style.cssText = "";
}
}, 1000)
});
} else {
this.aftLoadImg(oImgLoad[i], oImgLoad[i].getAttribute("data-src"), _errorUrl, function (o) {
//添加定时器，确保图片已经加载完了，再把图片指定的的class，清掉，避免重复编辑
setTimeout(function () {
if (o.isLoad) {
_this.removeClass(o, _className);
o.style.cssText = "";
}
}, 1000)
});
}
(function (i) {
setTimeout(function () {
oImgLoad[i].style.cssText = "transition:all 1s; opacity: 1;";
}, 16)
})(i);
}
}
}Кода выложили так много, по сути разница всего в трех маленьких кусочках
Кратко объясните: при использовании стрелочной функции объект this в теле функции — это объект, в котором он определен, а не объект, в котором он используется. (например, пример, упомянутый выше,setTimeoutЭто внутри, первоначально указывало на окно, но используемая функция стрелки указывает на объект ecDo)
Причина в том, что стрелочная функция не имеет this, ее this наследуется извне, поэтому внутреннее this — это this внешнего блока кода.
4.template string
Шаблонные строки, которые обычно используются очень часто, а также очень практичны!
Следующий пример: обратный отсчет до определенного времени
//es6写法
getEndTime(endTime) {
let startDate = new Date(); //开始时间，当前时间
let endDate = new Date(endTime); //结束时间，需传入时间参数
let t = endDate.getTime() - startDate.getTime(); //时间差的毫秒数
let d = 0,
h = 0,
m = 0,
s = 0;
if (t >= 0) {
d = Math.floor(t / 1000 / 3600 / 24);
h = Math.floor(t / 1000 / 60 / 60 % 24);
m = Math.floor(t / 1000 / 60 % 60);
s = Math.floor(t / 1000 % 60);
}
return `剩余时间${d}天${h}小时${m}分钟${s}秒"`;
}
//es5写法
getEndTime: function (endTime) {
var startDate = new Date(); //开始时间，当前时间
var endDate = new Date(endTime); //结束时间，需传入时间参数
var t = endDate.getTime() - startDate.getTime(); //时间差的毫秒数
var d = 0,
h = 0,
m = 0,
s = 0;
if (t >= 0) {
d = Math.floor(t / 1000 / 3600 / 24);
h = Math.floor(t / 1000 / 60 / 60 % 24);
m = Math.floor(t / 1000 / 60 % 60);
s = Math.floor(t / 1000 % 60);
}
return "剩余时间" + d + "天 " + h + "小时 " + m + " 分钟" + s + " 秒";
}
Возможно, вы не думаете, что строки шаблона просты в использовании, поэтому давайте рассмотрим пример, например переход кdivдобавить длинныйhtmlсодержание. Подход es5
var obj={
author:'守候',
time:'2017.11.8',
thing:'看下模板字符串的方便性。'
}
$("#test").append(
"<p>这是<i>" + obj.author+ "</i> " +
"写的一个实例。这个实例是为了" +
"<i>" + obj.thing +
"</i>"+"<span>写作日期是："+obj.time+
"</span></p>"
);А с es6 намного проще
let obj={
author:'守候',
time:'2017.11.8',
thing:'看下模板字符串的方便性。'
}
$("#test").append(
`<p>
这是<i>${obj.author}</i>
写的一个实例。这个实例是为了
<i> ${obj.thing}</i>
<span>写作日期是：${obj.time}</span>
</p>`
); 5.destructuring
Деструктурирующее присваивание используется очень часто, оно простое и понятное, это сокращенный способ!
//es5
var name='守候'
var sex='男'
var info= {name:name, sex: sex}
console.log(info) //Object {name: "守候", sex: "男"}
//es6
let name='守候'
let sex='男'
let info= {name, sex}
console.log(info) //Object {name: "守候", sex: "男"}
//es6也可以反过来
let info={name: "守候", sex: "男"};
let {name,sex}=info;
console.log(name,sex)// "守候" "男"
6.default, rest
default, это значение параметра функции по умолчанию, его легко понять
Чем отформатировать строку этой функцией
//es6写法
formatText(str, size = 3, delimiter = ',') {
let regText = '\\B(?=(\\w{' + size + '})+(?!\\w))';
let reg = new RegExp(regText, 'g');
return str.replace(reg, delimiter);
}
//es5写法
formatText: function (str, size, delimiter) {
var _size = size || 3, _delimiter = delimiter || ',';
var regText = '\\B(?=(\\w{' + _size + '})+(?!\\w))';
var reg = new RegExp(regText, 'g');
return str.replace(reg, _delimiter);
}Не знаю, что сказать об отдыхе, посмотрите на пример ниже
function param(first,...all){
console.log(first)
console.log(all)
console.log(Object.prototype.toString.call(all))
}
animals('第一个', '第二个', '第三个')
Пишите так, все это массив, лайкать не надоargumentsПреобразуйте его в такой массив!
7.export & import
Эти два соответствуют соответствующим функциям, модульной разработке, которую можно назвать самой практичной новой функцией! Мощный, но простой в написании! Всего несколько кодов! Посмотрите на картинку!
При инкапсуляции модуля используйте экспорт, чтобы открыть модуль.
Когда вам нужно использовать его, используйте import для ссылки на него, и все готово.
Кстати, еще один метод введен по требованию
8. Рекомендация API
8-1. Струна
repeat
Метод Repeat возвращает новую строку, которая повторяет исходную строку n раз.
'守候'.repeat(3)
//"守候守候守候"includes & startsWith & endsWith
includes: если строка параметра найдена, возвращает логическое значение.startsWith: независимо от того, находится ли строка параметра в начале исходной строки, возвращает логическое значение.endsWith: независимо от того, находится ли строка параметра в конце исходной строки, возвращает логическое значение.
Все три метода принимают два параметра, первый параметр — строка параметра, второй — позиция для начала поиска.
var str='我就是守候'
str.startsWith('我就是')//true
str.startsWith('我')//true
str.startsWith('我',2)//false
str.startsWith('守候')//false
str.endsWith('守候')//true
str.includes('守候')//true
str.includes('我',3)//false
padStart & padEnd
padStart: Если строки недостаточно для указанной длины, дополнить указанный символ в заголовкеpadEnd: Если строка недостаточно длинная, дополните указанный символ в конце
Оба метода принимают два параметра: первый — это минимальная длина указанной строки, а второй — строка, которую необходимо завершить. Если длина указанной строки равна или превышает указанную минимальную длину (первый аргумент). Просто верните исходную строку напрямую. Если второй параметр игнорируется, используйте пробелы для завершения исходной строки!
var str='守候'
str.padEnd(10,'123')//"守候12312312"
str.padStart(10,'123')//"12312312守候"
str.padEnd(10)//"守候 "
str.padStart(10)//" 守候"
str.padStart(1)//"守候"
str.padEnd(1)//"守候"8-2.Числовое значение
isNaN
Проверить, является ли значение NaN
Number.isNaN(NaN)//true
Number.isNaN(15)//falseisInteger
Чтобы определить, является ли значение целым числом, следует отметить, что, например, 1 и 1,0 являются целыми числами.
Number.isInteger(1)//true
Number.isInteger(1.0)//true
Number.isInteger(1.1)//false
sign
Определить, является ли число положительным, отрицательным или нулем
Math.sign(-10)// -1
Math.sign(10)// +1
Math.sign(0)// +0
Math.sign(-0)// -0
Math.sign(NaN)// NaN
Math.sign('10')// +1
Math.sign('守候')// NaN
Math.sign('')// 0
Math.sign(true)// +1
Math.sign(false)// 0
Math.sign(null)// 0
trunc
Удалить дробную часть числа и вернуть целую часть
Math.trunc(1.1)//1
Math.trunc(-1.1)//-1
Math.trunc(-0.1)//-0
Math.trunc('123.456')//123
Math.trunc('守候')//NaN
8-3 Объекты
assign
Для слияния объектов скопируйте в целевой объект.
var _name={name:'守候'},sex={sex:'男'},city={'city':'广州'}
Object.assign(_name,sex,city)//{name: "守候", sex: "男", city: "广州"}
var info1={name:'守',sex:'男'},info2={name:'候',city:'广州'}
Object.assign(info1,info2)//{name: "候", sex: "男", city: "广州"}Клонирование исходного объекта, таким образом, клонированный объект изменяет информацию1 или информацию3, не затрагивая информацию3 или информацию1, но Object.assign не является глубокой копией. Для получения дополнительной информации, пожалуйста, обратитесь к моей предыдущей статье--Глубокая и поверхностная копия объекта
var info1={name:'守',sex:'男'}
var info3=Object.assign(info1,{})//{name:'守',sex:'男'}keys
Перейдите в соответствии с проходимым именем ключа самого объекта и верните массив
var info={name: "守候", sex: "男", city: "广州"}
Object.keys(info)//["name", "sex", "city"]
values
Обход в соответствии с проходимыми ключевыми значениями самого объекта и возврат массива
Object.values(info)//["守候", "男", "广州"]
entries
Пройдите пары ключ-значение, которые может пройти сам объект, и верните массив
Object.entries(info)//[["name", "守候"],["sex", "男"],["city", "广州"]]
8-4. Массив
from
fromИспользуется для превращения двух типов объектов в настоящие массивы: массивоподобные объекты и проходимые объекты.
Array.from('守候')//["守", "候"]
//常见的使用方式还有-将Dom集合和arguments转成真正的数组
let oLi = document.querySelectorAll('li');
Array.from(oLi ).forEach(function (item) {
console.log(item);
});
// arguments对象
function fn() {
let args = Array.from(arguments);
}
//顺便说下Set
let newSet = new Set(['a', 'b','a','c'])
Array.from(newSet) // ['a', 'b','c']
//ES6 新增的数据结构--Set。它类似于数组，但是成员的值都是唯一的，不重复的。
//相信大家很容易想到怎么用了，比如数组去重，用Set实现就简单多了。
removeRepeatArray(arr) {
//return [Array.from(arr)]
return [...new Set(arr)]
}find
findметод для поиска первого подходящего члена массива. Возвращает, если соответствующий член не найденunderfind
//第一个大于2的成员
[1, 2, 3, 4].find((n) => n > 2)//3findIndex
findIndexметод, чтобы найти индекс первого подходящего члена массива.
//第一个大于2的成员的索引
[1, 2, 3, 4].findIndex((n) => n > 2)//2includes
includesМетод определения того, содержит ли массив заданное значение, возвращая логическое значение. Возвращает, если соответствующий член не найденunderfind
[1, 2, 3].includes(2)//true
[1, 2, 3].includes(5)//false
[1, 2, NaN].includes(NaN)//true9. Резюме
Ну насчет разницы между общим синтаксисом es6 и превосходством es5, вот и все, это те, которые я больше использую в своей повседневной разработке. Если вы хотите подробно изучить es6, обратитесь к Ruan Yifeng's -Начало работы с ECMAScript 6. Считается, что на эти грамматики приходится большая часть развития! Конечно, если у вас есть хорошая грамматика, рекомендации API или вы чувствуете, что я написал что-то не так или не очень хорошо, вы можете высказать ценное мнение и дать советы. Мы также с нетерпением ждем возможности учиться друг у друга и добиваться прогресса вместе!
------------------------- Великолепная разделительная линия --------------------
Хотите узнать больше, обратите внимание на мой публичный аккаунт WeChat: В ожидании книжного магазина