javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js语法与es6 新特性

JavaScript 核心语法与 ES6 新特性全解析

作者：༄沐࿆风࿆࿆

JavaScript 是一种广泛使用的编程语言,特别是在Web开发中,随着Web技术的快速发展,JavaScript 也不断演进,引入了新的特性和语法来提高开发效率和性能,本文介绍JavaScript核心语法与ES6新特性,感兴趣的朋友跟随小编一起看看吧

一、ECMAScript 基础语法（JS核心语言规则）

1. 变量声明：let / const，区分块级作用域

ES6 引入了 let 和 const 关键字，用于声明具有块级作用域的变量。

{
  let name = 'Alice'; // 块级作用域
  const PI = 3.14; // 常量
  // PI = 3.1415; // 报错：Assignment to constant variable.
}
// console.log(name); // 报错：name is not defined

2. 基础数据类型

JavaScript 有七种原始数据类型和一种引用类型（Object）。

3. 类型转换

JavaScript 是弱类型语言，经常需要进行显式或隐式类型转换。

let str = '123';
let num = Number(str); // 123
let price = 19.99;
let formatted = price.toFixed(1); // "20.0" (字符串)

4. 运算符

5. 流程控制

分支：if 判断、循环查重逻辑

let score = 85;
if (score >= 90) {
  console.log('优秀');
} else if (score >= 60) {
  console.log('及格');
} else {
  console.log('不及格');
}

循环：for、for...of 遍历数组

// for 循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}
// for...of 遍历数组（ES6）
let fruits = ['apple', 'banana', 'orange'];
for (let fruit of fruits) {
  console.log(fruit);
}

6. 字符串高级：模板字符串 `${变量}` 拼接页面

模板字符串使用反引号（`）定义，可以嵌入变量和表达式。

let userName = '张三';
let age = 25;
let message = `欢迎 ${userName}，您今年 ${age} 岁。`;
console.log(message); // 欢迎 张三，您今年 25 岁。
// 多行字符串
let html = `
<div class="user-card">
  <h2>${userName}</h2>
  <p>年龄：${age}</p>
</div>
`;

7. 数组全套操作（高频）

let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.splice(1, 1); // 从索引1删除1个元素 -> [1, 3, 4]
arr.forEach(item => console.log(item)); // 1, 3, 4
let doubled = arr.map(item => item * 2); // [2, 6, 8]
console.log(arr.length); // 3
// 本地存储还原实例
let data = [{id: 1, name: 'A'}, {id: 2, name: 'B'}];
localStorage.setItem('myData', JSON.stringify(data));
let restored = JSON.parse(localStorage.getItem('myData'));
let names = restored.map(item => item.name); // ['A', 'B']

8. 函数基础

普通函数、工厂函数（计数器闭包）

// 普通函数声明
function greet(name) {
  return `Hello, ${name}!`;
}
// 工厂函数：返回一个闭包，创建独立的计数器
function createCounter() {
  let count = 0; // 私有变量
  return function() {
    count++;
    return count;
  };
}
let counter1 = createCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
let counter2 = createCounter(); // 新的独立作用域
console.log(counter2()); // 1

箭头函数：事件回调简写、无独立this

// 传统函数
let add = function(a, b) {
  return a + b;
};
// 箭头函数
let addArrow = (a, b) => a + b;
// 事件回调简写
document.getElementById('btn').addEventListener('click', () => {
  console.log('按钮被点击了');
});
// 箭头函数没有自己的 this，继承自外层作用域
let obj = {
  value: 10,
  traditional: function() {
    console.log(this.value); // 10
  },
  arrow: () => {
    console.log(this.value); // undefined（此处 this 指向 window 或全局对象）
  }
};

返回值 return

函数通过 return 语句返回值。若无 return，则返回 undefined。

9. ES6面向对象（重点，你项目核心）

class 类、constructor 构造函数

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  // 实例方法
  introduce() {
    return `我叫${this.name}，今年${this.age}岁。`;
  }
}
let p1 = new Person('李四', 30);
console.log(p1.introduce()); // 我叫李四，今年30岁。

实例方法封装业务逻辑

class Calculator {
  constructor() {
    this.result = 0;
  }
  add(x) {
    this.result += x;
    return this;
  }
  subtract(x) {
    this.result -= x;
    return this;
  }
  getResult() {
    return this.result;
  }
}
let calc = new Calculator();
calc.add(5).subtract(2);
console.log(calc.getResult()); // 3

类继承 extends、super() 调用父类构造

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 调用父类构造函数
    this.grade = grade;
  }
  study() {
    return `${this.name}正在学习，年级：${this.grade}`;
  }
}
let stu = new Student('王五', 18, '高三');
console.log(stu.introduce()); // 我叫王五，今年18岁。
console.log(stu.study()); // 王五正在学习，年级：高三

10. 闭包（面试重中之重）

私有变量隔离（父类内部stuList无法外部修改）

function School() {
  // 私有变量，外部无法直接访问
  let stuList = [];
  // 公开方法，形成闭包
  return {
    addStudent(name) {
      stuList.push(name);
    },
    getStudentCount() {
      return stuList.length;
    },
    getStudents() {
      // 返回副本，防止外部直接修改原数组
      return [...stuList];
    }
  };
}
let mySchool = School();
mySchool.addStudent('小明');
mySchool.addStudent('小红');
console.log(mySchool.getStudentCount()); // 2
console.log(mySchool.getStudents()); // ['小明', '小红']
// mySchool.stuList = []; // 无效，stuList 是私有变量

独立作用域计数器案例，变量不会互相污染

function createUniqueCounter() {
  let count = 0;
  return {
    increment() {
      count++;
      return count;
    },
    reset() {
      count = 0;
    },
    getCount() {
      return count;
    }
  };
}
let counterA = createUniqueCounter();
let counterB = createUniqueCounter();
counterA.increment();
counterA.increment();
console.log(counterA.getCount()); // 2
counterB.increment();
console.log(counterB.getCount()); // 1
// counterA 和 counterB 的 count 变量相互独立，不会污染

11. JSON序列化/反序列化

JSON.stringify() 对象转字符串存本地

let user = {
  name: '赵六',
  age: 28,
  hobbies: ['读书', '编程']
};
let jsonString = JSON.stringify(user);
console.log(jsonString); // {"name":"赵六","age":28,"hobbies":["读书","编程"]}
// 存储到 localStorage
localStorage.setItem('userInfo', jsonString);

JSON.parse() 读取字符串还原JS对象

// 从 localStorage 读取
let storedString = localStorage.getItem('userInfo');
if (storedString) {
  let restoredUser = JSON.parse(storedString);
  console.log(restoredUser.name); // 赵六
  console.log(restoredUser.hobbies); // ['读书', '编程']
}
// 注意：JSON.parse 无法还原函数、undefined 等特殊类型
let obj = { fn: function() {}, x: undefined };
let str = JSON.stringify(obj); // "{}"
let parsed = JSON.parse(str); // {}

总结

本文系统梳理了 ECMAScript（JavaScript）的核心语法要点，从变量声明、数据类型、运算符等基础概念，到函数、面向对象、闭包等进阶特性，再到 JSON 序列化等实用技巧。掌握这些知识是构建现代 Web 应用和深入前端开发的基石。

学习建议：

希望这篇梳理能帮助你巩固 JavaScript 基础，在后续的项目开发与面试中更加从容。Happy Coding！

到此这篇关于JavaScript 核心语法与 ES6 新特性全解析的文章就介绍到这了,更多相关js语法与es6 新特性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文