Привет, я японец, а также студент в Ванкувере, Канада. Я изучаю программирование, чтобы стать веб-разработчиком, и теперь я изучаю один из самых популярных языков JavaScript. Я приехал в Канаду, у меня не было никакого опыта в программировании (честно говоря, я вообще не знал, что такое JavaScript). Я написал эту статью не только для того, чтобы понять, что я узнал в классе, но и надеюсь, что эта статья поможет тем, кто хочет изучить JavaScript или ничего не знает о программировании, понять, что такое Javascript, как его использовать, а также некоторые новые функции в ES6 или ES2015. Как вы уже, наверное, уже поняли, эта статья предназначена для новичков, не для людей, которые уже хорошо разбираются в JavaScript. Так что, если вы это знаете, это не ваше место, чтобы тратить свое драгоценное время. Если нет, продолжайте читать, я сделаю все возможное, чтобы объяснить Javascript, особенно новые функции в ES6 .
Мне очень жаль, что я написал выше, что это для новичков, но прежде чем продолжить, есть одно требование, по крайней мере, для начала изучения JavaScript. Вы должны знать об основах HTML5 и CSS3, чтобы использовать JavaScript. Я не буду объяснять. HTML5 и CSS3 в этой статье. (Возможно, когда-нибудь я напишу статью о HTML5 и CSS5, хотя я не уверен…)
Что такое Javascript?
Прежде чем я начну объяснять новые функции в ES6, я хотел бы сначала объяснить JavaScript просто тем, кто действительно ничего о нем не знает, что такое Javascript, что он дает и как его использовать. Javascript стал очень популярным. язык, потому что он работает в веб-браузерах (интерфейс) и позволяет веб-сайту быть интерактивным, но теперь он также используется и на стороне сервера (на стороне сервера). Лучший способ понять, что такое Javascript, чтобы писать коды с помощью Во-первых, откройте в редакторе кода все, что вам нравится (можно использовать даже плоское редактирование текста), если вы этого не сделаете, я рекомендую Код Visual Studio. Это бесплатно и легко в использовании. Готовы ли вы кодировать? Давайте кодируем !! У программистов есть традиция. Это называется программой Hello World. Когда вы изучаете какие-либо новые программные языки, вам сначала нужно написать программу Hello World. Итак, я следую этой традиции и научу вас, как писать программу Hello World на JavaScript.
- Откройте редактор кода, затем создайте index.html.
- В index.html создайте тег ‹script› внутри тега ‹body›, подобного этому.
<body> <script> </script> </body>
3. Внутри тега ‹script› напишите такой код «alert (« Hello World »)»
<body>
<script>
alert("Hello World");
</script>
</body>
Вот и все. Поздравляем, вы написали свою первую программу на JavaScript! Довольно просто, правда? Откройте index.html в браузере, и вы увидите всплывающее окно с надписью «Hello World», как это.
Эта программа «Hello World» просто показывает вам, что такое Javascript и как использовать JavaScript. Итак, я бы сказал, что это бесполезная программа. Если вы хотите узнать больше об основах Javascript и создать настоящую программу, я рекомендую несколько веб-сайтов, которые хорошо для новичков, чтобы изучить основы.
Оба сайта действительно хороши для изучения языков программирования, и я их часто использую.
ES6
В этом разделе я хотел бы познакомить вас с некоторыми новыми функциями ES6. ES6 - это новая версия JavaScript, а от ES6 есть некоторые новые функции, о которых вам следует знать, если вы хотите изучать JavaScript.
- Новые ключевые слова «const» и «let»
До ES6 был только один способ объявить переменную с помощью «var», и было только две области: глобальная область видимости и область действия функции, в JavaScript. Но после ES6 в JavaScript были добавлены два новых способа: «const» и «let».
// "var" has global scope(it can be accessed from anywhere in your JS program) and function scope(it can be only accessed inside a function)
// 1. Grobal Scope
var x = 5; // x is global variable
function changeX(){
x = 3 // this line assign 3 to x
}
changeX();
console.log(x) // now x is 3;
// 2.Function Scope
function myFunction(){
var x = 5; // x is function scope
}
console.log(x) // this output x is not defined
// 3. block scope "let"
{
let x = 5;
console.log(x) // this output x = 5
}
console.log(x) // but this output x is not defined because x is
//declared inside a block;
// 4. const
// variable declared by const is not mutable(constant)
const x = 5;
x = 3; // this cause an error, you cannot assign new value to
variable declared by const key word.
// Difference between "let" and "const" is that variable declared by "let" is mutable and variable declared by const is not mutable.
2. Функция стрелки
Функция стрелки позволяет коротко написать код функции, что делает его более читабельным, чем при написании обычных функций.
// Normal function
function myFunction(name){
return "Hi " + name;
}
// Arrow function
const myFunction = (name)=> "Hi " + name;
// if code is one line, you can omit "return" key word.But if you // use{}, you need "return"
const myFunction = (name)=>{
return "Hi " + name
}
3. Шаблонные литералы
Шаблонные литералы позволяют по-новому объявить строку.
// when you use "string" in Javascript, you need to use "" or ''. let greeting = "Hello" or 'Hello' // after ES6 you can use `` let greeting = `Hello` // this is same as "Hello" and 'Hello'
Но что, на мой взгляд, делает шаблонные литералы полезными, так это то, что они упрощают объявление строки с переменной. Я объясню, что я имею в виду ниже.
// Assume you want to make a function that return greeting with name // and you want to display like this
// Hello name
let name = "John";
const greeting = (name)=> "Hello, " + name;
you need "+" operator to concatenate string and variable(string) and if you want to add space between string and string, you need to add space like this "Hello ".
// ES6
let name ="John";
const greeting = (name) => `Hello, ${name}`;
Что вы думаете? Это действительно хорошо, правда? Вы оцените эту функцию, когда имеете дело со сложной строкой (например, строкой с несколькими переменными).
4. Классы
Вы можете объявлять классы, используя ключевое слово «class» в JavaScript. Классы имеют метод конструктора, который используется при инициализации класса, и внутри метода конструктора он может иметь свойства. Классы тоже могут иметь функцию. Ниже я покажу вам, как объявлять классы.
// first you need to declare class
class MyClass{
constructor(name){
this.name = name
}
greeting(){
return `Hello, this.name`}
}
// next step is initializing MyClass. Use "new" key word.
const myClass = new MyClass("John")
// Above line create instance of MyClass and "this.name" is set to // "John"
// To use function that MyClass has, all you have to do is like
// this.
myClass.greeting(); // this returns "Hello, John".
Хороший момент для использования классов, я думаю, заключается в том, что как только вы научитесь использовать классы в своей программе, это сделает вашу программу более организованной и чистой. Классы делают ваш код повторно используемым в любом месте вашей программы, поэтому вам не нужно писать ту же функцию снова в вашей программе.
5. Параметр отдыха
Параметр отдыха - это новый способ обработки параметра в функции. Он позволяет вам использовать столько параметров, сколько вы хотите. Вы можете использовать «параметр отдыха», используя «… ».
// normal parameter
function myFunction(x, y, z){
return x + y + z
}
myFunction(4,5,6); // this returns 15
// Rest parameter
function myFunction(...input){
return input
}
myFunction(1,2,3,4,5,6,7,8); // this returns [1,2,3,4,5,6,7,8] array
So, you can do this
let total = 0
function myFunction(...input){
for(i = 0; i< input.length;i++){
total += input[i]}
return total
}
myFunction(1,2,3,4,5,6,7,8) // this returns total = 36
6. Оператор спреда
«Оператор спреда» похож на «параметр отдыха» с точки зрения использования «…». Но это разные вещи.
// 1. concatenate array // without spread operator let array1 = [1,2,3]; let array2 = [4,5]; array1 = arrayi1.concat(array2) console.log(array1) // this shows [1,2,3,4,5]; // with spread operator let array1 = [1,2,3]; let array2 = [4,5]; array1 = [...array1,...array2]; console.log(array1) // this shows[1,2,3,4,5] // 2. copy array // without spread operator let array1 = [1,2,3]; let array2 = array1; console.log(array2) // this show [1,2,3] it looks fine.You can copy array1.But if you change array2 it also change original array1 too. array2.push(4); console.log(array2) // this show [1,2,3,4] console.log(array1) // this show [1,2,3,4] too. Maybe, you don't want to do that.In that case, It's better to use spread operator. // with spread operator let array1 = [1,2,3]; let array2 = [...array1]; console.log(array2) // this show [1,2,3]; array2.push(4); console.log(array2) // this show [1,2,3,4]; console.log(array1) // this show [1,2,3]
Спасибо, что дочитали эту статью до конца. В ES6 есть и другие новые функции, которые я не объяснял в этой статье (не волнуйтесь, мои одноклассники тоже написали статью о ES6, поэтому, если они позволят мне разместить ссылку на свою статью, я помещу их здесь, а вы можно узнать больше !!!). Как вы думаете, эта статья полезна для вас при изучении ES6? Если вы так думаете, я действительно счастлив. Я приложил все усилия, чтобы написать эту статью (хотя может показаться, что это не так, но я В этой статье я объяснил JavaScript и некоторые новые функции ES6 простым способом, как если бы я много знал о JavaScript, но, как я писал в начале, я все еще изучаю JavaScript сейчас, как и вы. Я узнаю больше о JavaScript, я могу написать новый, чтобы помочь мне и вам, кто хочет изучать программирование.
Спасибо за чтение. Увидимся в следующий раз !!!!
