// forEach 迭代(遍历) 数组 并求出数组累加和
var arr = [1, 2, 3, 4, 5];
var sum = 0;
arr.forEach(function (value, index, array) {
console.log('当前数组元素' + value);
console.log('当前数组元素的索引号' + index);
console.log('数组本身' + array);
sum += value;
})
console.log(sum);
//相当于数组遍历的 for循环 没有返回值 var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index,array) {
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组
return value >= 20;
});
console.log(newArr);
//[66,88] //返回值是一个新数组some 查找数组中是否有满足条件的元素
var arr = [10, 30, 4];
var flag = arr.some(function(value,index,array) {
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组
return value < 3;
});
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环
// some的作用，帮我们查询满足条件的元素 //some 查找数组中是否有满足条件的元素
// 如有有返回ture ,没有返回false
// 1.当我们使用some这个方法的时候，如果有满足条件的元素，返回true，没有返回false
// 2.如果我们直接返回true，表示我们已经找到了满足条件的元素，some就不会继续执行如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高
在forEach 里面 return 不会终止迭代
filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
用于找出第一个符合条件的数组成员，如果没有找到返回undefined
let ary = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}];
let target = ary.find((item, index) => item.id == 2);
//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个
用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2var str = ' hello '
console.log(str.trim()） //hello 去除两端空格
var str1 = ' he l l o '
console.log(str.trim()） //he l l o 去除两端空格
<body>
<input type="text"> <button>点击</button>
<div></div>
<script>
var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function () {
var str = input.value.trim();
if (str === '') {
alert('请输入内容');
} else {
console.log(str);
console.log(str.length);
div.innerHTML = str;
}
}
</script>
</body>Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组
// 用于获取对象自身所有的属性
var obj = {
id: 1,
pname: '小米',
price: 1999,
num: 2000
};
var arr = Object.keys(obj); //遍历出来的属性会存到一个数组中去
console.log(arr);
arr.forEach(function (value) {
console.log(value);
});Object.defineProperty设置或修改对象中的属性
Object.defineProperty(对象，修改或新增的属性名，{
value:修改或新增的属性的值,
writable:true/false,//如果值为false 不允许修改这个属性值
enumerable: false,//enumerable 如果值为false 则不允许遍历
configurable: false //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
}) ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。
变量提升特性增加了程序运行时的不可预测性
语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
ES6中新增了用于声明变量的关键字
if (true) {
let a = 10;
}
console.log(a) // a is not defined注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。
console.log(a); // a is not defined
let a = 20;利用let声明的变量会绑定在这个块级作用域，不会受外界的影响
?
var tmp = 123;
if (true) {
tmp = 'abc';
let tmp;
} let关键字就是用来声明变量的
使用let关键字声明的变量具有块级作用域
在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
防止循环变量变成全局变量
使用let关键字声明的变量没有变量提升
使用let关键字声明的变量具有暂时性死区特
不可以重新使用let声明相同的变量
声明常量，常量就是值（内存地址）不能变化的量
if (true) {
const a = 10;
}
console.log(a) // a is not definedconst PI = 3.14;
PI = 100; // Assignment to constant variable.const PI; // Missing initializer in const declarationconst声明的变量是一个常量
既然是常量不能重新进行赋值，如果是基本数据类型，不能更改值，如果是复杂数据类型，不能更改地址值
声明 const时候必须要给定值
使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值
ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构
// 1. 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
// let array = [1, 2, 3];
// let [a, b, c, d, e] = array;
// console.log(a)
// console.log(b)
// console.log(c)
// console.log(d)
// console.log(e)
// 2.数组的解构赋值, 他是与书写顺序是有关系的
// let [a, b, c] = [, , 3]
// console.log(a, b, c);
// 3.数组的解构赋值默认值的添加方式
// let [a = 1, b = 2, c] = [, , 9]
// console.log(a, b, c); // 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
// let { uname, age } = { uname: "zhangsan", age: 15 }
// 1.对象的解构赋值, 与顺序无关
// let { uname, age } = { age: 15, uname: "zhangsan" }
// console.log(uname);
// console.log(age);
// 2.对象有了别名以后，原来的名字就失效了
// let { uname: username, age } = { name: "zs", age: 18 }
// console.log(username, age);
// console.log(uname);
// const { res :data } = {res: ["red","blue","green"]}
// 3.给对象添加默认值
// let { uname = "zs", age } = { age: 18 }
// console.log(uname, age);解构赋值就是把数据结构分解，然后给变量进行赋值
如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
利用解构赋值能够让我们方便的去取对象中的属性跟方法
字符串的解构赋值
// // 字符串的解构赋值
// let [a, b, c, d, e] = "hello"
// console.log(a, b, c, d, e);
// console.log("hello".length);
// let [a, b, c, d, length] = "hello"
// console.log(a, b, c, d);
// console.log(length);
let { a, b, c, d, length } = "hello"
console.log(length);1.参数默认值
2.参数解构赋值
3.rest参数
4 ...扩展运算符
//1 参数默认值.
// function fn(param) {
// param = param || "blue"
// console.log(param);
// }
// fn("yellow")
// function fn(param = "blue") {
// console.log(param);
// }
// fn("yellow") // function fn({ uname = "lisi", age = 18 } = {}) {
// console.log(uname);
// console.log(age);
// }
// fn({ uname: "wangwu", age: "20" })这种方式很方便的去声明不知道参数情况下的一个函数
function fn(a, b, ...param) {
console.log(a);
console.log(b);
console.log(param);
}
fn(1, 2, 3, 4, 5) function fn(a, b, c, d, e) {
console.log(a + b + c + d + e);
}
fn(1, 2, 3, 4, 5)
let array = [1, 2, 3, 4, 5]
fn(...array)
fn.apply(null, array)let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1);
console.log(s2); 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
// 1. 扩展运算符可以将数组拆分成以逗号分隔的参数序列
// let ary = ["a", "b", "c"];
// console.log(...ary);// 2. 扩展运算符应用于数组合并
// let ary1 = [1, 2, 3];
// let ary2 = [4, 5, 6];
// // ...ary1 // 1, 2, 3
// // ...ary1 // 4, 5, 6
// let ary3 = [...ary1, ...ary2];
// console.log(ary3)
// 3. 合并数组的第二种方法
// let ary1 = [1, 2, 3];
// let ary2 = [4, 5, 6];
// ary1.push(...ary2);
// console.log(ary1) // 4 .利用扩展运算符将伪数组转换为真正的数组
// var oDivs = document.getElementsByTagName('div');
// console.log(oDivs)
// var ary = [...oDivs];
// ary.push('a');
// console.log(ary);
// 5. 数据拷贝
const obj1 = {
id:1,
age:12
}
const obj2 = {
gender:"男",
job:"student"
}
const obj = {...obj1,...obj2}
console.log(obj);ES6中新增的定义函数的方式。
// () => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体
? // const fn = () => {}//代表把一个函数赋值给fn
1.函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
// 1. 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
// function fn() {
// console.log("hello");
// }
// fn()
//es6写法
// let foo = () => console.log("hello");
// foo()2.如果形参只有一个，可以省略小括号
2.如果形参只有一个，可以省略小括号
function fn1(v) {
return v;
}
console.log(fn1(10));
//es6写法
const fn2 = v => v;
console.log(fn2(20));3.箭头函数遍历数组的方式
3.使用箭头函数遍历数组的方式
// var array = [1, 2, 3]
// array.forEach((element, index) => {
// console.log(element + "--------------" + index);
// });4.使用箭头函数注意事项：
// 1.箭头函数中的this,取决于函数的定义，而不是函数的调用
// 箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁
function foo() {
console.log(this);
setTimeout(() => {
console.log(this);
}, 1000)
}
foo()
//2.箭头函数不可以new
// var Fn = () => {
// console.log(this)
// }
// var fn = new Fn()
//3.箭头函数不可以使用arguments，但是可以使用...rest剩余参数
// let foo = function () {
// console.log(arguments);
// }
// foo(1, 2, 3)
// let foo = () => {
// console.log(arguments);
// }
// foo(1, 2, 3)
// let foo = (...param) => {
// console.log(param);
// }
// foo(1, 2, 3)箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁
箭头函数的优点在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题
startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
//startsWith 用....开始 返回值是true/false
//endsWidth 以....结束 返回值是true/false
let str = 'Hello ECMAScript 2015';
let r1 = str.startsWith('Hello');
console.log(r1);
let r2 = str.endsWith('2016');
console.log(r2)repeat方法表示将原字符串重复n次，返回一个新字符串
<script type="text/javascript">
var string = "I love you\n"
var str = string.repeat(521)
console.log(str);
</script> // includes 字符串中是否包含某个子串，返回值是true或者false
// 第一个参数放的是子串，
// 第二个参数放的是查找的位置
// 1.include
// let string = 'hello world'
// console.log(string.includes('world', 7));
let ary = ["a", "b", "c"]
let result = ary.includes('a', 0)
console.log(result)
result = ary.includes('e')
console.log(result)判断某个数组是否包含给定的值，返回布尔值。
ES6新增的创建字符串的方式，使用反引号定义
let name = `zhangsan`;let name = '张三';
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsanlet result = {
name: 'zhangsan',
age: 20,
sex: '男'
}
let html = ` <div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div> `;
const sayHello = function () {
return '哈哈哈哈 追不到我吧 我就是这么强大';
};
let greet = `${sayHello()} 哈哈哈哈`;
console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成 Set 数据结构
const s = new Set();
Set函数可以接受一个数组作为参数，用来初始化。
const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}
add(value)：添加某个值，返回 Set 结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表示该值是否为 Set 的成员
clear()：清除所有成员，没有返回值
const s = new Set();
s.add(1).add(2).add(3); // 向 set 结构中添加值
s.delete(2) // 删除 set 结构中的2值
s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值
s.clear() // 清除 set 结构中的所有值
//注意：删除的是元素的值，不是代表的索引Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
?
<script type="text/javascript">
// const s1 = new Set();
// console.log(s1)
// console.log(s1.size)
// const s2 = new Set(["a", "b"]);
// console.log(s2.size)
// const s3 = new Set(["a","a","b","b"]);
// console.log(s3.size)
// const ary = [...s3];
// console.log(ary)
// const s4 = new Set();
// 向set结构中添加值 使用add方法
// s4.add('a').add('b');
// console.log(s4.size)
// 从set结构中删除值 用到的方法是delete
// const r1 = s4.delete('c');
// console.log(s4.size)
// console.log(r1);
// 判断某一个值是否是set数据结构中的成员 使用has
// const r2 = s4.has('d');
// console.log(r2)
// 清空set数据结构中的值 使用clear方法
// s4.clear();
// console.log(s4.size);
// 遍历set数据结构 从中取值
// const s5 = new Set(['a', 'b', 'c']);
// s5.forEach(value => {
// console.log(value)
// })
</script>