1, 遍历
- let arr = [1,2,3];
- arr.name = 'a';
- Array.prototype.sex = "ds";
- console.log(arr);//[1,2,3,name:'a']
- for(var i=0;i<arr.length;i++) {
- console.log(arr[i]) //1,2,3
- }
- // 可以遍历对象和数组
- for(var key in arr) {
- console.log(key)//0,1,2,name,sex (hasOwnproperty)
- }
- console.log(Object.keys(arr));//['0','1','2','name']
- // 只能数组
- for(var key of arr) {
- console.log(key)//1,2,3
- }
- // 只能数组
- arr.forEach(i => {
- console.log(i) //1,2,3
- })
2, 逻辑运算符
1 && 2 若 1 可转换为 true, 则返回 2; 否则, 返回 1.
1 || 2 若 1 可转换为 true, 则返回 1; 否则, 返回 2.
可以转为 false:
null;NaN;0; 空字符串 (""or'' or ``);undefined
- alert(1 && 2); //2
- alert(0 && 2); //0
- alert(0 && undefined); //0
- alert(1 || 2); //1
- alert(0 || 2); //2
- alert(0 || undefined); //undefined
3, 闭包
- for(var i=10;i>0;i--) {
- (function(k){
- setTimeout(function() {
- console.log(k); //10,9,8,7
- }, 0)
- })(i)
- }
4, 变量提升
- (function() {
- console.log(name);// 报错且终止运行. 在初始化之前未能 Cannot access 'name' before initialization
- console.log(age);// 如果在报错之前的话可以输出 undefined
- let name = 's';
- var age = 14;
- })()
5, 数字属性名 == 变量属性名的时候,
后者覆盖前者
- let a={},b='0',c=0;
- a[b]='超逸';
- a[c]='博客';
- console.log(a[b]); // 博客
2)symbol 声明唯一值
- let a = {},b = Symbol('0'),c = Symbol(0);
- a[c] = '博客';
- a[b] = '超逸';
- console.log(a[c]);// 博客
对象属性名还可以是 symbol.PNG
6, 多层嵌套深拷贝
- function isArray(val) {
- return Object.prototype.toString.call(val) === ['Object Array'];
- }
- function isObject(val) {
- return typeof val === 'Object' && typeof val !== null;
- // 注意: typeof null/[]/{} === 'Object';
- }
- function DeepClone(val) {
- var obj = isArray(val) ? [] : {};
- for (var key in val) {
- if (isObject(val[key])) {
- obj[key] = DeepClone(val[key]);// 递归
- } else {
- obj[key] = val[key];
- }
- }
- return obj;
- }
7: 综合
- function Foo(){
- getName=function(){
- console.log(1);
- };
- return this;
- }
- Foo.getName = function (){
- console.log(2);
- };
- Foo.prototype.getName = function (){
- console.log(3);
- };
- var getName = function(){
- console.log(4);
- };
- function getName(){
- console.log(5);
- }
- Foo.getName();//2
- getName();//4
- Foo().getName();//1
- getName();//1
- new Foo.getName();//4 先 Foo.getName() 无参数 new
- new Foo().getName();//3 先 new Foo() 实例, 然后找构造函数原型上的 getName
- new new Foo().getName();//3
8, 浏览器是多线程的, 而 JS 是单线程的
- async function async1(){
- console.log('async1 start');
- await async2();
- console.log('async1 end');
- }
- async function async2(){
- console.log('async2');
- }
- console.log('script start');
- setTimeout(function(){
- console.log('setTimeout');
- },0)
- async1();
- new Promise(function (resolve){
- console.log('promise1');
- resolve();
- }).then(function(){
- console.log('promise2');
- });
- console.log('script end');
- script start ----async1 start ---async2
- ---- promise1(同步执行立即执行) -- script end ---- async1 end ---promise2(微任务)----settimeout(宏任务)
9, 多维数组拉平
- arr = [1, 2, [3, 4, [5, 6, [7, 8]]]].join(',').split(',');
- //["1", "2", "3", "4", "5", "6", "7", "8"]
- arr = [1, 2, [3, 4, [5, 6, [7, 8]]]].flat(Infinity) ;
- //es6 方法 [1, 2, 3, 4, 5, 6, 7, 8]
10, 父子组件执行顺序:
image.PNG
11, 块级作用域 let const 定义的不是顶层对象
- const a = {
- b: function(){console.log(this)},
- c: ()=>{console.log(this);}
- };
- a.b(); //a
- a.c(); //Windows
- console.log(Windows.a);//undefined
let a = 'ss'; 等价于
- {
- let a = 'ss'
- }
12,JS 实现 es6 数组方法
- filter:
- Array.prototype.filter1 = function(fn) {
- console.log(this);// 谁调用就是谁 [1,2,3,4]
- var arr = [];
- // 遍历数组, 回调函数为 true 就返回
- this.forEach(i => {
- if (fn(i)) {
- arr.push(i);
- }
- })
- return arr;
- }
- console.log([1,2,3,4].filter1(item => {return item> 2;}));//[3,4]
- every:
- Array.prototype.every1 = function(fn) {
- console.log(this);// 谁调用就是谁 [1,2,3,4]
- var arr = [];
- // 遍历数组, 回调函数为 true 就返回
- this.forEach(i => {
- if (fn(i)) {
- arr.push(i);
- }
- })
- // 每一个都符合条件
- return arr.length === this.length;
- }
- console.log([1,2,3,4].every1(item => {return item> 2;}));//false
- some:
- Array.prototype.some1 = function(fn) {
- console.log(this);// 谁调用就是谁 [1,2,3,4]
- var arr = [];
- // 遍历数组, 回调函数为 true 就返回
- this.forEach(i => {
- if (fn(i)) {
- arr.push(i);
- }
- })
- // 至少有一个
- return arr.length> 0;
- }
- console.log([1,2,3,4].some1(item => {return item> 2;}));//true
- map:
- Array.prototype.map1 = function(fn) {
- console.log(this);// 谁调用就是谁 [1,2,3,4]
- var arr = [];
- // 遍历数组, 回调函数返回结果放到新数组
- this.forEach(i => {
- arr.push(fn(i));
- })
- return arr;
- }
- console.log([1,2,3,4].map1(item => {return item * 2;}));//[2,4,6,8]
- find:
- Array.prototype.find1 = function(fn) {
- console.log(this);// 谁调用就是谁 [1,2,3,4]
- // 遍历数组, 回调函数为真返回第一个元素并跳出循环
- for(var i=0; i<this.length;i++) {
- if(fn(this[i])) {
- return this[i];
- }
- }
- }
- console.log([{a: 1,b: 2},{a: 111,b:222}, {a: 111, b:2}].find1(item => {return item.a === 111;}))//{a: 111,b:222}
来源: http://www.jianshu.com/p/e2ef44ae1b77